Skip to content

Commit ae8bd10

Browse files
cschroetercschroeter
committed
simplify colors
1 parent 5a0e3d3 commit ae8bd10

34 files changed

Lines changed: 1036 additions & 2794 deletions

‎bun.lock‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/preset/generate-colors.ts‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import fs from 'node:fs'
2+
import { join } from 'node:path'
3+
import * as radixColors from '@radix-ui/colors'
4+
5+
const main = () => {
6+
Object.keys(radixColors)
7+
.filter((color) => !/[A-Z]/.test(color))
8+
.filter((color) => color !== 'default')
9+
// .map((color) => (color === 'gray' ? 'neutral' : color))
10+
// biome-ignore lint/suspicious/useIterableCallbackReturn: sure
11+
.map((color) => {
12+
const tokens = defineSemanticTokens(color)
13+
14+
fs.writeFileSync(
15+
join(process.cwd(), 'src/colors', `${color}.ts`),
16+
`import { defineSemanticTokens } from '@pandacss/dev'
17+
18+
export const ${color} = defineSemanticTokens.colors(${JSON.stringify(tokens, null, 0)})
19+
`,
20+
)
21+
})
22+
}
23+
24+
const defineSemanticTokens = (color: string) => {
25+
const tokens = defineColorTokens(color)
26+
const numbers = Array.from({ length: 12 }, (_, i) => i + 1)
27+
28+
const semanticTokens = numbers.reduce((acc, num) => {
29+
acc[num] = {
30+
value: {
31+
_light: tokens.light[num],
32+
_dark: tokens.dark[num],
33+
},
34+
}
35+
acc[`a${num}`] = {
36+
value: {
37+
_light: tokens.light[`a${num}`],
38+
_dark: tokens.dark[`a${num}`],
39+
},
40+
}
41+
return acc
42+
}, {})
43+
44+
const aliasTokens = {
45+
default: {
46+
value: `{ colors.${color}.9 }`,
47+
},
48+
emphasized: {
49+
value: `{ colors.${color}.10 }`,
50+
},
51+
fg: {
52+
value: 'white',
53+
},
54+
text: {
55+
value: `{ colors.${color}.a11 }`,
56+
},
57+
}
58+
59+
return { ...semanticTokens, ...aliasTokens }
60+
}
61+
62+
const defineColorTokens = (color: string) => {
63+
const colorObj = Object.fromEntries(
64+
Object.keys(radixColors)
65+
.filter((key) => key.startsWith(color))
66+
.filter((key) => !/\d/.test(key))
67+
.map((key) => {
68+
// biome-ignore lint/performance/noDynamicNamespaceImportAccess: no one cares
69+
const tokens = toColorTokens(color, radixColors[key])
70+
return [key, tokens]
71+
}),
72+
)
73+
74+
return Object.keys(colorObj).reduce(
75+
(acc, key) => {
76+
const target = key.includes('Dark') ? 'dark' : 'light'
77+
acc[target] = { ...acc[target], ...colorObj[key] }
78+
return acc
79+
},
80+
{ light: {}, dark: {} },
81+
)
82+
}
83+
84+
interface Token<T> {
85+
value: T
86+
description?: string
87+
}
88+
89+
const toColorTokens = (
90+
color: string,
91+
scale: Record<string, string>,
92+
): Record<string, Token<string>> => {
93+
return Object.fromEntries(
94+
Object.keys(scale).map((key) => {
95+
const value = scale[key]
96+
const name = key.replace(color, '').toLowerCase()
97+
return [name, { value }]
98+
}),
99+
)
100+
}
101+
102+
main()

‎packages/preset/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
},
3838
"dependencies": {
3939
"@ark-ui/anatomy": "3.5.0",
40+
"@radix-ui/colors": "3.0.0",
4041
"effect": "3.17.7"
4142
}
4243
}

‎packages/preset/src/colors/amber.ts‎

Lines changed: 30 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,32 @@
1-
import { defineSemanticTokens, defineTokens } from '@pandacss/dev'
1+
import { defineSemanticTokens } from '@pandacss/dev'
22

