| 1 | // Load `colar` and restructure
|
| 2 | // Result: colar.[hueName].[luminosityStep] => hexCode
|
| 3 | const colarURL =
|
| 4 | "https://raw.githubusercontent.com/fchristant/colar/master/colar/colar.json"
|
| 5 | const colar = (await (await fetch(colarURL)).json()).reduce(
|
| 6 | (root, { name, color }) => {
|
| 7 | let [hueName, luminosityStep] = name.split("-")
|
| 8 |
|
| 9 | hueName = hueName.toLowerCase()
|
| 10 | luminosityStep = parseInt(luminosityStep)
|
| 11 |
|
| 12 | const hue = root?.[hueName] ?? {}
|
| 13 |
|
| 14 | return {
|
| 15 | ...root,
|
| 16 | [hueName]: { ...hue, [luminosityStep]: color.toLowerCase() },
|
| 17 | }
|
| 18 | },
|
| 19 | {}
|
| 20 | )
|
| 21 |
|
| 22 | // Load `open-color` and restructure
|
| 23 | // Result: openColor.[hueName].[luminosityStep] => hexCode
|
| 24 | const openColor = Object.entries(
|
| 25 | (await import("open-color/open-color.js")).default.theme.colors
|
| 26 | )
|
| 27 | .filter((group) => typeof group[1] === "object")
|
| 28 | .reduce(
|
| 29 | (root, [hueName, luminosityStepsObject]) => ({
|
| 30 | ...root,
|
| 31 | [hueName]: Object.fromEntries(
|
| 32 | Object.entries(luminosityStepsObject).map(([step, color]) => [
|
| 33 | step.replace("00", "").replace("50", "0"),
|
| 34 | color,
|
| 35 | ])
|
| 36 | ),
|
| 37 | }),
|
| 38 | {}
|
| 39 | )
|
| 40 |
|
| 41 | // Combine `open-color` and `colar` palettes
|
| 42 | const colors = Object.entries({
|
| 43 | // Extend `openColor.gray`
|
| 44 | gray: {
|
| 45 | ...openColor.gray,
|
| 46 | 10: "#16191d",
|
| 47 | 11: "#0d0f12",
|
| 48 | 12: "#030507",
|
| 49 | },
|
| 50 | // Use `colar.gray` as "stone"
|
| 51 | stone: colar.gray,
|
| 52 | // Use all other colors in `colar`
|
| 53 | ...Object.fromEntries(
|
| 54 | Object.entries(colar).filter(([hueName]) => hueName != "gray")
|
| 55 | ),
|
| 56 | })
|
| 57 |
|
| 58 |
|
| 59 | const Color = (await import('colorjs.io')).default
|
| 60 |
|
| 61 | const hexTOhsl = hex =>
|
| 62 | new Color(hex).to('hsl')
|
| 63 | .coords.map(Math.round)
|
| 64 | .reduce((acc, coord, index) => {
|
| 65 | if (index > 0)
|
| 66 | return acc += ' ' + coord + '%'
|
| 67 | else
|
| 68 | return acc += coord
|
| 69 | }, '')
|
| 70 |
|
| 71 | const capitalizeFirstLetter = string =>
|
| 72 | string.charAt(0).toUpperCase() + string.slice(1)
|
| 73 |
|
| 74 | const groupedObject = colors.reduce((root, [color, shades]) => {
|
| 75 | let base = `--${color}-`
|
| 76 | root += `\n\nexport const ${capitalizeFirstLetter(color)} = {`
|
| 77 |
|
| 78 | Object.entries(shades).forEach(([num, hex]) =>
|
| 79 | root += `
|
| 80 | '${base}${num}-hsl': '${hexTOhsl(hex)}',`
|
| 81 | // root += `
|
| 82 | // '${base}${num}': '${hex}',`
|
| 83 | )
|
| 84 |
|
| 85 | root += '\n}'
|
| 86 |
|
| 87 | return root
|
| 88 | }, ``)
|
| 89 |
|
| 90 | const channels = colors.reduce((root, [color, shades]) => {
|
| 91 | let base = `--${color}-`
|
| 92 |
|
| 93 | Object.entries(shades).forEach(([num, hex]) =>
|
| 94 | root += `
|
| 95 | '${base}${num}-hsl': '${hexTOhsl(hex)}',`
|
| 96 | )
|
| 97 |
|
| 98 | return root
|
| 99 | }, ``)
|
| 100 |
|
| 101 | const vars = colors.reduce((root, [color, shades]) => {
|
| 102 | let base = `--${color}-`
|
| 103 |
|
| 104 | Object.entries(shades).forEach(([num, hex]) =>
|
| 105 | root += `
|
| 106 | '${base}${num}': ${hex}`
|
| 107 | )
|
| 108 |
|
| 109 | return root
|
| 110 | }, ``)
|
| 111 |
|
| 112 | console.log(groupedObject)
|
| 113 | // console.log(vars)
|
| 114 | // console.log(channels)
|