use-theme-editor
Version:
Zero configuration CSS variables based theme editor
3,081 lines • 243 kB
HTML
<!DOCTYPE html>
<!-- saved from url=(0032)https://open-props.style/#colors -->
<html lang="en" dir="ltr" data-theme="light"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Open Props: sub-atomic styles</title>
<meta name="og:title" content="Open Props: sub-atomic styles">
<meta name="twitter:title" content="Open Props: sub-atomic styles">
<meta name="description" content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
<meta name="og:description" content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
<meta name="twitter:description" content="Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="Canvas">
<meta name="color-scheme" content="dark light">
<link rel="icon" type="image/svg+xml" href="https://open-props.style/favicon.svg">
<link rel="icon" href="https://open-props.style/favicon.ico" sizes="any">
<meta name="twitter:image:src" content="https://open-props.style/open-props-social.jpg">
<meta name="twitter:image:alt" content="@argyleink/open-props: CSS custom properties to help accelerate adaptive and consistent design.">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="https://open-props.style/open-props-social.jpg">
<meta property="og:image:alt" content="argyleink/open-props: CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.">
<link rel="stylesheet" href="./Open Props_ sub-atomic styles_files/index.5a67c67a.css">
<meta id="ConnectiveDocSignExtentionInstalled" name="ConnectiveDocSignExtentionInstalled" data-extension-version="1.0.6"></head>
<body>
<svg style="display:none">
<symbol id="play-icon">
<path fill-rule="evenodd" 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" clip-rule="evenodd"></path>
</symbol>
<symbol id="pause-icon">
<path fill-rule="evenodd" 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" clip-rule="evenodd"></path>
</symbol>
<symbol id="checkmark-icon">
<polyline points="9 11 12 14 22 4"></polyline>
<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>
</symbol>
<symbol id="bent-arrow">
<path d="m15 10 5 5-5 5"></path>
<path d="M4 4v7a4 4 0 0 0 4 4h12"></path>
</symbol>
</svg>
<nav>
<a href="/">
<svg class="op-icon" viewBox="0 0 200 200">
<line class="op-icon-p" x1="66" x2="66" y1="100" y2="175" stroke-width="25"></line>
<circle class="op-icon-p" cx="100" cy="100" r="35" fill="transparent" stroke-width="25"></circle>
<circle class="op-icon-o" cx="100" cy="100" r="85" fill="transparent" stroke-width="25"></circle>
</svg>
<span class="op-logo">
<span>Open</span>
<span>Props</span>
</span>
</a>
<a href="#getting-started">Get Started</a>
<a class="md-hidden" href="https://stackblitz.com/edit/jit-open-props?file=index.css">
Try in browser
<small class="green-badge">RAD</small>
</a>
<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-live="light">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
<!-- https://feathericons.com/?query=sun -->
<mask id="moon">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<circle cx="40" cy="8" r="11" fill="black"></circle>
</mask>
<circle id="sun" cx="12" cy="12" r="11" mask="url(#moon)"></circle>
<g id="sun-beams">
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</g>
</svg>
</button>
<a href="https://github.com/argyleink/open-props" title="Source on Github">
<svg class="github-icon" width="24" height="24" viewBox="0 0 16 16">
<path fill-rule="evenodd" 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"></path>
</svg>
</a>
</nav>
<section class="hero block-wrap">
<header>
<div class="subhead">
<h1><div>Supercharged</div></h1>
<h1><span>CSS</span> <span>variables.</span></h1>
</div>
<ul class="checkmark-list">
<li>
<svg viewBox="0 0 24 24">
<use href="#checkmark-icon"></use>
</svg>
Expertly crafted web design tokens
</li>
<li>
<svg viewBox="0 0 24 24">
<use href="#checkmark-icon"></use>
</svg>
Create consistent components
</li>
<li>
<svg viewBox="0 0 24 24">
<use href="#checkmark-icon"></use>
</svg>
Useful in any framework
</li>
</ul>
<small>
v1.4.14
<span class="license">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
<path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
</svg>
MIT
</span>
</small>
</header>
<style>
.gradient-example {
min-width: 300px;
min-height: 300px;
background: var(--gradient-example--background, #fff)
}
</style>
<div class="gradient-example"></div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props"</span><span class="token punctuation">;</span></span></code></pre>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radius-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-fluid-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow-2<span class="token punctuation">)</span><span class="token selector">;
&:hover</span> <span class="token punctuation">{</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>--motionOK<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-fade-in<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<!-- <pre class="language-css"><code>
@import "open-props"; /* All props from NPM */
@import "open-props/media.css"; /* Named media queries */
.button {
font-size: var(--font-size-fluid-1);
padding-inline: var(--size-5);
padding-block: var(--size-3);
color: var(--blue-0);
background-color: var(--blue-7);
border: none;
border-radius: var(--radius-round);
box-shadow: var(--shadow-2);
&:hover {
transform: scale(1.1);
}
@media (--motionOK) {
transition: transform 0.5s var(--ease-squish-3);
}
}
</code></pre> -->
</div>
</section>
<section id="gallery">
<header>
<h2>Built with Open Props</h2>
</header>
<div class="demo-gallery block-wrap">
<a href="https://codepen.io/argyleink/pen/porzeyz">
<figure>
<picture>
<img width="1125" height="586" src="./Open Props_ sub-atomic styles_files/hero-layout.png" alt="" loading="lazy">
</picture>
<figcaption>
<img src="./Open Props_ sub-atomic styles_files/hero-layout.png" aria-hidden="true" loading="lazy">
<div class="adaptive-glass">
<h3>Hero Layout</h3>
<p><b>18 props</b> + <b>normalize.css</b></p>
</div>
</figcaption>
</figure>
</a>
<a href="https://codepen.io/argyleink/pen/powMQgx">
<figure>
<picture>
<img width="1446" height="658" src="./Open Props_ sub-atomic styles_files/adaptive-buttons.png" alt="" loading="lazy">
</picture>
<figcaption>
<img src="./Open Props_ sub-atomic styles_files/adaptive-buttons.png" aria-hidden="true" loading="lazy">
<div class="adaptive-glass">
<h3>Adaptive Buttons</h3>
<p><b>10 props</b></p>
</div>
</figcaption>
</figure>
</a>
<a href="https://codepen.io/argyleink/pen/jOLaBgG">
<figure>
<picture>
<img width="1600" height="960" src="./Open Props_ sub-atomic styles_files/cards.png" alt="" loading="lazy">
</picture>
<figcaption>
<img src="./Open Props_ sub-atomic styles_files/cards.png" aria-hidden="true" loading="lazy">
<div class="adaptive-glass">
<h3>Adaptive Cards</h3>
<p><b>8 props</b> + <b>normalize.css</b></p>
</div>
</figcaption>
</figure>
</a>
<a href="https://codepen.io/argyleink/pen/QWMreXR">
<figure>
<picture>
<img width="760" height="372" src="./Open Props_ sub-atomic styles_files/pagination.png" alt="" loading="lazy">
</picture>
<figcaption>
<img src="./Open Props_ sub-atomic styles_files/pagination.png" aria-hidden="true" loading="lazy">
<div class="adaptive-glass">
<h3>Pagination Example</h3>
<p>10 props</p>
</div>
</figcaption>
</figure>
</a>
<a href="https://codepen.io/argyleink/pen/XWaYyWe">
<figure>
<picture>
<img width="1096" height="639" src="./Open Props_ sub-atomic styles_files/color-schemes.png" alt="" loading="lazy">
</picture>
<figcaption>
<img src="./Open Props_ sub-atomic styles_files/color-schemes.png" aria-hidden="true" loading="lazy">
<div class="adaptive-glass">
<h3>4 Color Schemes</h3>
<p><b>16 props</b></p>
</div>
</figcaption>
</figure>
</a>
<a href="https://codepen.io/argyleink/pen/ZEXQovz">
<figure>
<picture>
<img width="672" height="448" src="./Open Props_ sub-atomic styles_files/pop-animation.png" alt="" loading="lazy">
</picture>
<figcaption>
<img src="./Open Props_ sub-atomic styles_files/pop-animation.png" aria-hidden="true" loading="lazy">
<div class="adaptive-glass">
<h3>Make it pop</h3>
<p><b>Example loads only the animations and easings for a springy scale-in animation</b></p>
</div>
</figcaption>
</figure>
</a>
<a href="https://codepen.io/argyleink/pen/KKvRORE">
<figure>
<picture>
<img width="967" height="585" src="./Open Props_ sub-atomic styles_files/normalize-codepen.png" alt="" loading="lazy">
</picture>
<figcaption>
<img src="./Open Props_ sub-atomic styles_files/normalize-codepen.png" aria-hidden="true" loading="lazy">
<div class="adaptive-glass">
<h3>Normalize Preview</h3>
<p><b>Light + dark HTML5 minimal styles</b></p>
</div>
</figcaption>
</figure>
</a>
</div>
</section>
<section id="about" class="just-stretch">
<header class="just-stretch">
<h2>Why Use Open Props?</h2>
<p>It's <b>non-prescriptive</b>.</p>
</header>
<dl class="marketing-features responsive-dl">
<div>
<dt>
<svg viewBox="0 0 24 24">
<path 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"></path>
<path d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
</svg>
Design Consistently
</dt>
<dd>Incidentally harmonious.</dd>
</div>
<div>
<dt>
<svg viewBox="0 0 24 24">
<path 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"></path>
</svg>
Predictable
</dt>
<dd>Thanks to consistent naming conventions.</dd>
</div>
<div>
<dt>
<svg viewBox="0 0 24 24">
<path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
<path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
</svg>
Incrementally Adoptable
</dt>
<dd>Grab all the props, props as JS, or only what you need.</dd>
</div>
<div>
<dt>
<svg viewBox="0 0 24 24">
<path 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"></path>
</svg>
Customizable
</dt>
<dd>Map the props from JS or customize builds from the command line.</dd>
</div>
</dl>
</section>
<section id="overview">
<header>
<h2>Overview</h2>
<p>File sizes and links to source:</p>
</header>
<div class="just-for-gap">
<header>
<h4>File Sizes</h4>
<blockquote>
<p>The following sizes are for the minified files and after <a href="https://github.com/google/brotli">Brotli</a> compression.</p>
</blockquote>
</header>
<dl class="block-wrap bundle-sizes">
<div>
<dt>Library bundles</dt>
<dd class="size-chart" style="row-gap: var(--size-3)">
<div class="size"><strong>3.4</strong>kB</div>
<div class="file">
<a href="https://unpkg.com/open-props">open-props.min.css</a>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
351 props
</div>
</div>
</dd>
<dt>Extras</dt>
<dd class="size-chart" style="row-gap: var(--size-3)">
<div class="size"><strong>1.3</strong>kB</div>
<div class="file">
<a href="https://unpkg.com/open-props/normalize.min.css">normalize.min.css</a> <a href="https://codepen.io/argyleink/pen/KKvRORE"><small class="green-badge">demo</small></a>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/extra/brand.css">brand.css</a>
</div>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.css">theme.css</a>
</div>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">theme.light.css</a>
</div>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">theme.dark.css</a>
</div>
</div>
<div class="size"><strong>0.81</strong>kB</div>
<div class="file">
<a href="https://unpkg.com/open-props/buttons.min.css">buttons.min.css</a> <a href="https://codepen.io/argyleink/pen/gOXbvjj"><small class="green-badge">demo</small></a>
</div>
</dd>
</div>
<div>
<dt>Individual PropPacks ™</dt>
<dd class="size-chart">
<div class="size"><strong>0.49</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.animations.css">animations.css</a> <a href="https://codepen.io/argyleink/pen/ZEXQovz"><small class="green-badge">demo</small></a>
</div>
<div class="size"><strong>0.1</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.aspects.css">aspects.css</a>
</div>
<div class="size"><strong>0.25</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.borders.css">borders.css</a>
</div>
<div class="size"><strong>0.7</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.colors.css">colors.css</a>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/props.pink.css">pink.css</a>
</div>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/props.indigo.css">indigo.css</a>
</div>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<span>etc...</span>
</div>
</div>
<div class="size"><strong>0.7</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.colors-hsl.css">colors-hsl.css</a>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/props.pink-hsl.css">pink-hsl.css</a>
</div>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<a href="https://github.com/argyleink/open-props/blob/main/src/props.indigo-hsl.css">indigo-hsl.css</a>
</div>
<div class="child-ref">
<svg viewBox="0 0 24 24">
<use href="#bent-arrow"></use>
</svg>
<span>etc...</span>
</div>
</div>
<div class="size"><strong>0.2</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.easing.css">easings.css</a>
</div>
<div class="size"><strong>0.4</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.fonts.css">fonts.css</a>
</div>
<div class="size"><strong>1.0</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.gradients.css">gradients.css</a>
</div>
<div class="size"><strong>0.62</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.masks.edges.css">masks.edges.css</a>
</div>
<div class="size"><strong>0.23</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.masks.corner-cuts.css">masks.corner-cuts.css</a>
</div>
<div class="size"><strong>0.38</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.media.css">media.css</a>
</div>
<div class="size"><strong>0.26</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.shadows.css">shadows.css</a>
</div>
<div class="size"><strong>0.2</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.sizes.css">sizes.css</a>
</div>
<div class="size"><strong>0.1</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.supports.css">supports.css</a>
</div>
<div class="size"><strong>0.05</strong>kB</div>
<div class="file">
<a href="https://github.com/argyleink/open-props/blob/main/src/props.zindex.css">zindex.css</a>
</div>
</dd>
</div>
<div>
<dt>Coming Soon?!</dt>
<dd class="size-chart">
<div class="size"><strong>??</strong></div>
<div class="file">icons.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">svg.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">patterns.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">at-property.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">shapes.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">layouts.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">clips.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">variable-fonts.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">lists.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">counters.css <small class="yellow-badge">WIP</small></div>
<div class="size"><strong>??</strong></div>
<div class="file">utilities.css <small class="yellow-badge">WIP</small></div>
</dd>
</div>
</dl>
</div>
</section>
<section class="dogfood place-full block-wrap">
<header>
<h2>
This site
<br>is built
<br>with Open Props.
</h2>
</header>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props"</span><span class="token punctuation">;</span></span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.just-for-gap</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">blockquote</span> <span class="token punctuation">{</span>
<span class="token property">--_accent-1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--lime-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--_accent-2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--lime-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--_bg</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--_ink</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--_ink<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--_accent-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--_bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">justify-self</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.gradient-swatch</span> <span class="token punctuation">{</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radius-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">aspect-ratio</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ratio-landscape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">pre > code</span> <span class="token punctuation">{</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-mono<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.yellow-badge</span> <span class="token punctuation">{</span>
<span class="token property">padding-inline</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--border-size-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radius-round<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@nest</span> [data-theme=<span class="token string">"light"</span>] &</span> <span class="token punctuation">{</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.block-wrap</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token property">flex-basis</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-content-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-5<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.demo-gallery figure</span> <span class="token punctuation">{</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radius-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.op-icon-p</span> <span class="token punctuation">{</span>
<span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--indigo-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@nest</span> <span class="token property">a</span><span class="token punctuation">:</span>hover &</span> <span class="token punctuation">{</span> <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--indigo-1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@nest</span> [data-theme=<span class="token string">"light"</span>] &</span> <span class="token punctuation">{</span>
<span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--indigo-9<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@nest</span> <span class="token property">a</span><span class="token punctuation">:</span>hover &</span> <span class="token punctuation">{</span> <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--indigo-8<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.checkmark-list</span> <span class="token punctuation">{</span>
<span class="token property">align-self</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-weight-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">padding-inline-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</section>
<section id="getting-started">
<header>
<h2>Getting Started</h2>
<div class="block-wrap">
<p>Pick from CSS, <a href="https://postcss.org/">PostCSS</a>, JSON, or props as Javascript.</p>
<blockquote class="icon-quote indigo">
<svg viewBox="0 0 32 32">
<path fill="#7289da" 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"></path>
</svg>
<p>
<b>Need help?</b> <br>
Ask a question on <a href="https://discord.gg/AqA4fU886r">Discord</a>
</p>
</blockquote>
</div>
</header>
<div class="learn-with-jason">
<h4>Learn with Jason & Adam</h4>
<iframe width="560" height="315" src="./Open Props_ sub-atomic styles_files/9VXR_qRgROE.html" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<article class="installation">
<div class="block-wrap" id="cdn">
<div class="contain-pre">
<header>
<h4>CDN</h4>
<p>No installation required.</p>
<p><a href="https://unpkg.com/browse/open-props@latest/">View all ↗</a></p>
</header>
<details class="started-details">
<summary>CSS</summary>
<div>
<h6>index.css</h6>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* optional imports that use the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/normalize.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/buttons.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/indigo.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/indigo-hsl.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/easings.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/animations.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/sizes.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/gradients.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
<div>
<h6>index.html</h6>
<pre class=" language-html"><code class=" language-html"><span class="token comment"><!-- the props --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token comment"><!-- optional imports that use the props --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/normalize.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/buttons.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token comment"><!-- individual imports --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/indigo.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/indigo-hsl.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/easings.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/animations.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/sizes.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/open-props/gradients.min.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token comment"><!-- see PropPacks for the full list --></span></code></pre>
</div>
<div>
<h6>index.js</h6>
<pre class=" language-js"><code class=" language-js"><span class="token comment">// the props</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props'</span><span class="token punctuation">;</span>
<span class="token comment">// optional imports that use the props</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/normalize.min.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/buttons.min.css'</span><span class="token punctuation">;</span>
<span class="token comment">// individual imports</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/indigo.min.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/indigo-hsl.min.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/easings.min.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/animations.min.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/sizes.min.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'https://unpkg.com/open-props/gradients.min.css'</span><span class="token punctuation">;</span>
<span class="token comment">// see PropPacks for the full list</span></code></pre>
</div>
</details>
<details class="started-details">
<summary>PostCSS</summary>
<div>
<h6>CSS import examples</h6>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/index.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* optional imports that use the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/extra/normalize.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/extra/buttons.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/indigo.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/indigo-hsl.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/easings.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/animations.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/sizes.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/src/gradients.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
</details>
<details class="started-details" id="design-tokens">
<summary>Design Tokens</summary>
<div>
<br>
<p>Not all props can be represented as a design token.</p>
<div class="block-wrap">
<div class="just-for-sm-gap">
<h6>JSON</h6>
<p>Follows the <a href="https://design-tokens.github.io/community-group/format/">(draft) Design Tokens Spec</a></p>
<pre class=" language-js"><code class=" language-js">https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>unpkg<span class="token punctuation">.</span>com<span class="token operator">/</span>open<span class="token operator">-</span>props<span class="token operator">/</span>open<span class="token operator">-</span>props<span class="token punctuation">.</span>tokens<span class="token punctuation">.</span>json</code></pre>
</div>
<div class="just-for-sm-gap">
<h6>Figma Tokens</h6>
<p>Community created <a href="https://github.com/hchiam/figma-tokens-sync-example">setup instructions</a>.</p>
<pre class=" language-js"><code class=" language-js">https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>unpkg<span class="token punctuation">.</span>com<span class="token operator">/</span>open<span class="token operator">-</span>props<span class="token operator">/</span>open<span class="token operator">-</span>props<span class="token punctuation">.</span>figma<span class="token operator">-</span>tokens<span class="token punctuation">.</span>json
https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>unpkg<span class="token punctuation">.</span>com<span class="token operator">/</span>open<span class="token operator">-</span>props<span class="token operator">/</span>open<span class="token operator">-</span>props<span class="token punctuation">.</span>figma<span class="token operator">-</span>tokens<span class="token punctuation">.</span>sync<span class="token punctuation">.</span>json</code></pre>
</div>
</div>
</div>
</details>
<details class="started-details">
<summary>Web Components</summary>
<div>
<h6>NPM import examples</h6>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/shadow/style"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/open-props.shadow.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/shadow/indigo"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/shadow/indigo-hsl"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/shadow/easings"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/shadow/animations"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/shadow/sizes"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/shadow/gradients"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
<div>
<h6>CDN import examples</h6>
<p>These props are scoped to <b>:host</b> for use in shadow DOM.</p>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/open-props.shadow.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/indigo.shadow.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/indigo.shadow-hsl.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/easings.shadow.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/animations.shadow.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/sizes.shadow.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/gradients.shadow.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
</details>
</div>
<div class="contain-pre" id="npm">
<h4>NPM</h4>
<pre class=" language-bash"><code class=" language-bash">npm install open-props</code></pre>
<details class="started-details">
<summary>CSS</summary>
<div>
<h6>CSS Imports</h6>
<div class="block-wrap">
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/style"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* optional imports that use the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/normalize"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/buttons"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/indigo"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/easings"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/animations"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/sizes"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/gradients"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
</div>
<div>
<h6>Full Path Imports</h6>
<div class="block-wrap">
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/open-props.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* optional imports that use the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/normalize.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/buttons.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/indigo.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/easings.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/animations.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/sizes.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/gradients.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
</div>
</details>
<details class="started-details">
<summary>PostCSS</summary>
<div>
<h6>CSS Imports</h6>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/style"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* optional imports that use the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/normalize"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/buttons"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/indigo"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/easings"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/animations"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/sizes"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/gradients"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
<div>
<h6>Full Path CSS Imports</h6>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/index.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* optional imports that use the props */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/extra/normalize.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/extra/buttons.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* individual imports */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/indigo.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/easings.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/animations.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/sizes.min.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/postcss/gradients.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* see PropPacks for the full list */</span></code></pre>
</div>
</details>
<details class="started-details">
<summary>JavaScript</summary>
<div style="margin-block-start: var(--size-5)">
<a href="https://github.com/argyleink/open-props/blob/main/package.json#L30-L41">All JavaScript imports</a>
</div>
<div class="block-wrap">
<div>
<h6>Bundles</h6>
<pre class=" language-js"><code class=" language-js"><span class="token comment">// index.js loading JS object</span>
<span class="token keyword">import</span> OpenProps <span class="token keyword">from</span> <span class="token string">'open-props'</span><span class="token punctuation">;</span> <span class="token comment">// module</span>
<span class="token keyword">import</span> OpenProps <span class="token keyword">from</span> <span class="token string">'open-props/src'</span><span class="token punctuation">;</span> <span class="token comment">// unbundled ES module</span>
<span class="token keyword">import</span> Colors <span class="token keyword">from</span> <span class="token string">'open-props/src/colors'</span><span class="token punctuation">;</span>
<span class="token comment">// object notation access is special to OpenProps</span>
console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>OpenProps<span class="token punctuation">.</span>size1<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>OpenProps<span class="token punctuation">[</span><span class="token string">'--size-1'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>Colors<span class="token punctuation">[</span><span class="token string">'--indigo-5'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</div>
<div>
<h6>Individual imports</h6>
<pre class=" language-js"><code class=" language-js"><span class="token comment">// import just 1 color set object</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>indigo<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'open-props/src/colors'</span><span class="token punctuation">;</span>
<span class="token comment">// import shadows without prop deps</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>StaticShadows<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'open-props/src/shadows'</span><span class="token punctuation">;</span>
<span class="token comment">// import the gradients</span>
<span class="token keyword">import</span> Gradients <span class="token keyword">from</span> <span class="token string">'open-props/src/gradients'</span><span class="token punctuation">;</span>
<span class="token comment">// see PropPacks for the full list</span></code></pre>
</div>
</div>
</details>
<details class="started-details">
<summary>Design Tokens</summary>
<div>
<div class="block-wrap">
<pre class=" language-js"><code class=" language-js"><span class="token comment">/* 3 ways to import */</span>
<span class="token keyword">import</span> <span class="token string">'open-props/tokens'</span>
<span class="token keyword">import</span> <span class="token string">'open-props/json'</span>
<span class="token keyword">import</span> <span class="token string">'open-props/design-tokens'</span></code></pre>
</div>
</div>
</details>
<h5 id="jitprops">PostCSS JIT Props</h5>
<p>Only ship the props you use. <a href="https://github.com/GoogleChromeLabs/postcss-jit-props">Learn more</a>.</p>
<details class="started-details">
<summary>PostCSS</summary>
<pre class=" language-bash"><code class=" language-bash">npm install postcss-jit-props</code></pre>
<br>
<p>Stop importing Open Props in your CSS (if you were).</p>
<p><b>This plugin adds them to your stylesheet as you use them 🙂</b></p>
<div class="block-wrap">
<div>
<h6>Props as Javascript</h6>
<pre class=" language-js"><code class=" language-js"><span class="token comment">// postcss.config.js</span>
<span class="token keyword">const</span> postcssJitProps <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-jit-props'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> OpenProps <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'open-props'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token function">postcssJitProps</span><span class="token punctuation">(</span>OpenProps<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h6>Props from CSS</h6>
<pre class=" language-js"><code class=" language-js"><span class="token comment">// postcss.config.js</span>
<span class="token keyword">const</span> postcssJitProps <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-jit-props'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> OpenProps <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'open-props'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token function">postcssJitProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
files<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'open-props/open-props.min.css'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
</details>
</div>
<div class="contain-pre" id="cli">
<h4>CLI</h4>
<pre class=" language-bash"><code class=" language-bash">git clone https://github.com/argyleink/open-props.git</code></pre>
<details class="started-details">
<summary>Customize your build</summary>
<div class="block-wrap">
<div>
<h6>Customize Bundles</h6>
<p></p>
<pre class=" language-js"><code class=" language-js"><span class="token comment">// bulid src files</span>
npm run gen<span class="token punctuation">:</span>shadowdom <span class="token comment">// src files with `:host` instead of `html`</span>
npm run gen<span class="token punctuation">:</span>nowhere <span class="token comment">// src files without `:where()`</span>
npm run gen<span class="token punctuation">:</span>prefixed <span class="token comment">// each prop prefixed with `op`, like `--op-font-size-1`</span>
<span class="token comment">// full custom! pass args with node to the props.js script</span>
node props<span class="token punctuation">.</span>js <span class="token string">'ns'</span> <span class="token boolean">true</span> <span class="token string">':root'</span> <span class="token string">'my'</span>
⇣
<span class="token comment">// arg1: default '', is a custom namespace, props will be --ns-gray-1</span>
<span class="token comment">// arg2: default false, indicates wrapping in :where() or not</span>
<span class="token comment">// arg3: default '', set a custom selector like :scope, .my-class, etc</span>
<span class="token comment">// arg4: default '', set a file prefix, files will be my.props.easing.css, etc</span></code></pre>
</div>
<div>
<h6>Build Locally</h6>
<pre class=" language-js"><code class=" language-js">npm run gen<span class="token punctuation">:</span>op <span class="token comment">// runs through `src/` js files and creates the PostCSS files in `src/`</span>
npm run gen<span class="token punctuation">:</span>shadowdom <span class="token comment">// runs through `src/` js files and creates the PostCSS files in `src/`</span>
npm run build <span class="token comment">// does both gen:op and gen:shadowdom</span>
npm run bundle <span class="token comment">// creates all the various minified bundles of props</span>
npm run lib<span class="token punctuation">:</span>js <span class="token comment">// builds the JS modules for NPM</span></code></pre>
</div>
</div>
</details>
</div>
</div>
<div class="contain-pre" id="autocomplete">
<h4>Autocomplete</h4>
<details class="started-details">
<summary>VScode</summary>
<ol>
<li>
VScode has an intellisense feature which you can tap into,
by passing the path to the <code>node_modules</code> folder when
open-props is installed
</li>
<li>
In your VScode environment, navigate to the extensions
marketplace, and install this
<a href="https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar" target="__blank">
CSS Var Complete
</a>
extension
</li>
<li>
When the extension is installed, you'll have to add
open-prop's css file path to a
<code>.vscode/settings.json</code>file. Take a look at an
illustration below
</li>
<pre class=" language-js"><code class=" language-js"><span class="token comment">// .vscode/settings.json file</span>
<span class="token punctuation">{</span>
<span class="token string">"cssvar.files"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token string">"./node_modules/open-props/open-props.min.css"</span><span class="token punctuation">,</span>
<span class="token comment">// if you have an alternative path to where your styles are located</span>
<span class="token comment">// you can add it in this array of files</span>
<span class="token string">"assets/styles/variables.css"</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">// Do not ignore node_modules css files, which is ignored by default</span>
<span class="token string">"cssvar.ignore"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">// add support for autocomplete in JS or JS like files</span>
<span class="token string">"cssvar.extensions"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token string">"css"</span><span class="token punctuation">,</span> <span class="token string">"html"</span><span class="token punctuation">,</span> <span class="token string">"jsx"</span><span class="token punctuation">,</span> <span class="token string">"tsx"</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span></code></pre>
<li>
Check details on settings and it's defaults
<a href="https://github.com/willofindie/vscode-cssvar#supported-configs" target="__blank">
in the repo
</a>
</li>
</ol>
</details>
</div>
</article>
</section>
<section id="colors">
<header>
<h2>Colors</h2>
<div class="block-wrap">
<p>Open Props includes <a href="https://yeun.github.io/open-color/">Open Color</a> (Version 1.9.1), an open-source color scheme optimized for UI development.</p>
<blockquote class="icon-quote">
<svg viewBox="0 0 24 24">
<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"></path>
</svg>
<span>Open the color picker in your browser dev tools, set the swatches to the page's custom properties, and enjoy picking from the set!</span>
</blockquote>
</div>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--gray-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--red-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--pink-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--grape-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--violet-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--indigo-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--blue-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--cyan-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--teal-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--green-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--lime-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--yellow-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span>
<span class="token selector">--orange-</span><span class="token punctuation">{</span>0-9<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div>
<h5>Button Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">button.blue</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">var</span><span class="token punctuation">(</span>--blue-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 1px 0 <span class="token function">var</span><span class="token punctuation">(</span>--blue-2<span class="token punctuation">)</span><span class="token selector">;
&:hover</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Light & Dark Example</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">--text-1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-9<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text-2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>--OSdark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token property">--text-1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text-2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Modify Opacity Example</h5>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* additional import required */</span>
<span class="token comment">/* @import "open-props/gray-hsl"; */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/colors-hsl"</span><span class="token punctuation">;</span></span>
<span class="token selector">.backdrop</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--gray-9-hsl<span class="token punctuation">)</span> / 30%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<article class="just-stretch">
<div class="open-colors count-em">
<h4>Gray</h4>
<span class="color-swatch" style="background-color: var(--gray-0)"></span>
<span class="color-swatch" style="background-color: var(--gray-1)"></span>
<span class="color-swatch" style="background-color: var(--gray-2)"></span>
<span class="color-swatch" style="background-color: var(--gray-3)"></span>
<span class="color-swatch" style="background-color: var(--gray-4)"></span>
<span class="color-swatch" style="background-color: var(--gray-5)"></span>
<span class="color-swatch" style="background-color: var(--gray-6)"></span>
<span class="color-swatch" style="background-color: var(--gray-7)"></span>
<span class="color-swatch" style="background-color: var(--gray-8)"></span>
<span class="color-swatch" style="background-color: var(--gray-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Red</h4>
<span class="color-swatch" style="background-color: var(--red-0)"></span>
<span class="color-swatch" style="background-color: var(--red-1)"></span>
<span class="color-swatch" style="background-color: var(--red-2)"></span>
<span class="color-swatch" style="background-color: var(--red-3)"></span>
<span class="color-swatch" style="background-color: var(--red-4)"></span>
<span class="color-swatch" style="background-color: var(--red-5)"></span>
<span class="color-swatch" style="background-color: var(--red-6)"></span>
<span class="color-swatch" style="background-color: var(--red-7)"></span>
<span class="color-swatch" style="background-color: var(--red-8)"></span>
<span class="color-swatch" style="background-color: var(--red-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Pink</h4>
<span class="color-swatch" style="background-color: var(--pink-0)"></span>
<span class="color-swatch" style="background-color: var(--pink-1)"></span>
<span class="color-swatch" style="background-color: var(--pink-2)"></span>
<span class="color-swatch" style="background-color: var(--pink-3)"></span>
<span class="color-swatch" style="background-color: var(--pink-4)"></span>
<span class="color-swatch" style="background-color: var(--pink-5)"></span>
<span class="color-swatch" style="background-color: var(--pink-6)"></span>
<span class="color-swatch" style="background-color: var(--pink-7)"></span>
<span class="color-swatch" style="background-color: var(--pink-8)"></span>
<span class="color-swatch" style="background-color: var(--pink-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Grape</h4>
<span class="color-swatch" style="background-color: var(--grape-0)"></span>
<span class="color-swatch" style="background-color: var(--grape-1)"></span>
<span class="color-swatch" style="background-color: var(--grape-2)"></span>
<span class="color-swatch" style="background-color: var(--grape-3)"></span>
<span class="color-swatch" style="background-color: var(--grape-4)"></span>
<span class="color-swatch" style="background-color: var(--grape-5)"></span>
<span class="color-swatch" style="background-color: var(--grape-6)"></span>
<span class="color-swatch" style="background-color: var(--grape-7)"></span>
<span class="color-swatch" style="background-color: var(--grape-8)"></span>
<span class="color-swatch" style="background-color: var(--grape-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Violet</h4>
<span class="color-swatch" style="background-color: var(--violet-0)"></span>
<span class="color-swatch" style="background-color: var(--violet-1)"></span>
<span class="color-swatch" style="background-color: var(--violet-2)"></span>
<span class="color-swatch" style="background-color: var(--violet-3)"></span>
<span class="color-swatch" style="background-color: var(--violet-4)"></span>
<span class="color-swatch" style="background-color: var(--violet-5)"></span>
<span class="color-swatch" style="background-color: var(--violet-6)"></span>
<span class="color-swatch" style="background-color: var(--violet-7)"></span>
<span class="color-swatch" style="background-color: var(--violet-8)"></span>
<span class="color-swatch" style="background-color: var(--violet-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Indigo</h4>
<span class="color-swatch" style="background-color: var(--indigo-0)"></span>
<span class="color-swatch" style="background-color: var(--indigo-1)"></span>
<span class="color-swatch" style="background-color: var(--indigo-2)"></span>
<span class="color-swatch" style="background-color: var(--indigo-3)"></span>
<span class="color-swatch" style="background-color: var(--indigo-4)"></span>
<span class="color-swatch" style="background-color: var(--indigo-5)"></span>
<span class="color-swatch" style="background-color: var(--indigo-6)"></span>
<span class="color-swatch" style="background-color: var(--indigo-7)"></span>
<span class="color-swatch" style="background-color: var(--indigo-8)"></span>
<span class="color-swatch" style="background-color: var(--indigo-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Blue</h4>
<span class="color-swatch" style="background-color: var(--blue-0)"></span>
<span class="color-swatch" style="background-color: var(--blue-1)"></span>
<span class="color-swatch" style="background-color: var(--blue-2)"></span>
<span class="color-swatch" style="background-color: var(--blue-3)"></span>
<span class="color-swatch" style="background-color: var(--blue-4)"></span>
<span class="color-swatch" style="background-color: var(--blue-5)"></span>
<span class="color-swatch" style="background-color: var(--blue-6)"></span>
<span class="color-swatch" style="background-color: var(--blue-7)"></span>
<span class="color-swatch" style="background-color: var(--blue-8)"></span>
<span class="color-swatch" style="background-color: var(--blue-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Cyan</h4>
<span class="color-swatch" style="background-color: var(--cyan-0)"></span>
<span class="color-swatch" style="background-color: var(--cyan-1)"></span>
<span class="color-swatch" style="background-color: var(--cyan-2)"></span>
<span class="color-swatch" style="background-color: var(--cyan-3)"></span>
<span class="color-swatch" style="background-color: var(--cyan-4)"></span>
<span class="color-swatch" style="background-color: var(--cyan-5)"></span>
<span class="color-swatch" style="background-color: var(--cyan-6)"></span>
<span class="color-swatch" style="background-color: var(--cyan-7)"></span>
<span class="color-swatch" style="background-color: var(--cyan-8)"></span>
<span class="color-swatch" style="background-color: var(--cyan-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Teal</h4>
<span class="color-swatch" style="background-color: var(--teal-0)"></span>
<span class="color-swatch" style="background-color: var(--teal-1)"></span>
<span class="color-swatch" style="background-color: var(--teal-2)"></span>
<span class="color-swatch" style="background-color: var(--teal-3)"></span>
<span class="color-swatch" style="background-color: var(--teal-4)"></span>
<span class="color-swatch" style="background-color: var(--teal-5)"></span>
<span class="color-swatch" style="background-color: var(--teal-6)"></span>
<span class="color-swatch" style="background-color: var(--teal-7)"></span>
<span class="color-swatch" style="background-color: var(--teal-8)"></span>
<span class="color-swatch" style="background-color: var(--teal-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Green</h4>
<span class="color-swatch" style="background-color: var(--green-0)"></span>
<span class="color-swatch" style="background-color: var(--green-1)"></span>
<span class="color-swatch" style="background-color: var(--green-2)"></span>
<span class="color-swatch" style="background-color: var(--green-3)"></span>
<span class="color-swatch" style="background-color: var(--green-4)"></span>
<span class="color-swatch" style="background-color: var(--green-5)"></span>
<span class="color-swatch" style="background-color: var(--green-6)"></span>
<span class="color-swatch" style="background-color: var(--green-7)"></span>
<span class="color-swatch" style="background-color: var(--green-8)"></span>
<span class="color-swatch" style="background-color: var(--green-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Lime</h4>
<span class="color-swatch" style="background-color: var(--lime-0)"></span>
<span class="color-swatch" style="background-color: var(--lime-1)"></span>
<span class="color-swatch" style="background-color: var(--lime-2)"></span>
<span class="color-swatch" style="background-color: var(--lime-3)"></span>
<span class="color-swatch" style="background-color: var(--lime-4)"></span>
<span class="color-swatch" style="background-color: var(--lime-5)"></span>
<span class="color-swatch" style="background-color: var(--lime-6)"></span>
<span class="color-swatch" style="background-color: var(--lime-7)"></span>
<span class="color-swatch" style="background-color: var(--lime-8)"></span>
<span class="color-swatch" style="background-color: var(--lime-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Yellow</h4>
<span class="color-swatch" style="background-color: var(--yellow-0)"></span>
<span class="color-swatch" style="background-color: var(--yellow-1)"></span>
<span class="color-swatch" style="background-color: var(--yellow-2)"></span>
<span class="color-swatch" style="background-color: var(--yellow-3)"></span>
<span class="color-swatch" style="background-color: var(--yellow-4)"></span>
<span class="color-swatch" style="background-color: var(--yellow-5)"></span>
<span class="color-swatch" style="background-color: var(--yellow-6)"></span>
<span class="color-swatch" style="background-color: var(--yellow-7)"></span>
<span class="color-swatch" style="background-color: var(--yellow-8)"></span>
<span class="color-swatch" style="background-color: var(--yellow-9)"></span>
</div>
<div class="open-colors count-em">
<h4>Orange</h4>
<span class="color-swatch" style="background-color: var(--orange-0)"></span>
<span class="color-swatch" style="background-color: var(--orange-1)"></span>
<span class="color-swatch" style="background-color: var(--orange-2)"></span>
<span class="color-swatch" style="background-color: var(--orange-3)"></span>
<span class="color-swatch" style="background-color: var(--orange-4)"></span>
<span class="color-swatch" style="background-color: var(--orange-5)"></span>
<span class="color-swatch" style="background-color: var(--orange-6)"></span>
<span class="color-swatch" style="background-color: var(--orange-7)"></span>
<span class="color-swatch" style="background-color: var(--orange-8)"></span>
<span class="color-swatch" style="background-color: var(--orange-9)"></span>
</div>
</article>
<details>
<summary>Color Theming 101</summary>
<div class="just-for-gap">
<header>
<h3>1) Color theming</h3>
<p>Low numbers are light and high numbers are dark. See how the Open Props <a href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.css">normalize.css</a> implements <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">light</a> and <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">dark</a> modes.</p>
<p><b>See it live:</b> <a href="https://codepen.io/argyleink/pen/21fe8c43e25876c3756917df0bd7ef36">auto, light, dark, dim and grape themes</a> demonstrated with Open Props!</p>
</header>
<div class="block-wrap">
<div>
<h5>Light</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">--brand-light</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1-light</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2-light</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1-light</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2-light</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3-light</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4-light</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Dark</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">--brand-dark</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1-dark</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2-dark</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1-dark</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-9<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2-dark</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3-dark</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4-dark</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Dim</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">--brand-dim</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--orange-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1-dim</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2-dim</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1-dim</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2-dim</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3-dim</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4-dim</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Grape</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">--brand-grape</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grape-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1-grape</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grape-9<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2-grape</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grape-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1-grape</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grape-0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2-grape</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grape-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3-grape</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grape-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4-grape</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grape-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<header>
<h3>2) Creating adaptive color schemes</h3>
<p>It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.</p>
</header>
<div class="block-wrap">
<div>
<h5>No Preference (Light)</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--brand</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-light<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1-light<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text2-light<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface1-light<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface2-light<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface3-light<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface4-light<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Prefers Dark</h5>
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--brand</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text2-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface1-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface2-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface3-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface4-dark<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Prefers Dim</h5>
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-contrast</span><span class="token punctuation">:</span> less<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--brand</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-dim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1-dim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text2-dim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface1-dim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface2-dim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface3-dim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface4-dim<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Prefers Grape</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">[color-scheme="grape"]</span> <span class="token punctuation">{</span>
<span class="token property">--brand</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--brand-grape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1-grape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text2-grape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface1</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface1-grape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface2</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface2-grape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface3</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface3-grape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--surface4</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface4-grape<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<header>
<h3>3) Using the aliases</h3>
<p>Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.</p>
</header>
<div class="block-wrap">
<div>
<h5>Page Styles Using Themes</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">accent-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--link<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Utilities</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.surface1</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.surface2</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.surface3</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.surface4</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--surface4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Typography</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">h1,h2,h3,h4,p,dt</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">h5,h6,small,dd</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
</div>
</details>
</section>
<section id="gradients" class="just-stretch">
<header>
<h2>Gradients</h2>
<p>Open Props includes 30 handcrafted gradients. Linear gradient direction can be changed with a custom property mixin.</p>
<p>Don't miss the noise props inspired by <a href="https://grainy-gradients.vercel.app/">grainy-gradients</a>.</p>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--gradient-</span><span class="token punctuation">{</span>0-30<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div>
<h5>Hero Header Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">header</span> <span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gradient-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>--OSdark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gradient-15<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Gradient Text Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.gradient-text</span> <span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gradient-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">-webkit-background-clip</span><span class="token punctuation">:</span> text<span class="token punctuation">;</span>
<span class="token property">-webkit-text-fill-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<article class="just-stretch just-for-gap">
<h4>Gradients</h4>
<div class="ui-gradients scroll-x-overflow count-em">
<span class="gradient-swatch" style="background-image: var(--gradient-1)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-2)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-3)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-4)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-5)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-6)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-7)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-8)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-9)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-10)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-11)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-12)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-13)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-14)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-15)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-16)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-17)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-18)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-19)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-20)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-21)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-22)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-23)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-24)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-25)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-26)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-27)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-28)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-29)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-30)"></span>
</div>
</article>
<div>
<h3>Noise</h3>
<div class="block-wrap">
<div>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--noise-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--noise-filter-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.noise-noise-noise</span> <span class="token punctuation">{</span>
<span class="token comment">/* stack grain with a gradient */</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gradient-3<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--noise-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* force colors and noise to collide */</span>
<span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--noise-filter-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* fit noise image to element */</span>
<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
</div>
<article class="just-stretch just-for-gap">
<h4>Noisy Examples</h4>
<div class="ui-gradients noisy scroll-x-overflow">
<span class="gradient-swatch" style="background-image: var(--gradient-3), var(--noise-5)"></span>
<span class="gradient-swatch" style="background-image: linear-gradient(to top, black, #0000), var(--noise-5); filter:var(--noise-filter-2)"></span>
<span class="gradient-swatch" style="background-image: radial-gradient(circle at center center, hsl(330deg 100% 71%), hsl(330deg 100% 0% / 50%)), var(--noise-3)"></span>
<span class="gradient-swatch" style="background-image: conic-gradient(at 50% -20%,#281316, #4e3beb33), var(--noise-1); filter:var(--noise-filter-4)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-13), var(--noise-5); filter:var(--noise-filter-1)"></span>
<span class="gradient-swatch" style="background-color: black; background-image: linear-gradient(to top, white, #fff0), var(--noise-5); filter:var(--noise-filter-2)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-20), var(--noise-5); filter:var(--noise-filter-3)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-23), var(--noise-5); filter:var(--noise-filter-5)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-25), var(--noise-5); filter:var(--noise-filter-2)"></span>
<span class="gradient-swatch" style="background-image: var(--gradient-30), var(--noise-3)"></span>
</div>
</article>
</section>
<section id="shadows">
<header>
<h2>Shadows</h2>
<p>Inner and outer shadows that adapt to light and dark modes.</p>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--shadow-</span><span class="token punctuation">{</span>1-6<span class="token punctuation">}</span>
<span class="token selector">--inner-shadow-</span><span class="token punctuation">{</span>0-4<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div>
<h5>Card Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow-1<span class="token punctuation">)</span><span class="token selector">;
&:hover</span> <span class="token punctuation">{</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<article class="shadow-demos count-em">
<div style="box-shadow: var(--shadow-1)"></div>
<div style="box-shadow: var(--shadow-2)"></div>
<div style="box-shadow: var(--shadow-3)"></div>
<div style="box-shadow: var(--shadow-4)"></div>
<div style="box-shadow: var(--shadow-5)"></div>
<div style="box-shadow: var(--shadow-6)"></div>
</article>
<article class="shadow-demos count-em">
<div style="box-shadow: var(--inner-shadow-0)"></div>
<div style="box-shadow: var(--inner-shadow-1)"></div>
<div style="box-shadow: var(--inner-shadow-2)"></div>
<div style="box-shadow: var(--inner-shadow-3)"></div>
<div style="box-shadow: var(--inner-shadow-4)"></div>
</article>
</section>
<section id="aspect-ratio">
<header>
<h2>Aspect Ratios</h2>
</header>
<div class="block-wrap">
<div>
<h5>Vars Sample</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token property">--ratio-square</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token property">--ratio-landscape</span><span class="token punctuation">:</span> 4/3<span class="token punctuation">;</span>
<span class="token property">--ratio-portrait</span><span class="token punctuation">:</span> 3/4<span class="token punctuation">;</span>
<span class="token property">--ratio-widescreen</span><span class="token punctuation">:</span> 16/9<span class="token punctuation">;</span>
<span class="token property">--ratio-ultrawide</span><span class="token punctuation">:</span> 18/5<span class="token punctuation">;</span>
<span class="token property">--ratio-golden</span><span class="token punctuation">:</span> 1.6180/1<span class="token punctuation">;</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.video-thumbnail</span> <span class="token punctuation">{</span>
<span class="token property">block-size</span><span class="token punctuation">:</span> 480px<span class="token punctuation">;</span>
<span class="token property">aspect-ratio</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ratio-widescreen<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<article class="aspect-demos">
<div style="aspect-ratio: var(--ratio-square)">box</div>
<div style="aspect-ratio: var(--ratio-landscape)">landscape</div>
<div style="aspect-ratio: var(--ratio-portrait)">portrait</div>
<div style="aspect-ratio: var(--ratio-widescreen)">widescreen</div>
<div style="aspect-ratio: 1.6180/1">golden ratio</div>
<div style="aspect-ratio: 18/5">ultrawide</div>
</article>
</section>
<section id="typography">
<header>
<h2>Typography</h2>
<p>Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.</p>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--font-size-</span><span class="token punctuation">{</span>00-8<span class="token punctuation">}</span>
<span class="token selector">--font-size-fluid-</span><span class="token punctuation">{</span>0-3<span class="token punctuation">}</span>
<span class="token selector">--font-weight-</span><span class="token punctuation">{</span>1-9<span class="token punctuation">}</span>
<span class="token selector">--font-letterspacing-</span><span class="token punctuation">{</span>0-7<span class="token punctuation">}</span>
<span class="token selector">--font-lineheight-</span><span class="token punctuation">{</span>00-5<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.hero</span> <span class="token punctuation">{</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-lineheight-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-weight-9<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-sans<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<article class="font-sizes">
<h4>Font Families</h4>
<pre class=" language-css"><code class=" language-css"><span class="token property">--font-sans</span><span class="token punctuation">:</span> system-ui<span class="token punctuation">,</span> -apple-system<span class="token punctuation">,</span> Segoe UI<span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> Ubuntu<span class="token punctuation">,</span> Cantarell<span class="token punctuation">,</span> Noto Sans<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">--font-serif</span><span class="token punctuation">:</span> ui-serif<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token property">--font-mono</span><span class="token punctuation">:</span> Dank Mono<span class="token punctuation">,</span> Operator Mono<span class="token punctuation">,</span> Inconsolata<span class="token punctuation">,</span> Fira Mono<span class="token punctuation">,</span> ui-monospace<span class="token punctuation">,</span> SF Mono<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> Droid Sans Mono<span class="token punctuation">,</span> Source Code Pro<span class="token punctuation">,</span> monospace<span class="token punctuation">;</span></code></pre>
<div class="block-wrap">
<div class="font-family-grid">
<code class=" language-css">--font-sans</code>
<div>
<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>
</div>
</div>
<div class="font-family-grid">
<code class=" language-css">--font-serif</code>
<div style="font-family: var(--font-serif)">
<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>
</div>
</div>
<div class="font-family-grid">
<code class=" language-css">--font-mono</code>
<div style="font-family: var(--font-mono)">
<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>
</div>
</div>
</div>
</article>
<article class="font-sizes">
<div class="block-wrap">
<div>
<h4>Font Weights</h4>
<pre class=" language-css"><code class=" language-css"><span class="token property">--font-weight-1</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>
<span class="token property">--font-weight-2</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span>
<span class="token property">--font-weight-3</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
<span class="token property">--font-weight-4</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
<span class="token property">--font-weight-5</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span>
<span class="token property">--font-weight-6</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>
<span class="token property">--font-weight-7</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
<span class="token property">--font-weight-8</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
<span class="token property">--font-weight-9</span><span class="token punctuation">:</span> 900<span class="token punctuation">;</span></code></pre>
</div>
<div class="font-demo">
<div class="sample-text" style="font-size: var(--font-size-8)">Aa</div>
<input class="font-slider" name="weight" data-prop="fontWeight" type="range" value="4" min="1" max="9" style="--track-fill:44%;">
</div>
</div>
</article>
<article class="font-sizes">
<div class="block-wrap">
<div>
<h4>Letter Spacing</h4>
<pre class=" language-css"><code class=" language-css"><span class="token property">--font-letterspacing-0</span><span class="token punctuation">:</span> -.05em<span class="token punctuation">;</span>
<span class="token property">--font-letterspacing-1</span><span class="token punctuation">:</span> .025em<span class="token punctuation">;</span>
<span class="token property">--font-letterspacing-2</span><span class="token punctuation">:</span> .050em<span class="token punctuation">;</span>
<span class="token property">--font-letterspacing-3</span><span class="token punctuation">:</span> .075em<span class="token punctuation">;</span>
<span class="token property">--font-letterspacing-4</span><span class="token punctuation">:</span> .150em<span class="token punctuation">;</span>
<span class="token property">--font-letterspacing-5</span><span class="token punctuation">:</span> .500em<span class="token punctuation">;</span>
<span class="token property">--font-letterspacing-6</span><span class="token punctuation">:</span> .750em<span class="token punctuation">;</span>
<span class="token property">--font-letterspacing-7</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span></code></pre>
</div>
<div class="font-demo">
<div class="sample-text letterspacing-demo">Letter Spacing</div>
<input class="font-slider" name="letterspacing" data-prop="letter-spacing" type="range" value="1" min="0" max="7" style="--track-fill:14%;">
</div>
</div>
</article>
<article class="font-sizes">
<div class="block-wrap">
<div>
<h4>Line Height</h4>
<pre class=" language-css"><code class=" language-css"><span class="token property">--font-lineheight-00</span><span class="token punctuation">:</span> .95<span class="token punctuation">;</span>
<span class="token property">--font-lineheight-0</span><span class="token punctuation">:</span> 1.1<span class="token punctuation">;</span>
<span class="token property">--font-lineheight-1</span><span class="token punctuation">:</span> 1.25<span class="token punctuation">;</span>
<span class="token property">--font-lineheight-2</span><span class="token punctuation">:</span> 1.375<span class="token punctuation">;</span>
<span class="token property">--font-lineheight-3</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span>
<span class="token property">--font-lineheight-4</span><span class="token punctuation">:</span> 1.75<span class="token punctuation">;</span>
<span class="token property">--font-lineheight-5</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></code></pre>
</div>
<div class="font-demo">
<div class="sample-text" style="max-inline-size: var(--size-content-1);">
Sample paragraph content to provide a preview for OP's line heights
</div>
<input class="font-slider" name="lineheight" data-prop="lineHeight" type="range" value="1" min="-1" max="5" style="--track-fill:33%;">
</div>
</div>
</article>
<!-- <article class="font-sizes">
<header>
<h4>Relative Line Height</h4>
<p>These line heights tighten as the font size is increased.</p>
</header>
<pre class="language-css"><code>
--font-relative-lineheight-00: calc(1rem + .5ch);
--font-relative-lineheight-0: calc(1rem + .75ch);
--font-relative-lineheight-1: calc(1rem + 1ch);
--font-relative-lineheight-2: calc(1rem + 1.25ch);
--font-relative-lineheight-3: calc(1rem + 1.5ch);
--font-relative-lineheight-4: calc(1rem + 2ch);
--font-relative-lineheight-5: calc(1rem + 2.5ch);
--font-relative-lineheight-6: calc(1rem + 3ch);
</code></pre>
</article> -->
<article class="font-sizes">
<h4>Font Sizes</h4>
<pre class=" language-css"><code class=" language-css"><span class="token property">--font-size-00</span><span class="token punctuation">:</span> .5rem<span class="token punctuation">;</span>
<span class="token property">--font-size-0</span><span class="token punctuation">:</span> .75rem<span class="token punctuation">;</span>
<span class="token property">--font-size-1</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token property">--font-size-2</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span>
<span class="token property">--font-size-3</span><span class="token punctuation">:</span> 1.25rem<span class="token punctuation">;</span>
<span class="token property">--font-size-4</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token property">--font-size-5</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token property">--font-size-6</span><span class="token punctuation">:</span> 2.5rem<span class="token punctuation">;</span>
<span class="token property">--font-size-7</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span>
<span class="token property">--font-size-8</span><span class="token punctuation">:</span> 3.5rem<span class="token punctuation">;</span></code></pre>
<div class="scroll-x-overflow"><div class="font-size-examples">
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-00<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-00)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-0<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-0)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-1<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-1)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-2<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-2)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-3<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-3)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-4<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-4)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-5<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-5)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-6<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-6)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-7<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-7)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-8<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-8)">Almost before you knew it, we'd touched ground.</span>
</div></div>
</article>
<article class="font-sizes">
<h4>Fluid Font Sizes</h4>
<pre class=" language-css"><code class=" language-css"><span class="token property">--font-size-fluid-0</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>.75rem<span class="token punctuation">,</span> 1.5vw<span class="token punctuation">,</span> 1rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--font-size-fluid-1</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>1rem<span class="token punctuation">,</span> 2vw<span class="token punctuation">,</span> 1.5rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--font-size-fluid-2</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>1.5rem<span class="token punctuation">,</span> 3vw<span class="token punctuation">,</span> 2.5rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--font-size-fluid-3</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>2rem<span class="token punctuation">,</span> 4vw<span class="token punctuation">,</span> 3.5rem<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<div class="scroll-x-overflow"><div class="font-size-examples">
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-00<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-fluid-00)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-1<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-fluid-1)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-2<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-fluid-2)">Almost before you knew it, we'd touched ground.</span>
<code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-3<span class="token punctuation">)</span></code>
<span style="font-size: var(--font-size-fluid-3)">Almost before you knew it, we'd touched ground.</span>
</div></div>
</article>
</section>
<section id="easing">
<header>
<h2>Easing</h2>
<p>Five strengths for the classic <code class=" language-css">ease</code>, <code class=" language-css">ease-out</code>, <code class=" language-css">ease-in</code>, and <code class=" language-css">ease-in-out</code> timing functions. Plus some extra easings for mock elasticity and physics!</p>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--ease-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--ease-in-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--ease-out-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--ease-in-out-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--ease-elastic-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--ease-squish-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--ease-step-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.slight-ease</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> fade-in 300ms <span class="token function">var</span><span class="token punctuation">(</span>--ease-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.dramatic-ease</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> fade-in 1s <span class="token function">var</span><span class="token punctuation">(</span>--ease-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div class="easing-samples block-wrap">
<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon" class=""></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-1)">ease-1</div>
<div style="animation-timing-function: var(--ease-2)">ease-2</div>
<div style="animation-timing-function: var(--ease-3)">ease-3</div>
<div style="animation-timing-function: var(--ease-4)">ease-4</div>
<div style="animation-timing-function: var(--ease-5)">ease-5</div>
</div>
</div>
<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease In</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon" class=""></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-in-1)">ease-in-1</div>
<div style="animation-timing-function: var(--ease-in-2)">ease-in-2</div>
<div style="animation-timing-function: var(--ease-in-3)">ease-in-3</div>
<div style="animation-timing-function: var(--ease-in-4)">ease-in-4</div>
<div style="animation-timing-function: var(--ease-in-5)">ease-in-5</div>
</div>
</div>
<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease Out</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon" class=""></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-out-1)">ease-out-1</div>
<div style="animation-timing-function: var(--ease-out-2)">ease-out-2</div>
<div style="animation-timing-function: var(--ease-out-3)">ease-out-3</div>
<div style="animation-timing-function: var(--ease-out-4)">ease-out-4</div>
<div style="animation-timing-function: var(--ease-out-5)">ease-out-5</div>
</div>
</div>
<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease In Out</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon" class=""></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-in-out-1)">ease-in-out-1</div>
<div style="animation-timing-function: var(--ease-in-out-2)">ease-in-out-2</div>
<div style="animation-timing-function: var(--ease-in-out-3)">ease-in-out-3</div>
<div style="animation-timing-function: var(--ease-in-out-4)">ease-in-out-4</div>
<div style="animation-timing-function: var(--ease-in-out-5)">ease-in-out-5</div>
</div>
</div>
<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease Elastic</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon" class=""></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-elastic-1)">ease-elastic-1</div>
<div style="animation-timing-function: var(--ease-elastic-2)">ease-elastic-2</div>
<div style="animation-timing-function: var(--ease-elastic-3)">ease-elastic-3</div>
<div style="animation-timing-function: var(--ease-elastic-4)">ease-elastic-4</div>
<div style="animation-timing-function: var(--ease-elastic-5)">ease-elastic-5</div>
</div>
</div>
<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease Squish</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon" class=""></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-squish-1)">ease-squish-1</div>
<div style="animation-timing-function: var(--ease-squish-2)">ease-squish-2</div>
<div style="animation-timing-function: var(--ease-squish-3)">ease-squish-3</div>
<div style="animation-timing-function: var(--ease-squish-4)">ease-squish-4</div>
<div style="animation-timing-function: var(--ease-squish-5)">ease-squish-5</div>
</div>
</div>
<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease Steps</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon" class=""></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-step-1)">ease-step-1</div>
<div style="animation-timing-function: var(--ease-step-2)">ease-step-2</div>
<div style="animation-timing-function: var(--ease-step-3)">ease-step-3</div>
<div style="animation-timing-function: var(--ease-step-4)">ease-step-4</div>
<div style="animation-timing-function: var(--ease-step-5)">ease-step-5</div>
</div>
</div>
</div>
</section>
<section id="animations">
<header>
<h2>Animations</h2>
<p>Premade <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect">keyframe effects</a> allow you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations.</p>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--animation-fade-</span><span class="token punctuation">{</span>in<span class="token punctuation">,</span>out<span class="token punctuation">}</span>
<span class="token selector">--animation-fade-</span><span class="token punctuation">{</span>in<span class="token punctuation">,</span>out<span class="token punctuation">}</span><span class="token selector">-bloom
--animation-shake-</span><span class="token punctuation">{</span>x<span class="token punctuation">,</span>y<span class="token punctuation">}</span>
<span class="token selector">--animation-slide-out-</span><span class="token punctuation">{</span>up<span class="token punctuation">,</span>down<span class="token punctuation">,</span>left<span class="token punctuation">,</span>right<span class="token punctuation">}</span>
<span class="token selector">--animation-slide-in-</span><span class="token punctuation">{</span>up<span class="token punctuation">,</span>down<span class="token punctuation">,</span>left<span class="token punctuation">,</span>right<span class="token punctuation">}</span>
--animation-spin
--animation-ping
--animation-blink
--animation-float
--animation-bounce
--animation-pulse</code></pre>
</div>
</div>
<!-- <div>
<h5>Keyframe Effect Examples</h5>
<div class="var-examples">
<pre class="language-css"><code>
@keyframes op-fade-in {
to { opacity: 1 }
}
@keyframes op-slide-out-right {
to { transform: translateX(100%) }
}
@keyframes op-slide-in-up {
from { transform: translateY(100%) }
}
@keyframes op-float {
50% {
transform: translateY(-25%);
}
}
</code></pre>
</div>
</div> -->
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.loaded</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-fade-in<span class="token punctuation">)</span> forwards<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.actionsheet</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-slide-out-down<span class="token punctuation">)</span> forwards<span class="token selector">;
&.open</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-slide-in-up<span class="token punctuation">)</span> forwards<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">.alert</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--animation-blink<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div class="just-for-gap">
<h5>Samples</h5>
<div class="animation-demo">
<div class="animation-demo-target" data-starting-styles="opacity:0" data-animation="fade-in">
<h6>Fade In</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="fade-out">
<h6>Fade Out</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-starting-styles="opacity:0" data-animation="fade-in-bloom">
<h6>Bloom Fade In</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="fade-out-bloom">
<h6>Bloom Fade Out</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="scale-up">
<h6>Scale Up</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="scale-down">
<h6>Scale Down</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-out-up">
<h6>Slide Out Up</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-out-down">
<h6>Slide Out Down</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-out-right">
<h6>Slide Out Right</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-out-left">
<h6>Slide Out Left</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-in-up">
<h6>Slide In Up</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-in-down">
<h6>Slide In Down</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-in-right">
<h6>Slide In Right</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="slide-in-left">
<h6>Slide In Left</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="spin">
<h6>Spin</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="ping">
<h6>Ping</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="blink">
<h6>Blink</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="float">
<h6>Float</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="bounce">
<h6>Bounce</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="pulse">
<h6>Pulse</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="shake-x">
<h6>Shake X</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div class="animation-demo-target" data-animation="shake-y">
<h6>Shake Y</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="just-for-gap">
<h3>Combine 'em!</h3>
<div class="animation-demo of-pairs">
<div class="animation-pair">
<div class="animation-demo-target slide-fade-combo" data-animation="slide-down-fade-out">
<h6>Slide Fade</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.slide-fade</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span>
<span class="token function">var</span><span class="token punctuation">(</span>--animation-fade-out<span class="token punctuation">)</span> forwards<span class="token punctuation">,</span>
<span class="token function">var</span><span class="token punctuation">(</span>--animation-slide-out-down<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ease-squish-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div class="animation-pair">
<!-- data-starting-styles="opacity:0" -->
<div class="animation-demo-target shake-fade-combo" data-animation="slide-left-fade-in-shake-y">
<h6>Shake In</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.shake-in</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span>
<span class="token function">var</span><span class="token punctuation">(</span>--animation-shake-y<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">var</span><span class="token punctuation">(</span>--animation-fade-in<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">var</span><span class="token punctuation">(</span>--animation-slide-in-left<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div class="animation-pair">
<div class="animation-demo-target push-out-combo" data-animation="push-out">
<h6>Push Out</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"></use>
<use href="#pause-icon" class="hidden"></use>
</svg>
</button>
</div>
<div>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.push-out</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span>
<span class="token function">var</span><span class="token punctuation">(</span>--animation-scale-down<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function">var</span><span class="token punctuation">(</span>--animation-fade-out<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ease-squish-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
</div>
</div>
</section>
<section id="sizes">
<header>
<h2>Sizes</h2>
<p>No <code class=" language-css">px</code> here, relative units all the way. <code>0</code>s are unsafe but common negative values, while 1-N are safe.</p>
</header>
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--size-</span><span class="token punctuation">{</span>000-15<span class="token punctuation">}</span>
<span class="token selector">--size-fluid-</span><span class="token punctuation">{</span>1-10<span class="token punctuation">}</span>
<span class="token selector">--size-content-</span><span class="token punctuation">{</span>1-3<span class="token punctuation">}</span>
<span class="token selector">--size-header-</span><span class="token punctuation">{</span>1-3<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div class="block-wrap">
<div>
<h5>Relative Sizes</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token property">--size-000</span><span class="token punctuation">:</span> -.5rem<span class="token punctuation">;</span>
<span class="token property">--size-00</span><span class="token punctuation">:</span> -.25rem<span class="token punctuation">;</span>
<span class="token property">--size-1</span><span class="token punctuation">:</span> .25rem<span class="token punctuation">;</span>
<span class="token property">--size-2</span><span class="token punctuation">:</span> .5rem<span class="token punctuation">;</span>
<span class="token property">--size-3</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token property">--size-4</span><span class="token punctuation">:</span> 1.25rem<span class="token punctuation">;</span>
<span class="token property">--size-5</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token property">--size-6</span><span class="token punctuation">:</span> 1.75rem<span class="token punctuation">;</span>
<span class="token property">--size-7</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token property">--size-8</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span>
<span class="token property">--size-9</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span>
<span class="token property">--size-10</span><span class="token punctuation">:</span> 5rem<span class="token punctuation">;</span>
<span class="token property">--size-11</span><span class="token punctuation">:</span> 7.5rem<span class="token punctuation">;</span>
<span class="token property">--size-12</span><span class="token punctuation">:</span> 10rem<span class="token punctuation">;</span>
<span class="token property">--size-13</span><span class="token punctuation">:</span> 15rem<span class="token punctuation">;</span>
<span class="token property">--size-14</span><span class="token punctuation">:</span> 20rem<span class="token punctuation">;</span>
<span class="token property">--size-15</span><span class="token punctuation">:</span> 30rem<span class="token punctuation">;</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">article</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li</span> <span class="token punctuation">{</span>
<span class="token property">padding-inline-start</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.icon</span> <span class="token punctuation">{</span>
<span class="token property">inline-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">block-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div class="sizes-demo count-em scroll-x-overflow">
<span style="inline-size: var(--size-1)"></span>
<span style="inline-size: var(--size-2)"></span>
<span style="inline-size: var(--size-3)"></span>
<span style="inline-size: var(--size-4)"></span>
<span style="inline-size: var(--size-5)"></span>
<span style="inline-size: var(--size-6)"></span>
<span style="inline-size: var(--size-7)"></span>
<span style="inline-size: var(--size-8)"></span>
<span style="inline-size: var(--size-9)"></span>
<span style="inline-size: var(--size-10)"></span>
<span style="inline-size: var(--size-11)"></span>
<span style="inline-size: var(--size-12)"></span>
<span style="inline-size: var(--size-13)"></span>
<span style="inline-size: var(--size-14)"></span>
<span style="inline-size: var(--size-15)"></span>
</div>
</div>
<div class="block-wrap">
<div>
<h5>Fluid Sizes</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token property">--size-fluid-1</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>.5rem<span class="token punctuation">,</span> 1vw<span class="token punctuation">,</span> 1rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-2</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>1rem<span class="token punctuation">,</span> 2vw<span class="token punctuation">,</span> 1.5rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-3</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>1.5rem<span class="token punctuation">,</span> 3vw<span class="token punctuation">,</span> 2rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-4</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>2rem<span class="token punctuation">,</span> 4vw<span class="token punctuation">,</span> 3rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-5</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>4rem<span class="token punctuation">,</span> 5vw<span class="token punctuation">,</span> 5rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-6</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>5rem<span class="token punctuation">,</span> 7vw<span class="token punctuation">,</span> 7.5rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-7</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>7.5rem<span class="token punctuation">,</span> 10vw<span class="token punctuation">,</span> 10rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-8</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>10rem<span class="token punctuation">,</span> 20vw<span class="token punctuation">,</span> 15rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-9</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>15rem<span class="token punctuation">,</span> 30vw<span class="token punctuation">,</span> 20rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--size-fluid-10</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>20rem<span class="token punctuation">,</span> 40vw<span class="token punctuation">,</span> 30rem<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-fluid-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">hr</span> <span class="token punctuation">{</span>
<span class="token property">margin-block</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-fluid-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div class="sizes-demo count-em scroll-x-overflow">
<span style="inline-size: var(--size-fluid-1)"></span>
<span style="inline-size: var(--size-fluid-2)"></span>
<span style="inline-size: var(--size-fluid-3)"></span>
<span style="inline-size: var(--size-fluid-4)"></span>
<span style="inline-size: var(--size-fluid-5)"></span>
<span style="inline-size: var(--size-fluid-6)"></span>
<span style="inline-size: var(--size-fluid-7)"></span>
<span style="inline-size: var(--size-fluid-8)"></span>
<span style="inline-size: var(--size-fluid-9)"></span>
<span style="inline-size: var(--size-fluid-10)"></span>
</div>
</div>
<div class="block-wrap">
<div>
<h5>Reading Content Sizes</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token property">--size-content-1</span><span class="token punctuation">:</span> 20ch<span class="token punctuation">;</span>
<span class="token property">--size-content-2</span><span class="token punctuation">:</span> 45ch<span class="token punctuation">;</span>
<span class="token property">--size-content-3</span><span class="token punctuation">:</span> 60ch<span class="token punctuation">;</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">p</span> <span class="token punctuation">{</span>
<span class="token property">max-inline-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-content-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">aside</span> <span class="token punctuation">{</span>
<span class="token property">max-inline-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-content-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div class="large-sizes sizes-demo count-em scroll-x-overflow">
<span style="inline-size: var(--size-content-1)"></span>
<span style="inline-size: var(--size-content-2)"></span>
<span style="inline-size: var(--size-content-3)"></span>
</div>
<div class="content-demo scroll-x-overflow">
<p style="inline-size: var(--size-content-1)">Carrot cake gummi bears sweet caramels cotton candy topping.</p>
<p style="inline-size: var(--size-content-2)">Carrot cake gummi bears sweet caramels cotton candy topping. Jelly candy apple pie gingerbread tootsie roll chupa chups.</p>
<p style="inline-size: var(--size-content-3)">Carrot cake gummi bears sweet caramels cotton candy topping. Jelly candy apple pie gingerbread tootsie roll chupa chups. Gummi bears lollipop apple pie pudding tart cake jelly. Soufflé lollipop jelly-o chocolate bar icing bonbon.</p>
</div>
</div>
<div class="block-wrap">
<div>
<h5>Headline Content Sizes</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token property">--size-header-1</span><span class="token punctuation">:</span> 20ch<span class="token punctuation">;</span>
<span class="token property">--size-header-2</span><span class="token punctuation">:</span> 25ch<span class="token punctuation">;</span>
<span class="token property">--size-header-3</span><span class="token punctuation">:</span> 35ch<span class="token punctuation">;</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">max-inline-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-header-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">small</span> <span class="token punctuation">{</span>
<span class="token property">max-inline-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-header-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div class="large-sizes sizes-demo count-em scroll-x-overflow">
<span style="inline-size: var(--size-header-1)"></span>
<span style="inline-size: var(--size-header-2)"></span>
<span style="inline-size: var(--size-header-3)"></span>
</div>
<div class="header-demo scroll-x-overflow">
<h5 style="inline-size: var(--size-header-1)">Carrot cake gummi bears sweet caramel candy.</h5>
<h5 style="inline-size: var(--size-header-2)">Carrot cake gummi bears sweet caramels cotton candy topping.</h5>
<h5 style="inline-size: var(--size-header-3)">Carrot cake gummi bears sweet caramels cotton candy topping. Jelly candy apple pie gingerbread tootsie roll chupa chups.</h5>
</div>
</div>
</section>
<section id="borders">
<header>
<h2>Borders</h2>
<p>Sizes, corner radii, a circle helper, <a href="https://ishadeed.com/article/conditional-border-radius/">conditional radii</a>, and some blobs.</p>
</header>
<div class="block-wrap">
<div>
<h5>Vars Sample</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--border-size-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--radius-</span><span class="token punctuation">{</span>1-6<span class="token punctuation">}</span>
<span class="token selector">--radius-round
--radius-blob-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token selector">--radius-conditional-</span><span class="token punctuation">{</span>1-6<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span>
<span class="token comment">/* no radius when fullscreen */</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radius-conditional-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--border-size-1<span class="token punctuation">)</span> solid <span class="token function">var</span><span class="token punctuation">(</span>--gray-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.circle</span> <span class="token punctuation">{</span>
<span class="token property">inline-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">aspect-ratio</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--ratio-square<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radius-round<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div class="just-for-gap">
<h3>Border Size</h3>
<article class="border-demos">
<div style="border-width: var(--border-size-1)">1</div>
<div style="border-width: var(--border-size-2)">2</div>
<div style="border-width: var(--border-size-3)">3</div>
<div style="border-width: var(--border-size-4)">4</div>
<div style="border-width: var(--border-size-5)">5</div>
</article>
</div>
<div class="just-for-gap">
<h3>Border Radius</h3>
<article class="border-demos">
<div style="border-radius: var(--radius-1)">1</div>
<div style="border-radius: var(--radius-2)">2</div>
<div style="border-radius: var(--radius-3)">3</div>
<div style="border-radius: var(--radius-4)">4</div>
<div style="border-radius: var(--radius-5)">5</div>
<div style="border-radius: var(--radius-round)">round</div>
</article>
</div>
<div class="just-for-gap">
<h3>Blobs</h3>
<article class="border-demos blobbys">
<div style="border-radius: var(--radius-blob-1)">1</div>
<div style="border-radius: var(--radius-blob-2)">2</div>
<div style="border-radius: var(--radius-blob-3)">3</div>
<div style="border-radius: var(--radius-blob-4)">4</div>
<div style="border-radius: var(--radius-blob-5)">5</div>
</article>
</div>
</section>
<section id="z-index">
<header>
<h2>Z Index</h2>
<p>All the z-index values you could possibly need!</p>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--layer-</span><span class="token punctuation">{</span>1-5<span class="token punctuation">}</span>
<span class="token property">--layer-important</span><span class="token punctuation">:</span> 2147483647<span class="token punctuation">;</span></code></pre>
</div>
</div>
<div>
<h5>Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">figure</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token selector">;
& figcaption</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layer-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">inset-inline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">inset-block</span><span class="token punctuation">:</span> auto 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">.desperate-measures</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layer-important<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
</section>
<section id="media-queries">
<header class="just-for-gap">
<h2>Media Queries</h2>
<div class="block-wrap">
<p>Currently one step ahead of <a href="https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media">the CSS spec</a>, Open Props offers named media queries with the <code>@custom-media</code> syntax. Available only with <a href="https://github.com/postcss/postcss-custom-media">this PostCSS plugin</a>, for now 😈</p>
<blockquote class="icon-quote indigo">
<svg viewBox="0 0 24 24">
<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"></path>
</svg>
<span>Media query widths also available as custom properties. Use like <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--size-sm<span class="token punctuation">)</span></code></span>
</blockquote>
</div>
<div class="media-query-chart">
<div>
<svg height="24" width="24">
<path 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"></path>
</svg>
<div class="device xxs">xxs</div>
<code class=" language-css">240px</code>
</div>
<div>
<svg height="24" width="24">
<path 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"></path>
</svg>
<div class="device xs">xs</div>
<code class=" language-css">360px</code>
</div>
<div>
<svg height="24" width="24">
<path 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-4H7V4h9v14z"></path>
</svg>
<div class="device sm">sm</div>
<code class=" language-css">480px</code>
</div>
<div>
<svg height="24" width="24">
<path 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"></path>
</svg>
<div class="device md">md</div>
<code class=" language-css">768px</code>
</div>
<div>
<svg height="24" width="24">
<path 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"></path>
</svg>
<div class="device lg">lg</div>
<code class=" language-css">1024px</code>
</div>
<div>
<svg height="24" width="24">
<path 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"></path>
</svg>
<div class="xl">xl</div>
<code class=" language-css">1440px</code>
</div>
<div>
<svg height="24" width="24">
<path 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"></path>
</svg>
<div class="xxl">xxl</div>
<code class=" language-css">1920px</code>
</div>
</div>
</header>
<div class="block-wrap">
<div>
<h5>The Props</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token selector">--portrait
--landscape
--</span><span class="token punctuation">{</span>xxs<span class="token punctuation">,</span>xs<span class="token punctuation">,</span>sm<span class="token punctuation">,</span>md<span class="token punctuation">,</span>lg<span class="token punctuation">,</span>xl<span class="token punctuation">,</span>xxl<span class="token punctuation">}</span><span class="token selector">-only
--</span><span class="token punctuation">{</span>xxs<span class="token punctuation">,</span>xs<span class="token punctuation">,</span>sm<span class="token punctuation">,</span>md<span class="token punctuation">,</span>lg<span class="token punctuation">,</span>xl<span class="token punctuation">,</span>xxl<span class="token punctuation">}</span><span class="token selector">-n-above
--</span><span class="token punctuation">{</span>xxs<span class="token punctuation">,</span>xs<span class="token punctuation">,</span>sm<span class="token punctuation">,</span>md<span class="token punctuation">,</span>lg<span class="token punctuation">,</span>xl<span class="token punctuation">,</span>xxl<span class="token punctuation">}</span><span class="token selector">-n-below
--</span><span class="token punctuation">{</span>xxs<span class="token punctuation">,</span>xs<span class="token punctuation">,</span>sm<span class="token punctuation">,</span>md<span class="token punctuation">,</span>lg<span class="token punctuation">}</span>-phone</code></pre>
</div>
</div>
<div>
<h5>Viewport Vars Sample</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@custom-media</span> --portrait <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> portrait<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --landscape <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --md-only <span class="token punctuation">(</span>480px <= width <= 768px<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --md-n-above <span class="token punctuation">(</span>width >= 768px<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --md-n-below <span class="token punctuation">(</span>width <= 768px<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --md-phone <span class="token punctuation">(</span>--md-only<span class="token punctuation">)</span> and <span class="token punctuation">(</span>--portrait<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --xxl-only <span class="token punctuation">(</span>1440px <= width <= 1920px<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --xxl-n-above <span class="token punctuation">(</span>width >= 1920px<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --xxl-n-below <span class="token punctuation">(</span>width <= 1920px<span class="token punctuation">)</span><span class="token punctuation">;</span></span></code></pre>
</div>
</div>
<div>
<h5>Capability Vars</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@custom-media</span> --touch <span class="token punctuation">(</span><span class="token property">hover</span><span class="token punctuation">:</span> none<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">pointer</span><span class="token punctuation">:</span> coarse<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --stylus <span class="token punctuation">(</span><span class="token property">hover</span><span class="token punctuation">:</span> none<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">pointer</span><span class="token punctuation">:</span> fine<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --pointer <span class="token punctuation">(</span>hover<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">pointer</span><span class="token punctuation">:</span> coarse<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --mouse <span class="token punctuation">(</span>hover<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">pointer</span><span class="token punctuation">:</span> fine<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --HDcolor <span class="token punctuation">(</span><span class="token property">dynamic-range</span><span class="token punctuation">:</span> high<span class="token punctuation">)</span><span class="token punctuation">;</span></span></code></pre>
</div>
</div>
<div>
<h5>Preference Vars</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@custom-media</span> --OSdark <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --OSlight <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> light<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --motionOK <span class="token punctuation">(</span><span class="token property">prefers-reduced-motion</span><span class="token punctuation">:</span> no-preference<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --motionNotOK <span class="token punctuation">(</span><span class="token property">prefers-reduced-motion</span><span class="token punctuation">:</span> reduce<span class="token punctuation">)</span><span class="token punctuation">;</span></span></code></pre>
</div>
</div>
<div>
<h5>Preference Vars Extended</h5>
<div class="var-examples">
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@custom-media</span> --highContrast <span class="token punctuation">(</span><span class="token property">prefers-contrast</span><span class="token punctuation">:</span> high<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --lowContrast <span class="token punctuation">(</span><span class="token property">prefers-contrast</span><span class="token punctuation">:</span> low<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --opacityOK <span class="token punctuation">(</span><span class="token property">prefers-reduced-transparency</span><span class="token punctuation">:</span> no-preference<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --opacityNotOK <span class="token punctuation">(</span><span class="token property">prefers-reduced-transparency</span><span class="token punctuation">:</span> reduce<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --useDataOK <span class="token punctuation">(</span><span class="token property">prefers-reduced-data</span><span class="token punctuation">:</span> no-preference<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@custom-media</span> --useDataNotOK <span class="token punctuation">(</span><span class="token property">prefers-reduced-data</span><span class="token punctuation">:</span> reduce<span class="token punctuation">)</span><span class="token punctuation">;</span></span></code></pre>
</div>
</div>
<!-- <div>
<h5>Support Vars</h5>
<div class="var-examples">
<pre class="language-css"><code>
@custom-media --safariONLY (-webkit-hyphens: none);
@custom-media --firefoxONLY (-moz-appearance: none);
@custom-media --chromeONLY (-webkit-tap-highlight-color: black);
</code></pre>
</div>
</div> -->
</div>
<div class="block-wrap">
<div>
<h5>Light / Dark Usage Samples</h5>
<pre class=" language-css"><code class=" language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>--OSdark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-9<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gray-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div>
<h5>Reducing Motion Usage Samples</h5>
<pre class=" language-css"><code class=" language-css"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>--motionOK<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token property">transition</span><span class="token punctuation">:</span> transform .5s <span class="token function">var</span><span class="token punctuation">(</span>--ease-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<!-- <div>
<h5>Targeting a browser</h5>
<pre class="language-css"><code>
color: hsl(200 50% 50%);
@media (--safariONLY) {
color: color(display-p3 0 .5 1);
}
</code></pre>
</div> -->
</div>
</section>
<section id="masks">
<header>
<h2>Masks</h2>
<div class="block-wrap">
<p>Rad edges and corner-cuts ready to go. A huge shout out to <a href="https://twitter.com/ChallengesCss">Temani Afif</a> and <a href="https://github.com/argyleink/open-props/discussions/71">their amazing mask work</a>. Be sure to check out their <a href="https://css-generators.com/">CSS Generators</a> too; customize the size and distribution of these masks. Try on <a href="https://codepen.io/argyleink/pen/mdxKrxR">Codepen</a>.</p>
<blockquote class="icon-quote jagged">
<svg viewBox="0 0 24 24">
<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"></path>
</svg>
<span>Not part of the main bundle. Must be individually imported.</span>
</blockquote>
</div>
</header>
<div class="block-wrap">
<div>
<h5>NPM Imported Usage Sample</h5>
<pre class=" language-css"><code class=" language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/masks/edges"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/masks/corner-cuts"</span><span class="token punctuation">;</span></span>
<span class="token selector">.box-with-corner-cuts</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-corner-cut-angles-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box-with-zig-zag-on-bottom</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-edge-zig-zag-bottom<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
<div class="just-for-gap">
<header>
<h3>Mask Edges</h3>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* NPM */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/masks/edges"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/src/props.masks.edges.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/masks.edges.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* CDN */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/masks.edges.min.css"</span><span class="token punctuation">;</span></span></code></pre>
</header>
<h5>Scoops</h5>
<article class="border-demos mask-demos">
<div style="-webkit-mask: var(--mask-edge-scoop-top)">Top</div>
<div style="-webkit-mask: var(--mask-edge-scoop-right)">Right</div>
<div style="-webkit-mask: var(--mask-edge-scoop-bottom)">Bottom</div>
<div style="-webkit-mask: var(--mask-edge-scoop-left)">Left</div>
<div style="-webkit-mask: var(--mask-edge-scoop-vertical)">Vertical</div>
<div style="-webkit-mask: var(--mask-edge-scoop-horizontal)">Horizontal</div>
</article>
<pre class=" language-css"><code class=" language-css"><span class="token selector">--mask-edge-scoop-</span><span class="token punctuation">{</span>top<span class="token punctuation">,</span>right<span class="token punctuation">,</span>bottom<span class="token punctuation">,</span>left<span class="token punctuation">,</span>vertical<span class="token punctuation">,</span>horizontal<span class="token punctuation">}</span>
<span class="token selector">.mask-usage</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-edge-scoop-top<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<br>
<h5>Scalloped</h5>
<article class="border-demos mask-demos">
<div style="-webkit-mask: var(--mask-edge-scalloped-top)">Top</div>
<div style="-webkit-mask: var(--mask-edge-scalloped-right)">Right</div>
<div style="-webkit-mask: var(--mask-edge-scalloped-bottom)">Bottom</div>
<div style="-webkit-mask: var(--mask-edge-scalloped-left)">Left</div>
<div style="-webkit-mask: var(--mask-edge-scalloped-vertical)">Vertical</div>
<div style="-webkit-mask: var(--mask-edge-scalloped-horizontal)">Horizontal</div>
<div style="-webkit-mask: var(--mask-edge-scalloped)">All</div>
</article>
<pre class=" language-css"><code class=" language-css"><span class="token selector">--mask-edge-scalloped-</span><span class="token punctuation">{</span>edges<span class="token punctuation">,</span>top<span class="token punctuation">,</span>right<span class="token punctuation">,</span>bottom<span class="token punctuation">,</span>left<span class="token punctuation">,</span>vertical<span class="token punctuation">,</span>horizontal<span class="token punctuation">}</span>
<span class="token selector">.mask-usage</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-edge-scalloped-edges<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<br>
<h5>Drips</h5>
<article class="border-demos mask-demos">
<div style="-webkit-mask: var(--mask-edge-drip-top)">Top</div>
<div style="-webkit-mask: var(--mask-edge-drip-right)">Right</div>
<div style="-webkit-mask: var(--mask-edge-drip-bottom)">Bottom</div>
<div style="-webkit-mask: var(--mask-edge-drip-left)">Left</div>
<div style="-webkit-mask: var(--mask-edge-drip-vertical)">Vertical</div>
<div style="-webkit-mask: var(--mask-edge-drip-horizontal)">Horizontal</div>
</article>
<pre class=" language-css"><code class=" language-css"><span class="token selector">--mask-edge-drip-</span><span class="token punctuation">{</span>top<span class="token punctuation">,</span>right<span class="token punctuation">,</span>bottom<span class="token punctuation">,</span>left<span class="token punctuation">,</span>vertical<span class="token punctuation">,</span>horizontal<span class="token punctuation">}</span>
<span class="token selector">.mask-usage</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-edge-drip-bottom<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<br>
<h5>Zig-Zag</h5>
<article class="border-demos mask-demos">
<div style="-webkit-mask: var(--mask-edge-zig-zag-top)">Top</div>
<div style="-webkit-mask: var(--mask-edge-zig-zag-right)">Right</div>
<div style="-webkit-mask: var(--mask-edge-zig-zag-bottom)">Bottom</div>
<div style="-webkit-mask: var(--mask-edge-zig-zag-left)">Left</div>
<div style="-webkit-mask: var(--mask-edge-zig-zag-vertical)">Vertical</div>
<div style="-webkit-mask: var(--mask-edge-zig-zag-horizontal)">Horizontal</div>
</article>
<pre class=" language-css"><code class=" language-css"><span class="token selector">--mask-edge-zig-zag-</span><span class="token punctuation">{</span>top<span class="token punctuation">,</span>right<span class="token punctuation">,</span>bottom<span class="token punctuation">,</span>left<span class="token punctuation">,</span>vertical<span class="token punctuation">,</span>horizontal<span class="token punctuation">}</span>
<span class="token selector">.mask-usage</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-edge-zig-zag-bottom<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<div class="just-for-gap">
<header>
<h3>Mask Corner Cuts</h3>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* NPM */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/masks/corner-cuts"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/src/props.masks.corner-cuts.css"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"open-props/masks.corner-cuts.min.css"</span><span class="token punctuation">;</span></span>
<span class="token comment">/* CDN */</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"https://unpkg.com/open-props/masks.corner-cuts.min.css"</span><span class="token punctuation">;</span></span></code></pre>
</header>
<h5>Circles</h5>
<div class="block-wrap">
<article class="border-demos mask-demos">
<div style="-webkit-mask: var(--mask-corner-cut-circles-1)">1</div>
<div style="-webkit-mask: var(--mask-corner-cut-circles-2)">2</div>
<div style="-webkit-mask: var(--mask-corner-cut-circles-3)">3</div>
</article>
<pre class=" language-css"><code class=" language-css"><span class="token selector">--mask-corner-cut-circles-</span><span class="token punctuation">{</span>1<span class="token punctuation">,</span>2<span class="token punctuation">,</span>3<span class="token punctuation">}</span>
<span class="token selector">.mask-usage</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-corner-cut-circles-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<br>
<h5>Squares</h5>
<div class="block-wrap">
<article class="border-demos mask-demos">
<div style="-webkit-mask: var(--mask-corner-cut-squares-1)">1</div>
<div style="-webkit-mask: var(--mask-corner-cut-squares-2)">2</div>
<div style="-webkit-mask: var(--mask-corner-cut-squares-3)">3</div>
</article>
<pre class=" language-css"><code class=" language-css"><span class="token selector">--mask-corner-cut-squares-</span><span class="token punctuation">{</span>1<span class="token punctuation">,</span>2<span class="token punctuation">,</span>3<span class="token punctuation">}</span>
<span class="token selector">.mask-usage</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-corner-cut-squares-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<h5>Angles</h5>
<div class="block-wrap">
<article class="border-demos mask-demos">
<div style="-webkit-mask: var(--mask-corner-cut-angles-1)">1</div>
<div style="-webkit-mask: var(--mask-corner-cut-angles-2)">2</div>
<div style="-webkit-mask: var(--mask-corner-cut-angles-3)">3</div>
</article>
<pre class=" language-css"><code class=" language-css"><span class="token selector">--mask-corner-cut-angles-</span><span class="token punctuation">{</span>1<span class="token punctuation">,</span>2<span class="token punctuation">,</span>3<span class="token punctuation">}</span>
<span class="token selector">.mask-usage</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-mask</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--mask-corner-cut-angles-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
</div>
</section>
<ul id="scroll-nav" class="module-list place-full">
<li><a href="#colors" class="">Colors</a></li>
<li><a href="#gradients" class="">Gradients</a></li>
<li><a href="#shadows" class="">Shadows</a></li>
<li><a href="#aspect-ratio" class="">Aspect Ratios</a></li>
<li><a href="#typography" class="">Typography</a></li>
<li><a href="#easing" class="">Easing</a></li>
<li><a href="#animations" class="">Animations</a></li>
<li><a href="#sizes">Sizes</a></li>
<li><a href="#borders">Borders</a></li>
<li><a href="#z-index">Z-Index</a></li>
<li><a href="#media-queries">Media Queries</a></li>
<li><a href="#masks">Masks</a></li>
</ul>
<footer class="place-full">
<dl>
<div>
<dt>Getting Started</dt>
<dd><a href="#about">Features</a></dd>
<dd><a href="#overview">Overview</a></dd>
<dd><a href="#cdn">CDN</a></dd>
</div>
<div>
<dt>Tooling</dt>
<dd><a href="https://postcss.org/">PostCSS</a></dd>
<dd class="prevent-justify-item-wrap"><a href="https://github.com/GoogleChromeLabs/postcss-jit-props">JIT Props</a></dd>
<dd><a href="https://www.npmjs.com/package/open-props">NPM</a></dd>
</div>
<div>
<dt>Connect</dt>
<dd><a href="https://github.com/argyleink/open-props/">GitHub</a></dd>
<dd><a href="https://discord.gg/AqA4fU886r">Discord</a></dd>
<dd><a href="https://twitter.com/argyleink">Twitter</a></dd>
</div>
</dl>
<a href="https://github.com/argyleink/open-props" title="Source on Github">
<svg class="github-icon" width="24" height="24" viewBox="0 0 16 16">
<path fill-rule="evenodd" 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"></path>
</svg>
</a>
</footer>
<link rel="stylesheet" href="../../dist/main.css">
<script src="../../dist/bundle.js"></script>
</body></html>