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 <!-- the props --> 790 <link rel="stylesheet" href="https://unpkg.com/open-props"/> 791 792 <!-- optional imports that use the props --> 793 <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/> 794 <link rel="stylesheet" href="https://unpkg.com/open-props/buttons.min.css"/> 795 796 <!-- individual imports --> 797 <link rel="stylesheet" href="https://unpkg.com/open-props/indigo.min.css"/> 798 <link rel="stylesheet" href="https://unpkg.com/open-props/indigo-hsl.min.css"/> 799 <link rel="stylesheet" href="https://unpkg.com/open-props/easings.min.css"/> 800 <link rel="stylesheet" href="https://unpkg.com/open-props/animations.min.css"/> 801 <link rel="stylesheet" href="https://unpkg.com/open-props/sizes.min.css"/> 802 <link rel="stylesheet" href="https://unpkg.com/open-props/gradients.min.css"/> 803 <!-- see PropPacks for the full list --> 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 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 — 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 — 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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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>&</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 <= width < 768px); 4215 @custom-media --md-n-above (width >= 768px); 4216 @custom-media --md-n-below (width < 768px); 4217 @custom-media --md-phone (--md-only) and (--portrait); 4218 4219 @custom-media --xxl-only (1440px <= width < 1920px); 4220 @custom-media --xxl-n-above (width >= 1920px); 4221 @custom-media --xxl-n-below (width < 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.