@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.
389 lines (350 loc) • 9.21 kB
text/typescript
// Design Tokens for Like-I-Said MCP Server v2
// Centralized design values for consistent theming
export const designTokens = {
// Color Palette
colors: {
// Gray Scale
gray: {
50: '#F9FAFB',
100: '#F3F4F6',
200: '#E5E7EB',
300: '#D1D5DB',
400: '#9CA3AF',
500: '#6B7280',
600: '#4B5563',
700: '#374151',
800: '#1F2937',
900: '#111827',
950: '#030712'
},
// Primary (Violet)
violet: {
50: '#F5F3FF',
100: '#EDE9FE',
200: '#DDD6FE',
300: '#C4B5FD',
400: '#A78BFA',
500: '#8B5CF6',
600: '#7C3AED',
700: '#6D28D9',
800: '#5B21B6',
900: '#4C1D95'
},
// Semantic Colors
semantic: {
success: '#10B981',
warning: '#F59E0B',
error: '#EF4444',
info: '#3B82F6'
},
// Category Colors
category: {
personal: '#3B82F6', // Blue
work: '#10B981', // Green
code: '#8B5CF6', // Purple
research: '#F59E0B', // Amber
conversations: '#EF4444', // Red
preferences: '#6B7280' // Gray
},
// Component Colors
component: {
background: {
primary: '#111827', // gray-900
secondary: '#1F2937', // gray-800
tertiary: '#374151', // gray-700
elevated: '#4B5563' // gray-600
},
text: {
primary: '#FFFFFF',
secondary: '#D1D5DB', // gray-300
tertiary: '#9CA3AF', // gray-400
disabled: '#6B7280' // gray-500
},
border: {
primary: '#374151', // gray-700
secondary: '#4B5563', // gray-600
focus: '#8B5CF6', // violet-500
error: '#EF4444', // red-500
success: '#10B981' // green-500
}
}
},
// Typography
typography: {
fontFamily: {
sans: [
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
],
mono: [
'ui-monospace',
'SFMono-Regular',
'"SF Mono"',
'Consolas',
'"Liberation Mono"',
'Menlo',
'monospace'
]
},
fontSize: {
xs: ['12px', { lineHeight: '16px' }],
sm: ['14px', { lineHeight: '20px' }],
base: ['16px', { lineHeight: '24px' }],
lg: ['18px', { lineHeight: '28px' }],
xl: ['20px', { lineHeight: '28px' }],
'2xl': ['24px', { lineHeight: '32px' }],
'3xl': ['30px', { lineHeight: '36px' }],
'4xl': ['36px', { lineHeight: '40px' }]
},
fontWeight: {
normal: 400,
medium: 500,
semibold: 600,
bold: 700
},
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.625
}
},
// Spacing
spacing: {
px: '1px',
0: '0px',
0.5: '2px',
1: '4px',
1.5: '6px',
2: '8px',
2.5: '10px',
3: '12px',
3.5: '14px',
4: '16px',
5: '20px',
6: '24px',
7: '28px',
8: '32px',
9: '36px',
10: '40px',
11: '44px',
12: '48px',
14: '56px',
16: '64px',
20: '80px',
24: '96px',
28: '112px',
32: '128px',
36: '144px',
40: '160px',
44: '176px',
48: '192px',
52: '208px',
56: '224px',
60: '240px',
64: '256px',
72: '288px',
80: '320px',
96: '384px'
},
// Border Radius
borderRadius: {
none: '0px',
sm: '2px',
base: '4px',
md: '6px',
lg: '8px',
xl: '12px',
'2xl': '16px',
'3xl': '24px',
full: '9999px'
},
// Shadows
boxShadow: {
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
base: '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)',
none: '0 0 #0000'
},
// Transitions
transitionDuration: {
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms'
},
transitionTimingFunction: {
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)'
},
// Z-Index Scale
zIndex: {
auto: 'auto',
0: '0',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50'
},
// Component-specific tokens
components: {
button: {
height: {
sm: '32px',
md: '40px',
lg: '48px'
},
padding: {
sm: { x: '12px', y: '6px' },
md: { x: '16px', y: '8px' },
lg: { x: '20px', y: '10px' }
},
borderRadius: '6px',
fontWeight: 500
},
card: {
borderRadius: '8px',
padding: '16px',
borderWidth: '1px',
backgroundColor: '#1F2937',
borderColor: '#374151'
},
input: {
height: '40px',
padding: { x: '12px', y: '8px' },
borderRadius: '6px',
borderWidth: '1px',
fontSize: '14px',
backgroundColor: '#374151',
borderColor: '#4B5563'
},
badge: {
padding: { x: '8px', y: '2px' },
borderRadius: '4px',
fontSize: '12px',
fontWeight: 500
},
modal: {
maxWidth: '768px',
borderRadius: '12px',
padding: '24px',
backgroundColor: '#1F2937',
borderColor: '#374151'
},
tooltip: {
padding: { x: '8px', y: '4px' },
borderRadius: '4px',
fontSize: '12px',
backgroundColor: '#111827',
maxWidth: '200px'
}
},
// Breakpoints
breakpoints: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px'
},
// Grid
grid: {
columns: {
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))'
},
gap: {
sm: '8px',
md: '16px',
lg: '24px',
xl: '32px'
}
}
} as const
// Type definitions for design tokens
export type DesignTokens = typeof designTokens
export type ColorToken = keyof typeof designTokens.colors.gray
export type SpacingToken = keyof typeof designTokens.spacing
export type FontSizeToken = keyof typeof designTokens.typography.fontSize
export type CategoryColor = keyof typeof designTokens.colors.category
// Utility functions for working with design tokens
export const getColor = (path: string): string => {
const parts = path.split('.')
let current: any = designTokens.colors
for (const part of parts) {
current = current[part]
if (!current) return '#000000'
}
return current
}
export const getSpacing = (token: SpacingToken): string => {
return designTokens.spacing[token]
}
export const getFontSize = (token: FontSizeToken): [string, { lineHeight: string }] => {
return designTokens.typography.fontSize[token]
}
export const getCategoryColor = (category: CategoryColor): string => {
return designTokens.colors.category[category]
}
// CSS custom properties generator
export const generateCSSVariables = (): Record<string, string> => {
const cssVars: Record<string, string> = {}
// Generate color variables
Object.entries(designTokens.colors.gray).forEach(([key, value]) => {
cssVars[`--gray-${key}`] = value
})
Object.entries(designTokens.colors.violet).forEach(([key, value]) => {
cssVars[`--violet-${key}`] = value
})
Object.entries(designTokens.colors.semantic).forEach(([key, value]) => {
cssVars[`--${key}`] = value
})
Object.entries(designTokens.colors.category).forEach(([key, value]) => {
cssVars[`--category-${key}`] = value
})
// Generate spacing variables
Object.entries(designTokens.spacing).forEach(([key, value]) => {
cssVars[`--spacing-${key}`] = value
})
return cssVars
}
// Theme configuration for component libraries
export const themeConfig = {
extend: {
colors: designTokens.colors,
spacing: designTokens.spacing,
fontSize: designTokens.typography.fontSize,
fontFamily: designTokens.typography.fontFamily,
borderRadius: designTokens.borderRadius,
boxShadow: designTokens.boxShadow,
transitionDuration: designTokens.transitionDuration,
screens: designTokens.breakpoints
}
}