starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-24 10:21:37 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Start of themes

Browse Source
This commit is contained in:
Gregory Schier
2023-03-07 11:24:38 -08:00
parent c0d7962142
commit db2d786d50
24 changed files with 1490 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src-web/lib/theme/theme.test.ts Normal file
View File

@@ -0,0 +1,39 @@
import { describe, expect, it } from 'vitest';
import { generateColorVariant, toTailwindVariable } from './theme';
describe('suite name', () => {
it('Generates dark variants', () => {
expect(generateColorVariant('blue', 50, 'dark')).toEqual('hsl(240,100%,5.0%)');
expect(generateColorVariant('blue', 100, 'dark')).toEqual('hsl(240,100%,10.0%)');
expect(generateColorVariant('blue', 200, 'dark')).toEqual('hsl(240,100%,20.0%)');
expect(generateColorVariant('blue', 300, 'dark')).toEqual('hsl(240,100%,30.0%)');
expect(generateColorVariant('blue', 400, 'dark')).toEqual('hsl(240,100%,40.0%)');
expect(generateColorVariant('blue', 500, 'dark')).toEqual('hsl(240,100%,50.0%)');
expect(generateColorVariant('blue', 600, 'dark')).toEqual('hsl(240,100%,60.0%)');
expect(generateColorVariant('blue', 700, 'dark')).toEqual('hsl(240,100%,70.0%)');
expect(generateColorVariant('blue', 800, 'dark')).toEqual('hsl(240,100%,80.0%)');
expect(generateColorVariant('blue', 900, 'dark')).toEqual('hsl(240,100%,90.0%)');
expect(generateColorVariant('blue', 950, 'dark')).toEqual('hsl(240,100%,95.0%)');
});
it('Generates light variants', () => {
expect(generateColorVariant('blue', 50, 'light')).toEqual('hsl(240,100%,95.0%)');
expect(generateColorVariant('blue', 100, 'light')).toEqual('hsl(240,100%,90.0%)');
expect(generateColorVariant('blue', 200, 'light')).toEqual('hsl(240,100%,80.0%)');
expect(generateColorVariant('blue', 300, 'light')).toEqual('hsl(240,100%,70.0%)');
expect(generateColorVariant('blue', 400, 'light')).toEqual('hsl(240,100%,60.0%)');
expect(generateColorVariant('blue', 500, 'light')).toEqual('hsl(240,100%,50.0%)');
expect(generateColorVariant('blue', 600, 'light')).toEqual('hsl(240,100%,40.0%)');
expect(generateColorVariant('blue', 700, 'light')).toEqual('hsl(240,100%,30.0%)');
expect(generateColorVariant('blue', 800, 'light')).toEqual('hsl(240,100%,20.0%)');
expect(generateColorVariant('blue', 900, 'light')).toEqual('hsl(240,100%,10.0%)');
expect(generateColorVariant('blue', 950, 'light')).toEqual('hsl(240,100%,5.0%)');
});
});
describe('Generates Tailwind color', () => {
it('Does it', () => {
expect(
toTailwindVariable({ name: 'blue', cssColor: 'hsl(10, 20%, 30%)', variant: 100 }),
).toEqual('--color-blue-100: 10 20% 30%;');
});
});