78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import tokens from '../../design-tokens.json';
|
|
|
|
import {
|
|
Colors,
|
|
getThemeColors,
|
|
THEME_NAMES,
|
|
type ThemeName,
|
|
} from '@/constants/theme-bridge';
|
|
|
|
function toExpectedThemeColors(
|
|
palette: (typeof tokens.colors)[ThemeName]['light'],
|
|
) {
|
|
const colorToHsl = (v: string) => `hsl(${v.replace(/\s+/g, ', ')})`;
|
|
return {
|
|
text: colorToHsl(palette.foreground),
|
|
background: colorToHsl(palette.background),
|
|
backgroundElement: colorToHsl(palette.card),
|
|
backgroundSelected: colorToHsl(palette.accent),
|
|
textSecondary: colorToHsl(palette.mutedForeground),
|
|
border: colorToHsl(palette.border),
|
|
input: colorToHsl(palette.input),
|
|
ring: colorToHsl(palette.ring),
|
|
primary: colorToHsl(palette.primary),
|
|
primaryForeground: colorToHsl(palette.primaryForeground),
|
|
secondary: colorToHsl(palette.secondary),
|
|
secondaryForeground: colorToHsl(palette.secondaryForeground),
|
|
muted: colorToHsl(palette.muted),
|
|
mutedForeground: colorToHsl(palette.mutedForeground),
|
|
accent: colorToHsl(palette.accent),
|
|
accentForeground: colorToHsl(palette.accentForeground),
|
|
card: colorToHsl(palette.card),
|
|
cardForeground: colorToHsl(palette.cardForeground),
|
|
popover: colorToHsl(palette.popover),
|
|
popoverForeground: colorToHsl(palette.popoverForeground),
|
|
destructive: colorToHsl(palette.destructive),
|
|
destructiveForeground: colorToHsl(palette.destructiveForeground),
|
|
success: colorToHsl(palette.success),
|
|
successForeground: colorToHsl(palette.successForeground),
|
|
warning: colorToHsl(palette.warning),
|
|
warningForeground: colorToHsl(palette.warningForeground),
|
|
info: colorToHsl(palette.info),
|
|
infoForeground: colorToHsl(palette.infoForeground),
|
|
};
|
|
}
|
|
|
|
describe('theme bridge', () => {
|
|
test('THEME_NAMES includes all themes from design-tokens', () => {
|
|
expect(THEME_NAMES).toEqual(Object.keys(tokens.colors));
|
|
});
|
|
|
|
test('getThemeColors returns correct colors for default theme', () => {
|
|
expect(getThemeColors('default', 'light')).toEqual(
|
|
toExpectedThemeColors(tokens.colors.default.light),
|
|
);
|
|
expect(getThemeColors('default', 'dark')).toEqual(
|
|
toExpectedThemeColors(tokens.colors.default.dark),
|
|
);
|
|
});
|
|
|
|
test('getThemeColors returns correct colors for brand theme', () => {
|
|
expect(getThemeColors('brand', 'light')).toEqual(
|
|
toExpectedThemeColors(tokens.colors.brand.light),
|
|
);
|
|
expect(getThemeColors('brand', 'dark')).toEqual(
|
|
toExpectedThemeColors(tokens.colors.brand.dark),
|
|
);
|
|
});
|
|
|
|
test('Colors precomputed matches getThemeColors', () => {
|
|
for (const themeName of THEME_NAMES) {
|
|
expect(Colors[themeName].light).toEqual(
|
|
getThemeColors(themeName, 'light'),
|
|
);
|
|
expect(Colors[themeName].dark).toEqual(getThemeColors(themeName, 'dark'));
|
|
}
|
|
});
|
|
});
|