forked from defunkt/howl
99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
import { createThemes } from '@because/forge'
|
|
|
|
const lightTheme = {
|
|
// Colors
|
|
'colors-bg': '#ffffff',
|
|
'colors-bgElevated': '#f9fafb',
|
|
'colors-bgMuted': '#f3f4f6',
|
|
'colors-fg': '#111827',
|
|
'colors-fgMuted': '#6b7280',
|
|
'colors-fgDim': '#9ca3af',
|
|
'colors-border': '#d1d5db',
|
|
'colors-borderActive': '#3b82f6',
|
|
|
|
// Button colors
|
|
'colors-primary': '#3b82f6',
|
|
'colors-primaryHover': '#2563eb',
|
|
'colors-secondary': '#64748b',
|
|
'colors-secondaryHover': '#475569',
|
|
'colors-destructive': '#ef4444',
|
|
'colors-destructiveHover': '#dc2626',
|
|
|
|
// Accent colors
|
|
'colors-success': '#22c55e',
|
|
'colors-error': '#ef4444',
|
|
'colors-info': '#3b82f6',
|
|
|
|
// Box colors
|
|
'colors-red': '#ef4444',
|
|
'colors-green': '#22c55e',
|
|
'colors-blue': '#3b82f6',
|
|
'colors-gray': '#6b7280',
|
|
|
|
// Syntax highlighting colors
|
|
'syntax-tag': '#0ea5e9',
|
|
'syntax-attr': '#8b5cf6',
|
|
'syntax-string': '#10b981',
|
|
'syntax-number': '#f59e0b',
|
|
'syntax-brace': '#ef4444',
|
|
'syntax-text': '#374151',
|
|
|
|
// Spacing (TailwindSize * 4)
|
|
'spacing-0': '0px',
|
|
'spacing-1': '4px',
|
|
'spacing-2': '8px',
|
|
'spacing-3': '12px',
|
|
'spacing-4': '16px',
|
|
'spacing-5': '20px',
|
|
'spacing-6': '24px',
|
|
'spacing-8': '32px',
|
|
'spacing-10': '40px',
|
|
'spacing-12': '48px',
|
|
'spacing-16': '64px',
|
|
|
|
// Typography
|
|
'fontSize-xs': '12px',
|
|
'fontSize-sm': '14px',
|
|
'fontSize-base': '16px',
|
|
'fontSize-lg': '18px',
|
|
'fontSize-xl': '20px',
|
|
'fontSize-2xl': '24px',
|
|
|
|
// Font weights
|
|
'fontWeight-normal': '400',
|
|
'fontWeight-medium': '500',
|
|
'fontWeight-semibold': '600',
|
|
'fontWeight-bold': '700',
|
|
|
|
// Radii
|
|
'radius-sm': '4px',
|
|
'radius-md': '6px',
|
|
'radius-lg': '8px',
|
|
'radius-full': '9999px',
|
|
} as const
|
|
|
|
const darkTheme = {
|
|
...lightTheme,
|
|
'colors-bg': '#0a0a0a',
|
|
'colors-bgElevated': '#111111',
|
|
'colors-bgMuted': '#1a1a1a',
|
|
'colors-fg': '#ffffff',
|
|
'colors-fgMuted': '#a1a1a1',
|
|
'colors-fgDim': '#6b7280',
|
|
'colors-border': '#333333',
|
|
'colors-borderActive': '#60a5fa',
|
|
|
|
// Dark mode syntax highlighting
|
|
'syntax-tag': '#bfdbfe',
|
|
'syntax-attr': '#e9d5ff',
|
|
'syntax-string': '#a7f3d0',
|
|
'syntax-number': '#fde68a',
|
|
'syntax-brace': '#fecaca',
|
|
'syntax-text': '#f9fafb',
|
|
} as const
|
|
|
|
export const theme = createThemes({
|
|
light: lightTheme,
|
|
dark: darkTheme,
|
|
})
|