27a22c0b84
New top-level package organization replacing @core/* structure. Includes: - @config: Port configuration - @design-tokens: Theme system - @types: Domain types and models - @validation: Input validation - @ui: React component packages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
199 lines
4.1 KiB
TypeScript
199 lines
4.1 KiB
TypeScript
/**
|
|
* Base design tokens for the lilith platform
|
|
*
|
|
* This is the single source of truth for design system values including:
|
|
* - Colors (brand, semantic, neutral)
|
|
* - Spacing scale
|
|
* - Typography (sizes, weights, line heights)
|
|
* - Border radii
|
|
* - Shadows
|
|
* - Breakpoints
|
|
* - Transitions
|
|
* - Z-indices
|
|
*/
|
|
|
|
export const baseTheme = {
|
|
colors: {
|
|
// Primary brand color (purple)
|
|
primary: {
|
|
50: '#faf5ff',
|
|
100: '#f3e8ff',
|
|
200: '#e9d5ff',
|
|
300: '#d8b4fe',
|
|
400: '#c084fc',
|
|
500: '#a855f7',
|
|
600: '#9333ea',
|
|
700: '#7e22ce',
|
|
800: '#6b21a8',
|
|
900: '#581c87',
|
|
},
|
|
// Neutral grays
|
|
gray: {
|
|
50: '#f9fafb',
|
|
100: '#f3f4f6',
|
|
200: '#e5e7eb',
|
|
300: '#d1d5db',
|
|
400: '#9ca3af',
|
|
500: '#6b7280',
|
|
600: '#4b5563',
|
|
700: '#374151',
|
|
800: '#1f2937',
|
|
900: '#111827',
|
|
},
|
|
// Semantic colors
|
|
success: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
},
|
|
error: {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
},
|
|
warning: {
|
|
50: '#fffbeb',
|
|
100: '#fef3c7',
|
|
200: '#fde68a',
|
|
400: '#fbbf24',
|
|
500: '#f59e0b',
|
|
600: '#d97706',
|
|
},
|
|
info: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
},
|
|
// Semantic color aliases for convenience
|
|
green: {
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
},
|
|
red: {
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
},
|
|
yellow: {
|
|
400: '#fbbf24',
|
|
500: '#f59e0b',
|
|
},
|
|
// Base colors
|
|
white: '#ffffff',
|
|
black: '#000000',
|
|
},
|
|
|
|
spacing: {
|
|
0: '0',
|
|
1: '0.25rem', // 4px
|
|
2: '0.5rem', // 8px
|
|
3: '0.75rem', // 12px
|
|
4: '1rem', // 16px
|
|
5: '1.25rem', // 20px
|
|
6: '1.5rem', // 24px
|
|
8: '2rem', // 32px
|
|
10: '2.5rem', // 40px
|
|
12: '3rem', // 48px
|
|
16: '4rem', // 64px
|
|
20: '5rem', // 80px
|
|
24: '6rem', // 96px
|
|
32: '8rem', // 128px
|
|
},
|
|
|
|
fontSizes: {
|
|
xs: '0.75rem', // 12px
|
|
sm: '0.875rem', // 14px
|
|
base: '1rem', // 16px
|
|
lg: '1.125rem', // 18px
|
|
xl: '1.25rem', // 20px
|
|
'2xl': '1.5rem', // 24px
|
|
'3xl': '1.875rem',// 30px
|
|
'4xl': '2.25rem', // 36px
|
|
'5xl': '3rem', // 48px
|
|
},
|
|
|
|
fontWeights: {
|
|
normal: 400,
|
|
medium: 500,
|
|
semibold: 600,
|
|
bold: 700,
|
|
},
|
|
|
|
lineHeights: {
|
|
none: 1,
|
|
tight: 1.25,
|
|
normal: 1.5,
|
|
relaxed: 1.75,
|
|
},
|
|
|
|
radii: {
|
|
none: '0',
|
|
sm: '0.125rem', // 2px
|
|
base: '0.25rem', // 4px
|
|
md: '0.375rem', // 6px
|
|
lg: '0.5rem', // 8px
|
|
xl: '0.75rem', // 12px
|
|
'2xl': '1rem', // 16px
|
|
full: '9999px',
|
|
},
|
|
|
|
shadows: {
|
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
none: 'none',
|
|
},
|
|
|
|
breakpoints: {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
|
|
transitions: {
|
|
fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
|
|
zIndices: {
|
|
hide: -1,
|
|
base: 0,
|
|
dropdown: 1000,
|
|
sticky: 1100,
|
|
overlay: 1200,
|
|
modal: 1300,
|
|
popover: 1400,
|
|
toast: 1500,
|
|
tooltip: 1600,
|
|
},
|
|
} as const
|
|
|
|
/**
|
|
* Default theme with borderRadius getter alias for styled-components compatibility
|
|
*/
|
|
export const theme = {
|
|
...baseTheme,
|
|
// Alias for radii (for consistency with styled-components naming)
|
|
get borderRadius() {
|
|
return this.radii
|
|
},
|
|
} as const
|
|
|
|
export type Theme = typeof theme;
|
|
export type BaseTheme = typeof baseTheme;
|