Author: Brian Michael Poblete [brianmp.dev@gmail.com]
Committer: GitHub [noreply@github.com] Sat, 09 Mar 2024 22:58:27 +0000
Hash: 7c02b8ace95bd27b1e4c1a6352ab605444986e1f
Timestamp: Sat, 09 Mar 2024 22:58:27 +0000 (6 months ago)

+732 -376 +/-8 browse
Implement clickable color swatches to copy color props to clipboard (#476) 
Implement clickable color swatches to copy color props to clipboard (#476)

* replace color swatch spans with buttons

* add click to copy functionality

* update color swatch css for use with buttons

* add basic markup and rough styles for copy option selector

* move color copy css to separate file

* move javascript to separate file

* add tooltip functionality and styles

* update index.css for tooltips

* implement selecting format for copied color

* change tooltip style to match buttons

* clean up js

* move checkbox outside of label and refactor css to match

* started implementing roving-ux

* replaced color swatches with lists

* style copy type selectors

* added missing 12th color swatch

* remove unnecessary classes

* update package-lock

* fix mobile layout and make tooltips unclickable

* fix animation not playing when first clicking

* fix misshapen outline on tabover

* fix color of copy options when light mode

* fix ease squish animation speed

* change copy example to reflect default selected option

* Apply suggestions from code review

Co-authored-by: Adam Argyle <argyle@google.com>

* move color conversion to separate file

---------

Co-authored-by: Adam Argyle <argyle@google.com>
1diff --git a/docsite/color-copy.css b/docsite/color-copy.css
2new file mode 100644
3index 0000000..1ee62b5
4--- /dev/null
5+++ b/docsite/color-copy.css
6 @@ -0,0 +1,106 @@
7+ .copy-options {
8+ font-family: var(--font-sans);
9+ display: flex;
10+ flex-wrap: wrap;
11+ flex-direction: row;
12+ gap: var(--size-3);
13+
14+ & .example {
15+ font-style: italic;
16+ color: var(--text-2);
17+ }
18+
19+ [data-theme="light"] & .example {
20+ color: var(--gray-7);
21+ }
22+
23+ & input:is(:disabled) {
24+ cursor: not-allowed;
25+
26+ &~label {
27+ color: var(--gray-5);
28+ cursor: not-allowed;
29+ }
30+ }
31+
32+ @media (--md-n-below) {
33+ flex-direction: column;
34+ }
35+ }
36+
37+ .options {
38+ display: flex;
39+ flex-wrap: wrap;
40+ gap: var(--size-7);
41+ align-items: center;
42+ justify-content: flex-start;
43+ padding-inline: var(--size-4);
44+ padding-block: var(--size-3);
45+ margin: var(--size-2) 0;
46+ overflow: auto;
47+ border-radius: var(--radius-conditional-2);
48+ border: var(--border-size-1) solid var(--surface-3);
49+ background: white;
50+ box-shadow: var(--shadow-4);
51+
52+ [data-theme="dark"] & {
53+ background: var(--surface-2);
54+ box-shadow: var(--shadow-3);
55+ }
56+
57+ @media (max-width: 768px) {
58+ flex-direction: column;
59+ align-items: start;
60+ }
61+ }
62+
63+ .options:nth-child(2) {
64+ gap: var(--size-5);
65+ }
66+
67+ .input-group {
68+ display: flex;
69+ align-items: center;
70+ /* justify-content: flex-start; */
71+ & > label {
72+ padding-inline-start: var(--size-2);
73+ }
74+ }
75+
76+ .color-format:has(:disabled) {
77+ color: var(--gray-5);
78+ }
79+
80+ .tooltip {
81+ position: absolute;
82+ left: 50%;
83+ transform: translateX(-50%);
84+ top: -100%;
85+ min-width: max-content;
86+ border-radius: var(--radius-round);
87+ padding: var(--size-1) var(--size-2);
88+ font-size: var(--size-2);
89+ background-color: #000;
90+ color: #fff;
91+ z-index: 9999;
92+ pointer-events: none;
93+
94+ }
95+
96+ .tooltip-show {
97+ animation: var(--animation-fade-in) forwards;
98+ animation-duration: 0.5s;
99+ }
100+
101+ .tooltip-hide {
102+ animation: var(--animation-fade-out) forwards;
103+ animation-duration: 0.5s;
104+ }
105+
106+ .color-swatch:has(.tooltip) {
107+ position: relative;
108+ }
109+
110+ .color-swatch-list {
111+ list-style: none;
112+ }
113\ No newline at end of file
114 diff --git a/docsite/index.css b/docsite/index.css
115index cfce4b7..31b0f72 100644
116--- a/docsite/index.css
117+++ b/docsite/index.css
118 @@ -7,6 +7,7 @@
119 @import "../src/props.masks.corner-cuts.css";
120
121 @import "./syntax-highlight.css";
122+ @import "./color-copy.css";
123
124 :root {
125 --max-inline-body: calc(100vw - (var(--size-8) * 2));
126 @@ -456,7 +457,7 @@ pre[class*="language-"] {
127 & > h4 {
128 counter-reset: basic -1;
129 }
130-
131+
132 & > h4::before {
133 display: none;
134 }
135 @@ -512,40 +513,44 @@ pre[class*="language-"] {
136 }
137 }
138
139- .color-swatch {
140+ .color-swatch-list {
141+ padding-inline-start: 0;
142+ }
143+
144+ .color-swatch-list > li {
145+ --scale: 1.5;
146 --size: var(--size-5);
147- border-radius: var(--radius-round);
148- box-shadow: var(--inner-shadow-0);
149+ padding-inline-start: 0;
150 inline-size: 6.7%;
151 block-size: var(--size);
152- display: grid;
153- place-content: center;
154- color: black;
155- text-shadow: 0 0 1px hsl(0 0% 0% / 40%);
156
157- &::before {
158- opacity: 0;
159- transition: opacity .4s var(--ease-out-3);
160- }
161-
162- &:nth-child(n+8)::before {
163+ &:nth-child(n+8)>button::before {
164 color: white;
165 }
166
167- &:is(:hover,:focus) {
168- transform: scale(1.5);
169+ &:is(:hover, :focus-visible),
170+ &:has(button:is(:focus-visible))
171+ {
172+ transform: scale(var(--scale));
173 transition-delay: 0s;
174 transition-timing-function: var(--ease-elastic-out-3);
175
176- &::before {
177+ & > button::before {
178 opacity: 1;
179 }
180 }
181
182+ &:is(:active) {
183+ transform: scale(calc(var(--scale) * .88)) !important;
184+ }
185+
186 @media (--motionOK) {
187- transition: transform 2s var(--ease-squish-5) 3s;
188+ transition: transform var(--ease-squish-5);
189+ transition-duration: 2s;
190+ transition-delay: 3s;
191
192- &:is(:hover,:focus) {
193+ &:is(:hover, :focus-visible),
194+ &:has(button:is(:focus-visible)) {
195 transition-duration: .1s;
196 }
197 }
198 @@ -553,9 +558,30 @@ pre[class*="language-"] {
199 @media (--md-n-below) {
200 --size: var(--size-3);
201 }
202+
203 @media (--xs-n-below) {
204 --size: var(--size-2);
205 }
206+
207+ }
208+
209+ .color-swatch {
210+ padding-inline: 0;
211+ border-radius: var(--radius-round);
212+ box-shadow: var(--inner-shadow-0);
213+ inline-size: 100%;
214+ block-size: var(--size);
215+ display: grid;
216+ place-content: center;
217+ color: black;
218+ text-shadow: 0 0 1px hsl(0 0% 0% / 40%);
219+
220+ &::before {
221+ opacity: 0;
222+ transition: opacity .4s var(--ease-out-3);
223+ line-height: 1;
224+ }
225+
226 }
227
228 .ui-gradients {
229 @@ -1245,13 +1271,18 @@ pre[class*="language-"] {
230
231 .count-em {
232
233- &::before {
234- content: '';
235- counter-reset: basic;
236- position: absolute;
237- }
238+ &:not(.tooltip, li)::before {
239+ content: '';
240+ counter-reset: basic -1;
241+ position: absolute;
242+ }
243+
244+ & > *:not(.tooltip, li)::before {
245+ counter-increment: basic;
246+ content: counter(basic);
247+ }
248
249- & > *::before {
250+ & button::before {
251 counter-increment: basic;
252 content: counter(basic);
253 }
254 diff --git a/docsite/index.html b/docsite/index.html
255index 6ae569e..a8faaf9 100644
256--- a/docsite/index.html
257+++ b/docsite/index.html
258 @@ -56,13 +56,13 @@
259 <circle class="op-icon-o" cx="100" cy="100" r="85" fill="transparent" stroke-width="25"/>
260 </svg>
261 <span class="op-logo">
262- <span>Open</span>
263+ <span>Open</span>
264 <span>Props</span>
265 </span>
266 </a>
267 <a href="#getting-started">Get Started</a>
268 <a class="md-hidden" href="https://stackblitz.com/@argyleink/collections/open-props">
269- Try in browser
270+ Try in browser
271 <small class="green-badge">RAD</small>
272 </a>
273 <button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
274 @@ -550,8 +550,8 @@
275 <section class="dogfood place-full block-wrap">
276 <header>
277 <h2>
278- This site
279- <br>is built
280+ This site
281+ <br>is built
282 <br>with Open Props.
283 </h2>
284 </header>
285 @@ -945,10 +945,10 @@
286 </div>
287 </div>
288 </details>
289-
290+
291 <details class="started-details">
292 <summary>PostCSS</summary>
293-
294+
295 <div>
296 <h6>CSS Imports</h6>
297 <pre class="language-css"><code>
298 @@ -1004,7 +1004,7 @@
299 import OpenProps from 'open-props/src'; // unbundled ES module
300 import Colors from 'open-props/src/colors';
301
302- // object notation access is special to OpenProps
303+ // object notation access is special to OpenProps
304 console.info(OpenProps.size1);
305 console.info(OpenProps['--size-1']);
306
307 @@ -1062,7 +1062,7 @@
308 // postcss.config.js
309 const postcssJitProps = require('postcss-jit-props');
310 const OpenProps = require('open-props');
311-
312+
313 module.exports = {
314 plugins: [
315 postcssJitProps(OpenProps),
316 @@ -1106,14 +1106,14 @@
317 npm run gen:shadowdom // src files with `:host` instead of `html`
318 npm run gen:nowhere // src files without `:where()`
319 npm run gen:prefixed // each prop prefixed with `op`, like `--op-font-size-1`
320-
321+
322 // full custom! pass args with node to the props.js script
323 node props.js 'ns' true ':root' 'my'
324 ⇣
325 // arg1: default '', is a custom namespace, props will be --ns-gray-1
326 // arg2: default false, indicates wrapping in :where() or not
327 // arg3: default '', set a custom selector like :scope, .my-class, etc
328- // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
329+ // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
330 </code></pre>
331 </div>
332 <div>
333 @@ -1191,13 +1191,13 @@
334 <summary>Sublime Text</summary>
335 <ol>
336 <li>
337- There are number of ways with which the autocomplete engine of Sublime Text can be extended.
338- You can decide to use the <a href="https://www.sublimetext.com/docs/completions.html#completion-files" target="_blank">completion files</a>,
339- <a href="https://www.sublimetext.com/docs/completions.html#snippets" target="_blank">snippets</a> or
340- <a href="https://www.sublimetext.com/docs/completions.html#plugins" target="_blank">plugins</a>.
341+ There are number of ways with which the autocomplete engine of Sublime Text can be extended.
342+ You can decide to use the <a href="https://www.sublimetext.com/docs/completions.html#completion-files" target="_blank">completion files</a>,
343+ <a href="https://www.sublimetext.com/docs/completions.html#snippets" target="_blank">snippets</a> or
344+ <a href="https://www.sublimetext.com/docs/completions.html#plugins" target="_blank">plugins</a>.
345 </li>
346 <li>
347- An approach that is less strenous is the "completion file" approach.
348+ An approach that is less strenous is the "completion file" approach.
349 Here, all you'd be required to do is point the `scope` keyword in the .sublime-completions file to the open-props classes in the node_modules folder like so:
350 </li>
351 <pre class="language-js"><code>
352 @@ -1216,7 +1216,7 @@
353 "scope": "path/to/your/variables",
354 }
355 </code></pre>
356- <li>Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via
357+ <li>Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via
358 <b>Preferences > Settings</b>, then you'll modify the file to include the snippet below &mdash; replacing "source" with the path to your variables.
359 </li>
360 <pre class="language-js"><code>
361 @@ -1319,311 +1319,350 @@
362 </code></pre>
363 </div>
364 </div>
365+
366+ <div class="copy-options">
367+ <form>
368+ <p>Copy type</p>
369+ <div class="options">
370+ <div class="input-group">
371+ <input type="radio" name="copy-format" id="prop" checked>
372+ <label for="prop">
373+ CSS Property <span class="example">Ex: var(--gray-1)</span>
374+ </label>
375+ </div>
376+ <div class="input-group">
377+ <input type="radio" name="copy-format" id="color-code">
378+ <label for="color-code">
379+ Color Code <span class="example">Ex: rgb(3, 5, 7)</span>
380+ </label>
381+ </div>
382+ </div>
383+ </form>
384+
385+ <form>
386+ <p>Copy format</p>
387+ <div class="options">
388+ <div class="input-group">
389+ <input type="radio" name="color-format" id="rgb" checked disabled>
390+ <label for="rgb">RGB</label>
391+ </div>
392+ <div class="input-group">
393+ <input type="radio" name="color-format" id="hex" disabled>
394+ <label for="hex">HEX</label>
395+ </div>
396+ <div class="input-group">
397+ <input type="radio" name="color-format" id="hsl" disabled>
398+ <label for="hsl">HSL</label>
399+ </div>
400+ </div>
401+ </form>
402+ </div>
403+
404 <article class="just-stretch">
405- <div class="open-colors count-em">
406+ <ul class="open-colors count-em color-swatch-list">
407 <h4>Gray</h4>
408- <span class="color-swatch" style="background-color: var(--gray-0)"></span>
409- <span class="color-swatch" style="background-color: var(--gray-1)"></span>
410- <span class="color-swatch" style="background-color: var(--gray-2)"></span>
411- <span class="color-swatch" style="background-color: var(--gray-3)"></span>
412- <span class="color-swatch" style="background-color: var(--gray-4)"></span>
413- <span class="color-swatch" style="background-color: var(--gray-5)"></span>
414- <span class="color-swatch" style="background-color: var(--gray-6)"></span>
415- <span class="color-swatch" style="background-color: var(--gray-7)"></span>
416- <span class="color-swatch" style="background-color: var(--gray-8)"></span>
417- <span class="color-swatch" style="background-color: var(--gray-9)"></span>
418- <span class="color-swatch" style="background-color: var(--gray-10)"></span>
419- <span class="color-swatch" style="background-color: var(--gray-11)"></span>
420- <span class="color-swatch" style="background-color: var(--gray-12)"></span>
421- </div>
422- <div class="open-colors count-em">
423- <h4>Stone</h4>
424- <span class="color-swatch" style="background-color: var(--stone-0)"></span>
425- <span class="color-swatch" style="background-color: var(--stone-1)"></span>
426- <span class="color-swatch" style="background-color: var(--stone-2)"></span>
427- <span class="color-swatch" style="background-color: var(--stone-3)"></span>
428- <span class="color-swatch" style="background-color: var(--stone-4)"></span>
429- <span class="color-swatch" style="background-color: var(--stone-5)"></span>
430- <span class="color-swatch" style="background-color: var(--stone-6)"></span>
431- <span class="color-swatch" style="background-color: var(--stone-7)"></span>
432- <span class="color-swatch" style="background-color: var(--stone-8)"></span>
433- <span class="color-swatch" style="background-color: var(--stone-9)"></span>
434- <span class="color-swatch" style="background-color: var(--stone-10)"></span>
435- <span class="color-swatch" style="background-color: var(--stone-11)"></span>
436- <span class="color-swatch" style="background-color: var(--stone-12)"></span>
437- </div>
438- <div class="open-colors count-em">
439+ <li> <button class="color-swatch" style="background-color: var(--gray-0);" aria-label="gray 0"></button> </li>
440+ <li> <button class="color-swatch" style="background-color: var(--gray-1);" aria-label="gray 1"></button> </li>
441+ <li> <button class="color-swatch" style="background-color: var(--gray-2);" aria-label="gray 2"></button> </li>
442+ <li> <button class="color-swatch" style="background-color: var(--gray-3);" aria-label="gray 3"></button> </li>
443+ <li> <button class="color-swatch" style="background-color: var(--gray-4);" aria-label="gray 4"></button> </li>
444+ <li> <button class="color-swatch" style="background-color: var(--gray-5);" aria-label="gray 5"></button> </li>
445+ <li> <button class="color-swatch" style="background-color: var(--gray-6);" aria-label="gray 6"></button> </li>
446+ <li> <button class="color-swatch" style="background-color: var(--gray-7);" aria-label="gray 7"></button> </li>
447+ <li> <button class="color-swatch" style="background-color: var(--gray-8);" aria-label="gray 8"></button> </li>
448+ <li> <button class="color-swatch" style="background-color: var(--gray-9);" aria-label="gray 9"></button> </li>
449+ <li> <button class="color-swatch" style="background-color: var(--gray-10);" aria-label="gray 10"></button> </li>
450+ <li> <button class="color-swatch" style="background-color: var(--gray-11);" aria-label="gray 11"></button> </li>
451+ <li> <button class="color-swatch" style="background-color: var(--gray-12);" aria-label="gray 12"></button> </li>
452+ </ul>
453+ <ul class="open-colors count-em color-swatch-list">
454+ <h4>Stone</h4>
455+ <li> <button class="color-swatch" style="background-color: var(--stone-0)" aria-label="stone 0"></button> </li>
456+ <li> <button class="color-swatch" style="background-color: var(--stone-1)" aria-label="stone 1"></button> </li>
457+ <li> <button class="color-swatch" style="background-color: var(--stone-2)" aria-label="stone 2"></button> </li>
458+ <li> <button class="color-swatch" style="background-color: var(--stone-3)" aria-label="stone 3"></button> </li>
459+ <li> <button class="color-swatch" style="background-color: var(--stone-4)" aria-label="stone 4"></button> </li>
460+ <li> <button class="color-swatch" style="background-color: var(--stone-5)" aria-label="stone 5"></button> </li>
461+ <li> <button class="color-swatch" style="background-color: var(--stone-6)" aria-label="stone 6"></button> </li>
462+ <li> <button class="color-swatch" style="background-color: var(--stone-7)" aria-label="stone 7"></button> </li>
463+ <li> <button class="color-swatch" style="background-color: var(--stone-8)" aria-label="stone 8"></button> </li>
464+ <li> <button class="color-swatch" style="background-color: var(--stone-9)" aria-label="stone 9"></button> </li>
465+ <li> <button class="color-swatch" style="background-color: var(--stone-10)" aria-label="stone 10"></button> </li>
466+ <li> <button class="color-swatch" style="background-color: var(--stone-11)" aria-label="stone 11"></button> </li>
467+ <li> <button class="color-swatch" style="background-color: var(--stone-12)" aria-label="stone 12"></button> </li>
468+ </ul>
469+ <ul class="open-colors count-em color-swatch-list">
470 <h4>Red</h4>
471- <span class="color-swatch" style="background-color: var(--red-0)"></span>
472- <span class="color-swatch" style="background-color: var(--red-1)"></span>
473- <span class="color-swatch" style="background-color: var(--red-2)"></span>
474- <span class="color-swatch" style="background-color: var(--red-3)"></span>
475- <span class="color-swatch" style="background-color: var(--red-4)"></span>
476- <span class="color-swatch" style="background-color: var(--red-5)"></span>
477- <span class="color-swatch" style="background-color: var(--red-6)"></span>
478- <span class="color-swatch" style="background-color: var(--red-7)"></span>
479- <span class="color-swatch" style="background-color: var(--red-8)"></span>
480- <span class="color-swatch" style="background-color: var(--red-9)"></span>
481- <span class="color-swatch" style="background-color: var(--red-10)"></span>
482- <span class="color-swatch" style="background-color: var(--red-11)"></span>
483- <span class="color-swatch" style="background-color: var(--red-12)"></span>
484- </div>
485- <div class="open-colors count-em">
486+ <li> <button class="color-swatch" style="background-color: var(--red-0)" aria-label="red 0"></button> </li>
487+ <li> <button class="color-swatch" style="background-color: var(--red-1)" aria-label="red 1"></button> </li>
488+ <li> <button class="color-swatch" style="background-color: var(--red-2)" aria-label="red 2"></button> </li>
489+ <li> <button class="color-swatch" style="background-color: var(--red-3)" aria-label="red 3"></button> </li>
490+ <li> <button class="color-swatch" style="background-color: var(--red-4)" aria-label="red 4"></button> </li>
491+ <li> <button class="color-swatch" style="background-color: var(--red-5)" aria-label="red 5"></button> </li>
492+ <li> <button class="color-swatch" style="background-color: var(--red-6)" aria-label="red 6"></button> </li>
493+ <li> <button class="color-swatch" style="background-color: var(--red-7)" aria-label="red 7"></button> </li>
494+ <li> <button class="color-swatch" style="background-color: var(--red-8)" aria-label="red 8"></button> </li>
495+ <li> <button class="color-swatch" style="background-color: var(--red-9)" aria-label="red 9"></button> </li>
496+ <li> <button class="color-swatch" style="background-color: var(--red-10)" aria-label="red 10"></button> </li>
497+ <li> <button class="color-swatch" style="background-color: var(--red-11)" aria-label="red 11"></button> </li>
498+ <li> <button class="color-swatch" style="background-color: var(--red-12)" aria-label="red 12"></button> </li>
499+ </ul>
500+ <ul class="open-colors count-em color-swatch-list">
501 <h4>Pink</h4>
502- <span class="color-swatch" style="background-color: var(--pink-0)"></span>
503- <span class="color-swatch" style="background-color: var(--pink-1)"></span>
504- <span class="color-swatch" style="background-color: var(--pink-2)"></span>
505- <span class="color-swatch" style="background-color: var(--pink-3)"></span>
506- <span class="color-swatch" style="background-color: var(--pink-4)"></span>
507- <span class="color-swatch" style="background-color: var(--pink-5)"></span>
508- <span class="color-swatch" style="background-color: var(--pink-6)"></span>
509- <span class="color-swatch" style="background-color: var(--pink-7)"></span>
510- <span class="color-swatch" style="background-color: var(--pink-8)"></span>
511- <span class="color-swatch" style="background-color: var(--pink-9)"></span>
512- <span class="color-swatch" style="background-color: var(--pink-10)"></span>
513- <span class="color-swatch" style="background-color: var(--pink-11)"></span>
514- <span class="color-swatch" style="background-color: var(--pink-12)"></span>
515- </div>
516- <div class="open-colors count-em">
517+ <li> <button class="color-swatch" style="background-color: var(--pink-0)" aria-label="pink 0"></button> </li>
518+ <li> <button class="color-swatch" style="background-color: var(--pink-1)" aria-label="pink 1"></button> </li>
519+ <li> <button class="color-swatch" style="background-color: var(--pink-2)" aria-label="pink 2"></button> </li>
520+ <li> <button class="color-swatch" style="background-color: var(--pink-3)" aria-label="pink 3"></button> </li>
521+ <li> <button class="color-swatch" style="background-color: var(--pink-4)" aria-label="pink 4"></button> </li>
522+ <li> <button class="color-swatch" style="background-color: var(--pink-5)" aria-label="pink 5"></button> </li>
523+ <li> <button class="color-swatch" style="background-color: var(--pink-6)" aria-label="pink 6"></button> </li>
524+ <li> <button class="color-swatch" style="background-color: var(--pink-7)" aria-label="pink 7"></button> </li>
525+ <li> <button class="color-swatch" style="background-color: var(--pink-8)" aria-label="pink 8"></button> </li>
526+ <li> <button class="color-swatch" style="background-color: var(--pink-9)" aria-label="pink 9"></button> </li>
527+ <li> <button class="color-swatch" style="background-color: var(--pink-10)" aria-label="pink 10"></button> </li>
528+ <li> <button class="color-swatch" style="background-color: var(--pink-11)" aria-label="pink 11"></button> </li>
529+ <li> <button class="color-swatch" style="background-color: var(--pink-12)" aria-label="pink 12"></button> </li>
530+ </ul>
531+ <ul class="open-colors count-em color-swatch-list">
532 <h4>Purple</h4>
533- <span class="color-swatch" style="background-color: var(--purple-0)"></span>
534- <span class="color-swatch" style="background-color: var(--purple-1)"></span>
535- <span class="color-swatch" style="background-color: var(--purple-2)"></span>
536- <span class="color-swatch" style="background-color: var(--purple-3)"></span>
537- <span class="color-swatch" style="background-color: var(--purple-4)"></span>
538- <span class="color-swatch" style="background-color: var(--purple-5)"></span>
539- <span class="color-swatch" style="background-color: var(--purple-6)"></span>
540- <span class="color-swatch" style="background-color: var(--purple-7)"></span>
541- <span class="color-swatch" style="background-color: var(--purple-8)"></span>
542- <span class="color-swatch" style="background-color: var(--purple-9)"></span>
543- <span class="color-swatch" style="background-color: var(--purple-10)"></span>
544- <span class="color-swatch" style="background-color: var(--purple-11)"></span>
545- <span class="color-swatch" style="background-color: var(--purple-12)"></span>
546- </div>
547- <div class="open-colors count-em">
548+ <li> <button class="color-swatch" style="background-color: var(--purple-0)" aria-label="purple 0"></button> </li>
549+ <li> <button class="color-swatch" style="background-color: var(--purple-1)" aria-label="purple 1"></button> </li>
550+ <li> <button class="color-swatch" style="background-color: var(--purple-2)" aria-label="purple 2"></button> </li>
551+ <li> <button class="color-swatch" style="background-color: var(--purple-3)" aria-label="purple 3"></button> </li>
552+ <li> <button class="color-swatch" style="background-color: var(--purple-4)" aria-label="purple 4"></button> </li>
553+ <li> <button class="color-swatch" style="background-color: var(--purple-5)" aria-label="purple 5"></button> </li>
554+ <li> <button class="color-swatch" style="background-color: var(--purple-6)" aria-label="purple 6"></button> </li>
555+ <li> <button class="color-swatch" style="background-color: var(--purple-7)" aria-label="purple 7"></button> </li>
556+ <li> <button class="color-swatch" style="background-color: var(--purple-8)" aria-label="purple 8"></button> </li>
557+ <li> <button class="color-swatch" style="background-color: var(--purple-9)" aria-label="purple 9"></button> </li>
558+ <li> <button class="color-swatch" style="background-color: var(--purple-10)" aria-label="purple 10"></button> </li>
559+ <li> <button class="color-swatch" style="background-color: var(--purple-11)" aria-label="purple 11"></button> </li>
560+ <li> <button class="color-swatch" style="background-color: var(--purple-12)" aria-label="purple 12"></button> </li>
561+ </ul>
562+ <ul class="open-colors count-em color-swatch-list">
563 <h4>Violet</h4>
564- <span class="color-swatch" style="background-color: var(--violet-0)"></span>
565- <span class="color-swatch" style="background-color: var(--violet-1)"></span>
566- <span class="color-swatch" style="background-color: var(--violet-2)"></span>
567- <span class="color-swatch" style="background-color: var(--violet-3)"></span>
568- <span class="color-swatch" style="background-color: var(--violet-4)"></span>
569- <span class="color-swatch" style="background-color: var(--violet-5)"></span>
570- <span class="color-swatch" style="background-color: var(--violet-6)"></span>
571- <span class="color-swatch" style="background-color: var(--violet-7)"></span>
572- <span class="color-swatch" style="background-color: var(--violet-8)"></span>
573- <span class="color-swatch" style="background-color: var(--violet-9)"></span>
574- <span class="color-swatch" style="background-color: var(--violet-10)"></span>
575- <span class="color-swatch" style="background-color: var(--violet-11)"></span>
576- <span class="color-swatch" style="background-color: var(--violet-12)"></span>
577- </div>
578- <div class="open-colors count-em">
579+ <li> <button class="color-swatch" style="background-color: var(--violet-0)" aria-label="violet 0"></button> </li>
580+ <li> <button class="color-swatch" style="background-color: var(--violet-1)" aria-label="violet 1"></button> </li>
581+ <li> <button class="color-swatch" style="background-color: var(--violet-2)" aria-label="violet 2"></button> </li>
582+ <li> <button class="color-swatch" style="background-color: var(--violet-3)" aria-label="violet 3"></button> </li>
583+ <li> <button class="color-swatch" style="background-color: var(--violet-4)" aria-label="violet 4"></button> </li>
584+ <li> <button class="color-swatch" style="background-color: var(--violet-5)" aria-label="violet 5"></button> </li>
585+ <li> <button class="color-swatch" style="background-color: var(--violet-6)" aria-label="violet 6"></button> </li>
586+ <li> <button class="color-swatch" style="background-color: var(--violet-7)" aria-label="violet 7"></button> </li>
587+ <li> <button class="color-swatch" style="background-color: var(--violet-8)" aria-label="violet 8"></button> </li>
588+ <li> <button class="color-swatch" style="background-color: var(--violet-9)" aria-label="violet 9"></button> </li>
589+ <li> <button class="color-swatch" style="background-color: var(--violet-10)" aria-label="violet 10"></button> </li>
590+ <li> <button class="color-swatch" style="background-color: var(--violet-11)" aria-label="violet 11"></button> </li>
591+ <li> <button class="color-swatch" style="background-color: var(--violet-12)" aria-label="violet 12"></button> </li>
592+ </ul>
593+ <ul class="open-colors count-em color-swatch-list">
594 <h4>Indigo</h4>
595- <span class="color-swatch" style="background-color: var(--indigo-0)"></span>
596- <span class="color-swatch" style="background-color: var(--indigo-1)"></span>
597- <span class="color-swatch" style="background-color: var(--indigo-2)"></span>
598- <span class="color-swatch" style="background-color: var(--indigo-3)"></span>
599- <span class="color-swatch" style="background-color: var(--indigo-4)"></span>
600- <span class="color-swatch" style="background-color: var(--indigo-5)"></span>
601- <span class="color-swatch" style="background-color: var(--indigo-6)"></span>
602- <span class="color-swatch" style="background-color: var(--indigo-7)"></span>
603- <span class="color-swatch" style="background-color: var(--indigo-8)"></span>
604- <span class="color-swatch" style="background-color: var(--indigo-9)"></span>
605- <span class="color-swatch" style="background-color: var(--indigo-10)"></span>
606- <span class="color-swatch" style="background-color: var(--indigo-11)"></span>
607- <span class="color-swatch" style="background-color: var(--indigo-12)"></span>
608- </div>
609- <div class="open-colors count-em">
610+ <li><button class="color-swatch" style="background-color: var(--indigo-0)" aria-label="indigo 0"></button></li>
611+ <li><button class="color-swatch" style="background-color: var(--indigo-1)" aria-label="indigo 1"></button></li>
612+ <li><button class="color-swatch" style="background-color: var(--indigo-2)" aria-label="indigo 2"></button></li>
613+ <li><button class="color-swatch" style="background-color: var(--indigo-3)" aria-label="indigo 3"></button></li>
614+ <li><button class="color-swatch" style="background-color: var(--indigo-4)" aria-label="indigo 4"></button></li>
615+ <li><button class="color-swatch" style="background-color: var(--indigo-5)" aria-label="indigo 5"></button></li>
616+ <li><button class="color-swatch" style="background-color: var(--indigo-6)" aria-label="indigo 6"></button></li>
617+ <li><button class="color-swatch" style="background-color: var(--indigo-7)" aria-label="indigo 7"></button></li>
618+ <li><button class="color-swatch" style="background-color: var(--indigo-8)" aria-label="indigo 8"></button></li>
619+ <li><button class="color-swatch" style="background-color: var(--indigo-9)" aria-label="indigo 9"></button></li>
620+ <li><button class="color-swatch" style="background-color: var(--indigo-10)" aria-label="indigo 10"></button></li>
621+ <li><button class="color-swatch" style="background-color: var(--indigo-11)" aria-label="indigo 11"></button></li>
622+ <li><button class="color-swatch" style="background-color: var(--indigo-12)" aria-label="indigo 12"></button></li>
623+ </ul>
624+ <ul class="open-colors count-em color-swatch-list">
625 <h4>Blue</h4>
626- <span class="color-swatch" style="background-color: var(--blue-0)"></span>
627- <span class="color-swatch" style="background-color: var(--blue-1)"></span>
628- <span class="color-swatch" style="background-color: var(--blue-2)"></span>
629- <span class="color-swatch" style="background-color: var(--blue-3)"></span>
630- <span class="color-swatch" style="background-color: var(--blue-4)"></span>
631- <span class="color-swatch" style="background-color: var(--blue-5)"></span>
632- <span class="color-swatch" style="background-color: var(--blue-6)"></span>
633- <span class="color-swatch" style="background-color: var(--blue-7)"></span>
634- <span class="color-swatch" style="background-color: var(--blue-8)"></span>
635- <span class="color-swatch" style="background-color: var(--blue-9)"></span>
636- <span class="color-swatch" style="background-color: var(--blue-10)"></span>
637- <span class="color-swatch" style="background-color: var(--blue-11)"></span>
638- <span class="color-swatch" style="background-color: var(--blue-12)"></span>
639- </div>
640- <div class="open-colors count-em">
641+ <li><button class="color-swatch" style="background-color: var(--blue-0)" aria-label="blue 0"></button></li>
642+ <li><button class="color-swatch" style="background-color: var(--blue-1)" aria-label="blue 1"></button></li>
643+ <li><button class="color-swatch" style="background-color: var(--blue-2)" aria-label="blue 2"></button></li>
644+ <li><button class="color-swatch" style="background-color: var(--blue-3)" aria-label="blue 3"></button></li>
645+ <li><button class="color-swatch" style="background-color: var(--blue-4)" aria-label="blue 4"></button></li>
646+ <li><button class="color-swatch" style="background-color: var(--blue-5)" aria-label="blue 5"></button></li>
647+ <li><button class="color-swatch" style="background-color: var(--blue-6)" aria-label="blue 6"></button></li>
648+ <li><button class="color-swatch" style="background-color: var(--blue-7)" aria-label="blue 7"></button></li>
649+ <li><button class="color-swatch" style="background-color: var(--blue-8)" aria-label="blue 8"></button></li>
650+ <li><button class="color-swatch" style="background-color: var(--blue-9)" aria-label="blue 9"></button></li>
651+ <li><button class="color-swatch" style="background-color: var(--blue-10)" aria-label="blue 10"></button></li>
652+ <li><button class="color-swatch" style="background-color: var(--blue-11)" aria-label="blue 11"></button></li>
653+ <li><button class="color-swatch" style="background-color: var(--blue-12)" aria-label="blue 12"></button></li>
654+ </ul>
655+ <ul class="open-colors count-em color-swatch-list">
656 <h4>Cyan</h4>
657- <span class="color-swatch" style="background-color: var(--cyan-0)"></span>
658- <span class="color-swatch" style="background-color: var(--cyan-1)"></span>
659- <span class="color-swatch" style="background-color: var(--cyan-2)"></span>
660- <span class="color-swatch" style="background-color: var(--cyan-3)"></span>
661- <span class="color-swatch" style="background-color: var(--cyan-4)"></span>
662- <span class="color-swatch" style="background-color: var(--cyan-5)"></span>
663- <span class="color-swatch" style="background-color: var(--cyan-6)"></span>
664- <span class="color-swatch" style="background-color: var(--cyan-7)"></span>
665- <span class="color-swatch" style="background-color: var(--cyan-8)"></span>
666- <span class="color-swatch" style="background-color: var(--cyan-9)"></span>
667- <span class="color-swatch" style="background-color: var(--cyan-10)"></span>
668- <span class="color-swatch" style="background-color: var(--cyan-11)"></span>
669- <span class="color-swatch" style="background-color: var(--cyan-12)"></span>
670- </div>
671- <div class="open-colors count-em">
672+ <li><button class="color-swatch" style="background-color: var(--cyan-0)" aria-label="cyan 0"></button></li>
673+ <li><button class="color-swatch" style="background-color: var(--cyan-1)" aria-label="cyan 1"></button></li>
674+ <li><button class="color-swatch" style="background-color: var(--cyan-2)" aria-label="cyan 2"></button></li>
675+ <li><button class="color-swatch" style="background-color: var(--cyan-3)" aria-label="cyan 3"></button></li>
676+ <li><button class="color-swatch" style="background-color: var(--cyan-4)" aria-label="cyan 4"></button></li>
677+ <li><button class="color-swatch" style="background-color: var(--cyan-5)" aria-label="cyan 5"></button></li>
678+ <li><button class="color-swatch" style="background-color: var(--cyan-6)" aria-label="cyan 6"></button></li>
679+ <li><button class="color-swatch" style="background-color: var(--cyan-7)" aria-label="cyan 7"></button></li>
680+ <li><button class="color-swatch" style="background-color: var(--cyan-8)" aria-label="cyan 8"></button></li>
681+ <li><button class="color-swatch" style="background-color: var(--cyan-9)" aria-label="cyan 9"></button></li>
682+ <li><button class="color-swatch" style="background-color: var(--cyan-10)" aria-label="cyan 10"></button></li>
683+ <li><button class="color-swatch" style="background-color: var(--cyan-11)" aria-label="cyan 11"></button></li>
684+ <li><button class="color-swatch" style="background-color: var(--cyan-12)" aria-label="cyan 12"></button></li>
685+ </ul>
686+ <ul class="open-colors count-em color-swatch-list">
687 <h4>Teal</h4>
688- <span class="color-swatch" style="background-color: var(--teal-0)"></span>
689- <span class="color-swatch" style="background-color: var(--teal-1)"></span>
690- <span class="color-swatch" style="background-color: var(--teal-2)"></span>
691- <span class="color-swatch" style="background-color: var(--teal-3)"></span>
692- <span class="color-swatch" style="background-color: var(--teal-4)"></span>
693- <span class="color-swatch" style="background-color: var(--teal-5)"></span>
694- <span class="color-swatch" style="background-color: var(--teal-6)"></span>
695- <span class="color-swatch" style="background-color: var(--teal-7)"></span>
696- <span class="color-swatch" style="background-color: var(--teal-8)"></span>
697- <span class="color-swatch" style="background-color: var(--teal-9)"></span>
698- <span class="color-swatch" style="background-color: var(--teal-10)"></span>
699- <span class="color-swatch" style="background-color: var(--teal-11)"></span>
700- <span class="color-swatch" style="background-color: var(--teal-12)"></span>
701- </div>
702- <div class="open-colors count-em">
703+ <li><button class="color-swatch" style="background-color: var(--teal-0)" aria-label="teal 0"></button></li>
704+ <li><button class="color-swatch" style="background-color: var(--teal-1)" aria-label="teal 1"></button></li>
705+ <li><button class="color-swatch" style="background-color: var(--teal-2)" aria-label="teal 2"></button></li>
706+ <li><button class="color-swatch" style="background-color: var(--teal-3)" aria-label="teal 3"></button></li>
707+ <li><button class="color-swatch" style="background-color: var(--teal-4)" aria-label="teal 4"></button></li>
708+ <li><button class="color-swatch" style="background-color: var(--teal-5)" aria-label="teal 5"></button></li>
709+ <li><button class="color-swatch" style="background-color: var(--teal-6)" aria-label="teal 6"></button></li>
710+ <li><button class="color-swatch" style="background-color: var(--teal-7)" aria-label="teal 7"></button></li>
711+ <li><button class="color-swatch" style="background-color: var(--teal-8)" aria-label="teal 8"></button></li>
712+ <li><button class="color-swatch" style="background-color: var(--teal-9)" aria-label="teal 9"></button></li>
713+ <li><button class="color-swatch" style="background-color: var(--teal-10)" aria-label="teal 10"></button></li>
714+ <li><button class="color-swatch" style="background-color: var(--teal-11)" aria-label="teal 11"></button></li>
715+ <li><button class="color-swatch" style="background-color: var(--teal-12)" aria-label="teal 12"></button></li>
716+ </ul>
717+ <ul class="open-colors count-em color-swatch-list">
718 <h4>Green</h4>
719- <span class="color-swatch" style="background-color: var(--green-0)"></span>
720- <span class="color-swatch" style="background-color: var(--green-1)"></span>
721- <span class="color-swatch" style="background-color: var(--green-2)"></span>
722- <span class="color-swatch" style="background-color: var(--green-3)"></span>
723- <span class="color-swatch" style="background-color: var(--green-4)"></span>
724- <span class="color-swatch" style="background-color: var(--green-5)"></span>
725- <span class="color-swatch" style="background-color: var(--green-6)"></span>
726- <span class="color-swatch" style="background-color: var(--green-7)"></span>
727- <span class="color-swatch" style="background-color: var(--green-8)"></span>
728- <span class="color-swatch" style="background-color: var(--green-9)"></span>
729- <span class="color-swatch" style="background-color: var(--green-10)"></span>
730- <span class="color-swatch" style="background-color: var(--green-11)"></span>
731- <span class="color-swatch" style="background-color: var(--green-12)"></span>
732- </div>
733- <div class="open-colors count-em">
734+ <li><button class="color-swatch" style="background-color: var(--green-0)" aria-label="green 0"></button></li>
735+ <li><button class="color-swatch" style="background-color: var(--green-1)" aria-label="green 1"></button></li>
736+ <li><button class="color-swatch" style="background-color: var(--green-2)" aria-label="green 2"></button></li>
737+ <li><button class="color-swatch" style="background-color: var(--green-3)" aria-label="green 3"></button></li>
738+ <li><button class="color-swatch" style="background-color: var(--green-4)" aria-label="green 4"></button></li>
739+ <li><button class="color-swatch" style="background-color: var(--green-5)" aria-label="green 5"></button></li>
740+ <li><button class="color-swatch" style="background-color: var(--green-6)" aria-label="green 6"></button></li>
741+ <li><button class="color-swatch" style="background-color: var(--green-7)" aria-label="green 7"></button></li>
742+ <li><button class="color-swatch" style="background-color: var(--green-8)" aria-label="green 8"></button></li>
743+ <li><button class="color-swatch" style="background-color: var(--green-9)" aria-label="green 9"></button></li>
744+ <li><button class="color-swatch" style="background-color: var(--green-10)" aria-label="green 10"></button></li>
745+ <li><button class="color-swatch" style="background-color: var(--green-11)" aria-label="green 11"></button></li>
746+ <li><button class="color-swatch" style="background-color: var(--green-12)" aria-label="green 12"></button></li>
747+ </ul>
748+ <ul class="open-colors count-em color-swatch-list">
749 <h4>Lime</h4>
750- <span class="color-swatch" style="background-color: var(--lime-0)"></span>
751- <span class="color-swatch" style="background-color: var(--lime-1)"></span>
752- <span class="color-swatch" style="background-color: var(--lime-2)"></span>
753- <span class="color-swatch" style="background-color: var(--lime-3)"></span>
754- <span class="color-swatch" style="background-color: var(--lime-4)"></span>
755- <span class="color-swatch" style="background-color: var(--lime-5)"></span>
756- <span class="color-swatch" style="background-color: var(--lime-6)"></span>
757- <span class="color-swatch" style="background-color: var(--lime-7)"></span>
758- <span class="color-swatch" style="background-color: var(--lime-8)"></span>
759- <span class="color-swatch" style="background-color: var(--lime-9)"></span>
760- <span class="color-swatch" style="background-color: var(--lime-10)"></span>
761- <span class="color-swatch" style="background-color: var(--lime-11)"></span>
762- <span class="color-swatch" style="background-color: var(--lime-12)"></span>
763- </div>
764- <div class="open-colors count-em">
765+ <li><button class="color-swatch" style="background-color: var(--lime-0)" aria-label="lime 0"></button></li>
766+ <li><button class="color-swatch" style="background-color: var(--lime-1)" aria-label="lime 1"></button></li>
767+ <li><button class="color-swatch" style="background-color: var(--lime-2)" aria-label="lime 2"></button></li>
768+ <li><button class="color-swatch" style="background-color: var(--lime-3)" aria-label="lime 3"></button></li>
769+ <li><button class="color-swatch" style="background-color: var(--lime-4)" aria-label="lime 4"></button></li>
770+ <li><button class="color-swatch" style="background-color: var(--lime-5)" aria-label="lime 5"></button></li>
771+ <li><button class="color-swatch" style="background-color: var(--lime-6)" aria-label="lime 6"></button></li>
772+ <li><button class="color-swatch" style="background-color: var(--lime-7)" aria-label="lime 7"></button></li>
773+ <li><button class="color-swatch" style="background-color: var(--lime-8)" aria-label="lime 8"></button></li>
774+ <li><button class="color-swatch" style="background-color: var(--lime-9)" aria-label="lime 9"></button></li>
775+ <li><button class="color-swatch" style="background-color: var(--lime-10)" aria-label="lime 10"></button></li>
776+ <li><button class="color-swatch" style="background-color: var(--lime-11)" aria-label="lime 11"></button></li>
777+ <li><button class="color-swatch" style="background-color: var(--lime-12)" aria-label="lime 12"></button></li>
778+ </ul>
779+ <ul class="open-colors count-em color-swatch-list">
780 <h4>Yellow</h4>
781- <span class="color-swatch" style="background-color: var(--yellow-0)"></span>
782- <span class="color-swatch" style="background-color: var(--yellow-1)"></span>
783- <span class="color-swatch" style="background-color: var(--yellow-2)"></span>
784- <span class="color-swatch" style="background-color: var(--yellow-3)"></span>
785- <span class="color-swatch" style="background-color: var(--yellow-4)"></span>
786- <span class="color-swatch" style="background-color: var(--yellow-5)"></span>
787- <span class="color-swatch" style="background-color: var(--yellow-6)"></span>
788- <span class="color-swatch" style="background-color: var(--yellow-7)"></span>
789- <span class="color-swatch" style="background-color: var(--yellow-8)"></span>
790- <span class="color-swatch" style="background-color: var(--yellow-9)"></span>
791- <span class="color-swatch" style="background-color: var(--yellow-10)"></span>
792- <span class="color-swatch" style="background-color: var(--yellow-11)"></span>
793- <span class="color-swatch" style="background-color: var(--yellow-12)"></span>
794- </div>
795- <div class="open-colors count-em">
796+ <li><button class="color-swatch" style="background-color: var(--yellow-0)" aria-label="yellow 0"></button></li>
797+ <li><button class="color-swatch" style="background-color: var(--yellow-1)" aria-label="yellow 1"></button></li>
798+ <li><button class="color-swatch" style="background-color: var(--yellow-2)" aria-label="yellow 2"></button></li>
799+ <li><button class="color-swatch" style="background-color: var(--yellow-3)" aria-label="yellow 3"></button></li>
800+ <li><button class="color-swatch" style="background-color: var(--yellow-4)" aria-label="yellow 4"></button></li>
801+ <li><button class="color-swatch" style="background-color: var(--yellow-5)" aria-label="yellow 5"></button></li>
802+ <li><button class="color-swatch" style="background-color: var(--yellow-6)" aria-label="yellow 6"></button></li>
803+ <li><button class="color-swatch" style="background-color: var(--yellow-7)" aria-label="yellow 7"></button></li>
804+ <li><button class="color-swatch" style="background-color: var(--yellow-8)" aria-label="yellow 8"></button></li>
805+ <li><button class="color-swatch" style="background-color: var(--yellow-9)" aria-label="yellow 9"></button></li>
806+ <li><button class="color-swatch" style="background-color: var(--yellow-10)" aria-label="yellow 10"></button></li>
807+ <li><button class="color-swatch" style="background-color: var(--yellow-11)" aria-label="yellow 11"></button></li>
808+ <li><button class="color-swatch" style="background-color: var(--yellow-12)" aria-label="yellow 12"></button></li>
809+ </ul>
810+ <ul class="open-colors count-em color-swatch-list">
811 <h4>Orange</h4>
812- <span class="color-swatch" style="background-color: var(--orange-0)"></span>
813- <span class="color-swatch" style="background-color: var(--orange-1)"></span>
814- <span class="color-swatch" style="background-color: var(--orange-2)"></span>
815- <span class="color-swatch" style="background-color: var(--orange-3)"></span>
816- <span class="color-swatch" style="background-color: var(--orange-4)"></span>
817- <span class="color-swatch" style="background-color: var(--orange-5)"></span>
818- <span class="color-swatch" style="background-color: var(--orange-6)"></span>
819- <span class="color-swatch" style="background-color: var(--orange-7)"></span>
820- <span class="color-swatch" style="background-color: var(--orange-8)"></span>
821- <span class="color-swatch" style="background-color: var(--orange-9)"></span>
822- <span class="color-swatch" style="background-color: var(--orange-10)"></span>
823- <span class="color-swatch" style="background-color: var(--orange-11)"></span>
824- <span class="color-swatch" style="background-color: var(--orange-12)"></span>
825- </div>
826- <div class="open-colors count-em">
827+ <li><button class="color-swatch" style="background-color: var(--orange-0)" aria-label="orange 0"></button></li>
828+ <li><button class="color-swatch" style="background-color: var(--orange-1)" aria-label="orange 1"></button></li>
829+ <li><button class="color-swatch" style="background-color: var(--orange-2)" aria-label="orange 2"></button></li>
830+ <li><button class="color-swatch" style="background-color: var(--orange-3)" aria-label="orange 3"></button></li>
831+ <li><button class="color-swatch" style="background-color: var(--orange-4)" aria-label="orange 4"></button></li>
832+ <li><button class="color-swatch" style="background-color: var(--orange-5)" aria-label="orange 5"></button></li>
833+ <li><button class="color-swatch" style="background-color: var(--orange-6)" aria-label="orange 6"></button></li>
834+ <li><button class="color-swatch" style="background-color: var(--orange-7)" aria-label="orange 7"></button></li>
835+ <li><button class="color-swatch" style="background-color: var(--orange-8)" aria-label="orange 8"></button></li>
836+ <li><button class="color-swatch" style="background-color: var(--orange-9)" aria-label="orange 9"></button></li>
837+ <li><button class="color-swatch" style="background-color: var(--orange-10)" aria-label="orange 10"></button></li>
838+ <li><button class="color-swatch" style="background-color: var(--orange-11)" aria-label="orange 11"></button></li>
839+ <li><button class="color-swatch" style="background-color: var(--orange-12)" aria-label="orange 12"></button></li>
840+ </ul>
841+ <ul class="open-colors count-em color-swatch-list">
842 <h4>Choco</h4>
843- <span class="color-swatch" style="background-color: var(--choco-0)"></span>
844- <span class="color-swatch" style="background-color: var(--choco-1)"></span>
845- <span class="color-swatch" style="background-color: var(--choco-2)"></span>
846- <span class="color-swatch" style="background-color: var(--choco-3)"></span>
847- <span class="color-swatch" style="background-color: var(--choco-4)"></span>
848- <span class="color-swatch" style="background-color: var(--choco-5)"></span>
849- <span class="color-swatch" style="background-color: var(--choco-6)"></span>
850- <span class="color-swatch" style="background-color: var(--choco-7)"></span>
851- <span class="color-swatch" style="background-color: var(--choco-8)"></span>
852- <span class="color-swatch" style="background-color: var(--choco-9)"></span>
853- <span class="color-swatch" style="background-color: var(--choco-10)"></span>
854- <span class="color-swatch" style="background-color: var(--choco-11)"></span>
855- <span class="color-swatch" style="background-color: var(--choco-12)"></span>
856- </div>
857- <div class="open-colors count-em">
858+ <li><button class="color-swatch" style="background-color: var(--choco-0)" aria-label="choco 0"></button></li>
859+ <li><button class="color-swatch" style="background-color: var(--choco-1)" aria-label="choco 1"></button></li>
860+ <li><button class="color-swatch" style="background-color: var(--choco-2)" aria-label="choco 2"></button></li>
861+ <li><button class="color-swatch" style="background-color: var(--choco-3)" aria-label="choco 3"></button></li>
862+ <li><button class="color-swatch" style="background-color: var(--choco-4)" aria-label="choco 4"></button></li>
863+ <li><button class="color-swatch" style="background-color: var(--choco-5)" aria-label="choco 5"></button></li>
864+ <li><button class="color-swatch" style="background-color: var(--choco-6)" aria-label="choco 6"></button></li>
865+ <li><button class="color-swatch" style="background-color: var(--choco-7)" aria-label="choco 7"></button></li>
866+ <li><button class="color-swatch" style="background-color: var(--choco-8)" aria-label="choco 8"></button></li>
867+ <li><button class="color-swatch" style="background-color: var(--choco-9)" aria-label="choco 9"></button></li>
868+ <li><button class="color-swatch" style="background-color: var(--choco-10)" aria-label="choco 10"></button></li>
869+ <li><button class="color-swatch" style="background-color: var(--choco-11)" aria-label="choco 11"></button></li>
870+ <li><button class="color-swatch" style="background-color: var(--choco-12)" aria-label="choco 12"></button></li>
871+ </ul>
872+ <ul class="open-colors count-em color-swatch-list">
873 <h4>Brown</h4>
874- <span class="color-swatch" style="background-color: var(--brown-0)"></span>
875- <span class="color-swatch" style="background-color: var(--brown-1)"></span>
876- <span class="color-swatch" style="background-color: var(--brown-2)"></span>
877- <span class="color-swatch" style="background-color: var(--brown-3)"></span>
878- <span class="color-swatch" style="background-color: var(--brown-4)"></span>
879- <span class="color-swatch" style="background-color: var(--brown-5)"></span>
880- <span class="color-swatch" style="background-color: var(--brown-6)"></span>
881- <span class="color-swatch" style="background-color: var(--brown-7)"></span>
882- <span class="color-swatch" style="background-color: var(--brown-8)"></span>
883- <span class="color-swatch" style="background-color: var(--brown-9)"></span>
884- <span class="color-swatch" style="background-color: var(--brown-10)"></span>
885- <span class="color-swatch" style="background-color: var(--brown-11)"></span>
886- <span class="color-swatch" style="background-color: var(--brown-12)"></span>
887- </div>
888- <div class="open-colors count-em">
889+ <li><button class="color-swatch" style="background-color: var(--brown-0)" aria-label="brown 0"></button></li>
890+ <li><button class="color-swatch" style="background-color: var(--brown-1)" aria-label="brown 1"></button></li>
891+ <li><button class="color-swatch" style="background-color: var(--brown-2)" aria-label="brown 2"></button></li>
892+ <li><button class="color-swatch" style="background-color: var(--brown-3)" aria-label="brown 3"></button></li>
893+ <li><button class="color-swatch" style="background-color: var(--brown-4)" aria-label="brown 4"></button></li>
894+ <li><button class="color-swatch" style="background-color: var(--brown-5)" aria-label="brown 5"></button></li>
895+ <li><button class="color-swatch" style="background-color: var(--brown-6)" aria-label="brown 6"></button></li>
896+ <li><button class="color-swatch" style="background-color: var(--brown-7)" aria-label="brown 7"></button></li>
897+ <li><button class="color-swatch" style="background-color: var(--brown-8)" aria-label="brown 8"></button></li>
898+ <li><button class="color-swatch" style="background-color: var(--brown-9)" aria-label="brown 9"></button></li>
899+ <li><button class="color-swatch" style="background-color: var(--brown-10)" aria-label="brown 10"></button></li>
900+ <li><button class="color-swatch" style="background-color: var(--brown-11)" aria-label="brown 11"></button></li>
901+ <li><button class="color-swatch" style="background-color: var(--brown-12)" aria-label="brown 12"></button></li>
902+ </ul>
903+ <ul class="open-colors count-em color-swatch-list">
904 <h4>Sand</h4>
905- <span class="color-swatch" style="background-color: var(--sand-0)"></span>
906- <span class="color-swatch" style="background-color: var(--sand-1)"></span>
907- <span class="color-swatch" style="background-color: var(--sand-2)"></span>
908- <span class="color-swatch" style="background-color: var(--sand-3)"></span>
909- <span class="color-swatch" style="background-color: var(--sand-4)"></span>
910- <span class="color-swatch" style="background-color: var(--sand-5)"></span>
911- <span class="color-swatch" style="background-color: var(--sand-6)"></span>
912- <span class="color-swatch" style="background-color: var(--sand-7)"></span>
913- <span class="color-swatch" style="background-color: var(--sand-8)"></span>
914- <span class="color-swatch" style="background-color: var(--sand-9)"></span>
915- <span class="color-swatch" style="background-color: var(--sand-10)"></span>
916- <span class="color-swatch" style="background-color: var(--sand-11)"></span>
917- <span class="color-swatch" style="background-color: var(--sand-12)"></span>
918- </div>
919- <div class="open-colors count-em">
920+ <li><button class="color-swatch" style="background-color: var(--sand-0)" aria-label="sand 0"></button></li>
921+ <li><button class="color-swatch" style="background-color: var(--sand-1)" aria-label="sand 1"></button></li>
922+ <li><button class="color-swatch" style="background-color: var(--sand-2)" aria-label="sand 2"></button></li>
923+ <li><button class="color-swatch" style="background-color: var(--sand-3)" aria-label="sand 3"></button></li>
924+ <li><button class="color-swatch" style="background-color: var(--sand-4)" aria-label="sand 4"></button></li>
925+ <li><button class="color-swatch" style="background-color: var(--sand-5)" aria-label="sand 5"></button></li>
926+ <li><button class="color-swatch" style="background-color: var(--sand-6)" aria-label="sand 6"></button></li>
927+ <li><button class="color-swatch" style="background-color: var(--sand-7)" aria-label="sand 7"></button></li>
928+ <li><button class="color-swatch" style="background-color: var(--sand-8)" aria-label="sand 8"></button></li>
929+ <li><button class="color-swatch" style="background-color: var(--sand-9)" aria-label="sand 9"></button></li>
930+ <li><button class="color-swatch" style="background-color: var(--sand-10)" aria-label="sand 10"></button></li>
931+ <li><button class="color-swatch" style="background-color: var(--sand-11)" aria-label="sand 11"></button></li>
932+ <li><button class="color-swatch" style="background-color: var(--sand-12)" aria-label="sand 12"></button></li>
933+ </ul>
934+ <ul class="open-colors count-em color-swatch-list">
935 <h4>Camo</h4>
936- <span class="color-swatch" style="background-color: var(--camo-0)"></span>
937- <span class="color-swatch" style="background-color: var(--camo-1)"></span>
938- <span class="color-swatch" style="background-color: var(--camo-2)"></span>
939- <span class="color-swatch" style="background-color: var(--camo-3)"></span>
940- <span class="color-swatch" style="background-color: var(--camo-4)"></span>
941- <span class="color-swatch" style="background-color: var(--camo-5)"></span>
942- <span class="color-swatch" style="background-color: var(--camo-6)"></span>
943- <span class="color-swatch" style="background-color: var(--camo-7)"></span>
944- <span class="color-swatch" style="background-color: var(--camo-8)"></span>
945- <span class="color-swatch" style="background-color: var(--camo-9)"></span>
946- <span class="color-swatch" style="background-color: var(--camo-10)"></span>
947- <span class="color-swatch" style="background-color: var(--camo-11)"></span>
948- <span class="color-swatch" style="background-color: var(--camo-12)"></span>
949- </div>
950- <div class="open-colors count-em">
951+ <li><button class="color-swatch" style="background-color: var(--camo-0)" aria-label="camo 0"></button></li>
952+ <li><button class="color-swatch" style="background-color: var(--camo-1)" aria-label="camo 1"></button></li>
953+ <li><button class="color-swatch" style="background-color: var(--camo-2)" aria-label="camo 2"></button></li>
954+ <li><button class="color-swatch" style="background-color: var(--camo-3)" aria-label="camo 3"></button></li>
955+ <li><button class="color-swatch" style="background-color: var(--camo-4)" aria-label="camo 4"></button></li>
956+ <li><button class="color-swatch" style="background-color: var(--camo-5)" aria-label="camo 5"></button></li>
957+ <li><button class="color-swatch" style="background-color: var(--camo-6)" aria-label="camo 6"></button></li>
958+ <li><button class="color-swatch" style="background-color: var(--camo-7)" aria-label="camo 7"></button></li>
959+ <li><button class="color-swatch" style="background-color: var(--camo-8)" aria-label="camo 8"></button></li>
960+ <li><button class="color-swatch" style="background-color: var(--camo-9)" aria-label="camo 9"></button></li>
961+ <li><button class="color-swatch" style="background-color: var(--camo-10)" aria-label="camo 10"></button></li>
962+ <li><button class="color-swatch" style="background-color: var(--camo-11)" aria-label="camo 11"></button></li>
963+ <li><button class="color-swatch" style="background-color: var(--camo-12)" aria-label="camo 12"></button></li>
964+ </ul>
965+ <ul class="open-colors count-em color-swatch-list">
966 <h4>Jungle</h4>
967- <span class="color-swatch" style="background-color: var(--jungle-0)"></span>
968- <span class="color-swatch" style="background-color: var(--jungle-1)"></span>
969- <span class="color-swatch" style="background-color: var(--jungle-2)"></span>
970- <span class="color-swatch" style="background-color: var(--jungle-3)"></span>
971- <span class="color-swatch" style="background-color: var(--jungle-4)"></span>
972- <span class="color-swatch" style="background-color: var(--jungle-5)"></span>
973- <span class="color-swatch" style="background-color: var(--jungle-6)"></span>
974- <span class="color-swatch" style="background-color: var(--jungle-7)"></span>
975- <span class="color-swatch" style="background-color: var(--jungle-8)"></span>
976- <span class="color-swatch" style="background-color: var(--jungle-9)"></span>
977- <span class="color-swatch" style="background-color: var(--jungle-10)"></span>
978- <span class="color-swatch" style="background-color: var(--jungle-11)"></span>
979- <span class="color-swatch" style="background-color: var(--jungle-12)"></span>
980- </div>
981+ <li><button class="color-swatch" style="background-color: var(--jungle-0)" aria-label="jungle 0"></button></li>
982+ <li><button class="color-swatch" style="background-color: var(--jungle-1)" aria-label="jungle 1"></button></li>
983+ <li><button class="color-swatch" style="background-color: var(--jungle-2)" aria-label="jungle 2"></button></li>
984+ <li><button class="color-swatch" style="background-color: var(--jungle-3)" aria-label="jungle 3"></button></li>
985+ <li><button class="color-swatch" style="background-color: var(--jungle-4)" aria-label="jungle 4"></button></li>
986+ <li><button class="color-swatch" style="background-color: var(--jungle-5)" aria-label="jungle 5"></button></li>
987+ <li><button class="color-swatch" style="background-color: var(--jungle-6)" aria-label="jungle 6"></button></li>
988+ <li><button class="color-swatch" style="background-color: var(--jungle-7)" aria-label="jungle 7"></button></li>
989+ <li><button class="color-swatch" style="background-color: var(--jungle-8)" aria-label="jungle 8"></button></li>
990+ <li><button class="color-swatch" style="background-color: var(--jungle-9)" aria-label="jungle 9"></button></li>
991+ <li><button class="color-swatch" style="background-color: var(--jungle-10)" aria-label="jungle 10"></button></li>
992+ <li><button class="color-swatch" style="background-color: var(--jungle-11)" aria-label="jungle 11"></button></li>
993+ <li><button class="color-swatch" style="background-color: var(--jungle-12)" aria-label="jungle 12"></button></li>
994+ </ul>
995 </article>
996
997 <details>
998 @@ -1707,7 +1746,7 @@
999 <h3>2) Creating adaptive color schemes</h3>
1000 <p>It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.</p>
1001 </header>
1002-
1003+
1004 <div class="block-wrap">
1005 <div>
1006 <h5>No Preference (Light)</h5>
1007 @@ -1784,7 +1823,7 @@
1008 <h3>3) Using the aliases</h3>
1009 <p>Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.</p>
1010 </header>
1011-
1012+
1013 <div class="block-wrap">
1014 <div>
1015 <h5>Page Styles Using Themes</h5>
1016 @@ -1828,7 +1867,7 @@
1017 }
1018
1019 h5,h6,small,dd {
1020- color: var(--text-2);
1021+ color: var(--text-2);
1022 }
1023 </code></pre>
1024 </div>
1025 @@ -2010,9 +2049,9 @@
1026 --ratio-square: 1;
1027 --ratio-landscape: 4/3;
1028 --ratio-portrait: 3/4;
1029- --ratio-widescreen: 16/9;
1030+ --ratio-widescreen: 16/9;
1031 --ratio-ultrawide: 18/5;
1032- --ratio-golden: 1.6180/1;
1033+ --ratio-golden: 1.6180/1;
1034 </code></pre>
1035 </div>
1036 </div>
1037 @@ -2055,7 +2094,7 @@
1038 </code></pre>
1039 </div>
1040 </div>
1041-
1042+
1043 <div>
1044 <h5>Usage Sample</h5>
1045 <pre class="language-css"><code>
1046 @@ -2116,14 +2155,14 @@
1047 </div>
1048 <div class="font-demo">
1049 <div class="sample-text" style="font-size: var(--font-size-8)">Aa</div>
1050- <input
1051+ <input
1052 class="font-slider"
1053- name="weight"
1054+ name="weight"
1055 data-prop="fontWeight"
1056- type="range"
1057- value="4"
1058- min="1"
1059- max="9"
1060+ type="range"
1061+ value="4"
1062+ min="1"
1063+ max="9"
1064 style="--track-fill: 35%"
1065 >
1066 </div>
1067 @@ -2147,14 +2186,14 @@
1068 </div>
1069 <div class="font-demo">
1070 <div class="sample-text letterspacing-demo">Letter Spacing</div>
1071- <input
1072+ <input
1073 class="font-slider"
1074- name="letterspacing"
1075+ name="letterspacing"
1076 data-prop="letter-spacing"
1077- type="range"
1078- value="1"
1079- min="0"
1080- max="7"
1081+ type="range"
1082+ value="1"
1083+ min="0"
1084+ max="7"
1085 style="--track-fill: 15%"
1086 >
1087 </div>
1088 @@ -2179,14 +2218,14 @@
1089 <div class="sample-text" style="max-inline-size: var(--size-content-1);">
1090 Sample paragraph content to provide a preview for OP's line heights
1091 </div>
1092- <input
1093+ <input
1094 class="font-slider"
1095- name="lineheight"
1096+ name="lineheight"
1097 data-prop="lineHeight"
1098- type="range"
1099- value="1"
1100- min="-1"
1101- max="5"
1102+ type="range"
1103+ value="1"
1104+ min="-1"
1105+ max="5"
1106 style="--track-fill: 33%"
1107 >
1108 </div>
1109 @@ -2209,7 +2248,7 @@
1110 --font-relative-lineheight-6: calc(1rem + 3ch);
1111 </code></pre>
1112 </article> -->
1113-
1114+
1115 <article class="font-sizes">
1116 <h4>Font Sizes</h4>
1117 <pre class="language-css"><code>
1118 @@ -2286,7 +2325,7 @@
1119
1120 --ease-elastic-out-{1-5}
1121 --ease-elastic-in-{1-5}
1122- --ease-elastic-in-out-{1-5}
1123+ --ease-elastic-in-out-{1-5}
1124
1125 --ease-spring-{1-5}
1126 --ease-bounce-{1-5}
1127 @@ -2572,7 +2611,7 @@
1128 animation: var(--animation-slide-out-down) forwards;
1129
1130 &.open {
1131- animation: var(--animation-slide-in-up) forwards;
1132+ animation: var(--animation-slide-in-up) forwards;
1133 }
1134 }
1135
1136 @@ -2615,7 +2654,7 @@
1137 </svg>
1138 </button>
1139 </div>
1140-
1141+
1142 <div class="animation-demo-target" data-animation="fade-out-bloom">
1143 <h6>Bloom Fade Out</h6>
1144 <button class="play-button">
1145 @@ -2824,7 +2863,7 @@
1146 <div>
1147 <pre class="language-css"><code>
1148 .slide-fade {
1149- animation:
1150+ animation:
1151 var(--animation-fade-out) forwards,
1152 var(--animation-slide-out-down);
1153 animation-timing-function: var(--ease-elastic-in-out-3);
1154 @@ -2848,7 +2887,7 @@
1155 <div>
1156 <pre class="language-css"><code>
1157 .shake-in {
1158- animation:
1159+ animation:
1160 var(--animation-shake-y),
1161 var(--animation-fade-in),
1162 var(--animation-slide-in-left);
1163 @@ -2870,7 +2909,7 @@
1164 <div>
1165 <pre class="language-css"><code>
1166 .push-out {
1167- animation:
1168+ animation:
1169 var(--animation-scale-down),
1170 var(--animation-fade-out);
1171 animation-timing-function: var(--ease-elastic-in-out-4);
1172 @@ -2929,12 +2968,12 @@
1173 <div>
1174 <h5>Usage Sample</h5>
1175 <pre class="language-css"><code>
1176- article {
1177+ article {
1178 display: grid;
1179 gap: var(--size-3);
1180 }
1181
1182- li {
1183+ li {
1184 padding-inline-start: var(--size-2);
1185 }
1186
1187 @@ -2984,11 +3023,11 @@
1188 <div>
1189 <h5>Usage Sample</h5>
1190 <pre class="language-css"><code>
1191- body {
1192+ body {
1193 padding: var(--size-fluid-3);
1194 }
1195
1196- hr {
1197+ hr {
1198 margin-block: var(--size-fluid-5);
1199 }
1200 </code></pre>
1201 @@ -3021,11 +3060,11 @@
1202 <div>
1203 <h5>Usage Sample</h5>
1204 <pre class="language-css"><code>
1205- p {
1206+ p {
1207 max-inline-size: var(--size-content-3);
1208 }
1209
1210- aside {
1211+ aside {
1212 max-inline-size: var(--size-content-2);
1213 }
1214 </code></pre>
1215 @@ -3056,11 +3095,11 @@
1216 <div>
1217 <h5>Usage Sample</h5>
1218 <pre class="language-css"><code>
1219- h1 {
1220+ h1 {
1221 max-inline-size: var(--size-header-2);
1222 }
1223
1224- small {
1225+ small {
1226 max-inline-size: var(--size-header-1);
1227 }
1228 </code></pre>
1229 @@ -3104,7 +3143,7 @@
1230 </div>
1231 <div class="relative-sizes-demo">
1232 <label>
1233- Pick a different base font size:
1234+ Pick a different base font size:
1235 <select>
1236 <optgroup label="Base Font Size">
1237 <option value="5">--font-size-5</option>
1238 @@ -3142,7 +3181,7 @@
1239 </header>
1240 <div class="block-wrap">
1241 <div>
1242-
1243+
1244 <h5>Vars Sample</h5>
1245 <div class="var-examples">
1246 <pre class="language-css"><code>
1247 @@ -3365,7 +3404,7 @@
1248
1249 @custom-media --motionOK (prefers-reduced-motion: no-preference);
1250 @custom-media --motionNotOK (prefers-reduced-motion: reduce);
1251-
1252+
1253 @custom-media --invertedColors (inverted-colors: inverted);
1254 @custom-media --forcedColors (forced-colors: active);
1255 </code></pre>
1256 @@ -3468,7 +3507,7 @@
1257 </code></pre>
1258 </div>
1259 </div>
1260-
1261+
1262 <div class="just-for-gap">
1263 <header>
1264 <h3>Mask Edges</h3>
1265 @@ -3541,7 +3580,7 @@
1266
1267 <br>
1268
1269- <h5>Zig-Zag</h5>
1270+ <h5>Zig-Zag</h5>
1271 <article class="border-demos mask-demos">
1272 <div style="-webkit-mask: var(--mask-edge-zig-zag-top)">Top</div>
1273 <div style="-webkit-mask: var(--mask-edge-zig-zag-right)">Right</div>
1274 @@ -3558,7 +3597,7 @@
1275 }
1276 </code></pre>
1277 </div>
1278-
1279+
1280 <div class="just-for-gap">
1281 <header>
1282 <h3>Mask Corner Cuts</h3>
1283 @@ -3582,7 +3621,7 @@
1284 </article>
1285 <pre class="language-css"><code>
1286 --mask-corner-cut-circles-{1,2,3}
1287-
1288+
1289 .mask-usage {
1290 -webkit-mask: var(--mask-corner-cut-circles-2);
1291 }
1292 @@ -3600,7 +3639,7 @@
1293 </article>
1294 <pre class="language-css"><code>
1295 --mask-corner-cut-squares-{1,2,3}
1296-
1297+
1298 .mask-usage {
1299 -webkit-mask: var(--mask-corner-cut-squares-2);
1300 }
1301 @@ -3616,7 +3655,7 @@
1302 </article>
1303 <pre class="language-css"><code>
1304 --mask-corner-cut-angles-{1,2,3}
1305-
1306+
1307 .mask-usage {
1308 -webkit-mask: var(--mask-corner-cut-angles-2);
1309 }
1310 @@ -3660,7 +3699,7 @@
1311 <dt>Showcase</dt>
1312 <dd><a href="https://props-color-finder.netlify.app/" target="_blank">Color helper</a></dd>
1313 </div>
1314-
1315+
1316 <div>
1317 <dt>Connect</dt>
1318 <dd><a href="https://github.com/argyleink/open-props/">GitHub</a></dd>
1319 diff --git a/docsite/index.js b/docsite/index.js
1320index 2d02d1a..45845e7 100644
1321--- a/docsite/index.js
1322+++ b/docsite/index.js
1323 @@ -6,3 +6,5 @@ import '/js/animations.js'
1324 import '/js/slider.js'
1325 import '/js/scrollspy.js'
1326 import '/js/select.js'
1327+
1328+ import '/js/color-copy.js'
1329\ No newline at end of file
1330 diff --git a/docsite/js/color-convert.js b/docsite/js/color-convert.js
1331new file mode 100644
1332index 0000000..7d4256a
1333--- /dev/null
1334+++ b/docsite/js/color-convert.js
1335 @@ -0,0 +1,47 @@
1336+
1337+ // https://css-tricks.com/converting-color-spaces-in-javascript/
1338+ function RGBToHex(r, g, b) {
1339+ let r_str = r.toString(16);
1340+ let g_str = g.toString(16);
1341+ let b_str = b.toString(16);
1342+
1343+ if (r_str.length == 1) r_str = '0' + r_str;
1344+ if (g_str.length == 1) g_str = '0' + g_str;
1345+ if (b_str.length == 1) b_str = '0' + b_str;
1346+
1347+ return '#' + r_str + g_str + b_str;
1348+ }
1349+
1350+ // https://css-tricks.com/converting-color-spaces-in-javascript/
1351+ function RGBToHSL(r, g, b) {
1352+ r /= 255;
1353+ g /= 255;
1354+ b /= 255;
1355+
1356+ let cmin = Math.min(r, g, b),
1357+ cmax = Math.max(r, g, b),
1358+ delta = cmax - cmin,
1359+ h = 0,
1360+ s = 0,
1361+ l = 0;
1362+
1363+ if (delta == 0) h = 0;
1364+ else if (cmax == r) h = ((g - b) / delta) % 6;
1365+ else if (cmax == g) h = (b - r) / delta + 2;
1366+ else h = (r - g) / delta + 4;
1367+
1368+ h = Math.round(h * 60);
1369+
1370+ if (h < 0) h += 360;
1371+
1372+ l = (cmax + cmin) / 2;
1373+
1374+ s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
1375+
1376+ s = +(s * 100).toFixed(1);
1377+ l = +(l * 100).toFixed(1);
1378+
1379+ return 'hsl(' + h + ' ' + s + '% ' + l + '%)';
1380+ }
1381+
1382+ export { RGBToHSL, RGBToHex };
1383 diff --git a/docsite/js/color-copy.js b/docsite/js/color-copy.js
1384new file mode 100644
1385index 0000000..d02700d
1386--- /dev/null
1387+++ b/docsite/js/color-copy.js
1388 @@ -0,0 +1,115 @@
1389+ import { rovingIndex } from 'roving-ux';
1390+ import { RGBToHSL, RGBToHex } from './color-convert';
1391+
1392+ function addTooltip(e, value) {
1393+
1394+ const tooltip = document.createElement('span');
1395+ tooltip.className = 'tooltip tooltip-show';
1396+ tooltip.innerHTML = `${value} copied to clipboard!`;
1397+
1398+ e.appendChild(tooltip);
1399+
1400+ setTimeout(() => {
1401+ tooltip.className = 'tooltip tooltip-hide';
1402+ }, 1500);
1403+
1404+ setTimeout(() => {
1405+ e.removeChild(tooltip);
1406+ }, 2000);
1407+ }
1408+
1409+ function hyphenateCSS(input) {
1410+ if (input === 'cssFloat') {
1411+ return 'float';
1412+ }
1413+
1414+ return input.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase() );
1415+ }
1416+
1417+ function copyPropertyToClipboard(e, property) {
1418+ const cb_prop = document.querySelector('#prop');
1419+ const cb_color = document.querySelector('#color-code');
1420+
1421+ const cb_hex = document.querySelector('#hex');
1422+ const cb_rgb = document.querySelector('#rgb');
1423+ const cb_hsl = document.querySelector('#hsl');
1424+
1425+ let copiedText = '';
1426+
1427+ if (cb_prop?.checked) {
1428+ copiedText = e.style[property];
1429+ }
1430+
1431+ if (cb_color?.checked) {
1432+ let rgb = window
1433+ .getComputedStyle(e)
1434+ .getPropertyValue(hyphenateCSS(property));
1435+
1436+ if (cb_rgb?.checked) {
1437+ copiedText = rgb;
1438+ }
1439+
1440+ rgb = rgb.match(/\d+/g);
1441+ const r = parseInt(rgb[0]), g = parseInt(rgb[1]), b = parseInt(rgb[2]);
1442+ if (cb_hex?.checked) {
1443+ copiedText = RGBToHex(r, g, b);
1444+ }
1445+
1446+ if (cb_hsl?.checked) {
1447+ copiedText = RGBToHSL(r, g, b);
1448+ }
1449+ }
1450+
1451+ if (copiedText === '')
1452+ return;
1453+
1454+ navigator.clipboard.writeText(copiedText);
1455+ return copiedText;
1456+ }
1457+
1458+ function attachCopyEvent(query, property) {
1459+ const elements = document.querySelectorAll(query);
1460+
1461+ elements.forEach((element) => {
1462+ element.addEventListener('click', function (e) {
1463+ const copiedText = copyPropertyToClipboard(e.target, property);
1464+ addTooltip(e.target, copiedText);
1465+ });
1466+ });
1467+ }
1468+
1469+ function selectCopyFormat() {
1470+ const cb_prop = document.querySelector('#prop');
1471+ const color_format_inputs = document.querySelectorAll(
1472+ 'input[name="color-format"]'
1473+ );
1474+
1475+ if (cb_prop?.checked) {
1476+ color_format_inputs.forEach((input) => {
1477+ input.disabled = true;
1478+ });
1479+ } else {
1480+ color_format_inputs.forEach((input) => {
1481+ input.disabled = false;
1482+ });
1483+ }
1484+ }
1485+
1486+ function attachSelectCopyFormat() {
1487+ const cb_prop = document.querySelector('#prop');
1488+ const cb_color = document.querySelector('#color-code');
1489+
1490+ cb_prop?.addEventListener('change', selectCopyFormat);
1491+ cb_color?.addEventListener('change', selectCopyFormat);
1492+ }
1493+
1494+ function initializeCopy() {
1495+ attachCopyEvent('.color-swatch', 'backgroundColor');
1496+ attachSelectCopyFormat();
1497+
1498+ document.querySelectorAll('.color-swatch-list').forEach((list) => {
1499+ rovingIndex({element: list, target: 'button'});
1500+ });
1501+ }
1502+
1503+ document.addEventListener('DOMContentLoaded', initializeCopy);
1504 diff --git a/docsite/package-lock.json b/docsite/package-lock.json
1505index bc00f55..f91e8c9 100644
1506--- a/docsite/package-lock.json
1507+++ b/docsite/package-lock.json
1508 @@ -5,6 +5,9 @@
1509 "packages": {
1510 "": {
1511 "name": "open-props",
1512+ "dependencies": {
1513+ "roving-ux": "^1.0.5"
1514+ },
1515 "devDependencies": {
1516 "postcss-preset-env": "6.7.x",
1517 "vite": "2.6.1"
1518 @@ -1724,6 +1727,11 @@
1519 "fsevents": "~2.3.2"
1520 }
1521 },
1522+ "node_modules/roving-ux": {
1523+ "version": "1.0.5",
1524+ "resolved": "https://registry.npmjs.org/roving-ux/-/roving-ux-1.0.5.tgz",
1525+ "integrity": "sha512-JCvxfcLOhhw8lGP/vrfZzQdsZ0tmM2Z04TPzxPANMOjg3p80cbRyOEhUZdIOwn76bGSJA1S/TfYk+hcNA3jhLA=="
1526+ },
1527 "node_modules/source-map": {
1528 "version": "0.6.1",
1529 "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
1530 @@ -3052,6 +3060,11 @@
1531 "fsevents": "~2.3.2"
1532 }
1533 },
1534+ "roving-ux": {
1535+ "version": "1.0.5",
1536+ "resolved": "https://registry.npmjs.org/roving-ux/-/roving-ux-1.0.5.tgz",
1537+ "integrity": "sha512-JCvxfcLOhhw8lGP/vrfZzQdsZ0tmM2Z04TPzxPANMOjg3p80cbRyOEhUZdIOwn76bGSJA1S/TfYk+hcNA3jhLA=="
1538+ },
1539 "source-map": {
1540 "version": "0.6.1",
1541 "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
1542 diff --git a/docsite/package.json b/docsite/package.json
1543index 4fbb6bf..675bf42 100644
1544--- a/docsite/package.json
1545+++ b/docsite/package.json
1546 @@ -13,5 +13,8 @@
1547 "devDependencies": {
1548 "postcss-preset-env": "6.7.x",
1549 "vite": "2.6.1"
1550+ },
1551+ "dependencies": {
1552+ "roving-ux": "^1.0.5"
1553 }
1554 }