import { Theme, ThemeColors, ThemeSemantics, ThemeSeed, ThemeToken } from './types'; import { withAlpha, generateColorScale } from './colors'; import { darkMode } from './utils'; export function generateThemeColors(seed: ThemeSeed['colors']): ThemeColors { const defaultColors = { success: '#22c55e', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }; const colors = { ...defaultColors, ...seed }; return Object.fromEntries( Object.entries(colors).map(([key, value]) => [ key, generateColorScale(value) ]) ) as ThemeColors; } export function generateSemantics(colors: ThemeColors, isDark: boolean): ThemeSemantics { const neutral = colors.neutral; const primary = colors.primary; const statusColors = { success: colors.success, warning: colors.warning, error: colors.error, info: colors.info }; return { colors, textColor: { DEFAULT: darkMode(isDark, neutral[100], neutral[900]), primary: darkMode(isDark, neutral[100], neutral[900]), secondary: darkMode(isDark, neutral[300], neutral[700]), tertiary: darkMode(isDark, neutral[400], neutral[600]), disabled: darkMode(isDark, neutral[500], neutral[400]), inverse: darkMode(isDark, neutral[900], neutral[100]), success: statusColors.success[darkMode(isDark, 400, 600)], warning: statusColors.warning[darkMode(isDark, 400, 600)], error: statusColors.error[darkMode(isDark, 400, 600)], info: statusColors.info[darkMode(isDark, 400, 600)], link: primary[darkMode(isDark, 400, 600)], linkHover: primary[darkMode(isDark, 300, 700)], placeholder: darkMode(isDark, neutral[500], neutral[400]), highlight: primary[darkMode(isDark, 300, 700)] }, backgroundColor: { DEFAULT: darkMode(isDark, neutral[900], neutral[50]), paper: darkMode(isDark, neutral[800], neutral[100]), subtle: darkMode(isDark, neutral[700], neutral[200]), inverse: darkMode(isDark, neutral[50], neutral[900]), success: withAlpha(statusColors.success[darkMode(isDark, 900, 50)], 0.12), warning: withAlpha(statusColors.warning[darkMode(isDark, 900, 50)], 0.12), error: withAlpha(statusColors.error[darkMode(isDark, 900, 50)], 0.12), info: withAlpha(statusColors.info[darkMode(isDark, 900, 50)], 0.12), primaryHover: withAlpha(primary[darkMode(isDark, 800, 100)], 0.08), primaryActive: withAlpha(primary[darkMode(isDark, 700, 200)], 0.12), primaryDisabled: withAlpha(neutral[darkMode(isDark, 700, 200)], 0.12), secondaryHover: withAlpha(neutral[darkMode(isDark, 800, 100)], 0.08), secondaryActive: withAlpha(neutral[darkMode(isDark, 700, 200)], 0.12), secondaryDisabled: withAlpha(neutral[darkMode(isDark, 700, 200)], 0.12), selected: withAlpha(primary[darkMode(isDark, 900, 50)], 0.16), hover: withAlpha(neutral[darkMode(isDark, 800, 100)], 0.08), focused: withAlpha(primary[darkMode(isDark, 900, 50)], 0.12), disabled: withAlpha(neutral[darkMode(isDark, 700, 200)], 0.12), overlay: withAlpha(neutral[900], 0.5) }, border: { DEFAULT: darkMode(isDark, neutral[600], neutral[300]), subtle: darkMode(isDark, neutral[700], neutral[200]), strong: darkMode(isDark, neutral[500], neutral[400]), focus: primary[500], inverse: darkMode(isDark, neutral[300], neutral[600]), success: statusColors.success[darkMode(isDark, 500, 500)], warning: statusColors.warning[darkMode(isDark, 500, 500)], error: statusColors.error[darkMode(isDark, 500, 500)], info: statusColors.info[darkMode(isDark, 500, 500)], disabled: darkMode(isDark, neutral[600], neutral[300]) } }; } export function generateTheme(seed: ThemeSeed): Theme { const isDark = seed.isDark ?? false; const colors = generateThemeColors(seed.colors); const semantics = generateSemantics(colors, isDark); return { token: { ...colors, ...semantics }, isDark }; }