100 lines
4.3 KiB
TypeScript
Executable File
100 lines
4.3 KiB
TypeScript
Executable File
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
|
|
};
|
|
}
|