1 | const openColor = (await import('https://cdn.skypack.dev/open-color/open-color.js')).default
|
2 | const Color = (await import('https://colorjs.io/dist/color.esm.js')).default
|
3 |
|
4 | const colors = Object
|
5 | .entries(openColor.theme.colors)
|
6 | .filter(group => typeof group[1] === 'object')
|
7 |
|
8 | const customizeIncrements = num =>
|
9 | num === '50'
|
10 | ? num.replaceAll('50', '0')
|
11 | : num.replaceAll('0', '')
|
12 |
|
13 | const hexTOhsl = hex =>
|
14 | new Color(hex).to('hsl')
|
15 | .coords.map(Math.round)
|
16 | .reduce((acc, coord, index) => {
|
17 | if (index > 0)
|
18 | return acc += ' ' + coord + '%'
|
19 | else
|
20 | return acc += coord
|
21 | }, '')
|
22 |
|
23 | const capitalizeFirstLetter = string =>
|
24 | string.charAt(0).toUpperCase() + string.slice(1);
|
25 |
|
26 | const groupedObject = colors.reduce((root, [color, shades]) => {
|
27 | let base = `--${color}-`
|
28 | root += `\n\nexport const ${capitalizeFirstLetter(color)} = {`
|
29 |
|
30 | Object.entries(shades).forEach(([num, hex]) =>
|
31 | root += `
|
32 | ${base}${customizeIncrements(num)}-hsl: '${hexTOhsl(hex)}',`
|
33 | )
|
34 |
|
35 | root += '\n}'
|
36 |
|
37 | return root
|
38 | }, ``)
|
39 |
|
40 | const channels = colors.reduce((root, [color, shades]) => {
|
41 | let base = `--${color}-`
|
42 |
|
43 | Object.entries(shades).forEach(([num, hex]) =>
|
44 | root += `
|
45 | ${base}${customizeIncrements(num)}-hsl: '${hexTOhsl(hex)}',`
|
46 | )
|
47 |
|
48 | return root
|
49 | }, ``)
|
50 |
|
51 | const vars = colors.reduce((root, [color, shades]) => {
|
52 | let base = `--${color}-`
|
53 |
|
54 | Object.entries(shades).forEach(([num, hex]) =>
|
55 | root += `
|
56 | ${base}${customizeIncrements(num)}: ${hex};`
|
57 | )
|
58 |
|
59 | return root
|
60 | }, ``)
|
61 |
|
62 | console.log(groupedObject)
|
63 |
|
64 |
|
\ | No newline at end of file |