PageSourceSearch

https://open-props.style/

html open-props.style collected 2026-09-25 19:03:41 UTC 226,368 bytes, 4,774 lines download raw bytes

1<!doctype html>
2<html lang="en" dir="ltr">
3
4<head>
5  <meta charset="utf-8">
6
7  <title>Open Props: sub-atomic styles</title>
8  <meta property="og:title" content="Open Props: sub-atomic styles">
9  <meta name="twitter:title" content="Open Props: sub-atomic styles">
10
11  <meta name="description"
12    content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
13  <meta property="og:description"
14    content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
15  <meta name="twitter:description"
16    content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
17
18  <meta name="viewport" content="width=device-width, initial-scale=1">
19  <meta name="mobile-web-app-capable" content="yes">
20  <meta name="theme-color" content="Canvas">
21  <meta name="color-scheme" content="dark light">
22
23  <link rel="manifest" href="manifest.json">
24  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
25  <link rel="icon" href="/favicon.ico" sizes="any">
26
27  <meta name="twitter:image:src" content="https://open-props.style/open-props-social.jpg">
28  <meta name="twitter:image:alt"
29    content="@argyleink/open-props: CSS custom properties to help accelerate adaptive and consistent design.">
30  <meta name="twitter:card" content="summary_large_image">
31  <meta property="og:image" content="https://open-props.style/open-props-social.jpg">
32  <meta property="og:image:alt"
33    content="argyleink/open-props: CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
34
35  
35<script src="/theme-toggle.js"></script>
35
36  
36<script type="module" crossorigin src="/assets/index-C9dxd_Wg.js"></script>
36
37  <link rel="stylesheet" crossorigin href="/assets/index-BLrvAKUQ.css">
38</head>
39
40<body>
41
42  <svg style="display:none">
43    <symbol id="play-icon">
44      <path fill-rule="evenodd"
45        d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
46        clip-rule="evenodd" />
47    </symbol>
48    <symbol id="pause-icon">
49      <path fill-rule="evenodd"
50        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
51        clip-rule="evenodd" />
52    </symbol>
53    <symbol id="checkmark-icon">
54      <polyline points="9 11 12 14 22 4"></polyline>
55      <path style="opacity:.75;" d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
56    </symbol>
57    <symbol id="bent-arrow" fill="none" stroke="currentColor">
58      <path d="m15 10 5 5-5 5" />
59      <path d="M4 4v7a4 4 0 0 0 4 4h12" />
60    </symbol>
61  </svg>
62
63  <nav>
64    <a href="/">
65      <svg class="op-icon" viewBox="0 0 200 200">
66        <line class="op-icon-p" x1="65" x2="65" y1="100" y2="175" stroke-width="25" />
67        <circle class="op-icon-p" cx="100" cy="100" r="35" fill="transparent" stroke-width="25" />
68        <circle class="op-icon-o" cx="100" cy="100" r="85" fill="transparent" stroke-width="25" />
69      </svg>
70      <span class="op-logo">
71        <span>Open</span>
72        <span>Props</span>
73      </span>
74    </a>
75    <a href="#getting-started">Get Started</a>
76    <a class="md-hidden" href="https://stackblitz.com/@argyleink/collections/open-props">
77      Try in browser
78      <small class="green-badge">RAD</small>
79    </a>
80    <button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
81      <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
82        <!-- https://feathericons.com/?query=sun -->
83        <mask id="moon">
84          <rect x="0" y="0" width="100%" height="100%" fill="white" />
85          <circle cx="40" cy="8" r="11" fill="black" />
86        </mask>
87        <circle id="sun" cx="12" cy="12" r="11" mask="url(#moon)" />
88        <g id="sun-beams">
89          <line x1="12" y1="1" x2="12" y2="3" />
90          <line x1="12" y1="21" x2="12" y2="23" />
91          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
92          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
93          <line x1="1" y1="12" x2="3" y2="12" />
94          <line x1="21" y1="12" x2="23" y2="12" />
95          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
96          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
97        </g>
98      </svg>
99    </button>
100    <a href="https://github.com/argyleink/open-props" title="Source on Github">
101      <svg class="github-icon" width="24" height="24" viewBox="0 0 16 16">
102        <path fill-rule="evenodd"
103          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
104        </path>
105      </svg>
106    </a>
107  </nav>
108
109  <section class="hero block-wrap">
110    <header>
111      <div class="subhead">
112        <h1>
113          <div>Supercharged</div>
114        </h1>
115        <h1><span>CSS</span> <span>variables.</span></h1>
116      </div>
117      <ul class="checkmark-list">
118        <li>
119          <svg viewBox="0 0 24 24">
120            <use href="#checkmark-icon" fill="none" />
121          </svg>
122          Expertly crafted web design tokens
123        </li>
124        <li>
125          <svg viewBox="0 0 24 24">
126            <use href="#checkmark-icon" fill="none" />
127          </svg>
128          Create consistent components
129        </li>
130        <li>
131          <svg viewBox="0 0 24 24">
132            <use href="#checkmark-icon" fill="none" />
133          </svg>
134          Useful in any framework
135        </li>
136      </ul>
137      <small>
138        v1.7.23
139        <span class="license">
140          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
141            <path fill-rule="evenodd"
142              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">
143            </path>
144          </svg>
145          MIT
146        </span>
147      </small>
148    </header>
149    <div>
150      <pre class="language-css"><code>
151        @import "https://unpkg.com/open-props";
152        </code></pre>
153      <pre class="language-css"><code>
154          .card {
155            border-radius: var(--radius-2);
156            padding: var(--size-fluid-3);
157            box-shadow: var(--shadow-2);
158
159            &:hover {
160              box-shadow: var(--shadow-3);
161            }
162
163            @media (--motionOK) {
164              animation: var(--animation-fade-in);
165            }
166          }
167        </code></pre>
168      <!-- <pre class="language-css"><code>
169          @import "open-props";            /* All props from NPM */
170          @import "open-props/media.css";  /* Named media queries */
171
172          .button {
173            font-size: var(--font-size-fluid-1);
174            padding-inline: var(--size-5);
175            padding-block: var(--size-3);
176
177            color: var(--blue-0);
178            background-color: var(--blue-7);
179            border: none;
180            border-radius: var(--radius-round);
181            box-shadow: var(--shadow-2);
182
183            &:hover {
184              transform: scale(1.1);
185            }
186
187            @media (--motionOK) {
188              transition: transform 0.5s var(--ease-squish-3);
189            }
190          }
191        </code></pre> -->
192    </div>
193  </section>
194
195  <section id="gallery">
196    <header>
197      <h2>Built with Open Props</h2>
198    </header>
199    <div class="demo-gallery block-wrap">
200      <a href="https://codepen.io/argyleink/pen/porzeyz">
201        <figure>
202          <picture>
203            <img width="1125" height="586" src="/hero-layout.png" alt="" loading="lazy">
204          </picture>
205          <figcaption>
206            <img src="/hero-layout.png" aria-hidden="true" loading="lazy">
207            <div class="adaptive-glass">
208              <h3>Hero Layout</h3>
209              <p><b>18 props</b> + <b>normalize.css</b></p>
210            </div>
211          </figcaption>
212        </figure>
213      </a>
214      <a href="https://codepen.io/argyleink/pen/powMQgx">
215        <figure>
216          <picture>
217            <img width="1446" height="658" src="/adaptive-buttons.png" alt="" loading="lazy">
218          </picture>
219          <figcaption>
220            <img src="/adaptive-buttons.png" aria-hidden="true" loading="lazy">
221            <div class="adaptive-glass">
222              <h3>Adaptive Buttons</h3>
223              <p><b>10 props</b></p>
224            </div>
225          </figcaption>
226        </figure>
227      </a>
228      <a href="https://codepen.io/argyleink/pen/jOLaBgG">
229        <figure>
230          <picture>
231            <img width="1600" height="960" src="/cards.png" alt="" loading="lazy">
232          </picture>
233          <figcaption>
234            <img src="/cards.png" aria-hidden="true" loading="lazy">
235            <div class="adaptive-glass">
236              <h3>Adaptive Cards</h3>
237              <p><b>8 props</b> + <b>normalize.css</b></p>
238            </div>
239          </figcaption>
240        </figure>
241      </a>
242      <a href="https://codepen.io/argyleink/pen/QWMreXR">
243        <figure>
244          <picture>
245            <img width="760" height="372" src="/pagination.png" alt="" loading="lazy">
246          </picture>
247          <figcaption>
248            <img src="/pagination.png" aria-hidden="true" loading="lazy">
249            <div class="adaptive-glass">
250              <h3>Pagination Example</h3>
251              <p>10 props</p>
252            </div>
253          </figcaption>
254        </figure>
255      </a>
256      <a href="https://codepen.io/argyleink/pen/XWaYyWe">
257        <figure>
258          <picture>
259            <img width="1096" height="639" src="/color-schemes.png" alt="" loading="lazy">
260          </picture>
261          <figcaption>
262            <img src="/color-schemes.png" aria-hidden="true" loading="lazy">
263            <div class="adaptive-glass">
264              <h3>4 Color Schemes</h3>
265              <p><b>16 props</b></p>
266            </div>
267          </figcaption>
268        </figure>
269      </a>
270      <a href="https://codepen.io/argyleink/pen/JjqYdgr">
271        <figure>
272          <picture>
273            <img width="730" height="472" src="/theme-switch.png" alt="" loading="lazy">
274          </picture>
275          <figcaption>
276            <img src="/theme-switch.png" aria-hidden="true" loading="lazy">
277            <div class="adaptive-glass">
278              <h3>Light / Dark Switch</h3>
279              <p><b>+2 imports</b></p>
280            </div>
281          </figcaption>
282        </figure>
283      </a>
284      <a href="https://codepen.io/argyleink/pen/ZEXQovz">
285        <figure>
286          <picture>
287            <img width="672" height="448" src="/pop-animation.png" alt="" loading="lazy">
288          </picture>
289          <figcaption>
290            <img src="/pop-animation.png" aria-hidden="true" loading="lazy">
291            <div class="adaptive-glass">
292              <h3>Make it pop</h3>
293              <p><b>Example loads only the animations and easings for a springy scale-in animation</b></p>
294            </div>
295          </figcaption>
296        </figure>
297      </a>
298      <a href="https://codepen.io/argyleink/pen/KKvRORE">
299        <figure>
300          <picture>
301            <img width="967" height="585" src="/normalize-codepen.png" alt="" loading="lazy">
302          </picture>
303          <figcaption>
304            <img src="/normalize-codepen.png" aria-hidden="true" loading="lazy">
305            <div class="adaptive-glass">
306              <h3>Normalize Preview</h3>
307              <p><b>Light + dark HTML5 minimal styles</b></p>
308            </div>
309          </figcaption>
310        </figure>
311      </a>
312    </div>
313  </section>
314
315  <section id="about" class="just-stretch">
316    <header class="just-stretch">
317      <h2>Why Use Open Props?</h2>
318      <p>It's <b>non-prescriptive</b>.</p>
319    </header>
320    <dl class="marketing-features responsive-dl">
321      <div>
322        <dt>
323          <svg viewBox="0 0 24 24">
324            <path
325              d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
326              stroke="currentColor" fill="none" />
327            <path d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" stroke="currentColor"
328              fill="none" />
329          </svg>
330          Design Consistently
331        </dt>
332        <dd>Incidentally harmonious.</dd>
333      </div>
334      <div>
335        <dt>
336          <svg viewBox="0 0 24 24">
337            <path
338              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
339              stroke="currentColor" fill="none" />
340          </svg>
341          Predictable
342        </dt>
343        <dd>Thanks to consistent naming conventions.</dd>
344      </div>
345      <div>
346        <dt>
347          <svg viewBox="0 0 24 24">
348            <path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" stroke="currentColor" fill="none" />
349            <path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" stroke="currentColor" fill="none" />
350          </svg>
351          Incrementally Adoptable
352        </dt>
353        <dd>Grab all the props, props as JS, or only what you need.</dd>
354      </div>
355      <div>
356        <dt>
357          <svg viewBox="0 0 24 24">
358            <path
359              d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"
360              stroke="currentColor" fill="none" />
361          </svg>
362          Customizable
363        </dt>
364        <dd>Map the props from JS or customize builds from the command line.</dd>
365      </div>
366    </dl>
367  </section>
368
369  <section id="overview">
370    <header>
371      <h2>Overview</h2>
372      <p>File sizes and links to source:</p>
373    </header>
374
375    <div class="just-for-gap">
376      <header>
377        <h4>File Sizes</h4>
378        <blockquote>
379          <p>The following sizes are for the minified files and after <a
380              href="https://github.com/google/brotli">Brotli</a> compression.</p>
381        </blockquote>
382      </header>
383      <dl class="block-wrap bundle-sizes">
384        <div>
385          <dt>Library bundles</dt>
386          <dd class="size-chart" style="row-gap: var(--size-3)">
387            <div class="size"><strong>4.0</strong>kB</div>
388            <div class="file">
389              <a href="https://unpkg.com/open-props">open-props.min.css</a>
390              <div class="child-ref">
391                <svg viewBox="0 0 24 24">
392                  <use href="#bent-arrow" />
393                </svg>
394                500+ props
395              </div>
396            </div>
397          </dd>
398          <dt>Extras</dt>
399          <dd class="size-chart" style="row-gap: var(--size-3)">
400            <div class="size"><strong>1.3</strong>kB</div>
401            <div class="file">
402              <a href="https://unpkg.com/open-props/normalize.min.css">normalize.min.css</a> <a
403                href="https://codepen.io/argyleink/pen/KKvRORE"><small class="green-badge">demo</small></a>
404              <div class="child-ref">
405                <svg viewBox="0 0 24 24">
406                  <use href="#bent-arrow" />
407                </svg>
408                <a
409                  href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.light.css">normalize.light.css</a>
410              </div>
411              <div class="child-ref">
412                <svg viewBox="0 0 24 24">
413                  <use href="#bent-arrow" />
414                </svg>
415                <a
416                  href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.dar
416k.css">normalize.dark.css</a>
417              </div>
418              <div class="child-ref">
419                <svg viewBox="0 0 24 24">
420                  <use href="#bent-arrow" />
421                </svg>
422                <a
423                  href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">theme.light.css</a>
424              </div>
425              <div class="child-ref">
426                <svg viewBox="0 0 24 24">
427                  <use href="#bent-arrow" />
428                </svg>
429                <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">theme.dark.css</a>
430              </div>
431            </div>
432
433            <div class="size"><strong>0.81</strong>kB</div>
434            <div class="file">
435              <a href="https://unpkg.com/open-props/buttons.min.css">buttons.min.css</a> <a
436                href="https://codepen.io/argyleink/pen/gOXbvjj"><small class="green-badge">demo</small></a>
437            </div>
438          </dd>
439        </div>
440
441        <div>
442          <dt>Individual PropPacks ™</dt>
443          <dd class="size-chart">
444            <div class="size"><strong>0.49</strong>kB</div>
445            <div class="file">
446              <a href="https://github.com/argyleink/open-props/blob/main/src/props.animations.css">animations.css</a> <a
447                href="https://codepen.io/argyleink/pen/ZEXQovz"><small class="green-badge">demo</small></a>
448            </div>
449
450            <div class="size"><strong>0.1</strong>kB</div>
451            <div class="file">
452              <a href="https://github.com/argyleink/open-props/blob/main/src/props.aspects.css">aspects.css</a>
453            </div>
454
455            <div class="size"><strong>0.25</strong>kB</div>
456            <div class="file">
457              <a href="https://github.com/argyleink/open-props/blob/main/src/props.borders.css">borders.css</a>
458            </div>
459
460            <div class="size"><strong>1.3</strong>kB</div>
461            <div class="file">
462              <a href="https://github.com/argyleink/open-props/blob/main/src/props.colors.css">colors.css</a>
463              <small>(228)</small>
464              <div class="child-ref">
465                <svg viewBox="0 0 24 24">
466                  <use href="#bent-arrow" />
467                </svg>
468                <a href="https://github.com/argyleink/open-props/blob/main/src/props.pink.css">pink.css</a>
469              </div>
470              <div class="child-ref">
471                <svg viewBox="0 0 24 24">
472                  <use href="#bent-arrow" />
473                </svg>
474                <a href="https://github.com/argyleink/open-props/blob/main/src/props.indigo.css">indigo.css</a>
475              </div>
476              <div class="child-ref">
477                <svg viewBox="0 0 24 24">
478                  <use href="#bent-arrow" />
479                </svg>
480                <span>etc...</span>
481              </div>
482            </div>
483
484            <div class="size"><strong>1.2</strong>kB</div>
485            <div class="file">
486              <a href="https://github.com/argyleink/open-props/blob/main/src/props.colors-hsl.css">colors-hsl.css</a>
487              <div class="child-ref">
488                <svg viewBox="0 0 24 24">
489                  <use href="#bent-arrow" />
490                </svg>
491                <a href="https://github.com/argyleink/open-props/blob/main/src/props.pink-hsl.css">pink-hsl.css</a>
492              </div>
493              <div class="child-ref">
494                <svg viewBox="0 0 24 24">
495                  <use href="#bent-arrow" />
496                </svg>
497                <a href="https://github.com/argyleink/open-props/blob/main/src/props.indigo-hsl.css">indigo-hsl.css</a>
498              </div>
499              <div class="child-ref">
500                <svg viewBox="0 0 24 24">
501                  <use href="#bent-arrow" />
502                </svg>
503                <span>etc...</span>
504              </div>
505            </div>
506
507            <div class="size"><strong>1.4</strong>kB</div>
508            <div class="file">
509              <a href="https://github.com/argyleink/open-props/blob/main/src/extra/durations.css">durations.css</a>
510            </div>
511
512            <div class="size"><strong>0.2</strong>kB</div>
513            <div class="file">
514              <a href="https://github.com/argyleink/open-props/blob/main/src/props.easing.css">easings.css</a>
515            </div>
516
517            <div class="size"><strong>0.4</strong>kB</div>
518            <div class="file">
519              <a href="https://github.com/argyleink/open-props/blob/main/src/props.fonts.css">fonts.css</a>
520            </div>
521
522            <div class="size"><strong>1.0</strong>kB</div>
523            <div class="file">
524              <a href="https://github.com/argyleink/open-props/blob/main/src/props.gradients.css">gradients.css</a>
525            </div>
526
527            <div class="size"><strong>0.62</strong>kB</div>
528            <div class="file">
529              <a href="https://github.com/argyleink/open-props/blob/main/src/props.masks.edges.css">masks.edges.css</a>
530            </div>
531
532            <div class="size"><strong>0.23</strong>kB</div>
533            <div class="file">
534              <a
535                href="https://github.com/argyleink/open-props/blob/main/src/props.masks.corner-cuts.css">masks.corner-cuts.css</a>
536            </div>
537
538            <div class="size"><strong>0.38</strong>kB</div>
539            <div class="file">
540              <a href="https://github.com/argyleink/open-props/blob/main/src/props.media.css">media.css</a>
541            </div>
542
543            <div class="size"><strong>0.26</strong>kB</div>
544            <div class="file">
545              <a href="https://github.com/argyleink/open-props/blob/main/src/props.shadows.css">shadows.css</a>
546            </div>
547
548            <div class="size"><strong>0.2</strong>kB</div>
549            <div class="file">
550              <a href="https://github.com/argyleink/open-props/blob/main/src/props.sizes.css">sizes.css</a>
551            </div>
552
553            <div class="size"><strong>0.1</strong>kB</div>
554            <div class="file">
555              <a href="https://github.com/argyleink/open-props/blob/main/src/props.supports.css">supports.css</a>
556            </div>
557
558            <div class="size"><strong>0.05</strong>kB</div>
559            <div class="file">
560              <a href="https://github.com/argyleink/open-props/blob/main/src/props.zindex.css">zindex.css</a>
561            </div>
562
563            <div class="size"><strong>0.30</strong>kB</div>
564            <div class="file">
565              <a
566                href="https://github.com/argyleink/open-props/blob/main/src/props.brand-colors.css">brand-colors.css</a>
567              <a href="https://codepen.io/aspizu/pen/LYwNeyz"><small class="green-badge">demo</small></a>
568            </div>
569          </dd>
570        </div>
571
572        <div>
573          <dt>Coming Soon?!</dt>
574
575          <dd class="size-chart">
576            <div class="size"><strong>??</strong></div>
577            <div class="file">icons.css <small class="yellow-badge">WIP</small></div>
578            <div class="size"><strong>??</strong></div>
579            <div class="file">svg.css <small class="yellow-badge">WIP</small></div>
580            <div class="size"><strong>??</strong></div>
581            <div class="file">patterns.css <small class="yellow-badge">WIP</small></div>
582            <div class="size"><strong>??</strong></div>
583            <div class="file">at-property.css <small class="yellow-badge">WIP</small></div>
584            <div class="size"><strong>??</strong></div>
585            <div class="file">shapes.css <small class="yellow-badge">WIP</small></div>
586            <div class="size"><strong>??</strong></div>
587            <div class="file">layouts.css <small class="yellow-badge">WIP</small></div>
588            <div class="size"><strong>??</strong></div>
589            <div class="file">clips.css <small class="yellow-badge">WIP</small></div>
590            <div class="size"><strong>??</strong></div>
591            <div class="file">variable-fonts.css <small class="yellow-badge">WIP</small></div>
592            <div class="size"><strong>??</strong></div>
593            <div class="file">lists.css <small class="yellow-badge">WIP</small></div>
594            <div class="size"><strong>??</strong></div>
595            <div class="file">counters.css <small class="yellow-badge">WIP</small></div>
596            <div class="size"><strong>??</strong></div>
597            <div class="file">utilities.css <small class="yellow-badge">WIP</small></div>
598          </dd>
599        </div>
600      </dl>
601    </div>
602  </section>
603
604  <section class="dogfood place-full block-wrap">
605    <header>
606      <h2>
607        This site
608        <br>is built
609        <br>with Open Props.
610      </h2>
611    </header>
612    <div>
613      <pre class="language-css"><code>
614          @import "https://unpkg.com/open-props";
615        </code></pre>
616    </div>
617    <div>
618      <pre class="language-css"><code>
619          .just-for-gap {
620            display: grid;
621            gap: var(--size-4);
622          }
623        </code></pre>
624    </div>
625    <div>
626      <pre class="language-css"><code>
627          blockquote {
628            --_accent-1: var(--lime-5);
629            --_accent-2: var(--lime-4);
630            --_bg: var(--surface-2);
631            --_ink: var(--text-1);
632
633            color: var(--_ink);
634            border-color: var(--_accent-2);
635            background-color: var(--_bg);
636            justify-self: flex-start;
637          }
638        </code></pre>
639    </div>
640    <div>
641      <pre class="language-css"><code>
642          .gradient-swatch {
643            border-radius: var(--radius-2);
644            aspect-ratio: var(--ratio-landscape);
645          }
646        </code></pre>
647    </div>
648    <div>
649      <pre class="language-css"><code>
650          pre > code {
651            box-shadow: var(--shadow-6);
652            font-family: var(--font-mono);
653            font-size: var(--font-size-2);
654          }
655        </code></pre>
656    </div>
657    <div>
658      <pre class="language-css"><code>
659          .yellow-badge {
660            padding-inline: var(--size-1);
661            border-width: var(--border-size-1);
662            border-color: var(--yellow-6);
663            color: var(--yellow-2);
664            border-radius: var(--radius-round);
665
666            [data-theme="light"] & {
667              border-color: var(--orange-2);
668              color: var(--orange-6);
669            }
670          }
671        </code></pre>
672    </div>
673    <div>
674      <pre class="language-css"><code>
675          .block-wrap {
676            display: flex;
677            flex-wrap: wrap;
678            flex-basis: var(--size-content-2);
679            gap: var(--size-5) var(--size-8);
680            align-items: flex-start;
681          }
682        </code></pre>
683    </div>
684    <div>
685      <pre class="language-css"><code>
686          .demo-gallery figure {
687            border-radius: var(--radius-3);
688            box-shadow: var(--shadow-4);
689          }
690        </code></pre>
691    </div>
692    <div>
693      <pre class="language-css"><code>
694          .op-icon-p {
695            stroke: var(--indigo-2);
696            a:hover & { stroke: var(--indigo-1); }
697
698            [data-theme="light"] & {
699              stroke: var(--indigo-9);
700              a:hover & { stroke: var(--indigo-8); }
701            }
702          }
703        </code></pre>
704    </div>
705    <div>
706      <pre class="language-css"><code>
707          .checkmark-list {
708            align-self: flex-start;
709            display: grid;
710            gap: var(--size-2);
711            font-size: var(--font-size-fluid-1);
712            font-weight: var(--font-weight-2);
713            padding-inline-start: 0;
714          }
715        </code></pre>
716    </div>
717  </section>
718
719  <section id="getting-started">
720    <header>
721      <h2>Getting Started</h2>
722      <div class="block-wrap">
723        <p>These props come in many flavors: <b>CSS</b>, <b>PostCSS</b>, <b>JSON</b>, or <b>Javascript</b>. Get em from
724          a <b>CDN</b> or <b>NPM</b>. Try it in browser with <b>Preact</b>, <b>Vite</b>, <b>Vanilla Extract</b>,
725          <b>Lit</b>, <b>Qwik</b>, you name it, it's in this <a
726            href="https://stackblitz.com/@argyleink/collections/open-props">helpful Stackblitz collection</a>
727        </p>
728        <blockquote class="icon-quote indigo">
729          <svg viewBox="0 0 32 32">
730            <path fill="#7289da"
731              d="M26.963 0c1.875 0 3.387 1.516 3.476 3.3v28.7l-3.569-3.031-1.96-1.784-2.139-1.864 0.893 2.94h-18.717c-1.869 0-3.387-1.42-3.387-3.301v-21.653c0-1.784 1.52-3.303 3.393-3.303h22zM18.805 7.577h-0.040l-0.269 0.267c2.764 0.8 4.101 2.049 4.101 2.049-1.781-0.891-3.387-1.336-4.992-1.516-1.16-0.18-2.32-0.085-3.3 0h-0.267c-0.627 0-1.96 0.267-3.747 0.98-0.623 0.271-0.98 0.448-0.98 0.448s1.336-1.336 4.28-2.049l-0.18-0.18c0 0-2.229-0.085-4.636 1.693 0 0-2.407 4.192-2.407 9.36 0 0 1.333 2.32 4.991 2.408 0 0 0.533-0.711 1.073-1.336-2.053-0.624-2.853-1.872-2.853-1.872s0.179 0.088 0.447 0.267h0.080c0.040 0 0.059 0.020 0.080 0.040v0.008c0.021 0.021 0.040 0.040 0.080 0.040 0.44 0.181 0.88 0.36 1.24 0.533 0.621 0.269 1.42 0.537 2.4 0.715 1.24 0.18 2.661 0.267 4.28 0 0.8-0.18 1.6-0.356 2.4-0.713 0.52-0.267 1.16-0.533 1.863-0.983 0 0-0.8 1.248-2.94 1.872 0.44 0.621 1.060 1.333 1.060 1.333 3.659-0.080 5.080-2.4 5.16-2.301 0-5.16-2.42-9.36-2.42-9.36-2.18-1.619-4.22-1.68-4.58-1.68zM19.029 13.461c0.937 0 1.693 0.8 1.693 1.78 0 0.987-0.76 1.787-1.693 1.787s-1.693-0.8-1.693-1.779c0.003-0.987 0.764-1.784 1.693-1.788zM12.972 13.461c0.933 0 1.688 0.8 1.688 1.78 0 0.987-0.76 1.787-1.693 1.787s-1.693-0.8-1.693-1.779c0-0.987 0.76-1.784 1.699-1.788z">
732            </path>
733          </svg>
734          <p>
735            <b>Need help?</b> <br>
736            Ask a question on <a href="https://discord.gg/AqA4fU886r">Discord</a>
737          </p>
738        </blockquote>
739      </div>
740    </header>
741    <div class="learn-with-jason">
742      <h4>Learn with Jason & Adam</h4>
743      <iframe width="560" height="315" src="https://www.youtube.com/embed/9VXR_qRgROE" title="YouTube video player"
744        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
745        allowfullscreen></iframe>
746    </div>
747    <article class="installation">
748      <div class="block-wrap" id="cdn">
749        <div class="contain-pre">
750          <header>
751            <h4>CDN</h4>
752            <p>No installation required.</p>
753            <p><a href="https://unpkg.com/browse/open-props@latest/">View all ↗</a></p>
754          </header>
755
756          <details class="started-details">
757            <summary>CSS</summary>
758
759            <div>
760              <h6>index.css</h6>
761              <pre class="language-css"><code>
762                  /* the props */
763                  @import "https://unpkg.com/open-props";
764
765                  /* optional imports that use the props */
766                  @import "https://unpkg.com/open-props/normalize.min.css";
767                  @import "https://unpkg.com/open-props/buttons.min.css";
768
769                  /* just dark or light themes */
770                  @import "https://unpkg.com/open-props/normalize.dar
770k.min.css";
771                  @import "https://unpkg.com/open-props/buttons.dark.min.css";
772                  @import "https://unpkg.com/open-props/normalize.light.min.css";
773                  @import "https://unpkg.com/open-props/buttons.light.min.css";
774
775                  /* individual imports */
776                  @import "https://unpkg.com/open-props/indigo.min.css";
777                  @import "https://unpkg.com/open-props/indigo-hsl.min.css";
778                  @import "https://unpkg.com/open-props/easings.min.css";
779                  @import "https://unpkg.com/open-props/animations.min.css";
780                  @import "https://unpkg.com/open-props/sizes.min.css";
781                  @import "https://unpkg.com/open-props/gradients.min.css";
782                  /* see PropPacks for the full list */
783                </code></pre>
784            </div>
785
786            <div>
787              <h6>index.html</h6>
788              <pre class="language-html"><code>
789                  &#60;!-- the props --&#62;
790                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props"/&#62;
791
792                  &#60;!-- optional imports that use the props --&#62;
793                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/&#62;
794                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/buttons.min.css"/&#62;
795
796                  &#60;!-- individual imports --&#62;
797                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/indigo.min.css"/&#62;
798                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/indigo-hsl.min.css"/&#62;
799                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/easings.min.css"/&#62;
800                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/animations.min.css"/&#62;
801                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/sizes.min.css"/&#62;
802                  &#60;link rel="stylesheet" href="https://unpkg.com/open-props/gradients.min.css"/&#62;
803                  &#60;!-- see PropPacks for the full list --&#62;
804                </code></pre>
805            </div>
806
807            <div>
808              <h6>index.js</h6>
809              <pre class="language-js"><code>
810                  // the props
811                  import 'https://unpkg.com/open-props';
812
813                  // optional imports that use the props
814                  import 'https://unpkg.com/open-props/normalize.min.css';
815                  import 'https://unpkg.com/open-props/buttons.min.css';
816
817                  // just go dark themed or light themed
818                  import 'https://unpkg.com/open-props/normalize.dark.min.css';
819                  import 'https://unpkg.com/open-props/buttons.dark.min.css';
820                  import 'https://unpkg.com/open-props/normalize.light.min.css';
821                  import 'https://unpkg.com/open-props/buttons.light.min.css';
822
823                  // individual imports
824                  import 'https://unpkg.com/open-props/indigo.min.css';
825                  import 'https://unpkg.com/open-props/indigo-hsl.min.css';
826                  import 'https://unpkg.com/open-props/easings.min.css';
827                  import 'https://unpkg.com/open-props/animations.min.css';
828                  import 'https://unpkg.com/open-props/sizes.min.css';
829                  import 'https://unpkg.com/open-props/gradients.min.css';
830                  // see PropPacks for the full list
831                </code></pre>
832            </div>
833          </details>
834
835          <details class="started-details">
836            <summary>PostCSS</summary>
837
838            <div>
839              <h6>CSS import examples</h6>
840              <pre class="language-css"><code>
841                  /* the props */
842                  @import "https://unpkg.com/open-props/src/index.css";
843
844                  /* optional imports that use the props */
845                  @import "https://unpkg.com/open-props/src/extra/normalize.css";
846                  @import "https://unpkg.com/open-props/src/extra/buttons.css";
847
848                  /* individual imports */
849                  @import "https://unpkg.com/open-props/src/indigo.min.css";
850                  @import "https://unpkg.com/open-props/src/indigo-hsl.min.css";
851                  @import "https://unpkg.com/open-props/src/easings.min.css";
852                  @import "https://unpkg.com/open-props/src/animations.min.css";
853                  @import "https://unpkg.com/open-props/src/sizes.min.css";
854                  @import "https://unpkg.com/open-props/src/gradients.min.css";
855                  /* see PropPacks for the full list */
856                </code></pre>
857            </div>
858          </details>
859
860          <details class="started-details" id="design-tokens">
861            <summary>Design Tokens</summary>
862            <div>
863              <br>
864              <p>Not all props can be represented as a design token.</p>
865              <div class="block-wrap">
866                <div class="just-for-sm-gap">
867                  <h6>JSON</h6>
868                  <p>Follows the <a href="https://www.designtokens.org/tr/2025.10/">Design Tokens 2025.10 Spec</a></p>
869                  <pre class="language-js"><code>
870                    https://unpkg.com/open-props/open-props.resolver.json
871                    </code></pre>
872                </div>
873                <div class="just-for-sm-gap">
874                  <h6>JSON</h6>
875                  <p>Follows the <a href="https://design-tokens.github.io/community-group/format/">Design Tokens Spec Draft</a></p>
876                  <pre class="language-js"><code>
877                    https://unpkg.com/open-props/open-props.tokens.json
878                    </code></pre>
879                </div>
880                <div class="just-for-sm-gap">
881                  <h6>Figma Tokens</h6>
882                  <p>Community created <a href="https://github.com/hchiam/figma-tokens-sync-example">setup
883                      instructions</a>.</p>
884                  <pre class="language-js"><code>
885                    https://unpkg.com/open-props/open-props.figma-tokens.json
886                    https://unpkg.com/open-props/open-props.figma-tokens.sync.json
887                    </code></pre>
888                </div>
889              </div>
890            </div>
891          </details>
892
893          <details class="started-details" id="style-dictionary-design-tokens">
894            <summary>Style Dictionary</summary>
895            <div>
896              <br>
897              <div class="just-for-sm-gap">
898                <a href="https://unpkg.com/open-props/open-props.style-dictionary-tokens.json">Preview the JSON</a>
899                <a href="https://www.sveltelab.dev/zwfgmq5ftobw6vy">Example usage (community added)</a>
900                <a href="https://www.npmjs.com/package/@csstools/postcss-design-tokens">Use with
901                  @csstools/postcss-design-tokens</a>
902                <a href="https://github.com/argyleink/open-props/pull/433#issuecomment-1776942415">More details</a>
903              </div>
904              <div class="block-wrap">
905                <div class="just-for-sm-gap">
906                  <h6>Tokens</h6>
907                  <pre class="language-js"><code>
908                    import "open-props/style-dictionary-tokens"
909                    // or
910                    import "open-props/open-props.style-dictionary-tokens.json"
911                    </code></pre>
912                  <pre class="language-js"><code>
913                    https://unpkg.com/open-props/open-props.style-dictionary-tokens.json
914                    </code></pre>
915                </div>
916              </div>
917            </div>
918          </details>
919
920          <details class="started-details">
921            <summary>Web Components</summary>
922
923            <div>
924              <h6>NPM import examples</h6>
925              <pre class="language-css"><code>
926                  /* the props */
927                  @import "open-props/shadow/style";
928                  @import "open-props/open-props.shadow.min.css";
929
930                  /* individual imports */
931                  @import "open-props/shadow/indigo";
932                  @import "open-props/shadow/indigo-hsl";
933                  @import "open-props/shadow/easings";
934                  @import "open-props/shadow/animations";
935                  @import "open-props/shadow/sizes";
936                  @import "open-props/shadow/gradients";
937                  /* see PropPacks for the full list */
938                </code></pre>
939            </div>
940
941            <div>
942              <h6>CDN import examples</h6>
943              <p>These props are scoped to <b>:host</b> for use in shadow DOM.</p>
944              <pre class="language-css"><code>
945                  /* the props */
946                  @import "https://unpkg.com/open-props/open-props.shadow.min.css";
947
948                  /* individual imports */
949                  @import "https://unpkg.com/open-props/indigo.shadow.min.css";
950                  @import "https://unpkg.com/open-props/indigo.shadow-hsl.min.css";
951                  @import "https://unpkg.com/open-props/easings.shadow.min.css";
952                  @import "https://unpkg.com/open-props/animations.shadow.min.css";
953                  @import "https://unpkg.com/open-props/sizes.shadow.min.css";
954                  @import "https://unpkg.com/open-props/gradients.shadow.min.css";
955                  /* see PropPacks for the full list */
956                </code></pre>
957            </div>
958          </details>
959        </div>
960
961        <div class="contain-pre" id="npm">
962          <h4>NPM</h4>
963          <pre class="language-bash"><code>npm install open-props</code></pre>
964
965          <details class="started-details">
966            <summary>CSS</summary>
967            <div>
968              <h6>CSS Imports</h6>
969              <div class="block-wrap">
970                <pre class="language-css"><code>
971                    /* the props */
972                    @import "open-props/style";
973
974                    /* optional imports that use the props */
975                    @import "open-props/normalize";
976                    @import "open-props/buttons";
977
978                    /* just light or dark themes */
979                    @import "open-props/normalize/dark";
980                    @import "open-props/buttons/dark";
981                    @import "open-props/normalize/light";
982                    @import "open-props/buttons/light";
983
984                    /* individual imports */
985                    @import "open-props/indigo";
986                    @import "open-props/easings";
987                    @import "open-props/animations";
988                    @import "open-props/sizes";
989                    @import "open-props/gradients";
990                    /* see PropPacks for the full list */
991                  </code></pre>
992              </div>
993            </div>
994
995            <div>
996              <h6>Full Path Imports</h6>
997              <div class="block-wrap">
998                <pre class="language-css"><code>
999                    /* the props */
1000                    @import "open-props/open-props.min.css";
1001
1002                    /* optional imports that use the props */
1003                    @import "open-props/normalize.min.css";
1004                    @import "open-props/buttons.min.css";
1005
1006                    /* individual imports */
1007                    @import "open-props/indigo.min.css";
1008                    @import "open-props/easings.min.css";
1009                    @import "open-props/animations.min.css";
1010                    @import "open-props/sizes.min.css";
1011                    @import "open-props/gradients.min.css";
1012                    /* see PropPacks for the full list */
1013                  </code></pre>
1014              </div>
1015            </div>
1016          </details>
1017
1018          <details class="started-details">
1019            <summary>PostCSS</summary>
1020
1021            <div>
1022              <h6>CSS Imports</h6>
1023              <pre class="language-css"><code>
1024                  /* the props */
1025                  @import "open-props/postcss/style";
1026
1027                  /* optional imports that use the props */
1028                  @import "open-props/postcss/normalize";
1029                  @import "open-props/postcss/buttons";
1030
1031                  /* individual imports */
1032                  @import "open-props/postcss/indigo";
1033                  @import "open-props/postcss/easings";
1034                  @import "open-props/postcss/animations";
1035                  @import "open-props/postcss/sizes";
1036                  @import "open-props/postcss/gradients";
1037                  /* see PropPacks for the full list */
1038                </code></pre>
1039            </div>
1040
1041            <div>
1042              <h6>Full Path CSS Imports</h6>
1043              <pre class="language-css"><code>
1044                  /* the props */
1045                  @import "open-props/postcss/index.css";
1046
1047                  /* optional imports that use the props */
1048                  @import "open-props/postcss/extra/normalize.css";
1049                  @import "open-props/postcss/extra/buttons.css";
1050
1051                  /* individual imports */
1052                  @import "open-props/postcss/indigo.min.css";
1053                  @import "open-props/postcss/easings.min.css";
1054                  @import "open-props/postcss/animations.min.css";
1055                  @import "open-props/postcss/sizes.min.css";
1056                  @import "open-props/postcss/gradients.min.css";
1057                  /* see PropPacks for the full list */
1058                </code></pre>
1059            </div>
1060          </details>
1061
1062          <details class="started-details">
1063            <summary>JavaScript</summary>
1064            <div style="margin-block-start: var(--size-5)">
1065              <a href="https://github.com/argyleink/open-props/blob/main/package.json#L30-L41">All JavaScript
1066                imports</a>
1067            </div>
1068            <div class="block-wrap">
1069              <div>
1070                <h6>Bundles</h6>
1071                <pre class="language-js"><code>
1072                    // index.js loading JS object
1073                    import OpenProps from 'open-props'; // module
1074                    import OpenProps from 'open-props/src';
1074 // unbundled ES module
1075                    import Colors from 'open-props/src/colors';
1076
1077                    // object notation access is special to OpenProps
1078                    console.info(OpenProps.size1);
1079                    console.info(OpenProps['--size-1']);
1080
1081                    console.info(Colors['--indigo-5']);
1082                  </code></pre>
1083              </div>
1084
1085              <div>
1086                <h6>Individual imports</h6>
1087                <pre class="language-js"><code>
1088                    // import just 1 color set object
1089                    import {Indigo} from 'open-props/src/colors';
1090
1091                    // import shadows without prop deps
1092                    import {StaticShadows} from 'open-props/src/shadows';
1093
1094                    // import the gradients
1095                    import Gradients from 'open-props/src/gradients';
1096                    // see PropPacks for the full list
1097                  </code></pre>
1098              </div>
1099            </div>
1100          </details>
1101
1102          <details class="started-details">
1103            <summary>Design Tokens</summary>
1104            <div>
1105              <div class="block-wrap">
1106                <pre class="language-js"><code>
1107                  /* 4 ways to import */
1108                  /* based on the latest specification */
1109                  import 'open-props/resolver'
1110                  /* legacy format */
1111                  import 'open-props/tokens'
1112                  import 'open-props/json'
1113                  import 'open-props/design-tokens'
1114                  </code></pre>
1115              </div>
1116            </div>
1117          </details>
1118
1119          <h5 id="jitprops">PostCSS JIT Props</h5>
1120          <p>Only ship the props you use. <a href="https://github.com/GoogleChromeLabs/postcss-jit-props">Learn
1121              more</a>.</p>
1122
1123          <details class="started-details">
1124            <summary>PostCSS</summary>
1125
1126            <pre class="language-bash"><code>npm install postcss-jit-props</code></pre>
1127
1128            <br>
1129            <p>Stop importing Open Props in your CSS (if you were).</p>
1130            <p><b>This plugin adds them to your stylesheet as you use them 🙂</b></p>
1131
1132            <div class="block-wrap">
1133              <div>
1134                <h6>Props as Javascript</h6>
1135                <pre class="language-js"><code>
1136                    // postcss.config.js
1137                    const postcssJitProps = require('postcss-jit-props');
1138                    const OpenProps = require('open-props');
1139
1140                    module.exports = {
1141                      plugins: [
1142                        postcssJitProps(OpenProps),
1143                      ]
1144                    }
1145                  </code></pre>
1146              </div>
1147              <div>
1148                <h6>Props from CSS</h6>
1149                <pre class="language-js"><code>
1150                    // postcss.config.js
1151                    const postcssJitProps = require('postcss-jit-props');
1152                    const path = require('path');
1153
1154                    module.exports = {
1155                      plugins: [
1156                        postcssJitProps({
1157                          files: [
1158                            path.resolve(__dirname, 'node_modules/open-props/open-props.min.css'),
1159                          ]
1160                        }),
1161                      ]
1162                    }
1163                  </code></pre>
1164              </div>
1165            </div>
1166          </details>
1167        </div>
1168        <div class="contain-pre" id="cli">
1169          <h4>CLI</h4>
1170          <pre class="language-bash"><code>git clone https://github.com/argyleink/open-props.git</code></pre>
1171
1172          <details class="started-details">
1173            <summary>Customize your build</summary>
1174            <div class="block-wrap">
1175              <div>
1176                <h6>Customize Bundles</h6>
1177                <p></p>
1178                <pre class="language-js"><code>
1179                    // build src files
1180                    npm run gen:shadowdom                   // src files with `:host` instead of `html`
1181                    npm run gen:nowhere                     // src files without `:where()`
1182                    npm run gen:prefixed                    // each prop prefixed with `op`, like `--op-font-size-1`
1183
1184                    // full custom! pass args with node to the props.js script
1185                    node props.js 'ns' true ':root' 'my'
1186                    ⇣
1187                    // arg1: default '', is a custom namespace, props will be --ns-gray-1
1188                    // arg2: default false, indicates wrapping in :where() or not
1189                    // arg3: default '', set a custom selector like :scope, .my-class, etc
1190                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
1191                  </code></pre>
1192              </div>
1193              <div>
1194                <h6>Build Locally</h6>
1195                <pre class="language-js"><code>
1196                    npm run gen:op          // runs through `src/` js files and creates the PostCSS files in `src/`
1197                    npm run gen:shadowdom   // runs through `src/` js files and creates the PostCSS files in `src/`
1198                    npm run build           // does both gen:op and gen:shadowdom
1199                    npm run bundle          // creates all the various minified bundles of props
1200                    npm run lib:js          // builds the JS modules for NPM
1201                  </code></pre>
1202              </div>
1203            </div>
1204          </details>
1205        </div>
1206      </div>
1207      <div class="contain-pre" id="autocomplete">
1208        <h4>Autocomplete</h4>
1209        <details class="started-details">
1210          <summary>VScode</summary>
1211          <ol>
1212            <li>
1213              VScode has an intellisense feature which you can tap into,
1214              by passing the path to the <code>node_modules</code> folder where
1215              open-props is installed
1216            </li>
1217            <li>
1218              In your VScode environment, navigate to the extensions
1219              marketplace, and install this
1220              <a href="https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar" target="__blank">
1221                CSS Var Complete
1222              </a>
1223              extension
1224            </li>
1225            <li>
1226              When the extension is installed, you'll have to add
1227              open-prop's css file path to a
1228              <code>.vscode/settings.json</code>file. Take a look at an
1229              illustration below
1230            </li>
1231            <pre class="language-js"><code>
1232                // .vscode/settings.json file
1233                {
1234                  "cssvar.files": [
1235                    "./node_modules/open-props/open-props.min.css",
1236                    // if you have an alternative path to where your styles are located
1237                    // you can add it in this array of files
1238                    "assets/styles/variables.css"
1239                  ],
1240
1241                  // Do not ignore node_modules css files, which is ignored by default
1242                  "cssvar.ignore": [],
1243
1244                  // add support for autocomplete in JS or JS like files
1245                  "cssvar.extensions": [
1246                    "css", "postcss", "jsx", "tsx"
1247                  ]
1248                }
1249              </code></pre>
1250            <li>
1251              Check details on settings and it's defaults&nbsp;
1252              <a href="https://github.com/willofindie/vscode-cssvar#supported-configs" target="__blank">
1253                in the repo
1254              </a>
1255            </li>
1256          </ol>
1257        </details>
1258        <details class="started-details">
1259          <summary>Sublime Text</summary>
1260          <ol>
1261            <li>
1262              There are number of ways with which the autocomplete engine of Sublime Text can be extended.
1263              You can decide to use the <a href="https://www.sublimetext.com/docs/completions.html#completion-files"
1264                target="_blank">completion files</a>,
1265              <a href="https://www.sublimetext.com/docs/completions.html#snippets" target="_blank">snippets</a> or
1266              <a href="https://www.sublimetext.com/docs/completions.html#plugins" target="_blank">plugins</a>.
1267            </li>
1268            <li>
1269              An approach that is less strenuous is the "completion file" approach.
1270              Here, all you'd be required to do is point the `scope` keyword in the .sublime-completions file to the
1271              open-props classes in the node_modules folder like so:
1272            </li>
1273            <pre class="language-js"><code>
1274                // .sublime-completions file
1275                {
1276                  "scope": "./node_modules/open-props/open-props.min.css",
1277                  "completions": [
1278                    // here you'll add the classes you want autocomplete for.
1279                  ]
1280              }
1281              </code></pre>
1282            <li>You can also add an alternative path to your variables, if you have one &mdash; in the completions file,
1283              like so:</li>
1284            <pre class="language-js"><code>
1285                // .sublime-completions file
1286                {
1287                  "scope": "path/to/your/variables",
1288              }
1289              </code></pre>
1290            <li>Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via
1291              <b>Preferences > Settings</b>, then you'll modify the file to include the snippet below &mdash; replacing
1292              "source" with the path to your variables.
1293            </li>
1294            <pre class="language-js"><code>
1295                "auto-complete-selector": "source, text"
1296              </code></pre>
1297            <li>
1298              You can learn more about the completion process in Sublime Text
1299              <a href="https://www.sublimetext.com/docs/completions.html" target="__blank"> here.
1300              </a>
1301            </li>
1302          </ol>
1303        </details>
1304      </div>
1305    </article>
1306  </section>
1307
1308  <section id="colors">
1309    <header>
1310      <h2>Colors</h2>
1311      <div class="block-wrap">
1312        <p>Open Props includes <a href="https://yeun.github.io/open-color/">Open Color</a>, an open-source color scheme
1313          optimized for UI development, and its extension, <a href="https://github.com/fchristant/colar">Colar</a>.</p>
1314        <blockquote class="icon-quote">
1315          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
1316            <path
1317              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
1318          </svg>
1319          <span>Open the color picker in your browser dev tools, set the swatches to the page's custom properties, and
1320            enjoy picking from the set!</span>
1321        </blockquote>
1322      </div>
1323    </header>
1324
1325    <div class="block-wrap">
1326      <div>
1327        <h5>The Props</h5>
1328        <div class="var-examples">
1329          <pre class="language-css"><code>
1330              --gray-{0-12}
1331              --stone-{0-12}
1332              --red-{0-12}
1333              --pink-{0-12}
1334              --purple-{0-12}
1335              --violet-{0-12}
1336              --indigo-{0-12}
1337              --blue-{0-12}
1338              --cyan-{0-12}
1339              --teal-{0-12}
1340              --green-{0-12}
1341              --lime-{0-12}
1342              --yellow-{0-12}
1343              --orange-{0-12}
1344              --choco-{0-12}
1345              --brown-{0-12}
1346              --sand-{0-12}
1347              --camo-{0-12}
1348              --jungle-{0-12}
1349            </code></pre>
1350        </div>
1351      </div>
1352      <div>
1353        <h5>Button Sample</h5>
1354        <pre class="language-css"><code>
1355            button.blue {
1356              color: var(--blue-6);
1357              background-color: var(--blue-0);
1358              border: 1px solid var(--blue-1);
1359              text-shadow: 0 1px 0 var(--blue-2);
1360
1361              &:hover {
1362                background-color: var(--blue-1);
1363              }
1364            }
1365          </code></pre>
1366      </div>
1367      <div>
1368        <h5>Light & Dark Example</h5>
1369        <pre class="language-css"><code>
1370            html {
1371              --text-1: var(--gray-9);
1372              --text-2: var(--gray-7);
1373
1374              @media (--OSdark) {
1375                --text-1: var(--gray-1);
1376                --text-2: var(--gray-2);
1377              }
1378            }
1379          </code></pre>
1380      </div>
1381      <div>
1382        <h5>Modify Opacity Example</h5>
1383        <pre class="language-css"><code>
1384            /* additional import required */
1385            /* @import "open-props/gray-hsl"; */
1386            @import "open-props/colors-hsl";
1387
1388            .backdrop {
1389              background-color: hsl(var(--gray-9-hsl) / 30%);
1390            }
1391          </code></pre>
1392      </div>
1393    </div>
1394
1395    <div class="copy-options">
1396      <form>
1397        <p>Copy type</p>
1398        <div class="options">
1399          <div class="input-group">
1400            <input type="radio" name="copy-format" id="prop" checked>
1401            <label for="prop">
1402              CSS Property <span class="example">Ex: var(--gray-1)</span>
1403            </label>
1404          </div>
1405          <div class="input-group">
1406            <input type="radio" name="copy-format" id="color-code">
1407            <label for="color-code">
1408              Color Code <span class="example">Ex: rgb(3, 5, 7)</span>
1409            </label>
1410          </div>
1411        </div>
1412      </form>
1413
1414      <form>
1415        <p>Copy format</p>
1416        <div class="options">
1417          <div class="input-group">
1418            <input type="radio" name="color-format" id="rgb" checked disabled>
1419            <label for="rgb">RGB</label>
1420          </div>
1421          <div class="input-group">
1422            <input type="radio" name="color-format" id="hex" disabled>
1423            <label for="hex">HEX</label>
1424          </div>
1425          <div class="input-group">
1426            <input type="radio" name="color-format" id="hsl" disabled>
1427            <label for="hsl">HSL</label>
1428          </div>
1429        </div>
1430      </form>
1431    </div>
1432
1433    <article class="just-stretch">
1434      <ul class="open-colors count-em color-swatch-list">
1435        <h4>Gray</h4>
1436        <li> <button class="color-swatch" style="background-color: var(--gray-0);" aria-label="gray 0"></button> </li>
1437        <li> <button class="color-swatch" style="background-color: var(--gray-1);" aria-label="gray 1"></button> </li>
1438        <li> <button class="color-swatch" style="background-color: var(--gray-2);" aria-label="gray 2"></button> </li>
1439        <li> <button class="color-swatch" style="background-color: var(--gray-3);" aria-label="gray 3"></button> </li>
1440        <li> <button class="color-swatch" style="background-color: var(--gray-4);" aria-label="gray 4"></button> </li>
1441        <li> <button class="color-swatch" style="background-color: var(--gray-5);" aria-label="gray 5"></button> </li>
1442        <li> <button class="color-swatch" style="background-color: var(--gray-6);" aria-label="gray 6"></button> </li>
1443        <li> <button class="color-swatch" style="background-color: var(--gray-7);" aria-label="gray 7"></button> </li>
1444        <li> <button class="color-swatch" style="background-color: var(--gray-8);" aria-label="gray 8"></button> </li>
1445        <li> <button class="color-swatch" style="background-color: var(--gray-9);" aria-label="gray 9"></button> </li>
1446        <li> <button class="color-swatch" style="background-color: var(--gray-10);" aria-label="gray 10"></button> </li>
1447        <li> <button class="color-swatch" style="background-color: var(--gray-11);" aria-label="gray 11"></button> </li>
1448        <li> <button class="color-swatch" style="background-color: var(--gray-12);" aria-label="gray 12"></button> </li>
1449      </ul>
1450      <ul class="open-colors count-em color-swatch-list">
1451        <h4>Stone</h4>
1452        <li> <button class="color-swatch" style="background-color: var(--stone-0)" aria-label="stone 0"></button> </li>
1453        <li> <button class="color-swatch" style="background-color: var(--stone-1)" aria-label="stone 1"></button> </li>
1454        <li> <button class="color-swatch" style="background-color: var(--stone-2)" aria-label="stone 2"></button> </li>
1455        <li> <button class="color-swatch" style="background-color: var(--stone-3)" aria-label="stone 3"></button> </li>
1456        <li> <button class="color-swatch" style="background-color: var(--stone-4)" aria-label="stone 4"></button> </li>
1457        <li> <button class="color-swatch" style="background-color: var(--stone-5)" aria-label="stone 5"></button> </li>
1458        <li> <button class="color-swatch" style="background-color: var(--stone-6)" aria-label="stone 6"></button> </li>
1459        <li> <button class="color-swatch" style="background-color: var(--stone-7)" aria-label="stone 7"></button> </li>
1460        <li> <button class="color-swatch" style="background-color: var(--stone-8)" aria-label="stone 8"></button> </li>
1461        <li> <button class="color-swatch" style="background-color: var(--stone-9)" aria-label="stone 9"></button> </li>
1462        <li> <button class="color-swatch" style="background-color: var(--stone-10)" aria-label="stone 10"></button>
1463        </li>
1464        <li> <button class="color-swatch" style="background-color: var(--stone-11)" aria-label="stone 11"></button>
1465        </li>
1466        <li> <button class="color-swatch" style="background-color: var(--stone-12)" aria-label="stone 12"></button>
1467        </li>
1468      </ul>
1469      <ul class="open-colors count-em color-swatch-list">
1470        <h4>Red</h4>
1471        <li> <button class="color-swatch" style="background-color: var(--red-0)" aria-label="red 0"></button> </li>
1472        <li> <button class="color-swatch" style="background-color: var(--red-1)" aria-label="red 1"></button> </li>
1473        <li> <button class="color-swatch" style="background-color: var(--red-2)" aria-label="red 2"></button> </li>
1474        <li> <button class="color-swatch" style="background-color: var(--red-3)" aria-label="red 3"></button> </li>
1475        <li> <button class="color-swatch" style="background-color: var(--red-4)" aria-label="red 4"></button> </li>
1476        <li> <button class="color-swatch" style="background-color: var(--red-5)" aria-label="red 5"></button> </li>
1477        <li> <button class="color-swatch" style="background-color: var(--red-6)" aria-label="red 6"></button> </li>
1478        <li> <button class="color-swatch" style="background-color: var(--red-7)" aria-label="red 7"></button> </li>
1479        <li> <button class="color-swatch" style="background-color: var(--red-8)" aria-label="red 8"></button> </li>
1480        <li> <button class="color-swatch" style="background-color: var(--red-9)" aria-label="red 9"></button> </li>
1481        <li> <button class="color-swatch" style="background-color: var(--red-10)" aria-label="red 10"></button> </li>
1482        <li> <button class="color-swatch" style="background-color: var(--red-11)" aria-label="red 11"></button> </li>
1483        <li> <button class="color-swatch" style="background-color: var(--red-12)" aria-label="red 12"></button> </li>
1484      </ul>
1485      <ul class="open-colors count-em color-swatch-list">
1486        <h4>Pink</h4>
1487        <li> <button class="color-swatch" style="background-color: var(--pink-0)" aria-label="pink 0"></button> </li>
1488        <li> <button class="color-swatch" style="background-color: var(--pink-1)" aria-label="pink 1"></button> </li>
1489        <li> <button class="color-swatch" style="background-color: var(--pink-2)" aria-label="pink 2"></button> </li>
1490        <li> <button class="color-swatch" style="background-color: var(--pink-3)" aria-label="pink 3"></button> </li>
1491        <li> <button class="color-swatch" style="background-color: var(--pink-4)" aria-label="pink 4"></button> </li>
1492        <li> <button class="color-swatch" style="background-color: var(--pink-5)" aria-label="pink 5"></button> </li>
1493        <li> <button class="color-swatch" style="background-color: var(--pink-6)" aria-label="pink 6"></button> </li>
1494        <li> <button class="color-swatch" style="background-color: var(--pink-7)" aria-label="pink 7"></button> </li>
1495        <li> <button class="color-swatch" style="background-color: var(--pink-8)" aria-label="pink 8"></button> </li>
1496        <li> <button class="color-swatch" style="background-color: var(--pink-9)" aria-label="pink 9"></button> </li>
1497        <li> <button class="color-swatch" style="background-color: var(--pink-10)" aria-label="pink 10"></button> </li>
1498        <li> <button class="color-swatch" style="background-color: var(--pink-11)" aria-label="pink 11"></button> </li>
1499        <li> <button class="color-swatch" style="background-color: var(--pink-12)" aria-label="pink 12"></button> </li>
1500      </ul>
1501      <ul class="open-colors count-em color-swatch-list">
1502        <h4>Purple</h4>
1503        <li> <button class="color-swatch" style="background-color: var(--purple-0)" aria-label="purple 0"></button>
1504        </li>
1505        <li> <button class="color-swatch" style="background-color: var(--purple-1)" aria-label="purple 1"></button>
1506        </li>
1507        <li> <button class="color-swatch" style="background-color: var(--purple-2)" aria-label="purple 2"></button>
1508        </li>
1509        <li> <button class="color-swatch" style="background-color: var(--purple-3)" aria-label="purple 3"></button>
1510        </li>
1511        <li> <button class="color-swatch" style="background-color: var(--purple-4)" aria-label="purple 4"></button>
1512        </li>
1513        <li> <button class="color-swatch" style="background-color: var(--purple-5)" aria-label="purple 5"></button>
1514        </li>
1515        <li> <button class="color-swatch" style="background-color: var(--purple-6)" aria-label="purple 6"></button>
1516        </li>
1517        <li> <button class="color-swatch" style="background-color: var(--purple-7)" aria-label="purple 7"></button>
1518        </li>
1519        <li> <button class="color-swatch" style="background-color: var(--purple-8)" aria-label="purple 8"></button>
1520        </li>
1521        <li> <button class="color-swatch" style="background-color: var(--purple-9)" aria-label="purple 9"></button>
1522        </li>
1523        <li> <button class="color-swatch" style="background-color: var(--purple-10)" aria-label="purple 10"></button>
1524        </li>
1525        <li> <button class="color-swatch" style="background-color: var(--purple-11)" aria-label="purple 11"></button>
1526        </li>
1527        <li> <button class="color-swatch" style="background-color: var(--purple-12)" aria-label="purple 12"></button>
1528        </li>
1529      </ul>
1530      <ul class="open-colors count-em color-swatch-list">
1531        <h4>Violet</h4>
1532        <li> <button class="color-swatch" style="background-color: var(--violet-0)" aria-label="violet 0"></button>
1533        </li>
1534        <li> <button class="color-swatch" style="background-color: var(--violet-1)" aria-label="violet 1"></button>
1535        </li>
1536        <li> <button class="color-swatch" style="background-color: var(--violet-2)" aria-label="violet 2"></button>
1537        </li>
1538        <li> <button class="color-swatch" style="background-color: var(--violet-3)" aria-label="violet 3"></button>
1539        </li>
1540        <li> <button class="color-swatch" style="background-color: var(--violet-4)" aria-label="violet 4"></button>
1541        </li>
1542        <li> <button class="color-swatch" style="background-color: var(--violet-5)" aria-label="violet 5"></button>
1543        </li>
1544        <li> <button class="color-swatch" style="background-color: var(--violet-6)" aria-label="violet 6"></button>
1545        </li>
1546        <li> <button class="color-swatch" style="background-color: var(--violet-7)" aria-label="violet 7"></button>
1547        </li>
1548        <li> <button class="color-swatch" style="background-color: var(--violet-8)" aria-label="violet 8"></button>
1549        </li>
1550        <li> <button class="color-swatch" style="background-color: var(--violet-9)" aria-label="violet 9"></button>
1551        </li>
1552        <li> <button class="color-swatch" style="background-color: var(--violet-10)" aria-label="violet 10"></button>
1553        </li>
1554        <li> <button class="color-swatch" style="background-color: var(--violet-11)" aria-label="violet 11"></button>
1555        </li>
1556        <li> <button class="color-swatch" style="background-color: var(--violet-12)" aria-label="violet 12"></button>
1557        </li>
1558      </ul>
1559      <ul class="open-colors count-em color-swatch-list">
1560        <h4>Indigo</h4>
1561        <li><button class="color-swatch" style="background-color: var(--indigo-0)" aria-label="indigo 0"></button></li>
1562        <li><button class="color-swatch" style="background-color: var(--indigo-1)" aria-label="indigo 1"></button></li>
1563        <li><button class="color-swatch" style="background-color: var(--indigo-2)" aria-label="indigo 2"></button></li>
1564        <li><button class="color-swatch" style="background-color: var(--indigo-3)" aria-label="indigo 3"></button></li>
1565        <li><button class="color-swatch" style="background-color: var(--indigo-4)" aria-label="indigo 4"></button></li>
1566        <li><button class="color-swatch" style="background-color: var(--indigo-5)" aria-label="indigo 5"></button></li>
1567        <li><button class="color-swatch" style="background-color: var(--indigo-6)" aria-label="indigo 6"></button></li>
1568        <li><button class="color-swatch" style="background-color: var(--indigo-7)" aria-label="indigo 7"></button></li>
1569        <li><button class="color-swatch" style="background-color: var(--indigo-8)" aria-label="indigo 8"></button></li>
1570        <li><button class="color-swatch" style="background-color: var(--indigo-9)" aria-label="indigo 9"></button></li>
1571        <li><button class="color-swatch" style="background-color: var(--indigo-10)" aria-label="indigo 10"></button>
1572        </li>
1573        <li><button class="color-swatch" style="background-color: var(--indigo-11)" aria-label="indigo 11"></button>
1574        </li>
1575        <li><button class="color-swatch" style="background-color: var(--indigo-12)" aria-label="indigo 12"></button>
1576        </li>
1577      </ul>
1578      <ul class="open-colors count-em color-swatch-list">
1579        <h4>Blue</h4>
1580        <li><button class="color-swatch" style="background-color: var(--blue-0)" aria-label="blue 0"></button></li>
1581        <li><button class="color-swatch" style="background-color: var(--blue-1)" aria-label="blue 1"></button></li>
1582        <li><button class="color-swatch" style="background-color: var(--blue-2)" aria-label="blue 2"></button></li>
1583        <li><button class="color-swatch" style="background-color: var(--blue-3)" aria-label="blue 3"></button></li>
1584        <li><button class="color-swatch" style="background-color: var(--blue-4)" aria-label="blue 4"></button></li>
1585        <li><button class="color-swatch" style="background-color: var(--blue-5)" aria-label="blue 5"></button></li>
1586        <li><button class="color-swatch" style="background-color: var(--blue-6)" aria-label="blue 6"></button></li>
1587        <li><button class="color-swatch" style="background-color: var(--blue-7)" aria-label="blue 7"></button></li>
1588        <li><button class="color-swatch" style="background-color: var(--blue-8)" aria-label="blue 8"></button></li>
1589        <li><button class="color-swatch" style="background-color: var(--blue-9)" aria-label="blue 9"></button></li>
1590        <li><button class="color-swatch" style="background-color: var(--blue-10)" aria-label="blue 10"></button></li>
1591        <li><button class="color-swatch" style="background-color: var(--blue-11)" aria-label="blue 11"></button></li>
1592        <li><button class="color-swatch" style="background-color: var(--blue-12)" aria-label="blue 12"></button></li>
1593      </ul>
1594      <ul class="open-colors count-em color-swatch-list">
1595        <h4>Cyan</h4>
1596        <li><button class="color-swatch" style="background-color: var(--cyan-0)" aria-label="cyan 0"></button></li>
1597        <li><button class="color-swatch" style="background-color: var(--cyan-1)" aria-label="cyan 1"></button></li>
1598        <li><button class="color-swatch" style="background-color: var(--cyan-2)" aria-label="cyan 2"></button></li>
1599        <li><button class="color-swatch" style="background-color: var(--cyan-3)" aria-label="cyan 3"></button></li>
1600        <li><button class="color-swatch" style="background-color: var(--cyan-4)" aria-label="cyan 4"></button></li>
1601        <li><button class="color-swatch" style="background-color: var(--cyan-5)" aria-label="cyan 5"></button></li>
1602        <li><button class="color-swatch" style="background-color: var(--cyan-6)" aria-label="cyan 6"></button></li>
1603        <li><button class="color-swatch" style="background-color: var(--cyan-7)" aria-label="cyan 7"></button></li>
1604        <li><button class="color-swatch" style="background-color: var(--cyan-8)" aria-label="cyan 8"></button></li>
1605        <li><button class="color-swatch" style="background-color: var(--cyan-9)" aria-label="cyan 9"></button></li>
1606        <li><button class="color-swatch" style="background-color: var(--cyan-10)" aria-label="cyan 10"></button></li>
1607        <li><button class="color-swatch" style="background-color: var(--cyan-11)" aria-label="cyan 11"></button></li>
1608        <li><button class="color-swatch" style="background-color: var(--cyan-12)" aria-label="cyan 12"></button></li>
1609      </ul>
1610      <ul class="open-colors count-em color-swatch-list">
1611        <h4>Teal</h4>
1612        <li><button class="color-swatch" style="background-color: var(--teal-0)" aria-label="teal 0"></button></li>
1613        <li><button class="color-swatch" style="background-color: var(--teal-1)" aria-label="teal 1"></button></li>
1614        <li><button class="color-swatch" style="background-color: var(--teal-2)" aria-label="teal 2"></button></li>
1615        <li><button class="color-swatch" style="background-color: var(--teal-3)" aria-label="teal 3"></button></li>
1616        <li><button class="color-swatch" style="background-color: var(--teal-4)" aria-label="teal 4"></button></li>
1617        <li><button class="color-swatch" style="background-color: var(--teal-5)" aria-label="teal 5"></button></li>
1618        <li><button class="color-swatch" style="background-color: var(--teal-6)" aria-label="teal 6"></button></li>
1619        <li><button class="color-swatch" style="background-color: var(--teal-7)" aria-label="teal 7"></button></li>
1620        <li><button class="color-swatch" style="background-color: var(--teal-8)" aria-label="teal 8"></button></li>
1621        <li><button class="color-swatch" style="background-color: var(--teal-9)" aria-label="teal 9"></button></li>
1622        <li><button class="color-swatch" style="background-color: var(--teal-10)" aria-label="teal 10"></button></li>
1623        <li><button class="color-swatch" style="background-color: var(--teal-11)" aria-label="teal 11"></button></li>
1624        <li><button class="color-swatch" style="background-color: var(--teal-12)" aria-label="teal 12"></button></li>
1625      </ul>
1626      <ul class="open-colors count-em color-swatch-list">
1627        <h4>Green</h4>
1628        <li><button class="color-swatch" style="background-color: var(--green-0)" aria-label="green 0"></button></li>
1629        <li><button class="color-swatch" style="background-color: var(--green-1)" aria-label="green 1"></button></li>
1630        <li><button class="color-swatch" style="background-color: var(--green-2)" aria-label="green 2"></button></li>
1631        <li><button class="color-swatch" style="background-color: var(--green-3)" aria-label="green 3"></button></li>
1632        <li><button class="color-swatch" style="background-color: var(--green-4)" aria-label="green 4"></button></li>
1633        <li><button class="color-swatch" style="background-color: var(--green-5)" aria-label="green 5"></button></li>
1634        <li><button class="color-swatch" style="background-color: var(--green-6)" aria-label="green 6"></button></li>
1635        <li><button class="color-swatch" style="background-color: var(--green-7)" aria-label="green 7"></button></li>
1636        <li><button class="color-swatch" style="background-color: var(--green-8)" aria-label="green 8"></button></li>
1637        <li><button class="color-swatch" style="background-color: var(--green-9)" aria-label="green 9"></button></li>
1638        <li><button class="color-swatch" style="background-color: var(--green-10)" aria-label="green 10"></button></li>
1639        <li><button class="color-swatch" style="background-color: var(--green-11)" aria-label="green 11"></button></li>
1640        <li><button class="color-swatch" style="background-color: var(--green-12)" aria-label="green 12"></button></li>
1641      </ul>
1642      <ul class="open-colors count-em color-swatch-list">
1643        <h4>Lime</h4>
1644        <li><button class="color-swatch" style="background-color: var(--lime-0)" aria-label="lime 0"></button></li>
1645        <li><button class="color-swatch" style="background-color: var(--lime-1)" aria-label="lime 1"></button></li>
1646        <li><button class="color-swatch" style="background-color: var(--lime-2)" aria-label="lime 2"></button></li>
1647        <li><button class="color-swatch" style="background-color: var(--lime-3)" aria-label="lime 3"></button></li>
1648        <li><button class="color-swatch" style="background-color: var(--lime-4)" aria-label="lime 4"></button></li>
1649        <li><button class="color-swatch" style="background-color: var(--lime-5)" aria-label="lime 5"></button></li>
1650        <li><button class="color-swatch" style="background-color: var(--lime-6)" aria-label="lime 6"></button></li>
1651        <li><button class="color-swatch" style="background-color: var(--lime-7)" aria-label="lime 7"></button></li>
1652        <li><button class="color-swatch" style="background-color: var(--lime-8)" aria-label="lime 8"></button></li>
1653        <li><button class="color-swatch" style="background-color: var(--lime-9)" aria-label="lime 9"></button></li>
1654        <li><button class="color-swatch" style="background-color: var(--lime-10)" aria-label="lime 10"></button></li>
1655        <li><button class="color-swatch" style="background-color: var(--lime-11)" aria-label="lime 11"></button></li>
1656        <li><button class="color-swatch" style="background-color: var(--lime-12)" aria-label="lime 12"></button></li>
1657      </ul>
1658      <ul class="open-colors count-em color-swatch-list">
1659        <h4>Yellow</h4>
1660        <li><button class="color-swatch" style="background-color: var(--yellow-0)" aria-label="yellow 0"></button></li>
1661        <li><button class="color-swatch" style="background-color: var(--yellow-1)" aria-label="yellow 1"></button></li>
1662        <li><button class="color-swatch" style="background-color: var(--yellow-2)" aria-label="yellow 2"></button></li>
1663        <li><button class="color-swatch" style="background-color: var(--yellow-3)" aria-label="yellow 3"></button></li>
1664        <li><button class="color-swatch" style="background-color: var(--yellow-4)" aria-label="yellow 4"></button></li>
1665        <li><button class="color-swatch" style="background-color: var(--yellow-5)" aria-label="yellow 5"></button></li>
1666        <li><button class="color-swatch" style="background-color: var(--yellow-6)" aria-label="yellow 6"></button></li>
1667        <li><button class="color-swatch" style="background-color: var(--yellow-7)" aria-label="yellow 7"></button></li>
1668        <li><button class="color-swatch" style="background-color: var(--yellow-8)" aria-label="yellow 8"></button></li>
1669        <li><button class="color-swatch" style="background-color: var(--yellow-9)" aria-label="yellow 9"></button></li>
1670        <li><button class="color-swatch" style="background-color: var(--yellow-10)" aria-label="yellow 10"></button>
1671        </li>
1672        <li><button class="color-swatch" style="background-color: var(--yellow-11)" aria-label="yellow 11"></button>
1673        </li>
1674        <li><button class="color-swatch" style="background-color: var(--yellow-12)" aria-label="yellow 12"></button>
1675        </li>
1676      </ul>
1677      <ul class="open-colors count-em color-swatch-list">
1678        <h4>Orange</h4>
1679        <li><button class="color-swatch" style="background-color: var(--orange-0)" aria-label="orange 0"></button></li>
1680        <li><button class="color-swatch" style="background-color: var(--orange-1)" aria-label="orange 1"></button></li>
1681        <li><button class="color-swatch" style="background-color: var(--orange-2)" aria-label="orange 2"></button></li>
1682        <li><button class="color-swatch" style="background-color: var(--orange-3)" aria-label="orange 3"></button></li>
1683        <li><button class="color-swatch" style="background-color: var(--orange-4)" aria-label="orange 4"></button></li>
1684        <li><button class="color-swatch" style="background-color: var(--orange-5)" aria-label="orange 5"></button></li>
1685        <li><button class="color-swatch" style="background-color: var(--orange-6)" aria-label="orange 6"></button></li>
1686        <li><button class="color-swatch" style="background-color: var(--orange-7)" aria-label="orange 7"></button></li>
1687        <li><button class="color-swatch" style="background-color: var(--orange-8)" aria-label="orange 8"></button></li>
1688        <li><button class="color-swatch" style="background-color: var(--orange-9)" aria-label="orange 9"></button></li>
1689        <li><button class="color-swatch" style="background-color: var(--orange-10)" aria-label="orange 10"></button>
1690        </li>
1691        <li><button class="color-swatch" style="background-color: var(--orange-11)" aria-label="orange 11"></button>
1692        </li>
1693        <li><button class="color-swatch" style="background-color: var(--orange-12)" aria-label="orange 12"></button>
1694        </li>
1695      </ul>
1696      <ul class="open-colors count-em color-swatch-list">
1697        <h4>Choco</h4>
1698        <li><button class="color-swatch" style="background-color: var(--choco-0)" aria-label="choco 0"></button></li>
1699        <li><button class="color-swatch" style="background-color: var(--choco-1)" aria-label="choco 1"></button></li>
1700        <li><button class="color-swatch" style="background-color: var(--choco-2)" aria-label="choco 2"></button></li>
1701        <li><button class="color-swatch" style="background-color: var(--choco-3)" aria-label="choco 3"></button></li>
1702        <li><button class="color-swatch" style="background-color: var(--choco-4)" aria-label="choco 4"></button></li>
1703        <li><button class="color-swatch" style="background-color: var(--choco-5)" aria-label="choco 5"></button></li>
1704        <li><button class="color-swatch" style="background-color: var(--choco-6)" aria-label="choco 6"></button></li>
1705        <li><button class="color-swatch" style="background-color: var(--choco-7)" aria-label="choco 7"></button></li>
1706        <li><button class="color-swatch" style="background-color: var(--choco-8)" aria-label="choco 8"></button></li>
1707        <li><button class="color-swatch" style="background-color: var(--choco-9)" aria-label="choco 9"></button></li>
1708        <li><button class="color-swatch" style="background-color: var(--choco-10)" aria-label="choco 10"></button></li>
1709        <li><button class="color-swatch" style="background-color: var(--choco-11)" aria-label="choco 11"></button></li>
1710        <li><button class="color-swatch" style="background-color: var(--choco-12)" aria-label="choco 12"></button></li>
1711      </ul>
1712      <ul class="open-colors count-em color-swatch-list">
1713        <h4>Brown</h4>
1714        <li><button class="color-swatch" style="background-color: var(--brown-0)" aria-label="brown 0"></button></li>
1715        <li><button class="color-swatch" style="background-color: var(--brown-1)" aria-label="brown 1"></button></li>
1716        <li><button class="color-swatch" style="background-color: var(--brown-2)" aria-label="brown 2"></button></li>
1717        <li><button class="color-swatch" style="background-color: var(--brown-3)" aria-label="brown 3"></button></li>
1718        <li><button class="color-swatch" style="background-color: var(--brown-4)" aria-label="brown 4"></button></li>
1719        <li><button class="color-swatch" style="background-color: var(--brown-5)" aria-label="brown 5"></button></li>
1720        <li><button class="color-swatch" style="background-color: var(--brown-6)" aria-label="brown 6"></button></li>
1721        <li><button class="color-swatch" style="background-color: var(--brown-7)" aria-label="brown 7"></button></li>
1722        <li><button class="color-swatch" style="background-color: var(--brown-8)" aria-label="brown 8"></button></li>
1723        <li><button class="color-swatch" style="background-color: var(--brown-9)" aria-label="brown 9"></button></li>
1724        <li><button class="color-swatch" style="background-color: var(--brown-10)" aria-label="brown 10"></button></li>
1725        <li><button class="color-swatch" style="background-color: var(--brown-11)" aria-label="brown 11"></button></li>
1726        <li><button class="color-swatch" style="background-color: var(--brown-12)" aria-label="brown 12"></button></li>
1727      </ul>
1728      <ul class="open-colors count-em color-swatch-list">
1729        <h4>Sand</h4>
1730        <li><button class="color-swatch" style="background-color: var(--sand-0)" aria-label="sand 0"></button></li>
1731        <li><button class="color-swatch" style="background-color: var(--sand-1)" aria-label="sand 1"></button></li>
1732        <li><button class="color-swatch" style="background-color: var(--sand-2)" aria-label="sand 2"></button></li>
1733        <li><button class="color-swatch" style="background-color: var(--sand-3)" aria-label="sand 3"></button></li>
1734        <li><button class="color-swatch" style="background-color: var(--sand-4)" aria-label="sand 4"></button></li>
1735        <li><button class="color-swatch" style="background-color: var(--sand-5)" aria-label="sand 5"></button></li>
1736        <li><button class="color-swatch" style="background-color: var(--sand-6)" aria-label="sand 6"></button></li>
1737        <li><button class="color-swatch" style="background-color: var(--sand-7)" aria-label="sand 7"></button></li>
1738        <li><button class="color-swatch" style="background-color: var(--sand-8)" aria-label="sand 8"></button></li>
1739        <li><button class="color-swatch" style="background-color: var(--sand-9)" aria-label="sand 9"></button></li>
1740        <li><button class="color-swatch" style="background-color: var(--sand-10)" aria-label="sand 10"></button></li>
1741        <li><button class="color-swatch" style="background-color: var(--sand-11)" aria-label="sand 11"></button></li>
1742        <li><button class="color-swatch" style="background-color: var(--sand-12)" aria-label="sand 12"></button></li>
1743      </ul>
1744      <ul class="open-colors count-em color-swatch-list">
1745        <h4>Camo</h4>
1746        <li><button class="color-swatch" style="background-color: var(--camo-0)" aria-label="camo 0"></button></li>
1747        <li><button class="color-swatch" style="background-color: var(--camo-1)" aria-label="camo 1"></button></li>
1748        <li><button class="color-swatch" style="background-color: var(--camo-2)" aria-label="camo 2"></button></li>
1749        <li><button class="color-swatch" style="background-color: var(--camo-3)" aria-label="camo 3"></button></li>
1750        <li><button class="color-swatch" style="background-color: var(--camo-4)" aria-label="camo 4"></button></li>
1751        <li><button class="color-swatch" style="background-color: var(--camo-5)" aria-label="camo 5"></button></li>
1752        <li><button class="color-swatch" style="background-color: var(--camo-6)" aria-label="camo 6"></button></li>
1753        <li><button class="color-swatch" style="background-color: var(--camo-7)" aria-label="camo 7"></button></li>
1754        <li><button class="color-swatch" style="background-color: var(--camo-8)" aria-label="camo 8"></button></li>
1755        <li><button class="color-swatch" style="background-color: var(--camo-9)" aria-label="camo 9"></button></li>
1756        <li><button class="color-swatch" style="background-color: var(--camo-10)" aria-label="camo 10"></button></li>
1757        <li><button class="color-swatch" style="background-color: var(--camo-11)" aria-label="camo 11"></button></li>
1758        <li><button class="color-swatch" style="background-color: var(--camo-12)" aria-label="camo 12"></button></li>
1759      </ul>
1760      <ul class="open-colors count-em color-swatch-list">
1761        <h4>Jungle</h4>
1762        <li><button class="color-swatch" style="background-color: var(--jungle-0)" aria-label="jungle 0"></button></li>
1763        <li><button class="color-swatch" style="background-color: var(--jungle-1)" aria-label="jungle 1"></button></li>
1764        <li><button class="color-swatch" style="background-color: var(--jungle-2)" aria-label="jungle 2"></button></li>
1765        <li><button class="color-swatch" style="background-color: var(--jungle-3)" aria-label="jungle 3"></button></li>
1766        <li><button class="color-swatch" style="background-color: var(--jungle-4)" aria-label="jungle 4"></button></li>
1767        <li><button class="color-swatch" style="background-color: var(--jungle-5)" aria-label="jungle 5"></button></li>
1768        <li><button class="color-swatch" style="background-color: var(--jungle-6)" aria-label="jungle 6"></button></li>
1769        <li><button class="color-swatch" style="background-color: var(--jungle-7)" aria-label="jungle 7"></button></li>
1770        <li><button class="color-swatch" style="background-color: var(--jungle-8)" aria-label="jungle 8"></button></li>
1771        <li><button class="color-swatch" style="background-color: var(--jungle-9)" aria-label="jungle 9"></button></li>
1772        <li><button class="color-swatch" style="background-color: var(--jungle-10)" aria-label="jungle 10"></button>
1773        </li>
1774        <li><button class="color-swatch" style="background-color: var(--jungle-11)" aria-label="jungle 11"></button>
1775        </li>
1776        <li><button class="color-swatch" style="background-color: var(--jungle-12)" aria-label="jungle 12"></button>
1777        </li>
1778      </ul>
1779    </article>
1780
1781
1782    <header>
1783      <h2>Dynamic Palette</h2>
1784      <p>
1784Another way to approach theming is with Open Props' 16 supercharged <code>oklch</code> variables for making
1785        palettes of any hue. This enables <strong>360 hues and all sorts of chromas</strong> to be a palette, not some
1786        limited set of indigo, pink, cyan, etc sets like above. </p>
1787    </header>
1788
1789    <div class="block-wrap">
1790      <div>
1791        <h5>1. Basic setup</h5>
1792        <pre class="language-css"><code>
1793          @import "open-props/palette";
1794
1795          :root {
1796            --palette-hue: 270;
1797            --palette-hue-rotate-by: 1;
1798            --palette-chroma: 0.9;
1799          }
1800        </code></pre>
1801      </div>
1802
1803      <div>
1804        <h5>2. Basic usage</h5>
1805        <pre class="language-css"><code>
1806          .button {
1807            background-color: var(--color-7);
1808            color: var(--color-12);
1809
1810            &:hover {
1811              background-color: var(--color-6);
1812            }
1813          }
1814        </code></pre>
1815      </div>
1816    </div>
1817
1818    <div class="just-for-gap" id="palette-playground">
1819      <header>
1820        <h3>Dynamic Palette Playground</h3>
1821        <div class="controls-grid">
1822          <div class="control-group hue-preview">
1823            <div class="title-with-control">
1824              <p>Hue <output id="presetHueName" style="opacity: 0.7; font-size: 0.9em;">(Indigo)</output></p>
1825              <input id="paletteHueValue" type="number" min="0" max="360" value="270">
1826            </div>
1827            <div class="hue-slider-wrapper">
1828              <div class="hue-color"></div>
1829              <input id="paletteHue" type="range" list="preset-hues" min="0" max="360" value="270">
1830              <datalist id="preset-hues">
1831                <option value="0" label="Min"></option>
1832                <option value="25" label="--hue-red"></option>
1833                <option value="75" label="--hue-orange"></option>
1834                <option value="100" label="--hue-yellow"></option>
1835                <option value="125" label="--hue-lime"></option>
1836                <option value="145" label="--hue-green"></option>
1837                <option value="185" label="--hue-teal"></option>
1838                <option value="210" label="--hue-cyan"></option>
1839                <option value="240" label="--hue-blue"></option>
1840                <option value="270" label="--hue-indigo"></option>
1841                <option value="290" label="--hue-violet"></option>
1842                <option value="310" label="--hue-purple"></option>
1843                <option value="350" label="--hue-pink"></option>
1844                <option value="360" label="Max"></option>
1845              </datalist>
1846            </div>
1847          </div>
1848          <div class="control-group">
1849            <div class="title-with-control">
1850              <p>Hue Rotation</p>
1851              <input id="paletteHueRotateValue" type="number" min="-30" max="30" value="1">
1852            </div>
1853            <input id="paletteHueRotate" type="range" min="-30" max="30" value="1">
1854          </div>
1855          <div class="control-group">
1856            <div class="title-with-control">
1857              <p>Chroma</p>
1858              <input id="paletteChromaValue" type="number" min="0" max="2" step="0.01" value="0.9">
1859            </div>
1860            <input id="paletteChroma" type="range" min="0" max="2" step="0.01" value="0.9">
1861          </div>
1862        </div>
1863      </header>
1864
1865      <article class="swatchset" id="swatchset">
1866        <div class="swatch"><b><code>var(--color-1)</code></b></div>
1867        <div class="swatch"><b><code>var(--color-2)</code></b></div>
1868        <div class="swatch"><b><code>var(--color-3)</code></b></div>
1869        <div class="swatch"><b><code>var(--color-4)</code></b></div>
1870        <div class="swatch"><b><code>var(--color-5)</code></b></div>
1871        <div class="swatch"><b><code>var(--color-6)</code></b></div>
1872        <div class="swatch"><b><code>var(--color-7)</code></b></div>
1873        <div class="swatch"><b><code>var(--color-8)</code></b></div>
1874        <div class="swatch"><b><code>var(--color-9)</code></b></div>
1875        <div class="swatch"><b><code>var(--color-10)</code></b></div>
1876        <div class="swatch"><b><code>var(--color-11)</code></b></div>
1877        <div class="swatch"><b><code>var(--color-12)</code></b></div>
1878        <div class="swatch"><b><code>var(--color-13)</code></b></div>
1879        <div class="swatch"><b><code>var(--color-14)</code></b></div>
1880        <div class="swatch"><b><code>var(--color-15)</code></b></div>
1881        <div class="swatch"><b><code>var(--color-16)</code></b></div>
1882      </article>
1883
1884      <footer>
1885        <output class="code-output">
1886          <pre id="paletteout" class="language-css"><code>
1887@import "open-props/palette";
1888
1889:root {
1890  --palette-hue: 270;
1891  --palette-hue-rotate-by: 1;
1892  --palette-chroma: .9;
1893}</code></pre>
1894        </output>
1895        <button id="shuffleButton">
1896          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
1897            <path stroke-linecap="round" stroke-linejoin="round"
1898              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99">
1899            </path>
1900          </svg>
1901          Shuffle
1902        </button>
1903      </footer>
1904    </div>
1905
1906    <header>
1907      <h2>Brand Colors</h2>
1908      <div class="block-wrap">
1909        <p>Various brand colors.</p>
1910        <blockquote class="icon-quote jagged">
1911          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
1912            <path
1913              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
1914          </svg>
1915          <span>Not part of the main bundle. Must be individually imported.</span>
1916        </blockquote>
1917      </div>
1918    </header>
1919    <div class="block-wrap">
1920      <div>
1921        <h5>NPM Imported Usage Sample</h5>
1922        <pre class="language-css"><code>@import "open-props/brand-colors";
1923
1924.facebook-logo {
1925  fill: var(--brand-facebook);
1926}</code></pre>
1927      </div>
1928    </div>
1929    <article class="just-stretch">
1930      <!-- bun run docsite/js/brand-colors.js -->
1931      <ul class="open-colors count-em color-swatch-list">
1932        <h4> facebook</h4>
1933        <li><button class="color-swatch" style="background-color: var(--brand-facebook)"
1934            aria-label="  facebook"></button></li>
1935      </ul>
1936      <ul class="open-colors count-em color-swatch-list">
1937        <h4> youtube</h4>
1938        <li><button class="color-swatch" style="background-color: var(--brand-youtube)" aria-label="  youtube"></button>
1939        </li>
1940      </ul>
1941      <ul class="open-colors count-em color-swatch-list">
1942        <h4> twitter</h4>
1943        <li><button class="color-swatch" style="background-color: var(--brand-twitter)" aria-label="  twitter"></button>
1944        </li>
1945      </ul>
1946      <ul class="open-colors count-em color-swatch-list">
1947        <h4> whatsapp</h4>
1948        <li><button class="color-swatch" style="background-color: var(--brand-whatsapp)"
1949            aria-label="  whatsapp"></button></li>
1950      </ul>
1951      <ul class="open-colors count-em color-swatch-list">
1952        <h4> instagram yellow</h4>
1953        <li><button class="color-swatch" style="background-color: var(--brand-instagram-yellow)"
1954            aria-label="  instagram yellow"></button></li>
1955      </ul>
1956      <ul class="open-colors count-em color-swatch-list">
1957        <h4> instagram red</h4>
1958        <li><button class="color-swatch" style="background-color: var(--brand-instagram-red)"
1959            aria-label="  instagram red"></button></li>
1960      </ul>
1961      <ul class="open-colors count-em color-swatch-list">
1962        <h4> instagram magenta</h4>
1963        <li><button class="color-swatch" style="background-color: var(--brand-instagram-magenta)"
1964            aria-label="  instagram magenta"></button></li>
1965      </ul>
1966      <ul class="open-colors count-em color-swatch-list">
1967        <h4> instagram blue</h4>
1968        <li><button class="color-swatch" style="background-color: var(--brand-instagram-blue)"
1969            aria-label="  instagram blue"></button></li>
1970      </ul>
1971      <ul class="open-colors count-em color-swatch-list">
1972        <h4> snapchat</h4>
1973        <li><button class="color-swatch" style="background-color: var(--brand-snapchat)"
1974            aria-label="  snapchat"></button></li>
1975      </ul>
1976      <ul class="open-colors count-em color-swatch-list">
1977        <h4> google blue</h4>
1978        <li><button class="color-swatch" style="background-color: var(--brand-google-blue)"
1979            aria-label="  google blue"></button></li>
1980      </ul>
1981      <ul class="open-colors count-em color-swatch-list">
1982        <h4> google red</h4>
1983        <li><button class="color-swatch" style="background-color: var(--brand-google-red)"
1984            aria-label="  google red"></button></li>
1985      </ul>
1986      <ul class="open-colors count-em color-swatch-list">
1987        <h4> google yellow</h4>
1988        <li><button class="color-swatch" style="background-color: var(--brand-google-yellow)"
1989            aria-label="  google yellow"></button></li>
1990      </ul>
1991      <ul class="open-colors count-em color-swatch-list">
1992        <h4> google green</h4>
1993        <li><button class="color-swatch" style="background-color: var(--brand-google-green)"
1994            aria-label="  google green"></button></li>
1995      </ul>
1996      <ul class="open-colors count-em color-swatch-list">
1997        <h4> tiktok razzmatazz</h4>
1998        <li><button class="color-swatch" style="background-color: var(--brand-tiktok-razzmatazz)"
1999            aria-label="  tiktok razzmatazz"></button></li>
2000      </ul>
2001      <ul class="open-colors count-em color-swatch-list">
2002        <h4> tiktok splash</h4>
2003        <li><button class="color-swatch" style="background-color: var(--brand-tiktok-splash)"
2004            aria-label="  tiktok splash"></button></li>
2005      </ul>
2006      <ul class="open-colors count-em color-swatch-list">
2007        <h4> microsoft red</h4>
2008        <li><button class="color-swatch" style="background-color: var(--brand-microsoft-red)"
2009            aria-label="  microsoft red"></button></li>
2010      </ul>
2011      <ul class="open-colors count-em color-swatch-list">
2012        <h4> microsoft green</h4>
2013        <li><button class="color-swatch" style="background-color: var(--brand-microsoft-green)"
2014            aria-label="  microsoft green"></button></li>
2015      </ul>
2016      <ul class="open-colors count-em color-swatch-list">
2017        <h4> microsoft blue</h4>
2018        <li><button class="color-swatch" style="background-color: var(--brand-microsoft-blue)"
2019            aria-label="  microsoft blue"></button></li>
2020      </ul>
2021      <ul class="open-colors count-em color-swatch-list">
2022        <h4> microsoft yellow</h4>
2023        <li><button class="color-swatch" style="background-color: var(--brand-microsoft-yellow)"
2024            aria-label="  microsoft yellow"></button></li>
2025      </ul>
2026      <ul class="open-colors count-em color-swatch-list">
2027        <h4> pinterest</h4>
2028        <li><button class="color-swatch" style="background-color: var(--brand-pinterest)"
2029            aria-label="  pinterest"></button></li>
2030      </ul>
2031      <ul class="open-colors count-em color-swatch-list">
2032        <h4> spotify</h4>
2033        <li><button class="color-swatch" style="background-color: var(--brand-spotify)" aria-label="  spotify"></button>
2034        </li>
2035      </ul>
2036      <ul class="open-colors count-em color-swatch-list">
2037        <h4> discord</h4>
2038        <li><button class="color-swatch" style="background-color: var(--brand-discord)" aria-label="  discord"></button>
2039        </li>
2040      </ul>
2041      <ul class="open-colors count-em color-swatch-list">
2042        <h4> telegram</h4>
2043        <li><button class="color-swatch" style="background-color: var(--brand-telegram)"
2044            aria-label="  telegram"></button></li>
2045      </ul>
2046      <ul class="open-colors count-em color-swatch-list">
2047        <h4> reddit</h4>
2048        <li><button class="color-swatch" style="background-color: var(--brand-reddit)" aria-label="  reddit"></button>
2049        </li>
2050      </ul>
2051      <ul class="open-colors count-em color-swatch-list">
2052        <h4> amazon</h4>
2053        <li><button class="color-swatch" style="background-color: var(--brand-amazon)" aria-label="  amazon"></button>
2054        </li>
2055      </ul>
2056      <ul class="open-colors count-em color-swatch-list">
2057        <h4> twitch</h4>
2058        <li><button class="color-swatch" style="background-color: var(--brand-twitch)" aria-label="  twitch"></button>
2059        </li>
2060      </ul>
2061    </article>
2062
2063    <details>
2064      <summary>Color 101: Themes</summary>
2065
2066      <div class="just-for-gap">
2067        <header>
2068          <h3>1) Color theming</h3>
2069          <p>Low numbers are light and high numbers are dark. See how the Open Props <a
2070              href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.css">normalize.css</a>
2071            implements <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">light</a>
2072            and <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">dark</a> modes.</p>
2073          <p><b>See it live:</b> <a href="https://codepen.io/argyleink/pen/21fe8c43e25876c3756917df0bd7ef36">auto,
2074              light, dark, dim and purple themes</a> demonstrated with Open Props!</p>
2075        </header>
2076
2077        <div class="block-wrap">
2078          <div>
2079            <h5>Light</h5>
2080            <pre class="language-css"><code>
2081                html {
2082                  --brand-light: var(--orange-6);
2083
2084                  --text-1-light: var(--gray-8);
2085                  --text-2-light: var(--gray-7);
2086
2087                  --surface-1-light: var(--gray-0);
2088                  --surface-2-light: var(--gray-1);
2089                  --surface-3-light: var(--gray-2);
2090                  --surface-4-light: var(--gray-3);
2091                }
2092              </code></pre>
2093          </div>
2094          <div>
2095            <h5>Dark</h5>
2096            <pre class="language-css"><code>
2097                html {
2098                  --brand-dark: var(--orange-3);
2099
2100                  --text-1-dark: var(--gray-3);
2101                  --text-2-dark: var(--gray-5);
2102
2103                  --surface-1-dark: var(--gray-12);
2104                  --surface-2-dark: var(--gray-11);
2105                  --surface-3-dark: var(--gray-10);
2106                  --surface-4-dark: var(--gray-9);
2107                }
2108              </code></pre>
2109          </div>
2110          <div>
2111            <h5>Dim</h5>
2112            <pre class="language-css"><code>
2113                html {
2114                  --brand-dim: var(--orange-4);
2115
2116                  --text-1-dim: var(--gray-3);
2117                  --text-2-dim: var(--gray-4);
2118
2119                  --surface-1-dim: var(--gray-8);
2120                  --surface-2-dim: var(--gray-7);
2121                  --surface-3-dim: var(--gray-6);
2122                  --surface-4-dim: var(--gray-5);
2123                }
2124              </code></pre>
2125          </div>
2126          <div>
2127            <h5>Purple</h5>
2128            <pre class="language-css"><code>
2129                html {
2130                  --brand-purple: var(--purple-5);
2131
2132                  --text-1-purple: var(--purple-9);
2133                  --text-2-purple: var(--purple-7);
2134
2135                  --surface-1-purple: var(--purple-0);
2136                  --surface-2-purple: var(--purple-1);
2137                  --surface-3-purple: var(--purple-2);
2138                  --surface-4-purple: var(--purple-3);
2139                }
2140              </code></pre>
2141          </div>
2142        </div>
2143
2144        <header>
2145          <h3>2) Creating adaptive color schemes</h3>
2146          <p>It's not ideal for components to reference individual light or dark theme colors. Instead, you should
2147            prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to
2148            reference a custom property without worrying about its underlying value, which will dynamically adapt to the
2149            current context's theme.</p>
2150        </header>
2151
2152        <div class="block-wrap">
2153          <div>
2154            <h5>No Preference (Light)</h5>
2155            <pre class="language-css"><code>
2156                :root {
2157                  --brand: var(--brand-light);
2158
2159                  --text-1: var(--text-1-light);
2160                  --text-2: var(--text-2-light);
2161
2162                  --surface-1: var(--surface-1-light);
2163                  --surface-2: var(--surface-2-light);
2164                  --surface-3: var(--surface-3-light);
2165                  --surface-4: var(--surface-4-light);
2166                }
2167              </code></pre>
2168          </div>
2169          <div>
2170            <h5>Prefers Dark</h5>
2171            <pre class="language-css"><code>
2172                @media (prefers-color-scheme: dark) {
2173                  :root {
2174                    --brand: var(--brand-dark);
2175
2176                    --text-1: var(--text-1-dark);
2177                    --text-2: var(--text-2-dark);
2178
2179                    --surface-1: var(--surface-1-dark);
2180                    --surface-2: var(--surface-2-dark);
2181                    --surface-3: var(--surface-3-dark);
2182                    --surface-4: var(--surface-4-dark);
2183                  }
2184                }
2185              </code></pre>
2186          </div>
2187          <div>
2188            <h5>Prefers Dim</h5>
2189            <pre class="language-css"><code>
2190                @media (prefers-contrast: less) {
2191                  :root {
2192                    --brand: var(--brand-dim);
2193
2194                    --text-1: var(--text-1-dim);
2195                    --text-2: var(--text-2-dim);
2196
2197                    --surface-1: var(--surface-1-dim);
2198                    --surface-2: var(--surface-2-dim);
2199                    --surface-3: var(--surface-3-dim);
2200                    --surface-4: var(--surface-4-dim);
2201                  }
2202                }
2203              </code></pre>
2204          </div>
2205
2206          <div>
2207            <h5>Prefers Purple</h5>
2208            <pre class="language-css"><code>
2209                [color-scheme="purple"] {
2210                  --brand: var(--brand-purple);
2211
2212                  --text-1: var(--text-1-purple);
2213                  --text-2: var(--text-2-purple);
2214
2215                  --surface-1: var(--surface-1-purple);
2216                  --surface-2: var(--surface-2-purple);
2217                  --surface-3: var(--surface-3-purple);
2218                  --surface-4: var(--surface-4-purple);
2219                }
2220              </code></pre>
2221          </div>
2222        </div>
2223
2224        <header>
2225          <h3>3) Using the aliases</h3>
2226          <p>Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single
2227            naming convention rather than wrestling with individual theming variables. Here are a few examples of how
2228            the above color theme system could be used.</p>
2229        </header>
2230
2231        <div class="block-wrap">
2232          <div>
2233            <h5>Page Styles Using Themes</h5>
2234            <pre class="language-css"><code>
2235                html {
2236                  background-color: var(--surface-1);
2237                  color: var(--text-1);
2238                  accent-color: var(--link);
2239                }
2240              </code></pre>
2241          </div>
2242          <div>
2243            <h5>Utilities</h5>
2244            <pre class="language-css"><code>
2245                .surface-1 {
2246                  background-color: var(--surface-1);
2247                  color: var(--text-2);
2248                }
2249
2250                .surface-2 {
2251                  background-color: var(--surface-2);
2252                  color: var(--text-2);
2253                }
2254
2255                .surface-3 {
2256                  background-color: var(--surface-3);
2257                  color: var(--text-1);
2258                }
2259
2260                .surface-4 {
2261                  background-color: var(--surface-4);
2262                  color: var(--text-1);
2263                }
2264              </code></pre>
2265          </div>
2266          <div>
2267            <h5>Typography</h5>
2268            <pre class="language-css"><code>
2269                h1,h2,h3,h4,p,dt {
2270                  color: var(--text-1);
2271                }
2272
2273                h5,h6,small,dd {
2274                  color: var(--text-2);
2275                }
2276              </code></pre>
2277          </div>
2278        </div>
2279      </div>
2280    </details>
2281
2282    <details>
2283      <summary>Color 201: Normalize Theme Switch</summary>
2284
2285      <div class="just-for-gap">
2286        <header>
2287          <h3>1) Normalize Theme Switch</h3>
2288          <pre class="language-css">
2289              <code>
2290                @import "https://unpkg.com/open-props/theme.light.switch.min.css";
2291                @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
2292              </code>
2293            </pre>
2294          <p>The Open Props <a href="https://codepen.io/argyleink/pen/KKvRORE">normalize.css</a> has light and dark
2295            built in, but it only changes with the media query / operating system. If you want users to be able to
2296            change this, you'll need <b>Open Props switch imports</b>. These have the same theme values from normalize,
2297            but scoped to selectors.</p>
2298
2299          <p><b>Light Selectors:</b> <code>.light</code> | <code>.light-theme</code> | <code>data-theme="light"</code>
2300          </p>
2301          <p><b>Dark Selectors:</b> <code>.dark</code> | <code>.dark-theme</code> | <code>data-theme="dark"</code></p>
2302
2303          <p>This allows you to apply a light or dark theme to the page or a portion of the page using the selectors
2304            imported.</p>
2305          <p><b>See it in action:</b> <a href="https://codepen.io/argyleink/pen/JjqYdgr">here</a></p>
2306        </header>
2307
2308        <header>
2309          <h3>2) Section theme</h3>
2310          <p>When you need to control the appearance of a specific section, use any of the selectors from the switch
2311            imports, like <code>.dark</code> or <code>.light</code>, and apply them to HTML elements.</p>
2312          <p><b>Try it</b> <a href="https://codepen.io/argyleink/pen/RwEWRwR">here</a></p>
2313        </header>
2314
2315        <div>
2316          <pre class="language-css">
2317              <code>
2318                  @import "https://unpkg.com/open-props/theme.light.switch.min.css";
2319                  @import "https://unpkg.com/open-props/theme.dark.switch.min.css";
2320
2321                  /* classes toggle the adaptive props */
2322                  .dark, .light {
2323                    color: var(--text-1);
2324                    background: var(--surface-1);
2325                  }
2326              </code>
2327            </pre>
2328        </div>
2329      </div>
2330    </details>
2331  </section>
2332
2333  <section id="gradients" class="just-stretch">
2334    <header>
2335      <h2>Gradients</h2>
2336      <p>Open Props includes 30 handcrafted gradients. Linear gradient direction can be changed with a custom property
2337        mixin.</p>
2338      <p>Don't miss the noise props inspired by <a href="https://grainy-gradients.vercel.app">grainy-gradients</a>.</p>
2339    </header>
2340
2341    <div class="block-wrap">
2342      <div>
2343        <h5>The Props</h5>
2344        <div class="var-examples">
2345          <pre class="language-css"><code>
2346              --gradient-{1-30}
2347            </code></pre>
2348        </div>
2349      </div>
2350      <div>
2351        <h5>Hero Header Sample</h5>
2352        <pre class="language-css"><code>
2353            header {
2354              background-image: var(--gradient-5);
2355
2356              @media (--OSdark) {
2357                background-image: var(--gradient-15);
2358              }
2359            }
2360          </code></pre>
2361      </div>
2362      <div>
2363        <h5>Gradient Text Sample</h5>
2364        <pre class="language-css"><code>
2365            .gradient-text {
2366              background: var(--gradient-1);
2367              -webkit-background-clip: text;
2368              -webkit-text-fill-color: transparent;
2369            }
2370          </code></pre>
2371      </div>
2372    </div>
2373    <article class="just-stretch just-for-gap">
2374      <h4>Gradients</h4>
2375      <div class="ui-gradients scroll-x-overflow count-em from-one">
2376        <span class="gradient-swatch" style="background-image: var(--gradient-1)"></span>
2377        <span class="gradient-swatch" style="background-image: var(--gradient-2)"></span>
2378        <span class="gradient-swatch" style="background-image: var(--gradient-3)"></span>
2379        <span class="gradient-swatch" style="background-image: var(--gradient-4)"></span>
2380        <span class="gradient-swatch" style="background-image: var(--gradient-5)"></span>
2381        <span class="gradient-swatch" style="background-image: var(--gradient-6)"></span>
2382        <span class="gradient-swatch" style="background-image: var(--gradient-7)"></span>
2383        <span class="gradient-swatch" style="background-image: var(--gradient-8)"></span>
2384        <span class="gradient-swatch" style="background-image: var(--gradient-9)"></span>
2385        <span class="gradient-swatch" style="background-image: var(--gradient-10)"></span>
2386        <span class="gradient-swatch" style="background-image: var(--gradient-11)"></span>
2387        <span class="gradient-swatch" style="background-image: var(--gradient-12)"></span>
2388        <span class="gradient-swatch" style="background-image: var(--gradient-13)"></span>
2389        <span class="gradient-swatch" style="background-image: var(--gradient-14)"></span>
2390        <span class="gradient-swatch" style="background-image: var(--gradient-15)"></span>
2391        <span class="gradient-swatch" style="background-image: var(--gradient-16)"></span>
2392        <span class="gradient-swatch" style="background-image: var(--gradient-17)"></span>
2393        <span class="gradient-swatch" style="background-image: var(--gradient-18)"></span>
2394        <span class="gradient-swatch" style="background-image: var(--gradient-19)"></span>
2395        <span class="gradient-swatch" style="background-image: var(--gradient-20)"></span>
2396        <span class="gradient-swatch" style="background-image: var(--gradient-21)"></span>
2397        <span class="gradient-swatch" style="background-image: var(--gradient-22)"></span>
2398        <span class="gradient-swatch" style="background-image: var(--gradient-23)"></span>
2399        <span class="gradient-swatch" style="background-image: var(--gradient-24)"></span>
2400        <span class="gradient-swatch" style="background-image: var(--gradient-25)"></span>
2401        <span class="gradient-swatch" style="background-image: var(--gradient-26)"></span>
2402        <span class="gradient-swatch" style="background-image: var(--gradient-27)"></span>
2403        <span class="gradient-swatch" style="background-image: var(--gradient-28)"></span>
2404        <span class="gradient-swatch" style="background-image: var(--gradient-29)"></span>
2405        <span class="gradient-swatch" style="background-image: var(--gradient-30)"></span>
2406      </div>
2407    </article>
2408    <div>
2409      <h3>Noise</h3>
2410      <div class="block-wrap">
2411        <div>
2412          <div class="var-examples">
2413            <pre class="language-css"><code>
2414                --noise-{1-5}
2415                --noise-filter-{1-5}
2416              </code></pre>
2417          </div>
2418        </div>
2419        <div>
2420          <pre class="language-css"><code>
2421              .noise-noise-noise {
2422                /* stack grain with a gradient */
2423                background-image: var(--gradient-3), var(--noise-3);
2424                /* force colors and noise to collide */
2425                filter: var(--noise-filter-3);
2426                /* fit noise image to element */
2427                background-size: cover;
2428              }
2429            </code></pre>
2430        </div>
2431      </div>
2432    </div>
2433    <article class="just-stretch just-for-gap">
2434      <h4>Noisy Examples</h4>
2435      <div class="ui-gradients noisy scroll-x-overflow">
2436        <span class="gradient-swatch" style="background-image: var(--gradient-3), var(--noise-5)"></span>
2437        <span class="gradient-swatch"
2438          style="background-image: linear-gradient(to top, black, #0000), var(--noise-5); filter:var(--noise-filter-2)"></span>
2439        <span class="gradient-swatch"
2440          style="background-image: radial-gradient(circle at center center, hsl(330deg 100% 71%), hsl(330deg 100% 0% / 50%)), var(--noise-3)"></span>
2441        <span class="gradient-swatch"
2442          style="background-image: conic-gradient(at 50% -20%,#281316, #4e3beb33), var(--noise-1); filter:var(--noise-filter-4)"></span>
2443        <span class="gradient-swatch"
2444          style="background-image: var(--gradient-13), var(--noise-5); filter:var(--noise-filter-1)"></span>
2445        <span class="gradient-swatch"
2446          style="background-color: black; background-image: linear-gradient(to top, white, #fff0), var(--noise-5); filter:var(--noise-filter-2)"></span>
2447        <span class="gradient-swatch"
2448          style="background-image: var(--gradient-20), var(--noise-5); filter:var(--noise-filter-3)"></span>
2449        <span class="gradient-swatch"
2450          style="background-image: var(--gradient-23), var(--noise-5); filter:var(--noise-filter-5)"></span>
2451        <span class="gradient-swatch"
2452          style="background-image: var(--gradient-25), var(--noise-5); filter:var(--noise-filter-2)"></span>
2453        <span class="gradient-swatch" style="background-image: var(--gradient-30), var(--noise-3)"></span>
2454      </div>
2455    </article>
2456  </section>
2457
2458  <section id="shadows">
2459    <header>
2460      <h2>Shadows</h2>
2461      <p>Inner and outer shadows that adapt to light and dark modes.</p>
2462    </header>
2463    <div class="block-wrap">
2464      <div>
2465        <h5>The Props</h5>
2466        <div class="var-examples">
2467          <pre class="language-css"><code>
2468              --shadow-{1-6}
2469              --text-shadow-{1-6}
2470              --inner-shadow-{0-4}
2471            </code></pre>
2472        </div>
2473      </div>
2474      <div>
2475        <h5>Card Sample</h5>
2476        <pre class="language-css"><code>
2477            .card {
2478              box-shadow: var(--shadow-1);
2479
2480              &:hover {
2481                box-shadow: var(--shadow-3);
2482              }
2483            }
2484          </code></pre>
2485      </div>
2486    </div>
2487    <article class="shadow-demos count-em from-one">
2488      <div style="box-shadow: var(--shadow-1)"></div>
2489      <div style="box-shadow: var(--shadow-2)"></div>
2490      <div style="box-shadow: var(--shadow-3)"></div>
2491      <div style="box-shadow: var(--shadow-4)"></div>
2492      <div style="box-shadow: var(--shadow-5)"></div>
2493      <div style="box-shadow: var(--shadow-6)"></div>
2494    </article>
2495    <article class="shadow-demos count-em">
2496      <div style="box-shadow: var(--inner-shadow-0)"></div>
2497      <div style="box-shadow: var(--inner-shadow-1)"></div>
2498      <div style="box-shadow: var(--inner-shadow-2)"></div>
2499      <div style="box-shadow: var(--inner-shadow-3)"></div>
2500      <div style="box-shadow: var(--inner-shadow-4)"></div>
2501    </article>
2502    <article class="text-shadow-demos">
2503      <h3 style="text-shadow: var(--text-shadow-1)">--text-shadow-1</h3>
2504      <h3 style="text-shadow: var(--text-shadow-2)">--text-shadow-2</h3>
2505      <h3 style="text-shadow: var(--text-shadow-3)">--text-shadow-3</h3>
2506      <h3 style="text-shadow: var(--text-shadow-4)">--text-shadow-4</h3>
2507      <h3 style="text-shadow: var(--text-shadow-5)">--text-shadow-5</h3>
2508      <h3 style="text-shadow: var(--text-shadow-6)">--text-shadow-6</h3>
2509    </article>
2510
2511    <div class="just-for-gap" id="shadow-playground">
2512      <header>
2513        <h3>Shadow Playground</h3>
2514        <p>Customize the shadow tint and strength to match your design.</p>
2515        <div class="controls-grid">
2516          <div class="control-group">
2517            <div class="title-with-control">
2518              <label for="shadowHueValue">Hue</label>
2519              <input id="shadowHueValue" type="number" min="0" max="360" step="1" value="220">
2520            </div>
2521            <input id="shadowHue" type="range" min="0" max="360" step="1" value="220" aria-label="Shadow hue slider">
2522          </div>
2523          <div class="control-group">
2524            <div class="title-with-control">
2525              <label for="shadowSaturationValue">Saturation</label>
2526              <input id="shadowSaturationValue" type="number" min="0" max="100" step="1" value="3">
2527            </div>
2528            <input id="shadowSaturation" type="range" min="0" max="100" step="1" value="3" aria-label="Shadow saturation slider">
2529          </div>
2530          <div class="control-group">
2531            <div class="title-with-control">
2532              <label for="shadowLightnessValue">Lightness</label>
2533              <input id="shadowLightnessValue" type="number" min="0" max="100" step="1" value="15">
2534            </div>
2535            <input id="shadowLightness" type="range" min="0" max="100" step="1" value="15" aria-label="Shadow lightness slider">
2536          </div>
2537          <div class="control-group">
2538            <div class="title-with-control">
2539              <label for="shadowStrengthValue">Strength</label>
2540              <input id="shadowStrengthValue" type="number" min="0" max="100" step="1" value="50">
2541            </div>
2542            <input id="shadowStrength" type="range" min="0" max="100" step="1" value="50" aria-label="Shadow strength slider">
2543          </div>
2544        </div>
2545      </header>
2546
2547      <article class="shadow-preview-grid">
2548        <div style="box-shadow: var(--shadow-1)">Shadow 1</div>
2549        <div style="box-shadow: var(--shadow-2)">
2549Shadow 2</div>
2550        <div style="box-shadow: var(--shadow-3)">Shadow 3</div>
2551        <div style="box-shadow: var(--shadow-4)">Shadow 4</div>
2552        <div style="box-shadow: var(--shadow-5)">Shadow 5</div>
2553        <div style="box-shadow: var(--shadow-6)">Shadow 6</div>
2554      </article>
2555
2556      <footer>
2557        <output class="code-output">
2558          <pre id="shadowout" class="language-css"><code>
2559@import "open-props/shadows";
2560
2561:root {
2562  --shadow-color: 220 3% 15%;
2563  --shadow-strength: 1%;
2564}</code></pre>
2565        </output>
2566      </footer>
2567    </div>
2568  </section>
2569
2570  <section id="aspect-ratio">
2571    <header>
2572      <h2>Aspect Ratios</h2>
2573    </header>
2574    <div class="block-wrap">
2575      <div>
2576        <h5>Vars Sample</h5>
2577        <div class="var-examples">
2578          <pre class="language-css"><code>
2579              --ratio-square: 1;
2580              --ratio-landscape: 4/3;
2581              --ratio-portrait: 3/4;
2582              --ratio-widescreen: 16/9;
2583              --ratio-ultrawide: 18/5;
2584              --ratio-golden: 1.6180/1;
2585            </code></pre>
2586        </div>
2587      </div>
2588      <div>
2589        <h5>Usage Sample</h5>
2590        <pre class="language-css"><code>
2591            .video-thumbnail {
2592              block-size: 480px;
2593              aspect-ratio: var(--ratio-widescreen);
2594            }
2595          </code></pre>
2596      </div>
2597    </div>
2598    <article class="aspect-demos">
2599      <div style="aspect-ratio: var(--ratio-square)">box</div>
2600      <div style="aspect-ratio: var(--ratio-landscape)">landscape</div>
2601      <div style="aspect-ratio: var(--ratio-portrait)">portrait</div>
2602      <div style="aspect-ratio: var(--ratio-widescreen)">widescreen</div>
2603      <div style="aspect-ratio: 1.6180/1">golden ratio</div>
2604      <div style="aspect-ratio: 18/5">ultrawide</div>
2605    </article>
2606  </section>
2607
2608  <section id="typography">
2609    <header>
2610      <h2>Typography</h2>
2611      <p>Variable and static font sizes, smart line heights, <a href="https://modernfontstacks.com">modern font
2612          stacks</a>, and other familiar typography variables, all ready to go.</p>
2613    </header>
2614    <div class="block-wrap">
2615      <div>
2616        <h5>The Props</h5>
2617        <div class="var-examples">
2618          <pre class="language-css"><code>
2619              --font-size-{00-8}
2620              --font-size-fluid-{0-3}
2621              --font-weight-{1-9}
2622              --font-letterspacing-{0-7}
2623              --font-lineheight-{00-5}
2624              <!-- --font-relative-lineheight-{00-6} -->
2625            </code></pre>
2626        </div>
2627      </div>
2628
2629      <div>
2630        <h5>Usage Sample</h5>
2631        <pre class="language-css"><code>
2632              .hero {
2633                line-height: var(--font-lineheight-1);
2634                font-size: var(--font-size-fluid-3);
2635                font-weight: var(--font-weight-9);
2636                font-family: var(--font-sans);
2637              }
2638          </code></pre>
2639      </div>
2640    </div>
2641
2642    <article class="font-sizes">
2643      <h4>Font Families</h4>
2644      <p>These rad font-families from <a href="https://github.com/danklammer">Dan Klammer's</a> <a
2645          href="https://modernfontstacks.com">modern font stacks</a> provide great typefaces that are entirely local.
2646        With these font stacks you won't have to worry about slowing down your page load or layout shift from external
2647        fonts!</p>
2648      <pre class="language-css"><code>
2649          --font-system-ui: system-ui, sans-serif;
2650          --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
2651          --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
2652          --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
2653          --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
2654          --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
2655          --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
2656          --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
2657          --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono,Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code,Menlo, Consolas, DejaVu Sans Mono, monospace;
2658          --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
2659          --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
2660          --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
2661          --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
2662          --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
2663          --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
2664        </code></pre>
2665      <blockquote>
2666        Unlike the other props, which are identical to their modern font stack counterparts,
2667        <code>--font-monospace-code</code> is modified in open-props.
2668      </blockquote>
2669      <div class="block-wrap">
2670        <div class="font-family-grid">
2671          <details>
2672            <summary><code class="language-css">--font-system-ui</code></summary>
2673            <div style="font-family: var(--font-system-ui)">
2674              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2675            </div>
2676          </details>
2677        </div>
2678        <div class="font-family-grid">
2679          <details>
2680            <summary><code class="language-css">--font-transitional</code></summary>
2681            <div style="font-family: var(--font-transitional)">
2682              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2683            </div>
2684          </details>
2685        </div>
2686        <div class="font-family-grid">
2687          <details>
2688            <summary><code class="language-css">--font-old-style</code></summary>
2689            <div style="font-family: var(--font-old-style)">
2690              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2691            </div>
2692          </details>
2693        </div>
2694        <div class="font-family-grid">
2695          <details>
2696            <summary><code class="language-css">--font-humanist</code></summary>
2697            <div style="font-family: var(--font-humanist)">
2698              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2699            </div>
2700          </details>
2701        </div>
2702        <div class="font-family-grid">
2703          <details>
2704            <summary><code class="language-css">--font-geometric-humanist</code></summary>
2705            <div style="font-family: var(--font-geometric-humanist)">
2706              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2707            </div>
2708          </details>
2709        </div>
2710        <div class="font-family-grid">
2711          <details>
2712            <summary><code class="language-css">--font-classical-humanist</code></summary>
2713            <div style="font-family: var(--font-classical-humanist)">
2714              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2715            </div>
2716          </details>
2717        </div>
2718        <div class="font-family-grid">
2719          <details>
2720            <summary><code class="language-css">--font-neo-grotesque</code></summary>
2721            <div style="font-family: var(--font-neo-grotesque)">
2722              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2723            </div>
2724          </details>
2725        </div>
2726        <div class="font-family-grid">
2727          <details>
2728            <summary><code class="language-css">--font-monospace-slab-serif</code></summary>
2729            <div style="font-family: var(--font-monospace-slab-serif)">
2730              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2731            </div>
2732          </details>
2733        </div>
2734        <div class="font-family-grid">
2735          <details>
2736            <summary><code class="language-css">--font-monospace-code</code></summary>
2737            <div style="font-family: var(--font-monospace-code)">
2738              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2739            </div>
2740          </details>
2741        </div>
2742        <div class="font-family-grid">
2743          <details>
2744            <summary><code class="language-css">--font-industrial</code></summary>
2745            <div style="font-family: var(--font-industrial)">
2746              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2747            </div>
2748          </details>
2749        </div>
2750        <div class="font-family-grid">
2751          <details>
2752            <summary><code class="language-css">--font-rounded-sans</code></summary>
2753            <div style="font-family: var(--font-rounded-sans)">
2754              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2755            </div>
2756          </details>
2757        </div>
2758        <div class="font-family-grid">
2759          <details>
2760            <summary><code class="language-css">--font-slab-serif</code></summary>
2761            <div style="font-family: var(--font-slab-serif)">
2762              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2763            </div>
2764          </details>
2765        </div>
2766        <div class="font-family-grid">
2767          <details>
2768            <summary><code class="language-css">--font-antique</code></summary>
2769            <div style="font-family: var(--font-antique)">
2770              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2771            </div>
2772          </details>
2773        </div>
2774        <div class="font-family-grid">
2775          <details>
2776            <summary><code class="language-css">--font-didone</code></summary>
2777            <div style="font-family: var(--font-didone)">
2778              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2779            </div>
2780          </details>
2781        </div>
2782        <div class="font-family-grid">
2783          <details>
2784            <summary><code class="language-css">--font-handwritten</code></summary>
2785            <div style="font-family: var(--font-handwritten)">
2786              <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&amp;</span>
2787            </div>
2788          </details>
2789        </div>
2790      </div>
2791    </article>
2792
2793    <article class="font-sizes">
2794      <div class="block-wrap">
2795        <div>
2796          <h4>Font Weights</h4>
2797          <pre class="language-css"><code>
2798              --font-weight-1: 100;
2799              --font-weight-2: 200;
2800              --font-weight-3: 300;
2801              --font-weight-4: 400;
2802              --font-weight-5: 500;
2803              --font-weight-6: 600;
2804              --font-weight-7: 700;
2805              --font-weight-8: 800;
2806              --font-weight-9: 900;
2807            </code></pre>
2808        </div>
2809        <div class="font-demo">
2810          <div class="sample-text" style="font-size: var(--font-size-8)">Aa</div>
2811          <input class="font-slider" name="weight" data-prop="fontWeight" type="range" value="4" min="1" max="9"
2812            style="--track-fill: 35%">
2813        </div>
2814      </div>
2815    </article>
2816
2817    <article class="font-sizes">
2818      <div class="block-wrap">
2819        <div>
2820          <h4>Letter Spacing</h4>
2821          <pre class="language-css"><code>
2822              --font-letterspacing-0: -.05em;
2823              --font-letterspacing-1: .025em;
2824              --font-letterspacing-2: .050em;
2825              --font-letterspacing-3: .075em;
2826              --font-letterspacing-4: .150em;
2827              --font-letterspacing-5: .500em;
2828              --font-letterspacing-6: .750em;
2829              --font-letterspacing-7: 1em;
2830            </code></pre>
2831        </div>
2832        <div class="font-demo">
2833          <div class="sample-text letterspacing-demo">
2833Letter Spacing</div>
2834          <input class="font-slider" name="letterspacing" data-prop="letter-spacing" type="range" value="1" min="0"
2835            max="7" style="--track-fill: 15%">
2836        </div>
2837      </div>
2838    </article>
2839
2840    <article class="font-sizes">
2841      <div class="block-wrap">
2842        <div>
2843          <h4>Line Height</h4>
2844          <pre class="language-css"><code>
2845              --font-lineheight-00: .95;
2846              --font-lineheight-0: 1.1;
2847              --font-lineheight-1: 1.25;
2848              --font-lineheight-2: 1.375;
2849              --font-lineheight-3: 1.5;
2850              --font-lineheight-4: 1.75;
2851              --font-lineheight-5: 2;
2852            </code></pre>
2853        </div>
2854        <div class="font-demo">
2855          <div class="sample-text" style="max-inline-size: var(--size-content-1);">
2856            Sample paragraph content to provide a preview for OP's line heights
2857          </div>
2858          <input class="font-slider" name="lineheight" data-prop="lineHeight" type="range" value="1" min="-1" max="5"
2859            style="--track-fill: 33%">
2860        </div>
2861      </div>
2862    </article>
2863
2864    <!-- <article class="font-sizes">
2865        <header>
2866          <h4>Relative Line Height</h4>
2867          <p>These line heights tighten as the font size is increased.</p>
2868        </header>
2869        <pre class="language-css"><code>
2870          --font-relative-lineheight-00: calc(1rem + .5ch);
2871          --font-relative-lineheight-0: calc(1rem + .75ch);
2872          --font-relative-lineheight-1: calc(1rem + 1ch);
2873          --font-relative-lineheight-2: calc(1rem + 1.25ch);
2874          --font-relative-lineheight-3: calc(1rem + 1.5ch);
2875          --font-relative-lineheight-4: calc(1rem + 2ch);
2876          --font-relative-lineheight-5: calc(1rem + 2.5ch);
2877          --font-relative-lineheight-6: calc(1rem + 3ch);
2878        </code></pre>
2879      </article> -->
2880
2881    <article class="font-sizes">
2882      <h4>Font Sizes</h4>
2883      <pre class="language-css"><code>
2884          --font-size-00: .5rem;
2885          --font-size-0: .75rem;
2886          --font-size-1: 1rem;
2887          --font-size-2: 1.1rem;
2888          --font-size-3: 1.25rem;
2889          --font-size-4: 1.5rem;
2890          --font-size-5: 2rem;
2891          --font-size-6: 2.5rem;
2892          --font-size-7: 3rem;
2893          --font-size-8: 3.5rem;
2894        </code></pre>
2895      <div class="scroll-x-overflow">
2896        <div class="font-size-examples">
2897          <code class="language-css">var(--font-size-00)</code>
2898          <span style="font-size: var(--font-size-00)">Almost before you knew it, we'd touched ground.</span>
2899          <code class="language-css">var(--font-size-0)</code>
2900          <span style="font-size: var(--font-size-0)">Almost before you knew it, we'd touched ground.</span>
2901          <code class="language-css">var(--font-size-1)</code>
2902          <span style="font-size: var(--font-size-1)">Almost before you knew it, we'd touched ground.</span>
2903          <code class="language-css">var(--font-size-2)</code>
2904          <span style="font-size: var(--font-size-2)">Almost before you knew it, we'd touched ground.</span>
2905          <code class="language-css">var(--font-size-3)</code>
2906          <span style="font-size: var(--font-size-3)">Almost before you knew it, we'd touched ground.</span>
2907          <code class="language-css">var(--font-size-4)</code>
2908          <span style="font-size: var(--font-size-4)">Almost before you knew it, we'd touched ground.</span>
2909          <code class="language-css">var(--font-size-5)</code>
2910          <span style="font-size: var(--font-size-5)">Almost before you knew it, we'd touched ground.</span>
2911          <code class="language-css">var(--font-size-6)</code>
2912          <span style="font-size: var(--font-size-6)">Almost before you knew it, we'd touched ground.</span>
2913          <code class="language-css">var(--font-size-7)</code>
2914          <span style="font-size: var(--font-size-7)">Almost before you knew it, we'd touched ground.</span>
2915          <code class="language-css">var(--font-size-8)</code>
2916          <span style="font-size: var(--font-size-8)">Almost before you knew it, we'd touched ground.</span>
2917        </div>
2918      </div>
2919    </article>
2920
2921    <article class="font-sizes">
2922      <h4>Fluid Font Sizes</h4>
2923      <pre class="language-css"><code>
2924          --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
2925          --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
2926          --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
2927          --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
2928        </code></pre>
2929      <div class="scroll-x-overflow">
2930        <div class="font-size-examples">
2931          <code class="language-css">var(--font-size-fluid-0)</code>
2932          <span style="font-size: var(--font-size-fluid-0)">Almost before you knew it, we'd touched ground.</span>
2933          <code class="language-css">var(--font-size-fluid-1)</code>
2934          <span style="font-size: var(--font-size-fluid-1)">Almost before you knew it, we'd touched ground.</span>
2935          <code class="language-css">var(--font-size-fluid-2)</code>
2936          <span style="font-size: var(--font-size-fluid-2)">Almost before you knew it, we'd touched ground.</span>
2937          <code class="language-css">var(--font-size-fluid-3)</code>
2938          <span style="font-size: var(--font-size-fluid-3)">Almost before you knew it, we'd touched ground.</span>
2939        </div>
2940      </div>
2941    </article>
2942  </section>
2943
2944  <section id="easing">
2945    <header>
2946      <h2>Easing</h2>
2947      <p>Five strengths for the classic <code class="language-css">ease</code>, <code
2948          class="language-css">ease-out</code>, <code class="language-css">ease-in</code>, and <code
2949          class="language-css">ease-in-out</code> timing functions. Plus s
2949ome extra easings for mock elasticity and
2950        physics and the battle-tested Bézier curves from Robert Penner's easing equations!</p>
2951    </header>
2952    <div class="block-wrap">
2953      <div>
2954        <h5>The Props</h5>
2955        <div class="var-examples">
2956          <pre class="language-css"><code>
2957              --ease-{1-5}
2958              --ease-in-{1-5}
2959              --ease-out-{1-5}
2960              --ease-in-out-{1-5}
2961
2962              --ease-elastic-out-{1-5}
2963              --ease-elastic-in-{1-5}
2964              --ease-elastic-in-out-{1-5}
2965
2966              --ease-spring-{1-5}
2967              --ease-bounce-{1-5}
2968
2969              --ease-step-{1-5}
2970
2971              /* Robert Penner's easing equations */
2972              --ease-circ-{in,out,in-out}
2973              --ease-cubic-{in,out,in-out}
2974              --ease-expo-{in,out,in-out}
2975              --ease-quad-{in,out,in-out}
2976              --ease-quart-{in,out,in-out}
2977              --ease-quint-{in,out,in-out}
2978              --ease-sine-{in,out,in-out}
2979
2980              /* will be removed in v2 */
2981              --ease-elastic-{1-5}        /* deprecated; equal to elastic-out  */
2982              --ease-squish-{1-5}         /* deprecated; equal to elastic-in-out  */
2983            </code></pre>
2984        </div>
2985      </div>
2986      <div>
2987        <h5>Usage Sample</h5>
2988        <pre class="language-css"><code>
2989            .slight-ease {
2990              animation: fade-in 300ms var(--ease-1);
2991            }
2992
2993            .dramatic-ease {
2994              animation: fade-in 1s var(--ease-5);
2995            }
2996
2997            .bouncy {
2998              animation: slide-in-up 3s var(--ease-bounce-2);
2999            }
3000          </code></pre>
3001      </div>
3002    </div>
3003
3004    <div class="easing-samples block-wrap">
3005      <div class="block-wrap">
3006        <header class="animation-control-header">
3007          <h5>Ease</h5>
3008          <button class="play-button">
3009            <svg viewBox="0 0 20 20">
3010              <use href="#play-icon" />
3011              <use href="#pause-icon" class="hidden" />
3012            </svg>
3013          </button>
3014        </header>
3015        <div class="ease-demo paused">
3016          <div style="animation-timing-function: var(--ease-1)">ease-1</div>
3017          <div style="animation-timing-function: var(--ease-2)">ease-2</div>
3018          <div style="animation-timing-function: var(--ease-3)">ease-3</div>
3019          <div style="animation-timing-function: var(--ease-4)">ease-4</div>
3020          <div style="animation-timing-function: var(--ease-5)">ease-5</div>
3021        </div>
3022      </div>
3023
3024      <div class="block-wrap">
3025        <header class="animation-control-header">
3026          <h5>Ease In</h5>
3027          <button class="play-button">
3028            <svg viewBox="0 0 20 20">
3029              <use href="#play-icon" />
3030              <use href="#pause-icon" class="hidden" />
3031            </svg>
3032          </button>
3033        </header>
3034        <div class="ease-demo paused">
3035          <div style="animation-timing-function: var(--ease-in-1)">ease-in-1</div>
3036          <div style="animation-timing-function: var(--ease-in-2)">ease-in-2</div>
3037          <div style="animation-timing-function: var(--ease-in-3)">ease-in-3</div>
3038          <div style="animation-timing-function: var(--ease-in-4)">ease-in-4</div>
3039          <div style="animation-timing-function: var(--ease-in-5)">ease-in-5</div>
3040        </div>
3041      </div>
3042
3043      <div class="block-wrap">
3044        <header class="animation-control-header">
3045          <h5>Ease Out</h5>
3046          <button class="play-button">
3047            <svg viewBox="0 0 20 20">
3048              <use href="#play-icon" />
3049              <use href="#pause-icon" class="hidden" />
3050            </svg>
3051          </button>
3052        </header>
3053        <div class="ease-demo paused">
3054          <div style="animation-timing-function: var(--ease-out-1)">ease-out-1</div>
3055          <div style="animation-timing-function: var(--ease-out-2)">ease-out-2</div>
3056          <div style="animation-timing-function: var(--ease-out-3)">ease-out-3</div>
3057          <div style="animation-timing-function: var(--ease-out-4)">ease-out-4</div>
3058          <div style="animation-timing-function: var(--ease-out-5)">ease-out-5</div>
3059        </div>
3060      </div>
3061
3062      <div class="block-wrap">
3063        <header class="animation-control-header">
3064          <h5>Ease In Out</h5>
3065          <button class="play-button">
3066            <svg viewBox="0 0 20 20">
3067              <use href="#play-icon" />
3068              <use href="#pause-icon" class="hidden" />
3069            </svg>
3070          </button>
3071        </header>
3072        <div class="ease-demo paused">
3073          <div style="animation-timing-function: var(--ease-in-out-1)">ease-in-out-1</div>
3074          <div style="animation-timing-function: var(--ease-in-out-2)">
3074ease-in-out-2</div>
3075          <div style="animation-timing-function: var(--ease-in-out-3)">ease-in-out-3</div>
3076          <div style="animation-timing-function: var(--ease-in-out-4)">ease-in-out-4</div>
3077          <div style="animation-timing-function: var(--ease-in-out-5)">ease-in-out-5</div>
3078        </div>
3079      </div>
3080
3081      <div class="block-wrap">
3082        <header class="animation-control-header">
3083          <h5>Ease Elastic Out</h5>
3084          <button class="play-button">
3085            <svg viewBox="0 0 20 20">
3086              <use href="#play-icon" />
3087              <use href="#pause-icon" class="hidden" />
3088            </svg>
3089          </button>
3090        </header>
3091        <div class="ease-demo paused">
3092          <div style="animation-timing-function: var(--ease-elastic-out-1)">ease-elastic-out-1</div>
3093          <div style="animation-timing-function: var(--ease-elastic-out-2)">ease-elastic-out-2</div>
3094          <div style="animation-timing-function: var(--ease-elastic-out-3)">ease-elastic-out-3</div>
3095          <div style="animation-timing-function: var(--ease-elastic-out-4)">ease-elastic-out-4</div>
3096          <div style="animation-timing-function: var(--ease-elastic-out-5)">ease-elastic-out-5</div>
3097        </div>
3098      </div>
3099
3100      <div class="block-wrap">
3101        <header class="animation-control-header">
3102          <h5>Ease Elastic In</h5>
3103          <button class="play-button">
3104            <svg viewBox="0 0 20 20">
3105              <use href="#play-icon" />
3106              <use href="#pause-icon" class="hidden" />
3107            </svg>
3108          </button>
3109        </header>
3110        <div class="ease-demo paused">
3111          <div style="animation-timing-function: var(--ease-elastic-in-1)">ease-elastic-in-1</div>
3112          <div style="animation-timing-function: var(--ease-elastic-in-2)">ease-elastic-in-2</div>
3113          <div style="animation-timing-function: var(--ease-elastic-in-3)">ease-elastic-in-3</div>
3114          <div style="animation-timing-function: var(--ease-elastic-in-4)">ease-elastic-in-4</div>
3115          <div style="animation-timing-function: var(--ease-elastic-in-5)">ease-elastic-in-5</div>
3116        </div>
3117      </div>
3118
3119      <div class="block-wrap">
3120        <header class="animation-control-header">
3121          <h5>Ease Elastic In Out</h5>
3122          <button class="play-button">
3123            <svg viewBox="0 0 20 20">
3124              <use href="#play-icon" />
3125              <use href="#pause-icon" class="hidden" />
3126            </svg>
3127          </button>
3128        </header>
3129        <div class="ease-demo paused">
3130          <div style="animation-timing-function: var(--ease-elastic-in-out-1)">ease-elastic-in-out-1</div>
3131          <div style="animation-timing-function: var(--ease-elastic-in-out-2)">ease-elastic-in-out-2</div>
3132          <div style="animation-timing-function: var(--ease-elastic-in-out-3)">ease-elastic-in-out-3</div>
3133          <div style="animation-timing-function: var(--ease-elastic-in-out-4)">ease-elastic-in-out-4</div>
3134          <div style="animation-timing-function: var(--ease-elastic-in-out-5)">ease-elastic-in-out-5</div>
3135        </div>
3136      </div>
3137
3138      <div class="block-wrap">
3139        <header class="animation-control-header">
3140          <h5>Ease Spring</h5>
3141          <button class="play-button">
3142            <svg viewBox="0 0 20 20">
3143              <use href="#play-icon" />
3144              <use href="#pause-icon" class="hidden" />
3145            </svg>
3146          </button>
3147        </header>
3148        <div class="ease-demo paused">
3149          <div style="animation-timing-function: var(--ease-spring-1)">ease-spring-1</div>
3150          <div style="animation-timing-function: var(--ease-spring-2)">ease-spring-2</div>
3151          <div style="animation-timing-function: var(--ease-spring-3)">ease-spring-3</div>
3152          <div style="animation-timing-function: var(--ease-spring-4)">ease-spring-4</div>
3153          <div style="animation-timing-function: var(--ease-spring-5)">ease-spring-5</div>
3154        </div>
3155      </div>
3156
3157      <div class="block-wrap">
3158        <header class="animation-control-header">
3159          <h5>Ease Bounce</h5>
3160          <button class="play-button">
3161            <svg viewBox="0 0 20 20">
3162              <use href="#play-icon" />
3163              <use href="#pause-icon" class="hidden" />
3164            </svg>
3165          </button>
3166        </header>
3167        <div class="ease-demo paused">
3168          <div style="animation-timing-function: var(--ease-bounce-1)">ease-bounce-1</div>
3169          <div style="animation-timing-function: var(--ease-bounce-2)">ease-bounce-2</div>
3170          <div style="animation-timing-function: var(--ease-bounce-3)">ease-bounce-3</div>
3171          <div style="animation-timing-function: var(--ease-bounce-4)">ease-bounce-4</div>
3172          <div style="animation-timing-function: var(--ease-bounce-5)">ease-bounce-5</div>
3173        </div>
3174      </div>
3175
3176      <div class="block-wrap">
3177        <header class="animation-control-header">
3178          <h5>Ease Steps</h5>
3179          <button class="play-button">
3180            <svg viewBox="0 0 20 20">
3181              <use href="#play-icon" />
3182              <use href="#pause-icon" class="hidden" />
3183            </svg>
3184          </button>
3185        </header>
3186        <div class="ease-demo paused">
3187          <div style="animation-timing-function: var(--ease-step-1)">ease-step-1</div>
3188          <div style="animation-timing-function: var(--ease-step-2)">ease-step-2</div>
3189          <div style="animation-timing-function: var(--ease-step-3)">ease-step-3</div>
3190          <div style="animation-timing-function: var(--ease-step-4)">ease-step-4</div>
3191          <div style="animation-timing-function: var(--ease-step-5)">ease-step-5</div>
3192        </div>
3193      </div>
3194
3195      <div class="block-wrap">
3196        <header class="animation-control-header">
3197          <h5>Circular</h5>
3198          <button class="play-button">
3199            <svg viewBox="0 0 20 20">
3200              <use href="#play-icon" />
3201              <use href="#pause-icon" class="hidden" />
3202            </svg>
3203          </button>
3204        </header>
3205        <div class="ease-demo paused">
3206          <div style="animation-timing-function: var(--ease-circ-in)">ease-circ-in</div>
3207          <div style="animation-timing-function: var(--ease-circ-out)">ease-circ-out</div>
3208          <div style="animation-timing-function: var(--ease-circ-in-out)">ease-circ-in-out</div>
3209        </div>
3210      </div>
3211
3212      <div class="block-wrap">
3213        <header class="animation-control-header">
3214          <h5>Cubic</h5>
3215          <button class="play-button">
3216            <svg viewBox="0 0 20 20">
3217              <use href="#play-icon" />
3218              <use href="#pause-icon" class="hidden" />
3219            </svg>
3220          </button>
3221        </header>
3222        <div class="ease-demo paused">
3223          <div style="animation-timing-function: var(--ease-cubic-in)">ease-cubic-in</div>
3224          <div style="animation-timing-function: var(--ease-cubic-out)">ease-cubic-out</div>
3225          <div style="animation-timing-function: var(--ease-cubic-in-out)">ease-cubic-in-out</div>
3226        </div>
3227      </div>
3228
3229      <div class="block-wrap">
3230        <header class="animation-control-header">
3231          <h5>Exponential</h5>
3232          <button class="play-button">
3233            <svg viewBox="0 0 20 20">
3234              <use href="#play-icon" />
3235              <use href="#pause-icon" class="hidden" />
3236            </svg>
3237          </button>
3238        </header>
3239        <div class="ease-demo paused">
3240          <div style="animation-timing-function: var(--ease-expo-in)">ease-expo-in</div>
3241          <div style="animation-timing-function: var(--ease-expo-out)">ease-expo-out</div>
3242          <div style="animation-timing-function: var(--ease-expo-in-out)">ease-expo-in-out</div>
3243        </div>
3244      </div>
3245
3246      <div class="block-wrap">
3247        <header class="animation-control-header">
3248          <h5>Quadratic</h5>
3249          <button class="play-button">
3250            <svg viewBox="0 0 20 20">
3251              <use href="#play-icon" />
3252              <use href="#pause-icon" class="hidden" />
3253            </svg>
3254          </button>
3255        </header>
3256        <div class="ease-demo paused">
3257          <div style="animation-timing-function: var(--ease-quad-in)">ease-quad-in</div>
3258          <div style="animation-timing-function: var(--ease-quad-out)">ease-quad-out</div>
3259          <div style="animation-timing-function: var(--ease-quad-in-out)">ease-quad-in-out</div>
3260        </div>
3261      </div>
3262
3263      <div class="block-wrap">
3264        <header class="animation-control-header">
3265          <h5>Quartic</h5>
3266          <button class="play-button">
3267            <svg viewBox="0 0 20 20">
3268              <use href="#play-icon" />
3269              <use href="#pause-icon" class="hidden" />
3270            </svg>
3271          </button>
3272        </header>
3273        <div class="ease-demo paused">
3274          <div style="animation-timing-function: var(--ease-quart-in)">ease-quart-in</div>
3275          <div style="animation-timing-function: var(--ease-quart-out)">ease-quart-out</div>
3276          <div style="animation-timing-function: var(--ease-quart-in-out)">ease-quart-in-out</div>
3277        </div>
3278      </div>
3279
3280      <div class="block-wrap">
3281        <header class="animation-control-header">
3282          <h5>Quintic</h5>
3283          <button class="play-button">
3284            <svg viewBox="0 0 20 20">
3285              <use href="#play-icon" />
3286              <use href="#pause-icon" class="hidden" />
3287            </svg>
3288          </button>
3289        </header>
3290        <div class="ease-demo paused">
3291          <div style="animation-timing-function: var(--ease-quint-in)">ease-quint-in</div>
3292          <div style="animation-timing-function: var(--ease-quint-out)">ease-quint-out</div>
3293          <div style="animation-timing-function: var(--ease-quint-in-out)">ease-quint-in-out</div>
3294        </div>
3295      </div>
3296
3297      <div class="block-wrap">
3298        <header class="animation-control-header">
3299          <h5>Sinusoidal</h5>
3300          <button class="play-button">
3301            <svg viewBox="0 0 20 20">
3302              <use href="#play-icon" />
3303              <use href="#pause-icon" class="hidden" />
3304            </svg>
3305          </button>
3306        </header>
3307        <div class="ease-demo paused">
3308          <div style="animation-timing-function: var(--ease-sine-in)">ease-sine-in</div>
3309          <div style="animation-timing-function: var(--ease-sine-out)">ease-sine-out</div>
3310          <div style="animation-timing-function: var(--ease-sine-in-out)">ease-sine-in-out</div>
3311        </div>
3312      </div>
3313    </div>
3314  </section>
3315
3316  <section id="animations">
3317    <header>
3318      <h2>Animations</h2>
3319      <p>Premade <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect">keyframe effects</a> allow
3320        you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations.
3321      </p>
3322    </header>
3323    <div class="block-wrap">
3324      <div>
3325        <h5>The Props</h5>
3326        <div class="var-examples">
3327          <pre class="language-css"><code>
3328              --animation-fade-{in,out}
3329              --animation-fade-{in,out}-bloom
3330              --animation-shake-{x,y,z}
3331
3332              --animation-slide-out-{up,down,left,right}
3333              --animation-slide-in-{up,down,left,right}
3334
3335              --animation-spin
3336              --animation-ping
3337              --animation-blink
3338              --animation-float
3339              --animation-bounce
3340              --animation-pulse
3341            </code></pre>
3342        </div>
3343      </div>
3344      <!-- <div>
3345          <h5>Keyframe Effect Examples</h5>
3346          <div class="var-examples">
3347            <pre class="language-css"><code>
3348              @keyframes op-fade-in {
3349                to { opacity: 1 }
3350              }
3351
3352              @keyframes op-slide-out-right {
3353                to { transform: translateX(100%) }
3354              }
3355
3356              @keyframes op-slide-in-up {
3357                from { transform: translateY(100%) }
3358              }
3359
3360              @keyframes op-float {
3361                50% {
3362                  transform: translateY(-25%);
3363                }
3364              }
3365            </code></pre>
3366          </div>
3367        </div> -->
3368      <div>
3369        <h5>Usage Sample</h5>
3370        <pre class="language-css"><code>
3371            .loaded {
3372              animation: var(--animation-fade-in) forwards;
3373            }
3374
3375            .actionsheet {
3376              animation: var(--animation-slide-out-down) forwards;
3377
3378              &.open {
3379                animation: var(--animation-slide-in-up) forwards;
3380              }
3381            }
3382
3383            .alert {
3384              animation: var(--animation-blink);
3385            }
3386          </code></pre>
3387      </div>
3388    </div>
3389
3390    <div class='just-for-gap'>
3391      <h5>Samples</h5>
3392      <div class="animation-demo">
3393        <div class="animation-demo-target" data-starting-styles="opacity:0" data-animation="fade-in">
3394          <h6>Fade In</h6>
3395          <button class="play-button">
3396            <svg viewBox="0 0 20 20">
3397              <use href="#play-icon" />
3398              <use href="#pause-icon" class="hidden" />
3399            </svg>
3400          </button>
3401        </div>
3402
3403        <div class="animation-demo-target" data-animation="fade-out">
3404          <h6>Fade Out</h6>
3405          <button class="play-button">
3406            <svg viewBox="0 0 20 20">
3407              <use href="#play-icon" />
3408              <use href="#pause-icon" class="hidden" />
3409            </svg>
3410          </button>
3411        </div>
3412
3413        <div class="animation-demo-target" data-starting-styles="opacity:0" data-animation="fade-in-bloom">
3414          <h6>Bloom Fade In</h6>
3415          <button class="play-button">
3416            <svg viewBox="0 0 20 20">
3417              <use href="#play-icon" />
3418              <use href="#pause-icon" class="hidden" />
3419            </svg>
3420          </button>
3421        </div>
3422
3423        <div class="animation-demo-target" data-animation="fade-out-bloom">
3424          <h6>Bloom Fade Out</h6>
3425          <button class="play-button">
3426            <svg viewBox="0 0 20 20">
3427              <use href="#play-icon" />
3428              <use href="#pause-icon" class="hidden" />
3429            </svg>
3430          </button>
3431        </div>
3432
3433        <div class="animation-demo-target" data-animation="scale-up">
3434          <h6>Scale Up</h6>
3435          <button class="play-button">
3436            <svg viewBox="0 0 20 20">
3437              <use href="#play-icon" />
3438              <use href="#pause-icon" class="hidden" />
3439            </svg>
3440          </button>
3441        </div>
3442
3443        <div class="animation-demo-target" data-animation="scale-down">
3444          <h6>Scale Down</h6>
3445          <button class="play-button">
3446            <svg viewBox="0 0 20 20">
3447              <use href="#play-icon" />
3448              <use href="#pause-icon" class="hidden" />
3449            </svg>
3450          </button>
3451        </div>
3452
3453        <div class="animation-demo-target" data-animation="slide-out-up">
3454          <h6>Slide Out Up</h6>
3455          <button class="play-button">
3456            <svg viewBox="0 0 20 20">
3457              <use href="#play-icon" />
3458              <use href="#pause-icon" class="hidden" />
3459            </svg>
3460          </button>
3461        </div>
3462
3463        <div class="animation-demo-target" data-animation="slide-out-down">
3464          <h6>Slide Out Down</h6>
3465          <button class="play-button">
3466            <svg viewBox="0 0 20 20">
3467              <use href="#play-icon" />
3468              <use href="#pause-icon" class="hidden" />
3469            </svg>
3470          </button>
3471        </div>
3472
3473        <div class="animation-demo-target" data-animation="slide-out-right">
3474          <h6>Slide Out Right</h6>
3475          <button class="play-button">
3476            <svg viewBox="0 0 20 20">
3477              <use href="#play-icon" />
3478              <use href="#pause-icon" class="hidden" />
3479            </svg>
3480          </button>
3481        </div>
3482
3483        <div class="animation-demo-target" data-animation="slide-out-left">
3484          <h6>Slide Out Left</h6>
3485          <button class="play-button">
3486            <svg viewBox="0 0 20 20">
3487              <use href="#play-icon" />
3488              <use href="#pause-icon" class="hidden" />
3489            </svg>
3490          </button>
3491        </div>
3492
3493        <div class="animation-demo-target" data-animation="slide-in-up">
3494          <h6>Slide In Up</h6>
3495          <button class="play-button">
3496            <svg viewBox="0 0 20 20">
3497              <use href="#play-icon" />
3498              <use href="#pause-icon" class="hidden" />
3499            </svg>
3500          </button>
3501        </div>
3502
3503        <div class="animation-demo-target" data-animation="slide-in-down">
3504          <h6>Slide In Down</h6>
3505          <button class="play-button">
3506            <svg viewBox="0 0 20 20">
3507              <use href="#play-icon" />
3508              <use href="#pause-icon" class="hidden" />
3509            </svg>
3510          </button>
3511        </div>
3512
3513        <div class="animation-demo-target" data-animation="slide-in-right">
3514          <h6>Slide In Right</h6>
3515          <button class="play-button">
3516            <svg viewBox="0 0 20 20">
3517              <use href="#play-icon" />
3518              <use href="#pause-icon" class="hidden" />
3519            </svg>
3520          </button>
3521        </div>
3522
3523        <div class="animation-demo-target" data-animation="slide-in-left">
3524          <h6>Slide In Left</h6>
3525          <button class="play-button">
3526            <svg viewBox="0 0 20 20">
3527              <use href="#play-icon" />
3528              <use href="#pause-icon" class="hidden" />
3529            </svg>
3530          </button>
3531        </div>
3532
3533        <div class="animation-demo-target" data-animation="spin">
3534          <h6>Spin</h6>
3535          <button class="play-button">
3536            <svg viewBox="0 0 20 20">
3537              <use href="#play-icon" />
3538              <use href="#pause-icon" class="hidden" />
3539            </svg>
3540          </button>
3541        </div>
3542
3543        <div class="animation-demo-target" data-animation="ping">
3544          <h6>Ping</h6>
3545          <button class="play-button">
3546            <svg viewBox="0 0 20 20">
3547              <use href="#play-icon" />
3548              <use href="#pause-icon" class="hidden" />
3549            </svg>
3550          </button>
3551        </div>
3552
3553        <div class="animation-demo-target" data-animation="blink">
3554          <h6>Blink</h6>
3555          <button class="play-button">
3556            <svg viewBox="0 0 20 20">
3557              <use href="#play-icon" />
3558              <use href="#pause-icon" class="hidden" />
3559            </svg>
3560          </button>
3561        </div>
3562
3563        <div class="animation-demo-target" data-animation="float">
3564          <h6>Float</h6>
3565          <button class="play-button">
3566            <svg viewBox="0 0 20 20">
3567              <use href="#play-icon" />
3568              <use href="#pause-icon" class="hidden" />
3569            </svg>
3570          </button>
3571        </div>
3572
3573        <div class="animation-demo-target" data-animation="bounce">
3574          <h6>Bounce</h6>
3575          <button class="play-button">
3576            <svg viewBox="0 0 20 20">
3577              <use href="#play-icon" />
3578              <use href="#pause-icon" class="hidden" />
3579            </svg>
3580          </button>
3581        </div>
3582
3583        <div class="animation-demo-target" data-animation="pulse">
3584          <h6>Pulse</h6>
3585          <button class="play-button">
3586            <svg viewBox="0 0 20 20">
3587              <use href="#play-icon" />
3588              <use href="#pause-icon" class="hidden" />
3589            </svg>
3590          </button>
3591        </div>
3592
3593        <div class="animation-demo-target" data-animation="shake-x">
3594          <h6>Shake X</h6>
3595          <button class="play-button">
3596            <svg viewBox="0 0 20 20">
3597              <use href="#play-icon" />
3598              <use href="#pause-icon" class="hidden" />
3599            </svg>
3600          </button>
3601        </div>
3602
3603        <div class="animation-demo-target" data-animation="shake-y">
3604          <h6>Shake Y</h6>
3605          <button class="play-button">
3606            <svg viewBox="0 0 20 20">
3607              <use href="#play-icon" />
3608              <use href="#pause-icon" class="hidden" />
3609            </svg>
3610          </button>
3611        </div>
3612
3613        <div class="animation-demo-target" data-animation="shake-z">
3614          <h6>Shake Z</h6>
3615          <button class="play-button">
3616            <svg viewBox="0 0 20 20">
3617              <use href="#play-icon" />
3618              <use href="#pause-icon" class="hidden" />
3619            </svg>
3620          </button>
3621        </div>
3622      </div>
3623    </div>
3624
3625    <div class='just-for-gap'>
3626      <h3>Combine 'em!</h3>
3627      <div class="animation-demo of-pairs">
3628        <div class="animation-pair">
3629          <div class="animation-demo-target slide-fade-combo" data-animation="slide-down-fade-out">
3630            <h6>Slide Fade</h6>
3631            <button class="play-button">
3632              <svg viewBox="0 0 20 20">
3633                <use href="#play-icon" />
3634                <use href="#pause-icon" class="hidden" />
3635              </svg>
3636            </button>
3637          </div>
3638          <div>
3639            <pre class="language-css"><code>
3640                .slide-fade {
3641                  animation:
3642                    var(--animation-fade-out) forwards,
3643                    var(--animation-slide-out-down);
3644                  animation-timing-function: var(--ease-elastic-in-out-3);
3645                  animation-duration: 1s;
3646                }
3647              </code></pre>
3648          </div>
3649        </div>
3650
3651        <div class="animation-pair">
3652          <!-- data-starting-styles="opacity:0" -->
3653          <div class="animation-demo-target shake-fade-combo" data-animation="slide-left-fade-in-shake-y">
3654            <h6>Shake In</h6>
3655            <button class="play-button">
3656              <svg viewBox="0 0 20 20">
3657                <use href="#play-icon" />
3658                <use href="#pause-icon" class="hidden" />
3659              </svg>
3660            </button>
3661          </div>
3662          <div>
3663            <pre class="language-css"><code>
3664                .shake-in {
3665                  animation:
3666                    var(--animation-shake-y),
3667                    var(--animation-fade-in),
3668                    var(--animation-slide-in-left);
3669                }
3670              </code></pre>
3671          </div>
3672        </div>
3673
3674        <div class="animation-pair">
3675          <div class="animation-demo-target push-out-combo" data-animation="push-out">
3676            <h6>Push Out</h6>
3677            <button class="play-button">
3678              <svg viewBox="0 0 20 20">
3679                <use href="#play-icon" />
3680                <use href="#pause-icon" class="hidden" />
3681              </svg>
3682            </button>
3683          </div>
3684          <div>
3685            <pre class="language-css"><code>
3686                .push-out {
3687                  animation:
3688                    var(--animation-scale-down),
3689                    var(--animation-fade-out);
3690                  animation-timing-function: var(--ease-elastic-in-out-4);
3691                }
3692              </code></pre>
3693          </div>
3694        </div>
3695      </div>
3696    </div>
3697
3698  </section>
3699
3700
3701  <section id="sizes">
3702    <header>
3703      <h2>Sizes</h2>
3704      <p>Sizes use relative units by default with <code class="language-css">rem</code> but static, <code
3705          class="language-css">px</code>-based units are also available. <code>0</code>s are unsafe but common negative
3706        values, while 1-N are safe.</p>
3707    </header>
3708    <div>
3709      <h5>The Props</h5>
3710      <div class="var-examples">
3711        <pre class="language-css"><code>
3712            --size-{000-15}
3713            --size-px-{000-15}
3714            --size-fluid-{1-10}
3715            --size-content-{1-3}
3716            --size-header-{1-3}
3717            --size-relative-{000-15}
3718          </code></pre>
3719      </div>
3720    </div>
3721
3722    <div class="block-wrap">
3723      <div>
3724        <h5>Document Relative Sizes</h5>
3725        <div class="var-examples">
3726          <pre class="language-css"><code>
3727              --size-000: -.5rem;
3728              --size-00: -.25rem;
3729              --size-1: .25rem;
3730              --size-2: .5rem;
3731              --size-3: 1rem;
3732              --size-4: 1.25rem;
3733              --size-5: 1.5rem;
3734              --size-6: 1.75rem;
3735              --size-7: 2rem;
3736              --size-8: 3rem;
3737              --size-9: 4rem;
3738              --size-10: 5rem;
3739              --size-11: 7.5rem;
3740              --size-12: 10rem;
3741              --size-13: 15rem;
3742              --size-14: 20rem;
3743              --size-15: 30rem;
3744            </code></pre>
3745        </div>
3746      </div>
3747      <div>
3748        <h5>Static Sizes</h5>
3749        <div class="var-examples">
3750          <pre class="language-css"><code>
3751              --size-px-000: -8px;
3752              --size-px-00: -4px;
3753              --size-px-1: 4px;
3754              --size-px-2: 8px;
3755              --size-px-3: 16px;
3756              --size-px-4: 20px;
3757              --size-px-5: 24px;
3758              --size-px-6: 28px;
3759              --size-px-7: 32px;
3760              --size-px-8: 48px;
3761              --size-px-9: 64px;
3762              --size-px-10: 80px;
3763              --size-px-11: 120px;
3764              --size-px-12: 160px;
3765              --size-px-13: 240px;
3766              --size-px-14: 320px;
3767              --size-px-15: 480px;
3768            </code></pre>
3769        </div>
3770      </div>
3771      <div>
3772        <h5>Usage Sample</h5>
3773        <pre class="language-css"><code>
3774            article {
3775              display: grid;
3776              gap: var(--size-3);
3777            }
3778
3779            li {
3780              padding-inline-start: var(--size-2);
3781            }
3782
3783            .icon {
3784              inline-size: var(--size-5);
3785              block-size: var(--size-5);
3786            }
3787          </code></pre>
3788      </div>
3789      <div class="sizes-demo count-em scroll-x-overflow from-one">
3790        <span style="inline-size: var(--size-1)"></span>
3791        <span style="inline-size: var(--size-2)"></span>
3792        <span style="inline-size: var(--size-3)"></span>
3793        <span style="inline-size: var(--size-4)"></span>
3794        <span style="inline-size: var(--size-5)"></span>
3795        <span style="inline-size: var(--size-6)"></span>
3796        <span style="inline-size: var(--size-7)"></span>
3797        <span style="inline-size: var(--size-8)"></span>
3798        <span style="inline-size: var(--size-9)"></span>
3799        <span style="inline-size: var(--size-10)"></span>
3800        <span style="inline-size: var(--size-11)"></span>
3801        <span style="inline-size: var(--size-12)"></span>
3802        <span style="inline-size: var(--size-13)"></span>
3803        <span style="inline-size: var(--size-14)"></span>
3804        <span style="inline-size: var(--size-15)"></span>
3805      </div>
3806    </div>
3807
3808    <div class="block-wrap">
3809      <div>
3810        <h5>Fluid Sizes</h5>
3811        <div class="var-examples">
3812          <pre class="language-css"><code>
3813              --size-fluid-1: clamp(.5rem, 1vw, 1rem);
3814              --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
3815              --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
3816              --size-fluid-4: clamp(2rem, 4vw, 3rem);
3817              --size-fluid-5: clamp(4rem, 5vw, 5rem);
3818              --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
3819              --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
3820              --size-fluid-8: clamp(10rem, 20vw, 15rem);
3821              --size-fluid-9: clamp(15rem, 30vw, 20rem);
3822              --size-fluid-10: clamp(20rem, 40vw, 30rem);
3823            </code></pre>
3824        </div>
3825      </div>
3826      <div>
3827        <h5>Usage Sample</h5>
3828        <pre class="language-css"><code>
3829            body {
3830              padding: var(--size-fluid-3);
3831            }
3832
3833            hr {
3834              margin-block: var(--size-fluid-5);
3835            }
3836          </code></pre>
3837      </div>
3838      <div class="sizes-demo count-em scroll-x-overflow from-one">
3839        <span style="inline-size: var(--size-fluid-1)"></span>
3840        <span style="inline-size: var(--size-fluid-2)"></span>
3841        <span style="inline-size: var(--size-fluid-3)"></span>
3842        <span style="inline-size: var(--size-fluid-4)"></span>
3843        <span style="inline-size: var(--size-fluid-5)"></span>
3844        <span style="inline-size: var(--size-fluid-6)"></span>
3845        <span style="inline-size: var(--size-fluid-7)"></span>
3846        <span style="inline-size: var(--size-fluid-8)"></span>
3847        <span style="inline-size: var(--size-fluid-9)"></span>
3848        <span style="inline-size: var(--size-fluid-10)"></span>
3849      </div>
3850    </div>
3851
3852    <div class="block-wrap">
3853      <div>
3854        <h5>Reading Content Sizes</h5>
3855        <div class="var-examples">
3856          <pre class="language-css"><code>
3857              --size-content-1: 20ch;
3858              --size-content-2: 45ch;
3859              --size-content-3: 60ch;
3860            </code></pre>
3861        </div>
3862      </div>
3863      <div>
3864        <h5>Usage Sample</h5>
3865        <pre class="language-css"><code>
3866            p {
3867              max-inline-size: var(--size-content-3);
3868            }
3869
3870            aside {
3871              max-inline-size: var(--size-content-2);
3872            }
3873          </code></pre>
3874      </div>
3875      <div class="large-sizes sizes-demo count-em scroll-x-overflow from-one">
3876        <span style="inline-size: var(--size-content-1)"></span>
3877        <span style="inline-size: var(--size-content-2)"></span>
3878        <span style="inline-size: var(--size-content-3)"></span>
3879      </div>
3880      <div class="content-demo scroll-x-overflow">
3881        <p style="inline-size: var(--size-content-1)">Carrot cake gummi bears sweet caramels cotton candy topping.</p>
3882        <p style="inline-size: var(--size-content-2)">Carrot cake gummi bears sweet caramels cotton candy topping. Jelly
3883          candy apple pie gingerbread tootsie roll chupa chups.</p>
3884        <p style="inline-size: var(--size-content-3)">Carrot cake gummi bears sweet caramels cotton candy topping. Jelly
3885          candy apple pie gingerbread tootsie roll chupa chups. Gummi bears lollipop apple pie pudding tart cake jelly.
3886          Soufflé lollipop jelly-o chocolate bar icing bonbon.</p>
3887      </div>
3888    </div>
3889
3890    <div class="block-wrap">
3891      <div>
3892        <h5>Headline Content Sizes</h5>
3893        <div class="var-examples">
3894          <pre class="language-css"><code>
3895              --size-header-1: 20ch;
3896              --size-header-2: 25ch;
3897              --size-header-3: 35ch;
3898            </code></pre>
3899        </div>
3900      </div>
3901      <div>
3902        <h5>Usage Sample</h5>
3903        <pre class="language-css"><code>
3904            h1 {
3905              max-inline-size: var(--size-header-2);
3906            }
3907
3908            small {
3909              max-inline-size: var(--size-header-1);
3910            }
3911          </code></pre>
3912      </div>
3913      <div class="large-sizes match-h5 sizes-demo count-em scroll-x-overflow from-one">
3914        <span style="inline-size: var(--size-header-1)"></span>
3915        <span style="inline-size: var(--size-header-2)"></span>
3916        <span style="inline-size: var(--size-header-3)"></span>
3917      </div>
3918      <div class="header-demo scroll-x-overflow">
3919        <h5 style="inline-size: var(--size-header-1)">Carrot cake gummi bears sweet caramel candy.</h5>
3920        <h5 style="inline-size: var(--size-header-2)">Carrot cake gummi bears sweet caramels cotton candy topping.</h5>
3921        <h5 style="inline-size: var(--size-header-3)">Carrot cake gummi bears sweet caramels cotton candy topping. Jelly
3922          candy apple pie gingerbread tootsie roll chupa chups.</h5>
3923      </div>
3924    </div>
3925
3926    <div class="block-wrap">
3927      <div>
3928        <h5>Relative Sizes</h5>
3929        <div class="var-examples">
3930          <pre class="language-css"><code>
3931              --size-relative-000: -.5ch;
3932              --size-relative-00: -.25ch;
3933              --size-relative-1: .25ch;
3934              --size-relative-2: .5ch;
3935              --size-relative-3: 1ch;
3936              --size-relative-4: 1.25ch;
3937              --size-relative-5: 1.5ch;
3938              --size-relative-6: 1.75ch;
3939              --size-relative-7: 2ch;
3940              --size-relative-8: 3ch;
3941              --size-relative-9: 4ch;
3942              --size-relative-10: 5ch;
3943              --size-relative-11: 7.5ch;
3944              --size-relative-12: 10ch;
3945              --size-relative-13: 15ch;
3946              --size-relative-14: 20ch;
3947              --size-relative-15: 30ch;
3948            </code></pre>
3949        </div>
3950      </div>
3951      <div class="relative-sizes-demo">
3952        <label>
3953          Pick a different base font size:
3954          <select>
3955            <optgroup label="Base Font Size">
3956              <option value="5">--font-size-5</option>
3957              <option value="6">--font-size-6</option>
3958              <option value="7">--font-size-7</option>
3959              <option value="8">--font-size-8</option>
3960            </optgroup>
3961          </select>
3962        </label>
3963        <div class="sizes-demo count-em scroll-x-overflow from-one">
3964          <div style="inline-size: var(--size-relative-1)"></div>
3965          <div style="inline-size: var(--size-relative-2)"></div>
3966          <div style="inline-size: var(--size-relative-3)"></div>
3967          <div style="inline-size: var(--size-relative-4)"></div>
3968          <div style="inline-size: var(--size-relative-5)"></div>
3969          <div style="inline-size: var(--size-relative-6)"></div>
3970          <div style="inline-size: var(--size-relative-7)"></div>
3971          <div style="inline-size: var(--size-relative-8)"></div>
3972          <div style="inline-size: var(--size-relative-9)"></div>
3973          <div style="inline-size: var(--size-relative-10)"></div>
3974          <div style="inline-size: var(--size-relative-11)"></div>
3975          <div style="inline-size: var(--size-relative-12)"></div>
3976          <div style="inline-size: var(--size-relative-13)"></div>
3977          <div style="inline-size: var(--size-relative-14)"></div>
3978          <div style="inline-size: var(--size-relative-15)"></div>
3979        </div>
3980      </div>
3981    </div>
3982  </section>
3983
3984  <section id="borders">
3985    <header>
3986      <h2>Borders</h2>
3987      <p>Sizes, corner radii, a circle helper, <a
3988          href="https://ishadeed.com/article/conditional-border-radius/">conditional radii</a>, radii that produce a <a
3989          href="https://www.getpapercss.com/docs/utilities/borders/">hand-drawn border</a>, and some blobs.</p>
3990    </header>
3991    <div class="block-wrap">
3992      <div>
3993
3994        <h5>Vars Sample</h5>
3995        <div class="var-examples">
3996          <pre class="language-css"><code>
3997              --border-size-{1-5}
3998              --radius-{1-6}
3999              --radius-round
4000              --radius-drawn-{1-6}
4001              --radius-blob-{1-5}
4002              --radius-conditional-{1-6}
4003            </code></pre>
4004        </div>
4005      </div>
4006      <div>
4007        <h5>Usage Sample</h5>
4008        <pre class="language-css"><code>
4009            .card {
4010              /* no radius when fullscreen */
4011              border-radius: var(--radius-conditional-3);
4012              border: var(--border-size-1) solid var(--gray-1);
4013            }
4014
4015            .circle {
4016              inline-size: var(--size-5);
4017              aspect-ratio: var(--ratio-square);
4018              border-radius: var(--radius-round);
4019            }
4020
4021            .drawn {
4022              inline-size: var(--size-14);
4023              border: var(--brown-12) var(--border-size-4) solid;
4024              border-radius: var(--radius-drawn-1);
4025            }
4026          </code></pre>
4027      </div>
4028    </div>
4029
4030    <div class="just-for-gap">
4031      <h3>Border Size</h3>
4032      <article class="border-demos">
4033        <div style="border-width: var(--border-size-1)">1</div>
4034        <div style="border-width: var(--border-size-2)">2</div>
4035        <div style="border-width: var(--border-size-3)">3</div>
4036        <div style="border-width: var(--border-size-4)">4</div>
4037        <div style="border-width: var(--border-size-5)">5</div>
4038      </article>
4039    </div>
4040
4041    <div class="just-for-gap">
4042      <h3>Border Radius</h3>
4043      <article class="border-demos">
4044        <div style="border-radius: var(--radius-1)">1</div>
4045        <div style="border-radius: var(--radius-2)">2</div>
4046        <div style="border-radius: var(--radius-3)">3</div>
4047        <div style="border-radius: var(--radius-4)">
40474</div>
4048        <div style="border-radius: var(--radius-5)">5</div>
4049        <div style="border-radius: var(--radius-round)">round</div>
4050      </article>
4051    </div>
4052
4053    <div class="just-for-gap">
4054      <h3>Drawn Borders</h3>
4055      <article class="border-demos">
4056        <div style="border-radius: var(--radius-drawn-1)">1</div>
4057        <div style="border-radius: var(--radius-drawn-2)">2</div>
4058        <div style="border-radius: var(--radius-drawn-3)">3</div>
4059        <div style="border-radius: var(--radius-drawn-4)">4</div>
4060        <div style="border-radius: var(--radius-drawn-5)">5</div>
4061        <div style="border-radius: var(--radius-drawn-6)">6</div>
4062      </article>
4063    </div>
4064
4065    <div class="just-for-gap">
4066      <h3>Blobs</h3>
4067      <article class="border-demos blobbys">
4068        <div style="border-radius: var(--radius-blob-1)">1</div>
4069        <div style="border-radius: var(--radius-blob-2)">2</div>
4070        <div style="border-radius: var(--radius-blob-3)">3</div>
4071        <div style="border-radius: var(--radius-blob-4)">4</div>
4072        <div style="border-radius: var(--radius-blob-5)">5</div>
4073      </article>
4074    </div>
4075  </section>
4076
4077  <section id="z-index">
4078    <header>
4079      <h2>Z Index</h2>
4080      <p>All the z-index values you could possibly need!</p>
4081    </header>
4082    <div class="block-wrap">
4083      <div>
4084        <h5>The Props</h5>
4085        <div class="var-examples">
4086          <pre class="language-css"><code>
4087              --layer-{1-5}
4088              --layer-important: 2147483647;
4089            </code></pre>
4090        </div>
4091      </div>
4092      <div>
4093        <h5>Usage Sample</h5>
4094        <pre class="language-css"><code>
4095            figure {
4096              position: relative;
4097
4098              & figcaption {
4099                position: absolute;
4100                z-index: var(--layer-1);
4101                inset-inline: 0;
4102                inset-block: auto 0;
4103              }
4104            }
4105
4106            .desperate-measures {
4107              position: fixed;
4108              z-index: var(--layer-important);
4109            }
4110          </code></pre>
4111      </div>
4112    </div>
4113  </section>
4114
4115  <section id="media-queries">
4116    <header class="just-for-gap">
4117      <h2>Media Queries</h2>
4118      <div class="block-wrap">
4119        <p>Currently one step ahead of <a href="https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media">the
4120            CSS spec</a>, Open Props offers named media queries with the <code>@custom-media</code> syntax. Available
4121          only with <a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media">this
4122            PostCSS plugin</a>, for now 😈</p>
4123
4124        <blockquote class="icon-quote indigo">
4125          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
4126            <path
4127              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
4128          </svg>
4129          <span>Media query widths also available as custom properties. Use like <code
4130              class="language-css">var(--size-sm)</code></span>
4131        </blockquote>
4132      </div>
4133      <div class="media-query-chart">
4134        <div>
4135          <svg height="24" width="24">
4136            <path
4137              d="m14.31 2 .41 2.48C13.87 4.17 12.96 4 12 4c-.95 0-1.87.17-2.71.47L9.7 2h4.61m.41 17.52L14.31 22H9.7l-.41-2.47c.84.3 1.76.47 2.71.47.96 0 1.87-.17 2.72-.48M16 0H8l-.95 5.73C5.19 7.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54 20 12s-1.19-4.81-3.04-6.27L16 0zm-4 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z" />
4138          </svg>
4139          <div class="device xxs">xxs</div>
4140          <code class="language-css">240px</code>
4141        </div>
4142        <div>
4143          <svg height="24" width="24">
4144            <path
4145              d="M17 1.01 7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z" />
4146          </svg>
4147          <div class="device xs">xs</div>
4148          <code class="language-css">360px</code>
4149        </div>
4150        <div>
4151          <svg height="24" width="24">
4152            <path
4153              d="M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v
415314z" />
4154          </svg>
4155          <div class="device sm">sm</div>
4156          <code class="language-css">480px</code>
4157        </div>
4158        <div>
4159          <svg height="24" width="24">
4160            <path
4161              d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z" />
4162          </svg>
4163          <div class="device md">md</div>
4164          <code class="language-css">768px</code>
4165        </div>
4166        <div>
4167          <svg height="24" width="24">
4168            <path
4169              d="M1.01 7 1 17c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2H3c-1.1 0-1.99.9-1.99 2zM19 7v10H5V7h14z" />
4170          </svg>
4171          <div class="device lg">lg</div>
4172          <code class="language-css">1024px</code>
4173        </div>
4174        <div>
4175          <svg height="24" width="24">
4176            <path
4177              d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z" />
4178          </svg>
4179          <div class="xl">xl</div>
4180          <code class="language-css">1440px</code>
4181        </div>
4182        <div>
4183          <svg height="24" width="24">
4184            <path
4185              d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z" />
4186          </svg>
4187          <div class="xxl">xxl</div>
4188          <code class="language-css">1920px</code>
4189        </div>
4190      </div>
4191    </header>
4192    <div class="block-wrap">
4193      <div>
4194        <h5>The Props</h5>
4195        <div class="var-examples">
4196          <pre class="language-css"><code>
4197              --portrait
4198              --landscape
4199
4200              --{xxs,xs,sm,md,lg,xl,xxl}-only
4201              --{xxs,xs,sm,md,lg,xl,xxl}-n-above
4202              --{xxs,xs,sm,md,lg,xl,xxl}-n-below
4203              --{xxs,xs,sm,md,lg}-phone
4204            </code></pre>
4205        </div>
4206      </div>
4207      <div>
4208        <h5>Viewport Vars Sample</h5>
4209        <div class="var-examples">
4210          <pre class="language-css"><code>
4211              @custom-media --portrait      (orientation: portrait);
4212              @custom-media --landscape     (orientation: landscape);
4213
4214              @custom-media --md-only       (480px &#60;= width &#60; 768px);
4215              @custom-media --md-n-above    (width &#62;= 768px);
4216              @custom-media --md-n-below    (width &#60; 768px);
4217              @custom-media --md-phone      (--md-only) and (--portrait);
4218
4219              @custom-media --xxl-only      (1440px &#60;= width &#60; 1920px);
4220              @custom-media --xxl-n-above   (width &#62;= 1920px);
4221              @custom-media --xxl-n-below   (width &#60; 1920px);
4222            </code></pre>
4223        </div>
4224      </div>
4225      <div>
4226        <h5>Capability Vars</h5>
4227        <div class="var-examples">
4228          <pre class="language-css"><code>
4229              @custom-media --touch    (hover: none) and (pointer: coarse);
4230              @custom-media --stylus   (hover: none) and (pointer: fine);
4231              @custom-media --pointer  (hover) and (pointer: coarse);
4232              @custom-media --mouse    (hover) and (pointer: fine);
4233
4234              @custom-media --HDcolor  (dynamic-range: high) or (color-gamut: p3);
4235            </code></pre>
4236        </div>
4237      </div>
4238      <div>
4239        <h5>Preference Vars</h5>
4240        <div class="var-examples">
4241          <pre class="language-css"><code>
4242              @custom-media --OSdark        (prefers-color-scheme: dark);
4243              @custom-media --OSlight       (prefers-color-scheme: light);
4244
4245              @custom-media --motionOK      (prefers-reduced-motion: no-preference);
4246              @custom-media --motionNotOK   (prefers-reduced-motion: reduce);
4247
4248              @custom-media --invertedColors  (inverted-colors: inverted);
4249              @custom-media --forcedColors  (forced-colors: active);
4250            </code></pre>
4251        </div>
4252      </div>
4253      <div>
4254        <h5>Preference Vars Extended</h5>
4255        <div class="var-examples">
4256          <pre class="language-css"><code>
4257              @custom-media --highContrast  (prefers-contrast: more);
4258              @custom-media --lowContrast   (prefers-contrast: less);
4259
4260              @custom-media --opacityOK     (prefers-reduced-transparency: no-preference);
4261              @custom-media --opacityNotOK  (prefers-reduced-transparency: reduce);
4262
4263              @custom-media --useDataOK     (prefers-reduced-data: no-preference);
4264              @custom-media --useDataNotOK  (prefers-reduced-data: reduce);
4265            </code></pre>
4266        </div>
4267      </div>
4268      <!-- <div>
4269          <h5>Support Vars</h5>
4270          <div class="var-examples">
4271            <pre class="language-css"><code>
4272              @custom-media --safariONLY  (-webkit-hyphens: none);
4273              @custom-media --firefoxONLY (-moz-appearance: none);
4274              @custom-media --chromeONLY  (-webkit-tap-highlight-color: black);
4275            </code></pre>
4276          </div>
4277        </div> -->
4278    </div>
4279    <div class="block-wrap">
4280      <div>
4281        <h5>Light / Dark Usage Samples</h5>
4282        <pre class="language-css"><code>
4283            html {
4284              background: white;
4285              color: var(--gray-8);
4286            }
4287
4288            @media (--OSdark) {
4289              html {
4290                background: var(--gray-9);
4291                color: var(--gray-1);
4292              }
4293            }
4294          </code></pre>
4295      </div>
4296      <div>
4297        <h5>Reducing Motion Usage Samples</h5>
4298        <pre class="language-css"><code>
4299            transform: translateX(100%);
4300
4301            @media (--motionOK) {
4302              transition: transform .5s var(--ease-3);
4303            }
4304          </code></pre>
4305      </div>
4306      <!-- <div>
4307          <h5>Targeting a browser</h5>
4308          <pre class="language-css"><code>
4309            color: hsl(200 50% 50%);
4310
4311            @media (--safariONLY) {
4312              color: color(display-p3 0 .5 1);
4313            }
4314          </code></pre>
4315        </div> -->
4316    </div>
4317  </section>
4318
4319  <section id="masks">
4320    <header>
4321      <h2>Masks</h2>
4322      <div class="block-wrap">
4323        <p>Rad edges and corner-cuts ready to go. A huge shout out to <a href="https://twitter.com/ChallengesCss">Temani
4324            Afif</a> and <a href="https://github.com/argyleink/open-props/discussions/71">their amazing mask work</a>.
4325          Be sure to check out their <a href="https://css-generators.c
4325om/">CSS Generators</a> too; customize the size
4326          and distribution of these masks. Try on <a href="https://codepen.io/argyleink/pen/mdxKrxR">Codepen</a>.</p>
4327        <blockquote class="icon-quote jagged">
4328          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
4329            <path
4330              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
4331          </svg>
4332          <span>Not part of the main bundle. Must be individually imported.</span>
4333        </blockquote>
4334      </div>
4335    </header>
4336    <div class="block-wrap">
4337      <div>
4338        <h5>NPM Imported Usage Sample</h5>
4339        <pre class="language-css"><code>
4340            @import "open-props/masks/edges";
4341            @import "open-props/masks/corner-cuts";
4342
4343            .box-with-corner-cuts {
4344              -webkit-mask: var(--mask-corner-cut-angles-2);
4345            }
4346
4347            .box-with-zig-zag-on-bottom {
4348              -webkit-mask: var(--mask-edge-zig-zag-bottom);
4349            }
4350          </code></pre>
4351      </div>
4352    </div>
4353
4354    <div class="just-for-gap">
4355      <header>
4356        <h3>Mask Edges</h3>
4357        <pre class="language-css"><code>
4358            /* NPM */
4359            @import "open-props/masks/edges";
4360            @import "open-props/src/props.masks.edges.css";
4361            @import "open-props/masks.edges.min.css";
4362
4363            /* CDN */
4364            @import "https://unpkg.com/open-props/masks.edges.min.css";
4365          </code></pre>
4366      </header>
4367
4368      <h5>Scoops</h5>
4369      <article class="border-demos mask-demos">
4370        <div style="-webkit-mask: var(--mask-edge-scoop-top)">Top</div>
4371        <div style="-webkit-mask: var(--mask-edge-scoop-right)">Right</div>
4372        <div style="-webkit-mask: var(--mask-edge-scoop-bottom)">Bottom</div>
4373        <div style="-webkit-mask: var(--mask-edge-scoop-left)">Left</div>
4374        <div style="-webkit-mask: var(--mask-edge-scoop-vertical)">Vertical</div>
4375        <div style="-webkit-mask: var(--mask-edge-scoop-horizontal)">Horizontal</div>
4376      </article>
4377      <pre class="language-css"><code>
4378          --mask-edge-scoop-{top,right,bottom,left,vertical,horizontal}
4379
4380          .mask-usage {
4381            -webkit-mask: var(--mask-edge-scoop-top);
4382          }
4383        </code></pre>
4384
4385      <br>
4386
4387      <h5>Scalloped</h5>
4388      <article class="border-demos mask-demos">
4389        <div style="-webkit-mask: var(--mask-edge-scalloped-top)">Top</div>
4390        <div style="-webkit-mask: var(--mask-edge-scalloped-right)">Right</div>
4391        <div style="-webkit-mask: var(--mask-edge-scalloped-bottom)">Bottom</div>
4392        <div style="-webkit-mask: var(--mask-edge-scalloped-left)">Left</div>
4393        <div style="-webkit-mask: var(--mask-edge-scalloped-vertical)">Vertical</div>
4394        <div style="-webkit-mask: var(--mask-edge-scalloped-horizontal)">Horizontal</div>
4395        <div style="-webkit-mask: var(--mask-edge-scalloped)">All</div>
4396      </article>
4397      <pre class="language-css"><code>
4398          --mask-edge-scalloped-{edges,top,right,bottom,left,vertical,horizontal}
4399
4400          .mask-usage {
4401            -webkit-mask: var(--mask-edge-scalloped-edges);
4402          }
4403        </code></pre>
4404
4405      <br>
4406
4407      <h5>Drips</h5>
4408      <article class="border-demos mask-demos">
4409        <div style="-webkit-mask: var(--mask-edge-drip-top)">Top</div>
4410        <div style="-webkit-mask: var(--mask-edge-drip-right)">Right</div>
4411        <div style="-webkit-mask: var(--mask-edge-drip-bottom)">Bottom</div>
4412        <div style="-webkit-mask: var(--mask-edge-drip-left)">Left</div>
4413        <div style="-webkit-mask: var(--mask-edge-drip-vertical)">Vertical</div>
4414        <div style="-webkit-mask: var(--mask-edge-drip-horizontal)">Horizontal</div>
4415      </article>
4416      <pre class="language-css"><code>
4417          --mask-edge-drip-{top,right,bottom,left,vertical,horizontal}
4418
4419          .mask-usage {
4420            -webkit-mask: var(--mask-edge-drip-bottom);
4421          }
4422        </code></pre>
4423
4424      <br>
4425
4426      <h5>Zig-Zag</h5>
4427      <article class="border-demos mask-demos">
4428        <div style="-webkit-mask: var(--mask-edge-zig-zag-top)">Top</div>
4429        <div style="-webkit-mask: var(--mask-edge-zig-zag-right)">Right</div>
4430        <div style="-webkit-mask: var(--mask-edge-zig-zag-bottom)">Bottom</div>
4431        <div style="-webkit-mask: var(--mask-edge-zig-zag-left)">Left</div>
4432        <div style="-webkit-mask: var(--mask-edge-zig-zag-vertical)">Vertical</div>
4433        <div style="-webkit-mask: var(--mask-edge-zig-zag-horizontal)">Horizontal</div>
4434      </article>
4435      <pre class="language-css"><code>
4436          --mask-edge-zig-zag-{top,right,bottom,left,vertical,horizontal}
4437
4438          .mask-usage {
4439            -webkit-mask: var(--mask-edge-zig-zag-bottom);
4440          }
4441        </code></pre>
4442    </div>
4443
4444    <div class="just-for-gap">
4445      <header>
4446        <h3>Mask Corner Cuts</h3>
4447        <pre class="language-css"><code>
4448            /* NPM */
4449            @import "open-props/masks/corner-cuts";
4450            @import "open-props/src/props.masks.corner-cuts.css";
4451            @import "open-props/masks.corner-cuts.min.css";
4452
4453            /* CDN */
4454            @import "https://unpkg.com/open-props/masks.corner-cuts.min.css";
4455          </code></pre>
4456      </header>
4457
4458      <h5>Circles</h5>
4459      <div class="block-wrap">
4460        <article class="border-demos mask-demos">
4461          <div style="-webkit-mask: var(--mask-corner-cut-circles-1)">1</div>
4462          <div style="-webkit-mask: var(--mask-corner-cut-circles-2)">2</div>
4463          <div style="-webkit-mask: var(--mask-corner-cut-circles-3)">3</div>
4464        </article>
4465        <pre class="language-css"><code>
4466            --mask-corner-cut-circles-{1,2,3}
4467
4468            .mask-usage {
4469              -webkit-mask: var(--mask-corner-cut-circles-2);
4470            }
4471          </code></pre>
4472      </div>
4473
4474      <br>
4475
4476      <h5>Squares</h5>
4477      <div class="block-wrap">
4478        <article class="border-demos mask-demos">
4479          <div style="-webkit-mask: var(--mask-corner-cut-squares-1)">1</div>
4480          <div style="-webkit-mask: var(--mask-corner-cut-squares-2)">2</div>
4481          <div style="-webkit-mask: var(--mask-corner-cut-squares-3)">3</div>
4482        </article>
4483        <pre class="language-css"><code>
4484            --mask-corner-cut-squares-{1,2,3}
4485
4486            .mask-usage {
4487              -webkit-mask: var(--mask-corner-cut-squares-2);
4488            }
4489          </code></pre>
4490      </div>
4491
4492      <h5>Angles</h5>
4493      <div class="block-wrap">
4494        <article class="border-demos mask-demos">
4495          <div style="-webkit-mask: var(--mask-corner-cut-angles-1)">1</div>
4496          <div style="-webkit-mask: var(--mask-corner-cut-angles-2)">2</div>
4497          <div style="-webkit-mask: var(--mask-corner-cut-angles-3)">3</div>
4498        </article>
4499        <pre class="language-css"><code>
4500            --mask-corner-cut-angles-{1,2,3}
4501
4502            .mask-usage {
4503              -webkit-mask: var(--mask-corner-cut-angles-2);
4504            }
4505          </code></pre>
4506      </div>
4507    </div>
4508  </section>
4509  <section id="durations">
4510    <header>
4511      <h2>Durations</h2>
4512      <p>A comprehensive collection of time-based CSS custom properties for animations and transitions. From quick UI feedback durations to whimsical time units like <code class="language-css">--kermit</code> (14.4 minutes) and astronomical durations like <code class="language-css">--mars-year</code>.</p>
4513      <blockquote class="icon-quote indigo">
4514        <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
4515          <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
4516        </svg>
4517        <span>Not part of the main bundle. Must be individually imported.</span>
4518      </blockquote>
4519    </header>
4520
4521    <div class="block-wrap">
4522      <div>
4523        <h5>The Props</h5>
4524        <div class="var-examples">
4525          <pre class="language-css"><code>
4526              /* UX Motion Durations */
4527              --duration-instant     /* 0ms */
4528              --duration-quick-{1,2}
4529              --duration-moderate-{1,2}
4530              --duration-gentle-{1,2}
4531
4532              /* Common Time Units */
4533              --minute, --hour, --day
4534              --week, --fortnight, --month
4535              --quarter, --year, --decade
4536
4537              /* Quick Moments */
4538              --blink, --flinch, --sneeze
4539              --jiffy, --moment
4540
4541              /* Whimsical & Astronomical */
4542              --kermit, --friedman, --scaramucci
4543              --sidereal-day, --lunar-month, --mars-year
4544            </code></pre>
4545        </div>
4546      </div>
4547      <div>
4548        <h5>Usage Sample</h5>
4549        <pre class="language-css"><code>
4550            /* Quick UI feedback */
4551            .checkbox {
4552              transition: all var(--duration-quick-1);
4553            }
4554
4555            /* Modal appearance */
4556            .modal {
4557              animation: fade-in var(--duration-moderate-2) var(--ease-3);
4558            }
4559
4560            /* Gentle card expansion */
4561            .card.expanded {
4562              transition: all var(--duration-gentle-1);
4563            }
4564          </code></pre>
4565      </div>
4566    </div>
4567
4568    <div class="just-for-gap">
4569      <h5>Interactive Demo</h5>
4570      <p>Select a duration and watch the ball animate across the track. UX motion durations are designed for common interface patterns.</p>
4571      
4572      <div class="duration-demo-container">
4573        <div class="duration-controls">
4574          <select class="duration-select" aria-label="Select a duration">
4575            <optgroup label="UX Motion">
4576              <option value="duration-instant">--duration-instant (0ms)</option>
4577              <option value="duration-quick-1">--duration-quick-1 (80ms)</option>
4578              <option value="duration-quick-2" selected>--duration-quick-2 (120ms)</option>
4579              <option value="duration-moderate-1">--duration-moderate-1 (180ms)</option>
4580              <option value="duration-moderate-2">--duration-moderate-2 (260ms)</option>
4581              <option value="duration-gentle-1">--duration-gentle-1 (320ms)</option>
4582              <option value="duration-gentle-2">--duration-gentle-2 (420ms)</option>
4583            </optgroup>
4584            <optgroup label="Quick Moments">
4585              <option value="blink">--blink (0.1s)</option>
4586              <option value="flinch">--flinch (0.3s)</option>
4587              <option value="sneeze">--sneeze (0.5s)</option>
4588              <option value="jiffy">--jiffy (0.01s)</option>
4589            </optgroup>
4590            <optgroup label="Common Units">
4591              <option value="pause">--pause (10s)</option>
4592              <option value="brief-moment">--brief-moment (15s)</option>
4593            </optgroup>
4594          </select>
4595          <button class="play-button" aria-label="Play animation">
4596            <svg viewBox="0 0 20 20">
4597              <use href="#play-icon" />
4598            </svg>
4599          </button>
4600          <span class="duration-value">120ms</span>
4601        </div>
4602        <div class="duration-demo">
4603          <div class="duration-ball"></div>
4604        </div>
4605      </div>
4606    </div>
4607
4608    <div class="block-wrap">
4609      <div>
4610        <h5>NPM Import</h5>
4611        <pre class="language-css"><code>
4612            @import "open-props/durations";
4613          </code></pre>
4614      </div>
4615      <div>
4616        <h5>CDN Import</h5>
4617        <pre class="language-css"><code>
4618            @import "https://unpkg.com/open-props/durations.min.css";
4619          </code></pre>
4620      </div>
4621    </div>
4622
4623    <div class="just-for-gap">
4624      <header>
4625        <h3>UX Motion Durations</h3>
4626        <p>Based on <a href="https://design.brainly.com/8adfd5f36/p/091f75-ux-motion">Brainly's UX Motion guidelines</a>. Use these for consistent, purposeful animations.</p>
4627      </header>
4628      <pre class="language-css"><code>
4629          --duration-instant:    0ms;    /* text change */
4630          --duration-quick-1:    80ms;   /* checkbox, radio, hover */
4631          --duration-quick-2:    120ms;  /* toggle, tab, chip, color, fade */
4632          --duration-moderate-1: 180ms;  /* dropdown, tooltip */
4633          --duration-moderate-2: 260ms;  /* modal, toast, dialog, notification */
4634          --duration-gentle-1:   320ms;  /* bottom sheet, card expand */
4635          --duration-gentle-2:   420ms;  /* advanced animations */
4636        </code></pre>
4637    </div>
4638
4639    <div class="just-for-gap">
4640      <header>
4641        <h3>Quick Moments</h3>
4642        <p>Human-scale time units perfect for micro-interactions.</p>
4643      </header>
4644      <pre class="language-css"><code>
4645          --blink:           .1s;
4646          --flinch:          .3s;
4647          --sneeze:          .5s;
4648          --jiffy:           0.01s;
4649          --moment:          90s;   /* medieval time unit */
4650          --brief-moment:    15s;
4651          --pause:           10s;
4652          --unhealthy-pause: 30s;
4653        </code></pre>
4654    </div>
4655
4656    <div class="just-for-gap">
4657      <header>
4658        <h3>Common Time Units</h3>
4659        <p>Standard time durations built using CSS calc for precision.</p>
4660      </header>
4661      <pre class="language-css"><code>
4662          --minute:     60s;
4663          --hour:       calc( 60 * var(--minute));
4664          --day:        calc( 24 * var(--hour));
4665          --week:       calc(  7 * var(--day));
4666          --fortnight:  calc( 14 * var(--day));
4667          --month:      calc( 30 * var(--day));
4668          --quarter:    calc( 13 * var(--week));
4669          --year:       calc(365 * var(--day));
4670          --decade:     calc( 10 * var(--year));
4671          --generation: calc(  3 * var(--decade));
4672          --lifetime:   calc(  8 * var(--decade));
4673
4674          --work-day:   calc( 8 * var(--hour));
4675          --work-week:  calc( 5 * var(--day));
4676        </code></pre>
4677    </div>
4678
4679    <div class="just-for-gap">
4680      <header>
4681        <h3>Whimsical & Unusual Units</h3>
4682        <p>Fun and unusual time measurements from <a href="https://en.wikipedia.org/wiki/List_of_unusual_units_of_measurement">Wikipedia's unusual units</a> and <a href="https://www.mentalfloss.com/article/60080/10-little-known-units-time">Mental Floss</a>.</p>
4683      </header>
4684      <pre class="language-css"><code>
4685          --kermit:          calc(14.4 * var(--minute));  /* time to boil an egg */
4686          --microfortnight:  1.2096s;
4687          --friedman:        calc(6 * var(--month));      /* "the next 6 months" */
4688          --scaramucci:      calc(11 * var(--day));       /* political tenure */
4689          --nanocentury:     3.156s;
4690          --microcentury:    calc((52 * var(--minute)) + 35.7s);
4691
4692          /* Medieval & Historical */
4693          --atom:            .15957s;
4694          --ghurry:          calc(24 * var(--minute));
4695          --lustre:          calc(5 * var(--year));
4696          --mileway:         calc(20 * var(--minute));
4697          --punct:           calc(15 * var(--minute));
4698        </code></pre>
4699    </div>
4700
4701    <div class="just-for-gap">
4702      <header>
4703        <h3>Astronomical Durations</h3>
4704        <p>For when you need cosmic-scale timing (or just want to have fun).</p>
4705      </header>
4706      <pre class="language-css"><code>
4707          --sidereal-day:    calc((23 * var(--hour)) + (56 * var(--minute)) + 4.091s);
4708          --iss-orbit:       calc(91.5 * var(--minute));
4709          --lunar-month:     calc(29.5 * var(--day));
4710          --venus-year:      calc(225 * var(--day));
4711          --sol:             88775s;  /* Mars day */
4712          --mars-year:       calc(668.5907 * var(--sol));
4713        </code></pre>
4714    </div>
4715  </section>
4716
4717  <ul id="scroll-nav" class="module-list place-full">
4718    <li><a href="#colors">Colors</a></li>
4719    <li><a href="#gradients">Gradients</a></li>
4720    <li><a href="#shadows">Shadows</a></li>
4721    <li><a href="#aspect-ratio">Aspect Ratios</a></li>
4722    <li><a href="#typography">Typography</a></li>
4723    <li><a href="#easing">Easing</a></li>
4724    <li><a href="#animations">Animations</a></li>
4725    <li><a href="#sizes">Sizes</a></li>
4726    <li><a href="#borders">Borders</a></li>
4727    <li><a href="#z-index">Z-Index</a></li>
4728    <li><a href="#media-queries">Media Queries</a></li>
4729    <li><a href="#masks">Masks</a></li>
4730    <li><a href="#durations">Durations</a></li>
4731  </ul>
4732
4733  <footer class="place-full">
4734    <dl>
4735      <div>
4736        <dt>Getting Started</dt>
4737        <dd><a href="#about">Features</a></dd>
4738        <dd><a href="#overview">Overview</a></dd>
4739        <dd><a href="#cdn">CDN</a></dd>
4740      </div>
4741
4742      <div>
4743        <dt>Tooling</dt>
4744        <dd><a href="https://postcss.org/">PostCSS</a></dd>
4745        <dd class="prevent-justify-item-wrap"><a href="https://github.com/GoogleChromeLabs/postcss-jit-props">JIT
4746            Props</a></dd>
4747        <dd><a href="https://www.npmjs.com/package/open-props">NPM</a></dd>
4748      </div>
4749
4750      <div>
4751        <dt>Showcase</dt>
4752        <dd><a href="https://props-color-finder.netlify.app/" target="_blank">Color helper</a></dd>
4753      </div>
4754
4755      <div>
4756        <dt>Connect</dt>
4757        <dd><a href="https://github.com/argyleink/open-props/">GitHub</a></dd>
4758        <dd><a href="https://discord.gg/AqA4fU886r">Discord</a></dd>
4759        <dd><a href="https://twitter.com/argyleink">Twitter</a></dd>
4760      </div>
4761    </dl>
4762
4763    <a href="https://github.com/argyleink/open-props" title="Source on Github">
4764      <svg class="github-icon" width="24" height="24" viewBox="0 0 16 16">
4765        <path fill-rule="evenodd"
4766          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
4767        </path>
4768      </svg>
4769    </a>
4770  </footer>
4771
4772</body>
4773
4774</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.