3-
const tokens = defineTokens.colors({
4-
light: {
5-
'1': { value: '#fefdfb' },
6-
'2': { value: '#fefbe9' },
7-
'3': { value: '#fff7c2' },
8-
'4': { value: '#ffee9c' },
9-
'5': { value: '#fbe577' },
10-
'6': { value: '#f3d673' },
11-
'7': { value: '#e9c162' },
12-
'8': { value: '#e2a336' },
13-
'9': { value: '#ffc53d' },
14-
'10': { value: '#ffba18' },
15-
'11': { value: '#ab6400' },
16-
'12': { value: '#4f3422' },
17-
a1: { value: '#c0800004' },
18-
a2: { value: '#f4d10016' },
19-
a3: { value: '#ffde003d' },
20-
a4: { value: '#ffd40063' },
21-
a5: { value: '#f8cf0088' },
22-
a6: { value: '#eab5008c' },
23-
a7: { value: '#dc9b009d' },
24-
a8: { value: '#da8a00c9' },
25-
a9: { value: '#ffb300c2' },
26-
a10: { value: '#ffb300e7' },
27-
a11: { value: '#ab6400' },
28-
a12: { value: '#341500dd' },
29-
},
30-
dark: {
31-
'1': { value: '#16120c' },
32-
'2': { value: '#1d180f' },
33-
'3': { value: '#302008' },
34-
'4': { value: '#3f2700' },
35-
'5': { value: '#4d3000' },
36-
'6': { value: '#5c3d05' },
37-
'7': { value: '#714f19' },
38-
'8': { value: '#8f6424' },
39-
'9': { value: '#ffc53d' },
40-
'10': { value: '#ffd60a' },
41-
'11': { value: '#ffca16' },
42-
'12': { value: '#ffe7b3' },
43-
a1: { value: '#e63c0006' },
44-
a2: { value: '#fd9b000d' },
45-
a3: { value: '#fa820022' },
46-
a4: { value: '#fc820032' },
47-
a5: { value: '#fd8b0041' },
48-
a6: { value: '#fd9b0051' },
49-
a7: { value: '#ffab2567' },
50-
a8: { value: '#ffae3587' },
51-
a9: { value: '#ffc53d' },
52-
a10: { value: '#ffd60a' },
53-
a11: { value: '#ffca16' },
54-
a12: { value: '#ffe7b3' },
55-
},
3+
export const amber = defineSemanticTokens.colors({
4+
'1': { value: { _light: { value: '#fefdfb' }, _dark: { value: '#16120c' } } },
5+
'2': { value: { _light: { value: '#fefbe9' }, _dark: { value: '#1d180f' } } },
6+
'3': { value: { _light: { value: '#fff7c2' }, _dark: { value: '#302008' } } },
7+
'4': { value: { _light: { value: '#ffee9c' }, _dark: { value: '#3f2700' } } },
8+
'5': { value: { _light: { value: '#fbe577' }, _dark: { value: '#4d3000' } } },
9+
'6': { value: { _light: { value: '#f3d673' }, _dark: { value: '#5c3d05' } } },
10+
'7': { value: { _light: { value: '#e9c162' }, _dark: { value: '#714f19' } } },
11+
'8': { value: { _light: { value: '#e2a336' }, _dark: { value: '#8f6424' } } },
12+
'9': { value: { _light: { value: '#ffc53d' }, _dark: { value: '#ffc53d' } } },
13+
'10': { value: { _light: { value: '#ffba18' }, _dark: { value: '#ffd60a' } } },
14+
'11': { value: { _light: { value: '#ab6400' }, _dark: { value: '#ffca16' } } },
15+
'12': { value: { _light: { value: '#4f3422' }, _dark: { value: '#ffe7b3' } } },
16+
a1: { value: { _light: { value: '#c0800004' }, _dark: { value: '#e63c0006' } } },
17+
a2: { value: { _light: { value: '#f4d10016' }, _dark: { value: '#fd9b000d' } } },
18+
a3: { value: { _light: { value: '#ffde003d' }, _dark: { value: '#fa820022' } } },
19+
a4: { value: { _light: { value: '#ffd40063' }, _dark: { value: '#fc820032' } } },
20+
a5: { value: { _light: { value: '#f8cf0088' }, _dark: { value: '#fd8b0041' } } },
21+
a6: { value: { _light: { value: '#eab5008c' }, _dark: { value: '#fd9b0051' } } },
22+
a7: { value: { _light: { value: '#dc9b009d' }, _dark: { value: '#ffab2567' } } },
23+
a8: { value: { _light: { value: '#da8a00c9' }, _dark: { value: '#ffae3587' } } },
24+
a9: { value: { _light: { value: '#ffb300c2' }, _dark: { value: '#ffc53d' } } },
25+
a10: { value: { _light: { value: '#ffb300e7' }, _dark: { value: '#ffd60a' } } },
26+
a11: { value: { _light: { value: '#ab6400' }, _dark: { value: '#ffca16' } } },
27+
a12: { value: { _light: { value: '#341500dd' }, _dark: { value: '#ffe7b3' } } },
28+
default: { value: '{ colors.amber.9 }' },
29+
emphasized: { value: '{ colors.amber.10 }' },
30+
fg: { value: 'white' },
31+
text: { value: '{ colors.amber.a11 }' },
5632
})
57-
const semanticTokens = defineSemanticTokens.colors({
58-
'1': { value: { _light: '{colors.amber.light.1}', _dark: '{colors.amber.dark.1}' } },
59-
'2': { value: { _light: '{colors.amber.light.2}', _dark: '{colors.amber.dark.2}' } },
60-
'3': { value: { _light: '{colors.amber.light.3}', _dark: '{colors.amber.dark.3}' } },
61-
'4': { value: { _light: '{colors.amber.light.4}', _dark: '{colors.amber.dark.4}' } },
62-
'5': { value: { _light: '{colors.amber.light.5}', _dark: '{colors.amber.dark.5}' } },
63-
'6': { value: { _light: '{colors.amber.light.6}', _dark: '{colors.amber.dark.6}' } },
64-
'7': { value: { _light: '{colors.amber.light.7}', _dark: '{colors.amber.dark.7}' } },
65-
'8': { value: { _light: '{colors.amber.light.8}', _dark: '{colors.amber.dark.8}' } },
66-
'9': { value: { _light: '{colors.amber.light.9}', _dark: '{colors.amber.dark.9}' } },
67-
'10': { value: { _light: '{colors.amber.light.10}', _dark: '{colors.amber.dark.10}' } },
68-
'11': { value: { _light: '{colors.amber.light.11}', _dark: '{colors.amber.dark.11}' } },
69-
'12': { value: { _light: '{colors.amber.light.12}', _dark: '{colors.amber.dark.12}' } },
70-
a1: { value: { _light: '{colors.amber.light.a1}', _dark: '{colors.amber.dark.a1}' } },
71-
a2: { value: { _light: '{colors.amber.light.a2}', _dark: '{colors.amber.dark.a2}' } },
72-
a3: { value: { _light: '{colors.amber.light.a3}', _dark: '{colors.amber.dark.a3}' } },
73-
a4: { value: { _light: '{colors.amber.light.a4}', _dark: '{colors.amber.dark.a4}' } },
74-
a5: { value: { _light: '{colors.amber.light.a5}', _dark: '{colors.amber.dark.a5}' } },
75-
a6: { value: { _light: '{colors.amber.light.a6}', _dark: '{colors.amber.dark.a6}' } },
76-
a7: { value: { _light: '{colors.amber.light.a7}', _dark: '{colors.amber.dark.a7}' } },
77-
a8: { value: { _light: '{colors.amber.light.a8}', _dark: '{colors.amber.dark.a8}' } },
78-
a9: { value: { _light: '{colors.amber.light.a9}', _dark: '{colors.amber.dark.a9}' } },
79-
a10: { value: { _light: '{colors.amber.light.a10}', _dark: '{colors.amber.dark.a10}' } },
80-
a11: { value: { _light: '{colors.amber.light.a11}', _dark: '{colors.amber.dark.a11}' } },
81-
a12: { value: { _light: '{colors.amber.light.a12}', _dark: '{colors.amber.dark.a12}' } },
82-
default: { value: { _light: '{colors.amber.light.9}', _dark: '{colors.amber.dark.9}' } },
83-
emphasized: { value: { _light: '{colors.amber.light.10}', _dark: '{colors.amber.dark.10}' } },
84-
fg: { value: { _light: '{colors.gray.light.12}', _dark: '{colors.gray.light.12}' } },
85-
text: { value: { _light: '{colors.amber.light.a11}', _dark: '{colors.amber.dark.a11}' } },
86-
})
87-
88-
export default {
89-
name: 'amber',
90-
tokens,
91-
semanticTokens,
92-
}

‎packages/preset/src/colors/blue.ts‎

Lines changed: 30 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,32 @@
1-
import { defineSemanticTokens, defineTokens } from '@pandacss/dev'
1+
import { defineSemanticTokens } from '@pandacss/dev'
22

3-
const tokens = defineTokens.colors({
4-
light: {
5-
'1': { value: '#fbfdff' },
6-
'2': { value: '#f4faff' },
7-
'3': { value: '#e6f4fe' },
8-
'4': { value: '#d5efff' },
9-
'5': { value: '#c2e5ff' },
10-
'6': { value: '#acd8fc' },
11-
'7': { value: '#8ec8f6' },
12-
'8': { value: '#5eb1ef' },
13-
'9': { value: '#0090ff' },
14-
'10': { value: '#0588f0' },
15-
'11': { value: '#0d74ce' },
16-
'12': { value: '#113264' },
17-
a1: { value: '#0080ff04' },
18-
a2: { value: '#008cff0b' },
19-
a3: { value: '#008ff519' },
20-
a4: { value: '#009eff2a' },
21-
a5: { value: '#0093ff3d' },
22-
a6: { value: '#0088f653' },
23-
a7: { value: '#0083eb71' },
24-
a8: { value: '#0084e6a1' },
25-
a9: { value: '#0090ff' },
26-
a10: { value: '#0086f0fa' },
27-
a11: { value: '#006dcbf2' },
28-
a12: { value: '#002359ee' },
29-
},
30-
dark: {
31-
'1': { value: '#0d1520' },
32-
'2': { value: '#111927' },
33-
'3': { value: '#0d2847' },
34-
'4': { value: '#003362' },
35-
'5': { value: '#004074' },
36-
'6': { value: '#104d87' },
37-
'7': { value: '#205d9e' },
38-
'8': { value: '#2870bd' },
39-
'9': { value: '#0090ff' },
40-
'10': { value: '#3b9eff' },
41-
'11': { value: '#70b8ff' },
42-
'12': { value: '#c2e6ff' },
43-
a1: { value: '#004df211' },
44-
a2: { value: '#1166fb18' },
45-
a3: { value: '#0077ff3a' },
46-
a4: { value: '#0075ff57' },
47-
a5: { value: '#0081fd6b' },
48-
a6: { value: '#0f89fd7f' },
49-
a7: { value: '#2a91fe98' },
50-
a8: { value: '#3094feb9' },
51-
a9: { value: '#0090ff' },
52-
a10: { value: '#3b9eff' },
53-
a11: { value: '#70b8ff' },
54-
a12: { value: '#c2e6ff' },
55-
},
3+
export const blue = defineSemanticTokens.colors({
4+
'1': { value: { _light: { value: '#fbfdff' }, _dark: { value: '#0d1520' } } },
5+
'2': { value: { _light: { value: '#f4faff' }, _dark: { value: '#111927' } } },
6+
'3': { value: { _light: { value: '#e6f4fe' }, _dark: { value: '#0d2847' } } },
7+
'4': { value: { _light: { value: '#d5efff' }, _dark: { value: '#003362' } } },
8+
'5': { value: { _light: { value: '#c2e5ff' }, _dark: { value: '#004074' } } },
9+
'6': { value: { _light: { value: '#acd8fc' }, _dark: { value: '#104d87' } } },
10+
'7': { value: { _light: { value: '#8ec8f6' }, _dark: { value: '#205d9e' } } },
11+
'8': { value: { _light: { value: '#5eb1ef' }, _dark: { value: '#2870bd' } } },
12+
'9': { value: { _light: { value: '#0090ff' }, _dark: { value: '#0090ff' } } },
13+
'10': { value: { _light: { value: '#0588f0' }, _dark: { value: '#3b9eff' } } },
14+
'11': { value: { _light: { value: '#0d74ce' }, _dark: { value: '#70b8ff' } } },
15+
'12': { value: { _light: { value: '#113264' }, _dark: { value: '#c2e6ff' } } },
16+
a1: { value: { _light: { value: '#0080ff04' }, _dark: { value: '#004df211' } } },
17+
a2: { value: { _light: { value: '#008cff0b' }, _dark: { value: '#1166fb18' } } },
18+
a3: { value: { _light: { value: '#008ff519' }, _dark: { value: '#0077ff3a' } } },
19+
a4: { value: { _light: { value: '#009eff2a' }, _dark: { value: '#0075ff57' } } },
20+
a5: { value: { _light: { value: '#0093ff3d' }, _dark: { value: '#0081fd6b' } } },
21+
a6: { value: { _light: { value: '#0088f653' }, _dark: { value: '#0f89fd7f' } } },
22+
a7: { value: { _light: { value: '#0083eb71' }, _dark: { value: '#2a91fe98' } } },
23+
a8: { value: { _light: { value: '#0084e6a1' }, _dark: { value: '#3094feb9' } } },
24+
a9: { value: { _light: { value: '#0090ff' }, _dark: { value: '#0090ff' } } },
25+
a10: { value: { _light: { value: '#0086f0fa' }, _dark: { value: '#3b9eff' } } },
26+
a11: { value: { _light: { value: '#006dcbf2' }, _dark: { value: '#70b8ff' } } },
27+
a12: { value: { _light: { value: '#002359ee' }, _dark: { value: '#c2e6ff' } } },
28+
default: { value: '{ colors.blue.9 }' },
29+
emphasized: { value: '{ colors.blue.10 }' },
30+
fg: { value: 'white' },
31+
text: { value: '{ colors.blue.a11 }' },
5632
})
57-
const semanticTokens = defineSemanticTokens.colors({
58-
'1': { value: { _light: '{colors.blue.light.1}', _dark: '{colors.blue.dark.1}' } },
59-
'2': { value: { _light: '{colors.blue.light.2}', _dark: '{colors.blue.dark.2}' } },
60-
'3': { value: { _light: '{colors.blue.light.3}', _dark: '{colors.blue.dark.3}' } },
61-
'4': { value: { _light: '{colors.blue.light.4}', _dark: '{colors.blue.dark.4}' } },
62-
'5': { value: { _light: '{colors.blue.light.5}', _dark: '{colors.blue.dark.5}' } },
63-
'6': { value: { _light: '{colors.blue.light.6}', _dark: '{colors.blue.dark.6}' } },
64-
'7': { value: { _light: '{colors.blue.light.7}', _dark: '{colors.blue.dark.7}' } },
65-
'8': { value: { _light: '{colors.blue.light.8}', _dark: '{colors.blue.dark.8}' } },
66-
'9': { value: { _light: '{colors.blue.light.9}', _dark: '{colors.blue.dark.9}' } },
67-
'10': { value: { _light: '{colors.blue.light.10}', _dark: '{colors.blue.dark.10}' } },
68-
'11': { value: { _light: '{colors.blue.light.11}', _dark: '{colors.blue.dark.11}' } },
69-
'12': { value: { _light: '{colors.blue.light.12}', _dark: '{colors.blue.dark.12}' } },
70-
a1: { value: { _light: '{colors.blue.light.a1}', _dark: '{colors.blue.dark.a1}' } },
71-
a2: { value: { _light: '{colors.blue.light.a2}', _dark: '{colors.blue.dark.a2}' } },
72-
a3: { value: { _light: '{colors.blue.light.a3}', _dark: '{colors.blue.dark.a3}' } },
73-
a4: { value: { _light: '{colors.blue.light.a4}', _dark: '{colors.blue.dark.a4}' } },
74-
a5: { value: { _light: '{colors.blue.light.a5}', _dark: '{colors.blue.dark.a5}' } },
75-
a6: { value: { _light: '{colors.blue.light.a6}', _dark: '{colors.blue.dark.a6}' } },
76-
a7: { value: { _light: '{colors.blue.light.a7}', _dark: '{colors.blue.dark.a7}' } },
77-
a8: { value: { _light: '{colors.blue.light.a8}', _dark: '{colors.blue.dark.a8}' } },
78-
a9: { value: { _light: '{colors.blue.light.a9}', _dark: '{colors.blue.dark.a9}' } },
79-
a10: { value: { _light: '{colors.blue.light.a10}', _dark: '{colors.blue.dark.a10}' } },
80-
a11: { value: { _light: '{colors.blue.light.a11}', _dark: '{colors.blue.dark.a11}' } },
81-
a12: { value: { _light: '{colors.blue.light.a12}', _dark: '{colors.blue.dark.a12}' } },
82-
83-
default: { value: { _light: '{colors.blue.light.9}', _dark: '{colors.blue.dark.9}' } },
84-
emphasized: { value: { _light: '{colors.blue.light.10}', _dark: '{colors.blue.dark.10}' } },
85-
fg: { value: { _light: 'white', _dark: 'white' } },
86-
text: { value: { _light: '{colors.blue.light.a11}', _dark: '{colors.blue.dark.a11}' } },
87-
})
88-
89-
export default {
90-
name: 'blue',
91-
tokens,
92-
semanticTokens,
93-
}

0 commit comments

Comments
 (0)