Commit
Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Tue, 01 Feb 2022 05:38:50 +0000
Hash: 831cb6507e6d03201543eeb26f24efec1e8df213
Timestamp: Tue, 01 Feb 2022 05:38:50 +0000 (3 years ago)

+632 -21 +/-23 browse
HSL for all colors (#171) 
HSL for all colors (#171)

* gen hsl channels for each hex

* adds color channel source built with generator

* builds minified css files

* adds new files to exports map

* cut release

* document new hsl color imports

* update path to latest name

* fixes failing token test by removing hsl from json

* update total prop number in test with new hsl

* use a new hsl prop in docsite for dark theme bottom nav
1diff --git a/build/props.js b/build/props.js
2index 0feb0bd..653245b 100644
3--- a/build/props.js
4+++ b/build/props.js
5 @@ -3,6 +3,7 @@ import fs from 'fs'
6 import Animations from '../src/props.animations.js'
7 import Sizes from '../src/props.sizes.js'
8 import * as OpenColors from '../src/props.colors.js'
9+ import * as ColorsHSL from '../src/props.colors-hsl.js'
10 import Fonts from '../src/props.fonts.js'
11 import Borders from '../src/props.borders.js'
12 import Aspects from '../src/props.aspects.js'
13 @@ -50,6 +51,22 @@ const individual_colors = {
14 'props.orange.css': OpenColors.Orange,
15 }
16
17+ const individual_colors_hsl = {
18+ 'props.gray-hsl.css': ColorsHSL.Gray,
19+ 'props.red-hsl.css': ColorsHSL.Red,
20+ 'props.pink-hsl.css': ColorsHSL.Pink,
21+ 'props.grape-hsl.css': ColorsHSL.Grape,
22+ 'props.violet-hsl.css': ColorsHSL.Violet,
23+ 'props.indigo-hsl.css': ColorsHSL.Indigo,
24+ 'props.blue-hsl.css': ColorsHSL.Blue,
25+ 'props.cyan-hsl.css': ColorsHSL.Cyan,
26+ 'props.teal-hsl.css': ColorsHSL.Teal,
27+ 'props.green-hsl.css': ColorsHSL.Green,
28+ 'props.lime-hsl.css': ColorsHSL.Lime,
29+ 'props.yellow-hsl.css': ColorsHSL.Yellow,
30+ 'props.orange-hsl.css': ColorsHSL.Orange,
31+ }
32+
33 // gen design tokens
34 const jsonbundle = toJSON({
35 ...Object.values(individual_colors)
36 @@ -77,10 +94,17 @@ const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.js
37 FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2))
38
39 // gen prop variants
40- Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => {
41+ Object.entries({...mainbundle, ...individual_colors, ...individual_colors_hsl}).forEach(([filename, props]) => {
42 buildPropsStylesheet({filename, props}, {selector, prefix})
43 })
44
45+ // gen color hsl main file
46+ buildPropsStylesheet({
47+ filename: 'props.colors-hsl.css',
48+ props: ColorsHSL.default},
49+ {selector, prefix}
50+ )
51+
52 // gen index.css
53 const entry = fs.createWriteStream('../src/index.css')
54 entry.write(`@import 'props.media.css';
55 diff --git a/docsite/index.css b/docsite/index.css
56index e19be02..dee0802 100644
57--- a/docsite/index.css
58+++ b/docsite/index.css
59 @@ -1,5 +1,7 @@
60 @import "../src/index.css";
61 @import "../src/extra/normalize.css";
62+ @import "../src/props.gray-hsl.css";
63+
64 @import "./syntax-highlight.css";
65
66 :root {
67 @@ -395,7 +397,7 @@ pre[class*="language-"] {
68 bottom: 0;
69 overflow-x: auto;
70
71- background-image: linear-gradient(to top, hsl(210deg 11% 15% / 98%) 1ch, 75%, hsl(210deg 11% 0% / 0%));
72+ background-image: linear-gradient(to top, hsl(var(--gray-9-hsl) / 98%) 1ch, 75%, hsl(var(--gray-9-hsl) / 0%));
73 margin-block-start: var(--size-8);
74 padding-block: var(--size-5) var(--size-2);
75 padding-inline: var(--size-2) var(--size-4);
76 diff --git a/docsite/index.html b/docsite/index.html
77index 9bcb5d7..0a56004 100644
78--- a/docsite/index.html
79+++ b/docsite/index.html
80 @@ -119,7 +119,7 @@
81 </li>
82 </ul>
83 <small>
84- v1.3.0
85+ v1.3.1
86 <span class="license">
87 <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
88 <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
89 @@ -403,6 +403,11 @@
90 <a href="https://github.com/argyleink/open-props/blob/main/src/props.colors.css">colors.css</a>
91 </div>
92
93+ <div class="size"><strong>0.7</strong>kB</div>
94+ <div class="file">
95+ <a href="https://github.com/argyleink/open-props/blob/main/src/props.colors-hsl.css">colors-hsl.css</a>
96+ </div>
97+
98 <div class="size"><strong>0.2</strong>kB</div>
99 <div class="file">
100 <a href="https://github.com/argyleink/open-props/blob/main/src/props.easing.css">easings.css</a>
101 @@ -646,9 +651,16 @@
102 <pre class="language-css"><code>
103 /* index.css */
104 @import "https://unpkg.com/open-props/colors.min.css";
105- @import "https://unpkg.com/open-props/orange.min.css";
106+ @import "https://unpkg.com/open-props/colors-hsl.min.css";
107+
108+ @import "https://unpkg.com/open-props/indigo.min.css";
109+ @import "https://unpkg.com/open-props/indigo-hsl.min.css";
110+
111 @import "https://unpkg.com/open-props/easings.min.css";
112+ @import "https://unpkg.com/open-props/animations.min.css";
113+
114 @import "https://unpkg.com/open-props/sizes.min.css";
115+ @import "https://unpkg.com/open-props/gradients.min.css";
116 /* etc */
117 </code></pre>
118 </div>
119 @@ -670,10 +682,17 @@
120 <h6>Individual packs</h6>
121 <pre class="language-css"><code>
122 /* index.pcss */
123- @import "https://unpkg.com/open-props/src/props.colors.css";
124- @import "https://unpkg.com/open-props/src/props.orange.css";
125- @import "https://unpkg.com/open-props/src/props.easing.css";
126- @import "https://unpkg.com/open-props/src/props.sizes.css";
127+ @import "https://unpkg.com/open-props/src/colors.min.css";
128+ @import "https://unpkg.com/open-props/src/colors-hsl.min.css";
129+
130+ @import "https://unpkg.com/open-props/src/indigo.min.css";
131+ @import "https://unpkg.com/open-props/src/indigo-hsl.min.css";
132+
133+ @import "https://unpkg.com/open-props/src/easings.min.css";
134+ @import "https://unpkg.com/open-props/src/animations.min.css";
135+
136+ @import "https://unpkg.com/open-props/src/sizes.min.css";
137+ @import "https://unpkg.com/open-props/src/gradients.min.css";
138 /* etc */
139 </code></pre>
140 </div>
141 @@ -733,18 +752,32 @@
142 <div class="block-wrap">
143 <pre class="language-css"><code>
144 /* index.pcss */
145- @import "open-props/sizes";
146 @import "open-props/colors";
147- @import "open-props/orange";
148+ @import "open-props/colors-hsl";
149+
150+ @import "open-props/indigo";
151+ @import "open-props/indigo-hsl";
152+
153+ @import "open-props/easings";
154+ @import "open-props/animations";
155+
156+ @import "open-props/sizes";
157 @import "open-props/gradients";
158 /* etc */
159 </code></pre>
160
161 <pre class="language-js"><code>
162 // index.js
163- import 'open-props/sizes';
164 import 'open-props/colors';
165- import 'open-props/orange';
166+ import 'open-props/colors-hsl';
167+
168+ import 'open-props/indigo';
169+ import 'open-props/indigo-hsl';
170+
171+ import 'open-props/easings';
172+ import 'open-props/animations';
173+
174+ import 'open-props/sizes';
175 import 'open-props/gradients';
176 /* etc */
177 </code></pre>
178 @@ -968,6 +1001,18 @@
179 }
180 </code></pre>
181 </div>
182+ <div>
183+ <h5>Modify Opacity Example</h5>
184+ <pre class="language-css"><code>
185+ /* additional import required */
186+ /* @import "open-props/gray-hsl"; */
187+ @import "open-props/colors-hsl";
188+
189+ .backdrop {
190+ background-color: hsl(var(--gray-9) / 30%);
191+ }
192+ </code></pre>
193+ </div>
194 </div>
195 <article class="just-stretch">
196 <div class="open-colors count-em">
197 diff --git a/package.json b/package.json
198index 134117f..ef25699 100644
199--- a/package.json
200+++ b/package.json
201 @@ -3,7 +3,7 @@
202 "name": "open-props",
203 "author": "Adam Argyle",
204 "license": "MIT",
205- "version": "1.3.0",
206+ "version": "1.3.1",
207 "repository": {
208 "type": "git",
209 "url": "https://github.com/argyleink/open-props"
210 @@ -34,26 +34,40 @@
211 "./animations": "./animations.min.css",
212 "./aspects": "./aspects.min.css",
213 "./blue": "./blue.min.css",
214+ "./blue-hsl": "./blue-hsl.min.css",
215 "./borders": "./borders.min.css",
216 "./colors": "./colors.min.css",
217+ "./colors-hsl": "./colors-hsl.min.css",
218 "./cyan": "./cyan.min.css",
219+ "./cyan-hsl": "./cyan-hsl.min.css",
220 "./easings": "./easings.min.css",
221 "./fonts": "./fonts.min.css",
222 "./gradients": "./gradients.min.css",
223 "./grape": "./grape.min.css",
224+ "./grape-hsl": "./grape-hsl.min.css",
225 "./gray": "./gray.min.css",
226+ "./gray-hsl": "./gray-hsl.min.css",
227 "./green": "./green.min.css",
228+ "./green-hsl": "./green-hsl.min.css",
229 "./indigo": "./indigo.min.css",
230+ "./indigo-hsl": "./indigo-hsl.min.css",
231 "./lime": "./lime.min.css",
232+ "./lime-hsl": "./lime-hsl.min.css",
233 "./media": "./media.min.css",
234 "./orange": "./orange.min.css",
235+ "./orange-hsl": "./orange-hsl.min.css",
236 "./pink": "./pink.min.css",
237+ "./pink-hsl": "./pink-hsl.min.css",
238 "./red": "./red.min.css",
239+ "./red-hsl": "./red-hsl.min.css",
240 "./shadows": "./shadows.min.css",
241 "./sizes": "./sizes.min.css",
242 "./teal": "./teal.min.css",
243+ "./teal-hsl": "./teal-hsl.min.css",
244 "./violet": "./violet.min.css",
245+ "./violet-hsl": "./violet-hsl.min.css",
246 "./yellow": "./yellow.min.css",
247+ "./yellow-hsl": "./yellow-hsl.min.css",
248 "./zindex": "./zindex.min.css",
249 "./json": "./open-props.tokens.json",
250 "./tokens": "./open-props.tokens.json",
251 @@ -87,19 +101,33 @@
252 "lib:supports": "postcss src/props.supports.css -o supports.min.css",
253 "lib:zindex": "postcss src/props.zindex.css -o zindex.min.css",
254 "lib:colors": "postcss src/props.colors.css -o colors.min.css",
255+ "lib:colors-hsl": "postcss src/props.colors-hsl.css -o colors-hsl.min.css",
256 "lib:colors:gray": "postcss src/props.gray.css -o gray.min.css",
257+ "lib:colors:gray-hsl": "postcss src/props.gray-hsl.css -o gray-hsl.min.css",
258 "lib:colors:red": "postcss src/props.red.css -o red.min.css",
259+ "lib:colors:red-hsl": "postcss src/props.red-hsl.css -o red-hsl.min.css",
260 "lib:colors:pink": "postcss src/props.pink.css -o pink.min.css",
261+ "lib:colors:pink-hsl": "postcss src/props.pink-hsl.css -o pink-hsl.min.css",
262 "lib:colors:grape": "postcss src/props.grape.css -o grape.min.css",
263+ "lib:colors:grape-hsl": "postcss src/props.grape-hsl.css -o grape-hsl.min.css",
264 "lib:colors:violet": "postcss src/props.violet.css -o violet.min.css",
265+ "lib:colors:violet-hsl": "postcss src/props.violet-hsl.css -o violet-hsl.min.css",
266 "lib:colors:indigo": "postcss src/props.indigo.css -o indigo.min.css",
267+ "lib:colors:indigo-hsl": "postcss src/props.indigo-hsl.css -o indigo-hsl.min.css",
268 "lib:colors:blue": "postcss src/props.blue.css -o blue.min.css",
269+ "lib:colors:blue-hsl": "postcss src/props.blue-hsl.css -o blue-hsl.min.css",
270 "lib:colors:cyan": "postcss src/props.cyan.css -o cyan.min.css",
271+ "lib:colors:cyan-hsl": "postcss src/props.cyan-hsl.css -o cyan-hsl.min.css",
272 "lib:colors:teal": "postcss src/props.teal.css -o teal.min.css",
273+ "lib:colors:teal-hsl": "postcss src/props.teal-hsl.css -o teal-hsl.min.css",
274 "lib:colors:green": "postcss src/props.green.css -o green.min.css",
275+ "lib:colors:green-hsl": "postcss src/props.green-hsl.css -o green-hsl.min.css",
276 "lib:colors:lime": "postcss src/props.lime.css -o lime.min.css",
277+ "lib:colors:lime-hsl": "postcss src/props.lime-hsl.css -o lime-hsl.min.css",
278 "lib:colors:yellow": "postcss src/props.yellow.css -o yellow.min.css",
279- "lib:colors:orange": "postcss src/props.orange.css -o orange.min.css"
280+ "lib:colors:yellow-hsl": "postcss src/props.yellow-hsl.css -o yellow-hsl.min.css",
281+ "lib:colors:orange": "postcss src/props.orange.css -o orange.min.css",
282+ "lib:colors:orange-hsl": "postcss src/props.orange-hsl.css -o orange-hsl.min.css"
283 },
284 "devDependencies": {
285 "ava": "^3.15.0",
286 diff --git a/src/index.js b/src/index.js
287index 7c00087..4bdf084 100644
288--- a/src/index.js
289+++ b/src/index.js
290 @@ -1,6 +1,7 @@
291 import Animations from './props.animations.js'
292 import Sizes from './props.sizes.js'
293 import Colors from './props.colors.js'
294+ import ColorsHSL from './props.colors-hsl.js'
295 import Fonts from './props.fonts.js'
296 import Borders from './props.borders.js'
297 import Aspects from './props.aspects.js'
298 @@ -14,6 +15,7 @@ export default OpenProps = {
299 ...Animations,
300 ...Sizes,
301 ...Colors,
302+ ...ColorsHSL,
303 ...Fonts,
304 ...Borders,
305 ...Aspects,
306 diff --git a/src/props.blue-hsl.css b/src/props.blue-hsl.css
307new file mode 100644
308index 0000000..d78d446
309--- /dev/null
310+++ b/src/props.blue-hsl.css
311 @@ -0,0 +1,12 @@
312+ :where(html) {
313+ --blue-0-hsl: 205 100% 95%;
314+ --blue-1-hsl: 206 100% 91%;
315+ --blue-2-hsl: 206 100% 82%;
316+ --blue-3-hsl: 206 96% 72%;
317+ --blue-4-hsl: 207 91% 64%;
318+ --blue-5-hsl: 207 86% 57%;
319+ --blue-6-hsl: 208 80% 52%;
320+ --blue-7-hsl: 208 77% 47%;
321+ --blue-8-hsl: 209 77% 43%;
322+ --blue-9-hsl: 209 75% 38%;
323+ }
324 diff --git a/src/props.colors-hsl.css b/src/props.colors-hsl.css
325new file mode 100644
326index 0000000..f24b816
327--- /dev/null
328+++ b/src/props.colors-hsl.css
329 @@ -0,0 +1,132 @@
330+ :where(html) {
331+ --gray-0-hsl: 210 17% 98%;
332+ --gray-1-hsl: 210 17% 95%;
333+ --gray-2-hsl: 210 16% 93%;
334+ --gray-3-hsl: 210 14% 89%;
335+ --gray-4-hsl: 210 14% 83%;
336+ --gray-5-hsl: 210 11% 71%;
337+ --gray-6-hsl: 210 7% 56%;
338+ --gray-7-hsl: 210 9% 31%;
339+ --gray-8-hsl: 210 10% 23%;
340+ --gray-9-hsl: 210 11% 15%;
341+ --red-0-hsl: 0 100% 98%;
342+ --red-1-hsl: 0 100% 95%;
343+ --red-2-hsl: 0 100% 89%;
344+ --red-3-hsl: 0 100% 83%;
345+ --red-4-hsl: 0 100% 76%;
346+ --red-5-hsl: 0 100% 71%;
347+ --red-6-hsl: 0 94% 65%;
348+ --red-7-hsl: 0 86% 59%;
349+ --red-8-hsl: 0 74% 54%;
350+ --red-9-hsl: 0 65% 48%;
351+ --pink-0-hsl: 336 100% 97%;
352+ --pink-1-hsl: 336 100% 94%;
353+ --pink-2-hsl: 338 91% 87%;
354+ --pink-3-hsl: 339 90% 81%;
355+ --pink-4-hsl: 339 88% 74%;
356+ --pink-5-hsl: 339 82% 67%;
357+ --pink-6-hsl: 339 76% 59%;
358+ --pink-7-hsl: 339 67% 52%;
359+ --pink-8-hsl: 339 68% 45%;
360+ --pink-9-hsl: 339 69% 38%;
361+ --grape-0-hsl: 280 67% 96%;
362+ --grape-1-hsl: 287 77% 92%;
363+ --grape-2-hsl: 288 86% 86%;
364+ --grape-3-hsl: 289 85% 78%;
365+ --grape-4-hsl: 288 83% 71%;
366+ --grape-5-hsl: 288 75% 64%;
367+ --grape-6-hsl: 288 67% 58%;
368+ --grape-7-hsl: 288 56% 52%;
369+ --grape-8-hsl: 288 54% 46%;
370+ --grape-9-hsl: 288 54% 40%;
371+ --violet-0-hsl: 252 100% 97%;
372+ --violet-1-hsl: 257 100% 93%;
373+ --violet-2-hsl: 256 100% 87%;
374+ --violet-3-hsl: 255 94% 79%;
375+ --violet-4-hsl: 255 93% 72%;
376+ --violet-5-hsl: 255 91% 67%;
377+ --violet-6-hsl: 255 86% 63%;
378+ --violet-7-hsl: 255 78% 60%;
379+ --violet-8-hsl: 255 67% 55%;
380+ --violet-9-hsl: 255 53% 50%;
381+ --indigo-0-hsl: 223 100% 96%;
382+ --indigo-1-hsl: 225 100% 93%;
383+ --indigo-2-hsl: 228 100% 86%;
384+ --indigo-3-hsl: 228 100% 78%;
385+ --indigo-4-hsl: 228 96% 72%;
386+ --indigo-5-hsl: 228 94% 67%;
387+ --indigo-6-hsl: 228 89% 63%;
388+ --indigo-7-hsl: 228 81% 59%;
389+ --indigo-8-hsl: 228 69% 55%;
390+ --indigo-9-hsl: 230 57% 50%;
391+ --blue-0-hsl: 205 100% 95%;
392+ --blue-1-hsl: 206 100% 91%;
393+ --blue-2-hsl: 206 100% 82%;
394+ --blue-3-hsl: 206 96% 72%;
395+ --blue-4-hsl: 207 91% 64%;
396+ --blue-5-hsl: 207 86% 57%;
397+ --blue-6-hsl: 208 80% 52%;
398+ --blue-7-hsl: 208 77% 47%;
399+ --blue-8-hsl: 209 77% 43%;
400+ --blue-9-hsl: 209 75% 38%;
401+ --cyan-0-hsl: 185 81% 94%;
402+ --cyan-1-hsl: 185 84% 88%;
403+ --cyan-2-hsl: 186 77% 77%;
404+ --cyan-3-hsl: 187 74% 65%;
405+ --cyan-4-hsl: 187 69% 55%;
406+ --cyan-5-hsl: 188 72% 47%;
407+ --cyan-6-hsl: 187 80% 42%;
408+ --cyan-7-hsl: 188 83% 37%;
409+ --cyan-8-hsl: 189 85% 32%;
410+ --cyan-9-hsl: 189 85% 28%;
411+ --teal-0-hsl: 161 79% 95%;
412+ --teal-1-hsl: 160 85% 87%;
413+ --teal-2-hsl: 162 78% 77%;
414+ --teal-3-hsl: 162 72% 65%;
415+ --teal-4-hsl: 162 68% 54%;
416+ --teal-5-hsl: 162 73% 46%;
417+ --teal-6-hsl: 162 82% 40%;
418+ --teal-7-hsl: 162 87% 35%;
419+ --teal-8-hsl: 162 88% 30%;
420+ --teal-9-hsl: 162 88% 26%;
421+ --green-0-hsl: 131 67% 95%;
422+ --green-1-hsl: 128 76% 90%;
423+ --green-2-hsl: 128 71% 82%;
424+ --green-3-hsl: 129 68% 73%;
425+ --green-4-hsl: 130 61% 64%;
426+ --green-5-hsl: 130 57% 56%;
427+ --green-6-hsl: 131 50% 50%;
428+ --green-7-hsl: 131 53% 46%;
429+ --green-8-hsl: 131 54% 40%;
430+ --green-9-hsl: 132 52% 35%;
431+ --lime-0-hsl: 79 81% 94%;
432+ --lime-1-hsl: 80 83% 88%;
433+ --lime-2-hsl: 81 81% 80%;
434+ --lime-3-hsl: 82 75% 69%;
435+ --lime-4-hsl: 83 73% 59%;
436+ --lime-5-hsl: 84 69% 51%;
437+ --lime-6-hsl: 85 74% 45%;
438+ --lime-7-hsl: 85 79% 40%;
439+ --lime-8-hsl: 86 84% 36%;
440+ --lime-9-hsl: 85 84% 32%;
441+ --yellow-0-hsl: 50 100% 93%;
442+ --yellow-1-hsl: 49 100% 87%;
443+ --yellow-2-hsl: 49 100% 80%;
444+ --yellow-3-hsl: 48 100% 70%;
445+ --yellow-4-hsl: 47 100% 62%;
446+ --yellow-5-hsl: 45 97% 54%;
447+ --yellow-6-hsl: 42 96% 50%;
448+ --yellow-7-hsl: 39 100% 48%;
449+ --yellow-8-hsl: 35 100% 47%;
450+ --yellow-9-hsl: 31 100% 45%;
451+ --orange-0-hsl: 34 100% 95%;
452+ --orange-1-hsl: 33 100% 90%;
453+ --orange-2-hsl: 33 100% 83%;
454+ --orange-3-hsl: 32 100% 74%;
455+ --orange-4-hsl: 31 100% 65%;
456+ --orange-5-hsl: 29 100% 58%;
457+ --orange-6-hsl: 27 98% 54%;
458+ --orange-7-hsl: 24 94% 50%;
459+ --orange-8-hsl: 21 90% 48%;
460+ --orange-9-hsl: 17 87% 45%;
461+ }
462 diff --git a/src/props.colors-hsl.js b/src/props.colors-hsl.js
463new file mode 100644
464index 0000000..80cc139
465--- /dev/null
466+++ b/src/props.colors-hsl.js
467 @@ -0,0 +1,187 @@
468+ /* generated mostly with props.colors.src.js */
469+ export const Gray = {
470+ '--gray-0-hsl': '210 17% 98%',
471+ '--gray-1-hsl': '210 17% 95%',
472+ '--gray-2-hsl': '210 16% 93%',
473+ '--gray-3-hsl': '210 14% 89%',
474+ '--gray-4-hsl': '210 14% 83%',
475+ '--gray-5-hsl': '210 11% 71%',
476+ '--gray-6-hsl': '210 7% 56%',
477+ '--gray-7-hsl': '210 9% 31%',
478+ '--gray-8-hsl': '210 10% 23%',
479+ '--gray-9-hsl': '210 11% 15%',
480+ }
481+
482+ export const Red = {
483+ '--red-0-hsl': '0 100% 98%',
484+ '--red-1-hsl': '0 100% 95%',
485+ '--red-2-hsl': '0 100% 89%',
486+ '--red-3-hsl': '0 100% 83%',
487+ '--red-4-hsl': '0 100% 76%',
488+ '--red-5-hsl': '0 100% 71%',
489+ '--red-6-hsl': '0 94% 65%',
490+ '--red-7-hsl': '0 86% 59%',
491+ '--red-8-hsl': '0 74% 54%',
492+ '--red-9-hsl': '0 65% 48%',
493+ }
494+
495+ export const Pink = {
496+ '--pink-0-hsl': '336 100% 97%',
497+ '--pink-1-hsl': '336 100% 94%',
498+ '--pink-2-hsl': '338 91% 87%',
499+ '--pink-3-hsl': '339 90% 81%',
500+ '--pink-4-hsl': '339 88% 74%',
501+ '--pink-5-hsl': '339 82% 67%',
502+ '--pink-6-hsl': '339 76% 59%',
503+ '--pink-7-hsl': '339 67% 52%',
504+ '--pink-8-hsl': '339 68% 45%',
505+ '--pink-9-hsl': '339 69% 38%',
506+ }
507+
508+ export const Grape = {
509+ '--grape-0-hsl': '280 67% 96%',
510+ '--grape-1-hsl': '287 77% 92%',
511+ '--grape-2-hsl': '288 86% 86%',
512+ '--grape-3-hsl': '289 85% 78%',
513+ '--grape-4-hsl': '288 83% 71%',
514+ '--grape-5-hsl': '288 75% 64%',
515+ '--grape-6-hsl': '288 67% 58%',
516+ '--grape-7-hsl': '288 56% 52%',
517+ '--grape-8-hsl': '288 54% 46%',
518+ '--grape-9-hsl': '288 54% 40%',
519+ }
520+
521+ export const Violet = {
522+ '--violet-0-hsl': '252 100% 97%',
523+ '--violet-1-hsl': '257 100% 93%',
524+ '--violet-2-hsl': '256 100% 87%',
525+ '--violet-3-hsl': '255 94% 79%',
526+ '--violet-4-hsl': '255 93% 72%',
527+ '--violet-5-hsl': '255 91% 67%',
528+ '--violet-6-hsl': '255 86% 63%',
529+ '--violet-7-hsl': '255 78% 60%',
530+ '--violet-8-hsl': '255 67% 55%',
531+ '--violet-9-hsl': '255 53% 50%',
532+ }
533+
534+ export const Indigo = {
535+ '--indigo-0-hsl': '223 100% 96%',
536+ '--indigo-1-hsl': '225 100% 93%',
537+ '--indigo-2-hsl': '228 100% 86%',
538+ '--indigo-3-hsl': '228 100% 78%',
539+ '--indigo-4-hsl': '228 96% 72%',
540+ '--indigo-5-hsl': '228 94% 67%',
541+ '--indigo-6-hsl': '228 89% 63%',
542+ '--indigo-7-hsl': '228 81% 59%',
543+ '--indigo-8-hsl': '228 69% 55%',
544+ '--indigo-9-hsl': '230 57% 50%',
545+ }
546+
547+ export const Blue = {
548+ '--blue-0-hsl': '205 100% 95%',
549+ '--blue-1-hsl': '206 100% 91%',
550+ '--blue-2-hsl': '206 100% 82%',
551+ '--blue-3-hsl': '206 96% 72%',
552+ '--blue-4-hsl': '207 91% 64%',
553+ '--blue-5-hsl': '207 86% 57%',
554+ '--blue-6-hsl': '208 80% 52%',
555+ '--blue-7-hsl': '208 77% 47%',
556+ '--blue-8-hsl': '209 77% 43%',
557+ '--blue-9-hsl': '209 75% 38%',
558+ }
559+
560+ export const Cyan = {
561+ '--cyan-0-hsl': '185 81% 94%',
562+ '--cyan-1-hsl': '185 84% 88%',
563+ '--cyan-2-hsl': '186 77% 77%',
564+ '--cyan-3-hsl': '187 74% 65%',
565+ '--cyan-4-hsl': '187 69% 55%',
566+ '--cyan-5-hsl': '188 72% 47%',
567+ '--cyan-6-hsl': '187 80% 42%',
568+ '--cyan-7-hsl': '188 83% 37%',
569+ '--cyan-8-hsl': '189 85% 32%',
570+ '--cyan-9-hsl': '189 85% 28%',
571+ }
572+
573+ export const Teal = {
574+ '--teal-0-hsl': '161 79% 95%',
575+ '--teal-1-hsl': '160 85% 87%',
576+ '--teal-2-hsl': '162 78% 77%',
577+ '--teal-3-hsl': '162 72% 65%',
578+ '--teal-4-hsl': '162 68% 54%',
579+ '--teal-5-hsl': '162 73% 46%',
580+ '--teal-6-hsl': '162 82% 40%',
581+ '--teal-7-hsl': '162 87% 35%',
582+ '--teal-8-hsl': '162 88% 30%',
583+ '--teal-9-hsl': '162 88% 26%',
584+ }
585+
586+ export const Green = {
587+ '--green-0-hsl': '131 67% 95%',
588+ '--green-1-hsl': '128 76% 90%',
589+ '--green-2-hsl': '128 71% 82%',
590+ '--green-3-hsl': '129 68% 73%',
591+ '--green-4-hsl': '130 61% 64%',
592+ '--green-5-hsl': '130 57% 56%',
593+ '--green-6-hsl': '131 50% 50%',
594+ '--green-7-hsl': '131 53% 46%',
595+ '--green-8-hsl': '131 54% 40%',
596+ '--green-9-hsl': '132 52% 35%',
597+ }
598+
599+ export const Lime = {
600+ '--lime-0-hsl': '79 81% 94%',
601+ '--lime-1-hsl': '80 83% 88%',
602+ '--lime-2-hsl': '81 81% 80%',
603+ '--lime-3-hsl': '82 75% 69%',
604+ '--lime-4-hsl': '83 73% 59%',
605+ '--lime-5-hsl': '84 69% 51%',
606+ '--lime-6-hsl': '85 74% 45%',
607+ '--lime-7-hsl': '85 79% 40%',
608+ '--lime-8-hsl': '86 84% 36%',
609+ '--lime-9-hsl': '85 84% 32%',
610+ }
611+
612+ export const Yellow = {
613+ '--yellow-0-hsl': '50 100% 93%',
614+ '--yellow-1-hsl': '49 100% 87%',
615+ '--yellow-2-hsl': '49 100% 80%',
616+ '--yellow-3-hsl': '48 100% 70%',
617+ '--yellow-4-hsl': '47 100% 62%',
618+ '--yellow-5-hsl': '45 97% 54%',
619+ '--yellow-6-hsl': '42 96% 50%',
620+ '--yellow-7-hsl': '39 100% 48%',
621+ '--yellow-8-hsl': '35 100% 47%',
622+ '--yellow-9-hsl': '31 100% 45%',
623+ }
624+
625+ export const Orange = {
626+ '--orange-0-hsl': '34 100% 95%',
627+ '--orange-1-hsl': '33 100% 90%',
628+ '--orange-2-hsl': '33 100% 83%',
629+ '--orange-3-hsl': '32 100% 74%',
630+ '--orange-4-hsl': '31 100% 65%',
631+ '--orange-5-hsl': '29 100% 58%',
632+ '--orange-6-hsl': '27 98% 54%',
633+ '--orange-7-hsl': '24 94% 50%',
634+ '--orange-8-hsl': '21 90% 48%',
635+ '--orange-9-hsl': '17 87% 45%',
636+ }
637+
638+ const ColorsHSL = {
639+ ...Gray,
640+ ...Red,
641+ ...Pink,
642+ ...Grape,
643+ ...Violet,
644+ ...Indigo,
645+ ...Blue,
646+ ...Cyan,
647+ ...Teal,
648+ ...Green,
649+ ...Lime,
650+ ...Yellow,
651+ ...Orange,
652+ }
653+
654+ export default ColorsHSL
655\ No newline at end of file
656 diff --git a/src/props.colors.js b/src/props.colors.js
657index d6261e0..a577939 100644
658--- a/src/props.colors.js
659+++ b/src/props.colors.js
660 @@ -1,4 +1,4 @@
661- /* generated with props.colors.src.js */
662+ /* generated mostly with props.colors.src.js */
663 export const Gray = {
664 '--gray-0': '#f8f9fa',
665 '--gray-1': '#f1f3f5',
666 diff --git a/src/props.colors.src.js b/src/props.colors.src.js
667index 4949422..840569c 100644
668--- a/src/props.colors.src.js
669+++ b/src/props.colors.src.js
670 @@ -1,4 +1,5 @@
671- import openColor from 'https://cdn.skypack.dev/open-color/open-color.js'
672+ const openColor = (await import('https://cdn.skypack.dev/open-color/open-color.js')).default
673+ const Color = (await import('https://colorjs.io/dist/color.esm.js')).default
674
675 const colors = Object
676 .entries(openColor.theme.colors)
677 @@ -9,16 +10,26 @@ const customizeIncrements = num =>
678 ? num.replaceAll('50', '0')
679 : num.replaceAll('0', '')
680
681+ const hexTOhsl = hex =>
682+ new Color(hex).to('hsl')
683+ .coords.map(Math.round)
684+ .reduce((acc, coord, index) => {
685+ if (index > 0)
686+ return acc += ' ' + coord + '%'
687+ else
688+ return acc += coord
689+ }, '')
690+
691 const capitalizeFirstLetter = string =>
692 string.charAt(0).toUpperCase() + string.slice(1);
693
694- const vars = colors.reduce((root, [color, shades]) => {
695+ const groupedObject = colors.reduce((root, [color, shades]) => {
696 let base = `--${color}-`
697- root += `\n\nconst ${capitalizeFirstLetter(color)} = {`
698+ root += `\n\nexport const ${capitalizeFirstLetter(color)} = {`
699
700 Object.entries(shades).forEach(([num, hex]) =>
701 root += `
702- '${base}${customizeIncrements(num)}': '${hex}',`
703+ ${base}${customizeIncrements(num)}-hsl: '${hexTOhsl(hex)}',`
704 )
705
706 root += '\n}'
707 @@ -26,4 +37,28 @@ const vars = colors.reduce((root, [color, shades]) => {
708 return root
709 }, ``)
710
711- console.log(vars)
712\ No newline at end of file
713+ const channels = colors.reduce((root, [color, shades]) => {
714+ let base = `--${color}-`
715+
716+ Object.entries(shades).forEach(([num, hex]) =>
717+ root += `
718+ ${base}${customizeIncrements(num)}-hsl: '${hexTOhsl(hex)}',`
719+ )
720+
721+ return root
722+ }, ``)
723+
724+ const vars = colors.reduce((root, [color, shades]) => {
725+ let base = `--${color}-`
726+
727+ Object.entries(shades).forEach(([num, hex]) =>
728+ root += `
729+ ${base}${customizeIncrements(num)}: ${hex};`
730+ )
731+
732+ return root
733+ }, ``)
734+
735+ console.log(groupedObject)
736+ // console.log(vars)
737+ // console.log(channels)
738\ No newline at end of file
739 diff --git a/src/props.cyan-hsl.css b/src/props.cyan-hsl.css
740new file mode 100644
741index 0000000..935d6a6
742--- /dev/null
743+++ b/src/props.cyan-hsl.css
744 @@ -0,0 +1,12 @@
745+ :where(html) {
746+ --cyan-0-hsl: 185 81% 94%;
747+ --cyan-1-hsl: 185 84% 88%;
748+ --cyan-2-hsl: 186 77% 77%;
749+ --cyan-3-hsl: 187 74% 65%;
750+ --cyan-4-hsl: 187 69% 55%;
751+ --cyan-5-hsl: 188 72% 47%;
752+ --cyan-6-hsl: 187 80% 42%;
753+ --cyan-7-hsl: 188 83% 37%;
754+ --cyan-8-hsl: 189 85% 32%;
755+ --cyan-9-hsl: 189 85% 28%;
756+ }
757 diff --git a/src/props.grape-hsl.css b/src/props.grape-hsl.css
758new file mode 100644
759index 0000000..0f23b89
760--- /dev/null
761+++ b/src/props.grape-hsl.css
762 @@ -0,0 +1,12 @@
763+ :where(html) {
764+ --grape-0-hsl: 280 67% 96%;
765+ --grape-1-hsl: 287 77% 92%;
766+ --grape-2-hsl: 288 86% 86%;
767+ --grape-3-hsl: 289 85% 78%;
768+ --grape-4-hsl: 288 83% 71%;
769+ --grape-5-hsl: 288 75% 64%;
770+ --grape-6-hsl: 288 67% 58%;
771+ --grape-7-hsl: 288 56% 52%;
772+ --grape-8-hsl: 288 54% 46%;
773+ --grape-9-hsl: 288 54% 40%;
774+ }
775 diff --git a/src/props.gray-hsl.css b/src/props.gray-hsl.css
776new file mode 100644
777index 0000000..547830b
778--- /dev/null
779+++ b/src/props.gray-hsl.css
780 @@ -0,0 +1,12 @@
781+ :where(html) {
782+ --gray-0-hsl: 210 17% 98%;
783+ --gray-1-hsl: 210 17% 95%;
784+ --gray-2-hsl: 210 16% 93%;
785+ --gray-3-hsl: 210 14% 89%;
786+ --gray-4-hsl: 210 14% 83%;
787+ --gray-5-hsl: 210 11% 71%;
788+ --gray-6-hsl: 210 7% 56%;
789+ --gray-7-hsl: 210 9% 31%;
790+ --gray-8-hsl: 210 10% 23%;
791+ --gray-9-hsl: 210 11% 15%;
792+ }
793 diff --git a/src/props.green-hsl.css b/src/props.green-hsl.css
794new file mode 100644
795index 0000000..90115a8
796--- /dev/null
797+++ b/src/props.green-hsl.css
798 @@ -0,0 +1,12 @@
799+ :where(html) {
800+ --green-0-hsl: 131 67% 95%;
801+ --green-1-hsl: 128 76% 90%;
802+ --green-2-hsl: 128 71% 82%;
803+ --green-3-hsl: 129 68% 73%;
804+ --green-4-hsl: 130 61% 64%;
805+ --green-5-hsl: 130 57% 56%;
806+ --green-6-hsl: 131 50% 50%;
807+ --green-7-hsl: 131 53% 46%;
808+ --green-8-hsl: 131 54% 40%;
809+ --green-9-hsl: 132 52% 35%;
810+ }
811 diff --git a/src/props.indigo-hsl.css b/src/props.indigo-hsl.css
812new file mode 100644
813index 0000000..c2a4cd9
814--- /dev/null
815+++ b/src/props.indigo-hsl.css
816 @@ -0,0 +1,12 @@
817+ :where(html) {
818+ --indigo-0-hsl: 223 100% 96%;
819+ --indigo-1-hsl: 225 100% 93%;
820+ --indigo-2-hsl: 228 100% 86%;
821+ --indigo-3-hsl: 228 100% 78%;
822+ --indigo-4-hsl: 228 96% 72%;
823+ --indigo-5-hsl: 228 94% 67%;
824+ --indigo-6-hsl: 228 89% 63%;
825+ --indigo-7-hsl: 228 81% 59%;
826+ --indigo-8-hsl: 228 69% 55%;
827+ --indigo-9-hsl: 230 57% 50%;
828+ }
829 diff --git a/src/props.lime-hsl.css b/src/props.lime-hsl.css
830new file mode 100644
831index 0000000..db8fe78
832--- /dev/null
833+++ b/src/props.lime-hsl.css
834 @@ -0,0 +1,12 @@
835+ :where(html) {
836+ --lime-0-hsl: 79 81% 94%;
837+ --lime-1-hsl: 80 83% 88%;
838+ --lime-2-hsl: 81 81% 80%;
839+ --lime-3-hsl: 82 75% 69%;
840+ --lime-4-hsl: 83 73% 59%;
841+ --lime-5-hsl: 84 69% 51%;
842+ --lime-6-hsl: 85 74% 45%;
843+ --lime-7-hsl: 85 79% 40%;
844+ --lime-8-hsl: 86 84% 36%;
845+ --lime-9-hsl: 85 84% 32%;
846+ }
847 diff --git a/src/props.orange-hsl.css b/src/props.orange-hsl.css
848new file mode 100644
849index 0000000..aa66fff
850--- /dev/null
851+++ b/src/props.orange-hsl.css
852 @@ -0,0 +1,12 @@
853+ :where(html) {
854+ --orange-0-hsl: 34 100% 95%;
855+ --orange-1-hsl: 33 100% 90%;
856+ --orange-2-hsl: 33 100% 83%;
857+ --orange-3-hsl: 32 100% 74%;
858+ --orange-4-hsl: 31 100% 65%;
859+ --orange-5-hsl: 29 100% 58%;
860+ --orange-6-hsl: 27 98% 54%;
861+ --orange-7-hsl: 24 94% 50%;
862+ --orange-8-hsl: 21 90% 48%;
863+ --orange-9-hsl: 17 87% 45%;
864+ }
865 diff --git a/src/props.pink-hsl.css b/src/props.pink-hsl.css
866new file mode 100644
867index 0000000..b33b8be
868--- /dev/null
869+++ b/src/props.pink-hsl.css
870 @@ -0,0 +1,12 @@
871+ :where(html) {
872+ --pink-0-hsl: 336 100% 97%;
873+ --pink-1-hsl: 336 100% 94%;
874+ --pink-2-hsl: 338 91% 87%;
875+ --pink-3-hsl: 339 90% 81%;
876+ --pink-4-hsl: 339 88% 74%;
877+ --pink-5-hsl: 339 82% 67%;
878+ --pink-6-hsl: 339 76% 59%;
879+ --pink-7-hsl: 339 67% 52%;
880+ --pink-8-hsl: 339 68% 45%;
881+ --pink-9-hsl: 339 69% 38%;
882+ }
883 diff --git a/src/props.red-hsl.css b/src/props.red-hsl.css
884new file mode 100644
885index 0000000..9fcf2ef
886--- /dev/null
887+++ b/src/props.red-hsl.css
888 @@ -0,0 +1,12 @@
889+ :where(html) {
890+ --red-0-hsl: 0 100% 98%;
891+ --red-1-hsl: 0 100% 95%;
892+ --red-2-hsl: 0 100% 89%;
893+ --red-3-hsl: 0 100% 83%;
894+ --red-4-hsl: 0 100% 76%;
895+ --red-5-hsl: 0 100% 71%;
896+ --red-6-hsl: 0 94% 65%;
897+ --red-7-hsl: 0 86% 59%;
898+ --red-8-hsl: 0 74% 54%;
899+ --red-9-hsl: 0 65% 48%;
900+ }
901 diff --git a/src/props.teal-hsl.css b/src/props.teal-hsl.css
902new file mode 100644
903index 0000000..abc38c1
904--- /dev/null
905+++ b/src/props.teal-hsl.css
906 @@ -0,0 +1,12 @@
907+ :where(html) {
908+ --teal-0-hsl: 161 79% 95%;
909+ --teal-1-hsl: 160 85% 87%;
910+ --teal-2-hsl: 162 78% 77%;
911+ --teal-3-hsl: 162 72% 65%;
912+ --teal-4-hsl: 162 68% 54%;
913+ --teal-5-hsl: 162 73% 46%;
914+ --teal-6-hsl: 162 82% 40%;
915+ --teal-7-hsl: 162 87% 35%;
916+ --teal-8-hsl: 162 88% 30%;
917+ --teal-9-hsl: 162 88% 26%;
918+ }
919 diff --git a/src/props.violet-hsl.css b/src/props.violet-hsl.css
920new file mode 100644
921index 0000000..6c2a7bd
922--- /dev/null
923+++ b/src/props.violet-hsl.css
924 @@ -0,0 +1,12 @@
925+ :where(html) {
926+ --violet-0-hsl: 252 100% 97%;
927+ --violet-1-hsl: 257 100% 93%;
928+ --violet-2-hsl: 256 100% 87%;
929+ --violet-3-hsl: 255 94% 79%;
930+ --violet-4-hsl: 255 93% 72%;
931+ --violet-5-hsl: 255 91% 67%;
932+ --violet-6-hsl: 255 86% 63%;
933+ --violet-7-hsl: 255 78% 60%;
934+ --violet-8-hsl: 255 67% 55%;
935+ --violet-9-hsl: 255 53% 50%;
936+ }
937 diff --git a/src/props.yellow-hsl.css b/src/props.yellow-hsl.css
938new file mode 100644
939index 0000000..5937049
940--- /dev/null
941+++ b/src/props.yellow-hsl.css
942 @@ -0,0 +1,12 @@
943+ :where(html) {
944+ --yellow-0-hsl: 50 100% 93%;
945+ --yellow-1-hsl: 49 100% 87%;
946+ --yellow-2-hsl: 49 100% 80%;
947+ --yellow-3-hsl: 48 100% 70%;
948+ --yellow-4-hsl: 47 100% 62%;
949+ --yellow-5-hsl: 45 97% 54%;
950+ --yellow-6-hsl: 42 96% 50%;
951+ --yellow-7-hsl: 39 100% 48%;
952+ --yellow-8-hsl: 35 100% 47%;
953+ --yellow-9-hsl: 31 100% 45%;
954+ }
955 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
956index 2f25610..17e43f8 100644
957--- a/test/basic.test.cjs
958+++ b/test/basic.test.cjs
959 @@ -3,7 +3,7 @@ const OpenProps = require('../dist/open-props.cjs')
960 const OPtokens = require('../open-props.tokens.json')
961
962 test('Should have an all included import', t => {
963- t.is(Object.keys(OpenProps).length, 378)
964+ t.is(Object.keys(OpenProps).length, 508)
965 })
966
967 test('Import should have animations', async t => {