@endlessblink/like-i-said-v2
Version:
Task Management & Memory for Claude - Track tasks, remember context, and maintain continuity across sessions with 27 powerful tools. Works with Claude Desktop and Claude Code.
439 lines (419 loc) • 9.32 kB
text/typescript
/**
* Design Tokens Configuration
* Centralized design system tokens for flexible theming and customization
*/
export interface ColorToken {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
}
export interface SpacingScale {
0: string;
px: string;
0.5: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
14: string;
16: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
72: string;
80: string;
96: string;
}
export interface TypographyScale {
xs: { fontSize: string; lineHeight: string; };
sm: { fontSize: string; lineHeight: string; };
base: { fontSize: string; lineHeight: string; };
lg: { fontSize: string; lineHeight: string; };
xl: { fontSize: string; lineHeight: string; };
'2xl': { fontSize: string; lineHeight: string; };
'3xl': { fontSize: string; lineHeight: string; };
'4xl': { fontSize: string; lineHeight: string; };
'5xl': { fontSize: string; lineHeight: string; };
'6xl': { fontSize: string; lineHeight: string; };
'7xl': { fontSize: string; lineHeight: string; };
'8xl': { fontSize: string; lineHeight: string; };
'9xl': { fontSize: string; lineHeight: string; };
}
export interface ResponsiveBreakpoints {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
}
export interface AnimationTokens {
duration: {
75: string;
100: string;
150: string;
200: string;
300: string;
500: string;
700: string;
1000: string;
};
timing: {
linear: string;
in: string;
out: string;
'in-out': string;
};
}
export interface ElevationTokens {
none: string;
sm: string;
DEFAULT: string;
md: string;
lg: string;
xl: string;
'2xl': string;
inner: string;
}
export interface BorderRadiusTokens {
none: string;
sm: string;
DEFAULT: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
full: string;
}
export interface Theme {
id: string;
name: string;
colors: {
// Base colors
slate: ColorToken;
gray: ColorToken;
zinc: ColorToken;
neutral: ColorToken;
stone: ColorToken;
// Brand colors
primary: ColorToken;
secondary: ColorToken;
accent: ColorToken;
// Semantic colors
success: ColorToken;
warning: ColorToken;
error: ColorToken;
info: ColorToken;
// Category colors
personal: ColorToken;
work: ColorToken;
code: ColorToken;
research: ColorToken;
// Complexity colors
complexity: {
l1: ColorToken;
l2: ColorToken;
l3: ColorToken;
l4: ColorToken;
};
// UI colors
background: string;
foreground: string;
card: string;
cardForeground: string;
popover: string;
popoverForeground: string;
muted: string;
mutedForeground: string;
border: string;
input: string;
ring: string;
destructive: string;
destructiveForeground: string;
};
spacing: SpacingScale;
typography: TypographyScale;
breakpoints: ResponsiveBreakpoints;
animations: AnimationTokens;
elevation: ElevationTokens;
borderRadius: BorderRadiusTokens;
effects: {
glassmorphism: {
background: string;
border: string;
backdrop: string;
shadow: string;
};
gradients: {
primary: string;
secondary: string;
accent: string;
card: string;
};
};
}
// Default spacing scale
export const defaultSpacing: SpacingScale = {
0: '0px',
px: '1px',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
};
// Default typography scale
export const defaultTypography: TypographyScale = {
xs: { fontSize: '0.75rem', lineHeight: '1rem' },
sm: { fontSize: '0.875rem', lineHeight: '1.25rem' },
base: { fontSize: '1rem', lineHeight: '1.5rem' },
lg: { fontSize: '1.125rem', lineHeight: '1.75rem' },
xl: { fontSize: '1.25rem', lineHeight: '1.75rem' },
'2xl': { fontSize: '1.5rem', lineHeight: '2rem' },
'3xl': { fontSize: '1.875rem', lineHeight: '2.25rem' },
'4xl': { fontSize: '2.25rem', lineHeight: '2.5rem' },
'5xl': { fontSize: '3rem', lineHeight: '1' },
'6xl': { fontSize: '3.75rem', lineHeight: '1' },
'7xl': { fontSize: '4.5rem', lineHeight: '1' },
'8xl': { fontSize: '6rem', lineHeight: '1' },
'9xl': { fontSize: '8rem', lineHeight: '1' },
};
// Default breakpoints
export const defaultBreakpoints: ResponsiveBreakpoints = {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
};
// Default animations
export const defaultAnimations: AnimationTokens = {
duration: {
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},
timing: {
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
},
};
// Default elevation
export const defaultElevation: ElevationTokens = {
none: '0 0 #0000',
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
};
// Default border radius
export const defaultBorderRadius: BorderRadiusTokens = {
none: '0px',
sm: '0.125rem',
DEFAULT: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
};
// Color palettes
export const colorPalettes = {
slate: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
950: '#020617',
},
violet: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7c3aed',
800: '#6b21a8',
900: '#581c87',
950: '#3b0764',
},
emerald: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#10b981',
600: '#059669',
700: '#047857',
800: '#065f46',
900: '#064e3b',
950: '#022c22',
},
red: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
950: '#450a0a',
},
blue: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
950: '#172554',
},
amber: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
950: '#451a03',
},
purple: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7c3aed',
800: '#6b21a8',
900: '#581c87',
950: '#3b0764',
},
gray: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
950: '#030712',
},
zinc: {
50: '#fafafa',
100: '#f4f4f5',
200: '#e4e4e7',
300: '#d4d4d8',
400: '#a1a1aa',
500: '#71717a',
600: '#52525b',
700: '#3f3f46',
800: '#27272a',
900: '#18181b',
950: '#09090b',
},
stone: {
50: '#fafaf9',
100: '#f5f5f4',
200: '#e7e5e4',
300: '#d6d3d1',
400: '#a8a29e',
500: '#78716c',
600: '#57534e',
700: '#44403c',
800: '#292524',
900: '#1c1917',
950: '#0c0a09',
},
};