use-theme-editor

<!DOCTYPE html>  <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">  <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>  </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"></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"></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"></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-