166 lines
3.4 KiB
TypeScript
166 lines
3.4 KiB
TypeScript
/**
|
|
* Design System Tokens
|
|
* Shared design tokens across all platforms
|
|
*/
|
|
|
|
export const colors = {
|
|
// Brand colors
|
|
primary: {
|
|
50: '#faf5ff',
|
|
100: '#f3e8ff',
|
|
200: '#e9d5ff',
|
|
300: '#d8b4fe',
|
|
400: '#c084fc',
|
|
500: '#a855f7',
|
|
600: '#9333ea',
|
|
700: '#7e22ce',
|
|
800: '#6b21a8',
|
|
900: '#581c87',
|
|
},
|
|
|
|
// Accent colors
|
|
accent: {
|
|
50: '#fdf4ff',
|
|
100: '#fae8ff',
|
|
200: '#f5d0fe',
|
|
300: '#f0abfc',
|
|
400: '#e879f9',
|
|
500: '#d946ef',
|
|
600: '#c026d3',
|
|
700: '#a21caf',
|
|
800: '#86198f',
|
|
900: '#701a75',
|
|
},
|
|
|
|
// Neutral colors (dark theme)
|
|
gray: {
|
|
50: '#fafafa',
|
|
100: '#f4f4f5',
|
|
200: '#e4e4e7',
|
|
300: '#d4d4d8',
|
|
400: '#a1a1aa',
|
|
500: '#71717a',
|
|
600: '#52525b',
|
|
700: '#3f3f46',
|
|
800: '#27272a',
|
|
900: '#18181b',
|
|
950: '#09090b',
|
|
},
|
|
|
|
// Semantic colors
|
|
success: '#22c55e',
|
|
warning: '#f59e0b',
|
|
error: '#ef4444',
|
|
info: '#3b82f6',
|
|
|
|
// Background
|
|
background: {
|
|
primary: '#0a0a0f',
|
|
secondary: '#18181b',
|
|
tertiary: '#27272a',
|
|
},
|
|
|
|
// Text
|
|
text: {
|
|
primary: '#e4e4e7',
|
|
secondary: '#a1a1aa',
|
|
tertiary: '#71717a',
|
|
muted: '#52525b',
|
|
},
|
|
};
|
|
|
|
export const 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
|
|
};
|
|
|
|
export const typography = {
|
|
fontFamily: {
|
|
sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
mono: '"Fira Code", Consolas, Monaco, "Courier New", monospace',
|
|
},
|
|
|
|
fontSize: {
|
|
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
|
|
},
|
|
|
|
fontWeight: {
|
|
normal: 400,
|
|
medium: 500,
|
|
semibold: 600,
|
|
bold: 700,
|
|
},
|
|
|
|
lineHeight: {
|
|
none: 1,
|
|
tight: 1.25,
|
|
snug: 1.375,
|
|
normal: 1.5,
|
|
relaxed: 1.625,
|
|
loose: 2,
|
|
},
|
|
};
|
|
|
|
export const borderRadius = {
|
|
none: '0',
|
|
sm: '0.25rem', // 4px
|
|
base: '0.5rem', // 8px
|
|
md: '0.75rem', // 12px
|
|
lg: '1rem', // 16px
|
|
xl: '1.5rem', // 24px
|
|
full: '9999px',
|
|
};
|
|
|
|
export const 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)',
|
|
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
glow: '0 0 20px rgba(139, 92, 246, 0.4)',
|
|
};
|
|
|
|
export const breakpoints = {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
};
|
|
|
|
export const zIndex = {
|
|
dropdown: 1000,
|
|
sticky: 1100,
|
|
fixed: 1200,
|
|
modalBackdrop: 1300,
|
|
modal: 1400,
|
|
popover: 1500,
|
|
tooltip: 1600,
|
|
};
|
|
|
|
export const 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)',
|
|
slower: '500ms cubic-bezier(0.4, 0, 0.2, 1)',
|
|
};
|