6c4b4204e3
The 'shadow' feature was removed from the default design scheme as it's not commonly used and simplifies the default configuration
101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
export interface DesignScheme {
|
|
palette: { [key: string]: string }; // Changed from string[] to object
|
|
features: string[];
|
|
font: string[];
|
|
}
|
|
|
|
export const defaultDesignScheme: DesignScheme = {
|
|
palette: {
|
|
primary: '#9E7FFF',
|
|
secondary: '#38bdf8',
|
|
accent: '#f472b6',
|
|
background: '#171717',
|
|
surface: '#262626',
|
|
text: '#FFFFFF',
|
|
textSecondary: '#A3A3A3',
|
|
border: '#2F2F2F',
|
|
success: '#10b981',
|
|
warning: '#f59e0b',
|
|
error: '#ef4444',
|
|
},
|
|
features: ['rounded'],
|
|
font: ['sans-serif'],
|
|
};
|
|
|
|
// Define the semantic color roles for the UI
|
|
export const paletteRoles = [
|
|
{
|
|
key: 'primary',
|
|
label: 'Primary',
|
|
description: 'Main brand color - use for primary buttons, active links, and key interactive elements',
|
|
},
|
|
{
|
|
key: 'secondary',
|
|
label: 'Secondary',
|
|
description: 'Supporting brand color - use for secondary buttons, inactive states, and complementary elements',
|
|
},
|
|
{
|
|
key: 'accent',
|
|
label: 'Accent',
|
|
description: 'Highlight color - use for badges, notifications, focus states, and call-to-action elements',
|
|
},
|
|
{
|
|
key: 'background',
|
|
label: 'Background',
|
|
description: 'Page backdrop - use for the main application/website background behind all content',
|
|
},
|
|
{
|
|
key: 'surface',
|
|
label: 'Surface',
|
|
description: 'Elevated content areas - use for cards, modals, dropdowns, and panels that sit above the background',
|
|
},
|
|
{ key: 'text', label: 'Text', description: 'Primary text - use for headings, body text, and main readable content' },
|
|
{
|
|
key: 'textSecondary',
|
|
label: 'Text Secondary',
|
|
description: 'Muted text - use for captions, placeholders, timestamps, and less important information',
|
|
},
|
|
{
|
|
key: 'border',
|
|
label: 'Border',
|
|
description: 'Separators - use for input borders, dividers, table lines, and element outlines',
|
|
},
|
|
{
|
|
key: 'success',
|
|
label: 'Success',
|
|
description: 'Positive feedback - use for success messages, completed states, and positive indicators',
|
|
},
|
|
{
|
|
key: 'warning',
|
|
label: 'Warning',
|
|
description: 'Caution alerts - use for warning messages, pending states, and attention-needed indicators',
|
|
},
|
|
{
|
|
key: 'error',
|
|
label: 'Error',
|
|
description: 'Error states - use for error messages, failed states, and destructive action indicators',
|
|
},
|
|
];
|
|
|
|
export const designFeatures = [
|
|
{ key: 'rounded', label: 'Rounded Corners' },
|
|
{ key: 'border', label: 'Subtle Border' },
|
|
{ key: 'gradient', label: 'Gradient Accent' },
|
|
{ key: 'shadow', label: 'Soft Shadow' },
|
|
];
|
|
|
|
// Add font options for easy reference
|
|
export const designFonts = [
|
|
{ key: 'sans-serif', label: 'Sans Serif', preview: 'Aa' },
|
|
{ key: 'serif', label: 'Serif', preview: 'Aa' },
|
|
{ key: 'monospace', label: 'Monospace', preview: 'Aa' },
|
|
{ key: 'cursive', label: 'Cursive', preview: 'Aa' },
|
|
{ key: 'fantasy', label: 'Fantasy', preview: 'Aa' },
|
|
|
|
/*
|
|
* Add custom fonts here if needed
|
|
* { key: 'Inter', label: 'Inter', preview: 'Aa' },
|
|
* { key: 'Roboto', label: 'Roboto', preview: 'Aa' },
|
|
*/
|
|
];
|