Supercharged

CSS variables.

v1.1.3 MIT

        @import "https://unpkg.com/open-props";
        

          .card {
            border-radius: var(--radius-2);
            padding: var(--size-fluid-3);
            box-shadow: var(--shadow-2);

            &:hover {
              box-shadow: var(--shadow-3);
            }

            @media (--motionOK) {
              animation: var(--animation-fade-in);
            }
          }
        

Why Use Open Props?

It's non-prescriptive.

Design Consistently
Incidentally harmonious.
Predictable
Thanks to consistent naming conventions.
Incrementally Adoptable
Grab all the props, props as JS, or only what you need.
Customizable
Map the props from JS or customize builds from the command line.

Overview

File sizes and links to source:

File Sizes

The following sizes are for the minified files and after Brotli compression.

Library bundles
3.4kB
open-props.min.css
351 props
1.3kB
Individual PropPacks ™
0.48kB
0.1kB
0.25kB
0.7kB
0.2kB
0.4kB
1.0kB
0.38kB
0.26kB
0.2kB
0.1kB
0.05kB
Coming Soon?!
??
icons.css WIP
??
svg.css WIP
??
patterns.css WIP
??
at-property.css WIP
??
shapes.css WIP
??
layouts.css WIP
??
clips.css WIP
??
masks.css WIP
??
variable-fonts.css WIP
??
lists.css WIP
??
counters.css WIP
??
utilities.css WIP

This site
is built
with Open Props.


          @import "https://unpkg.com/open-props";
        

          .just-for-gap {
            display: grid;
            gap: var(--size-4);
          }
        

          blockquote {
            --_accent-1: var(--lime-5);
            --_accent-2: var(--lime-4);
            --_bg: var(--surface-2);
            --_ink: var(--text-1);

            color: var(--_ink);
            border-color: var(--_accent-2);
            background-color: var(--_bg);
            justify-self: flex-start;
          }
        

          .gradient-swatch {
            border-radius: var(--radius-2);
            aspect-ratio: var(--ratio-landscape);
          }
        

          pre > code {
            box-shadow: var(--shadow-6);
            font-family: var(--font-mono);
            font-size: var(--font-size-2);
          }
        

          .yellow-badge {
            padding-inline: var(--size-1);
            border-width: var(--border-size-1);
            border-color: var(--yellow-6);
            color: var(--yellow-2);
            border-radius: var(--radius-round);

            @nest [data-theme="light"] & {
              border-color: var(--orange-2);
              color: var(--orange-6);
            }
          }
        

          .block-wrap {
            display: flex;
            flex-wrap: wrap;
            flex-basis: var(--size-content-2);
            gap: var(--size-5) var(--size-8);
            align-items: flex-start;
          }
        

          .demo-gallery figure {
            border-radius: var(--radius-3);
            box-shadow: var(--shadow-4);
          }
        

          .op-icon-p {
            stroke: var(--indigo-2);
            @nest a:hover & { stroke: var(--indigo-1); }

            @nest [data-theme="light"] & {
              stroke: var(--indigo-9);
              @nest a:hover & { stroke: var(--indigo-8); }
            }
          }
        

          .checkmark-list {
            align-self: flex-start;
            display: grid;
            gap: var(--size-2);
            font-size: var(--font-size-fluid-1);
            font-weight: var(--font-weight-2);
            padding-inline-start: 0;
          }
        

Getting Started

Pick from CSS, PostCSS, JSON, or props as Javascript.

Need help?
Ask a question on Discord!

CDN

No installation required. View all.

CSS
Bundles

                    /* index.css */
                    @import "https://unpkg.com/open-props";
                    @import "https://unpkg.com/open-props/normalize.min.css";
                  

                    <!-- index.html -->
                    <link rel="stylesheet" href="https://unpkg.com/open-props"/>
                    <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
                  

                    // index.js
                    import 'https://unpkg.com/open-props';
                    import 'https://unpkg.com/open-props/normalize.min.css';
                  
Individual packs

                  /* index.css */
                  @import "https://unpkg.com/open-props/colors.min.css";
                  @import "https://unpkg.com/open-props/orange.min.css";
                  @import "https://unpkg.com/open-props/easings.min.css";
                  @import "https://unpkg.com/open-props/sizes.min.css";
                  /* etc */
                
PostCSS
Entry Points

                  /* index.pcss */
                  @import "https://unpkg.com/open-props/src/index.css";
                  @import "https://unpkg.com/open-props/src/extra/normalize.css";
                
Individual packs

                  /* index.pcss */
                  @import "https://unpkg.com/open-props/src/props.colors.css";
                  @import "https://unpkg.com/open-props/src/props.orange.css";
                  @import "https://unpkg.com/open-props/src/props.easing.css";
                  @import "https://unpkg.com/open-props/src/props.sizes.css";
                  /* etc */
                
Design Tokens
as JSON

Follows the design tokens spec.

Note: Not all props can be represented as a design token.


                    import "https://unpkg.com/open-props/open-props.tokens.json"
                    

NPM

npm install open-props
CSS
Bundles

                    /* index.css */
                    @import "open-props/style";
                    @import "open-props/normalize";
                  

                    // index.js
                    import 'open-props/style';
                    import 'open-props/normalize';
                  
Individual packs

                    /* index.pcss */
                    @import "open-props/sizes";
                    @import "open-props/colors";
                    @import "open-props/orange";
                    @import "open-props/gradients";
                    /* etc */
                  

                    // index.js
                    import 'open-props/sizes';
                    import 'open-props/colors';
                    import 'open-props/orange';
                    import 'open-props/gradients';
                    /* etc */
                  
PostCSS
Entry points

                    /* index.pcss */
                    @import "open-props/postcss/style";
                    @import "open-props/postcss/normalize";
                  
Design Tokens

                  /* 3 ways to import */
                  import 'open-props/tokens'
                  import 'open-props/json'
                  import 'open-props/design-tokens'
                  
PostCSS JIT Props

Only ship the props you use. Learn more.

PostCSS
npm install postcss-jit-props
Props as Javascript

                    // postcss.config.js
                    const postcssJitProps = require('postcss-jit-props');
                    const OpenProps = require('open-props');
                    
                    module.exports = {
                      plugins: [
                        postcssJitProps(OpenProps),
                      ]
                    }
                  
Props from CSS

                    // postcss.config.js
                    const postcssJitProps = require('postcss-jit-props');
                    const OpenProps = require('open-props');
                    
                    module.exports = {
                      plugins: [
                        postcssJitProps({
                          files: [
                            require('open-props/open-props.min.css'),
                          ]
                        }),
                      ]
                    }
                  

CLI

git clone https://github.com/argyleink/open-props.git
Customize your build
Customize Bundles


                    npm run gen:nowhere               // bundle without `:where()`
                    npm run gen:prefixed              // each prop prefixed with `op`, like `--op-font-size-1`
                    node _create-props.js 'my-prefix' // each prop with your own prefix
                  
Build Locally

                    npm run gen:op  // runs through `src/` js files and creates the PostCSS files in `src/`
                    npm run bundle  // creates all the various minified bundles of props
                    npm run lib:js  // builds the JS modules for NPM
                  

Autocomplete

VScode
  1. VScode has an intellisense feature which you can tap into, by passing the path to the node_modules folder when open-props is installed
  2. In your VScode environment, navigate to the extensions marketplace, and install this CSS Var Complete extension
  3. When the extension is installed, you'll have to add open-prop's css file path to a .vscode/settings.jsonfile. Take a look at an illustration below
  4.  
                    // .vscode/settings.json file 
                    { 
                      "cssvar.files": [ 
                        "./node_modules/open-props/open-props.min.css", 
                        // if you have an alternative path to where your styles are located 
                        // you can add it in this array of files 
                        "assets/styles/variables.css" 
                      ],
    
                      // you can also add support for autocomplete in other file extensions 
                      "cssvar.extensions": [
                        "css", "html", "jsx", "tsx"
                      ]
                    } 
                  

Colors

Open Props includes Open Color (Version 1.9.1), an open-source color scheme optimized for UI development.

Open the color picker in your browser dev tools, set the swatches to the page's custom properties, and enjoy picking from the set!
The Props

              --gray-{0-9}
              --red-{0-9}
              --pink-{0-9}
              --grape-{0-9}
              --violet-{0-9}
              --indigo-{0-9}
              --blue-{0-9}
              --cyan-{0-9}
              --teal-{0-9}
              --green-{0-9}
              --lime-{0-9}
              --yellow-{0-9}
              --orange-{0-9}
            
Button Sample

            button.blue {
              color: var(--blue-6);
              background-color: var(--blue-0);
              border: 1px solid var(--blue-1);
              text-shadow: 0 1px 0 var(--blue-2);

              &:hover {
                background-color: var(--blue-1);
              }
            }
          
Light & Dark Example

            html {
              --text-1: var(--gray-9);
              --text-2: var(--gray-7);

              @media (--OSdark) {
                --text-1: var(--gray-1);
                --text-2: var(--gray-2);
              }
            }
          

Gray

Red

Pink

Grape

Violet

Indigo

Blue

Cyan

Teal

Green

Lime

Yellow

Orange

Color Theming 101

1) Color theming

Low numbers are light and high numbers are dark. See how the Open Props normalize.css implements light and dark modes.

See it live: auto, light, dark, dim and grape themes demonstrated with Open Props!

Light

                html {
                  --brand-light: var(--orange-6);

                  --text1-light: var(--gray-8);
                  --text2-light: var(--gray-7);

                  --surface1-light: var(--gray-2);
                  --surface2-light: var(--gray-0);
                  --surface3-light: var(--gray-1);
                  --surface4-light: var(--gray-3);
                }
              
Dark

                html {
                  --brand-dark: var(--orange-3);

                  --text1-dark: var(--gray-1);
                  --text2-dark: var(--gray-3);

                  --surface1-dark: var(--gray-9);
                  --surface2-dark: var(--gray-8);
                  --surface3-dark: var(--gray-7);
                  --surface4-dark: var(--gray-6);
                }
              
Dim

                html {
                  --brand-dim: var(--orange-4);

                  --text1-dim: var(--gray-3);
                  --text2-dim: var(--gray-4);

                  --surface1-dim: var(--gray-8);
                  --surface2-dim: var(--gray-7);
                  --surface3-dim: var(--gray-6);
                  --surface4-dim: var(--gray-5);
                }
              
Grape

                html {
                  --brand-grape: var(--grape-5);

                  --text1-grape: var(--grape-9);
                  --text2-grape: var(--grape-7);

                  --surface1-grape: var(--grape-0);
                  --surface2-grape: var(--grape-1);
                  --surface3-grape: var(--grape-2);
                  --surface4-grape: var(--grape-3);
                }
              

2) Creating adaptive color schemes

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.

No Preference (Light)

                :root {
                  --brand: var(--brand-light);

                  --text1: var(--text1-light);
                  --text2: var(--text2-light);

                  --surface1: var(--surface1-light);
                  --surface2: var(--surface2-light);
                  --surface3: var(--surface3-light);
                  --surface4: var(--surface4-light);
                }
              
Prefers Dark

                @media (prefers-color-scheme: dark) {
                  :root {
                    --brand: var(--brand-dark);

                    --text1: var(--text1-dark);
                    --text2: var(--text2-dark);

                    --surface1: var(--surface1-dark);
                    --surface2: var(--surface2-dark);
                    --surface3: var(--surface3-dark);
                    --surface4: var(--surface4-dark);
                  }
                }
              
Prefers Dim

                @media (prefers-contrast: less) {
                  :root {
                    --brand: var(--brand-dim);

                    --text1: var(--text1-dim);
                    --text2: var(--text2-dim);

                    --surface1: var(--surface1-dim);
                    --surface2: var(--surface2-dim);
                    --surface3: var(--surface3-dim);
                    --surface4: var(--surface4-dim);
                  }
                }
              
Prefers Grape

                [color-scheme="grape"] {
                  --brand: var(--brand-grape);

                  --text1: var(--text1-grape);
                  --text2: var(--text2-grape);

                  --surface1: var(--surface1-grape);
                  --surface2: var(--surface2-grape);
                  --surface3: var(--surface3-grape);
                  --surface4: var(--surface4-grape);
                }
              

3) Using the aliases

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.

Page Styles Using Themes

                html {
                  background-color: var(--surface1);
                  color: var(--text1);
                  accent-color: var(--brand);
                }
              
Utilities

                .surface1 {
                  background-color: var(--surface1);
                  color: var(--text2);
                }

                .surface2 {
                  background-color: var(--surface2);
                  color: var(--text2);
                }

                .surface3 {
                  background-color: var(--surface3);
                  color: var(--text1);
                }

                .surface4 {
                  background-color: var(--surface4);
                  color: var(--text1);
                }
              
Typography

                h1,h2,h3,h4,p,dt {
                  color: var(--text1);
                }

                h5,h6,small,dd {
                  color: var(--text2); 
                }
              

Gradients

Open Props includes 30 handcrafted gradients. Linear gradient direction can be changed with a custom property mixin.

Don't miss the noise props inspired by grainy-gradients.

The Props

              --gradient-{0-30}
            
Hero Header Sample

            header {
              --op-gradient-direction: to top left;
              background-image: var(--gradient-5);

              @media (--OSdark) {
                --op-gradient-direction: to bottom right;
                background-image: var(--gradient-15);
              }
            }
          
Gradient Text Sample

            .gradient-text {
              background: var(--gradient-1);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          

Gradients

Noise


                --noise-{1-5}
                --noise-filter-{1-5}
              

              .noise-noise-noise {
                /* stack grain with a gradient */
                background-image: var(--gradient-3), var(--noise-3);
                /* force colors and noise to collide */
                filter: var(--noise-filter-3);
                /* fit noise image to element */
                background-size: cover;
              }
            

Noisy Examples

Shadows

Inner and outer shadows that adapt to light and dark modes.

The Props

              --shadow-{1-6}
              --inner-shadow-{0-4}
            
Card Sample

            .card {
              box-shadow: var(--shadow-1);

              &:hover {
                box-shadow: var(--shadow-3);
              }
            }
          

Aspect Ratios

Vars Sample

              --ratio-box: 1;
              --ratio-landscape: 4/3;
              --ratio-portrait: 3/4;
              --ratio-widescreen: 16/9; 
              --ratio-ultrawide: 18/5;
              --ratio-golden: 1.6180/1; 
            
Usage Sample

            .video-thumbnail {
              block-size: 480px;
              aspect-ratio: var(--ratio-widescreen);
            }
          
box
landscape
portrait
widescreen
golden ratio
ultrawide

Typography

Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.

The Props

              --font-size-{00-8}
              --font-size-fluid-{0-3}
              --font-weight-{1-9}
              --font-letterspacing-{0-7}
              --font-lineheight-{00-5}
              
            
Usage Sample

              .hero {
                line-height: var(--font-lineheight-1);
                font-size: var(--font-size-fluid-3);
                font-weight: var(--font-weight-9);
                font-family: var(--font-sans);
              }
          

Font Families


          --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
          --font-serif: ui-serif, serif;
          --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
        
--font-sans
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^&
--font-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^&
--font-mono
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890+=!@#%$%^&

Font Weights


              --font-weight-1: 100;
              --font-weight-2: 200;
              --font-weight-3: 300;
              --font-weight-4: 400;
              --font-weight-5: 500;
              --font-weight-6: 600;
              --font-weight-7: 700;
              --font-weight-8: 800;
              --font-weight-9: 900;
            
Aa

Letter Spacing


              --font-letterspacing-0: -.05em;
              --font-letterspacing-1: .025em;
              --font-letterspacing-2: .050em;
              --font-letterspacing-3: .075em;
              --font-letterspacing-4: .150em;
              --font-letterspacing-5: .500em;
              --font-letterspacing-6: .750em;
              --font-letterspacing-7: 1em;
            
Letter Spacing

Line Height


              --font-lineheight-00: .95;
              --font-lineheight-0: 1.1;
              --font-lineheight-1: 1.25;
              --font-lineheight-2: 1.375;
              --font-lineheight-3: 1.5;
              --font-lineheight-4: 1.75;
              --font-lineheight-5: 2;
            
Sample paragraph content to provide a preview for OP's line heights

Font Sizes


          --font-size-00: .5rem;
          --font-size-0: .75rem;
          --font-size-1: 1rem;
          --font-size-2: 1.1rem;
          --font-size-3: 1.25rem;
          --font-size-4: 1.5rem;
          --font-size-5: 2rem;
          --font-size-6: 2.5rem;
          --font-size-7: 3rem;
          --font-size-8: 3.5rem;
        
var(--font-size-00) Almost before you knew it, we'd touched ground. var(--font-size-0) Almost before you knew it, we'd touched ground. var(--font-size-1) Almost before you knew it, we'd touched ground. var(--font-size-2) Almost before you knew it, we'd touched ground. var(--font-size-3) Almost before you knew it, we'd touched ground. var(--font-size-4) Almost before you knew it, we'd touched ground. var(--font-size-5) Almost before you knew it, we'd touched ground. var(--font-size-6) Almost before you knew it, we'd touched ground. var(--font-size-7) Almost before you knew it, we'd touched ground. var(--font-size-8) Almost before you knew it, we'd touched ground.

Fluid Font Sizes


          --font-size-fluid-0: clamp(.75rem, 1.5vw, 1rem);
          --font-size-fluid-1: clamp(1rem, 2vw, 1.5rem);
          --font-size-fluid-2: clamp(1.5rem, 3vw, 2.5rem);
          --font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);
        
var(--font-size-fluid-00) Almost before you knew it, we'd touched ground. var(--font-size-fluid-1) Almost before you knew it, we'd touched ground. var(--font-size-fluid-2) Almost before you knew it, we'd touched ground. var(--font-size-fluid-3) Almost before you knew it, we'd touched ground.

Easing

Five strengths for the classic ease, ease-out, ease-in, and ease-in-out timing functions. Plus some extra easings for mock elasticity and physics!

The Props

              --ease-{1-5}
              --ease-in-{1-5}
              --ease-out-{1-5}
              --ease-inout-{1-5}
              --ease-elastic-{1-5}
              --ease-squish-{1-5}
              --ease-step-{1-5}
            
Usage Sample

            .slight-ease {
              animation: fade-in 300ms var(--ease-1);
            }

            .dramatic-ease {
              animation: fade-in 1s var(--ease-5);
            }
          
Ease
ease-1
ease-2
ease-3
ease-4
ease-5
Ease In
ease-in-1
ease-in-2
ease-in-3
ease-in-4
ease-in-5
Ease Out
ease-out-1
ease-out-2
ease-out-3
ease-out-4
ease-out-5
Ease In Out
ease-in-out-1
ease-in-out-2
ease-in-out-3
ease-in-out-4
ease-in-out-5
Ease Elastic
ease-elastic-1
ease-elastic-2
ease-elastic-3
ease-elastic-4
ease-elastic-5
Ease Squish
ease-squish-1
ease-squish-2
ease-squish-3
ease-squish-4
ease-squish-5
Ease Steps
ease-step-1
ease-step-2
ease-step-3
ease-step-4
ease-step-5

Animations

Premade keyframe effects allow you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations.

The Props

              --animation-fade-{in,out}
              --animation-shake-{x,y}

              --animation-slide-out-{up,down,left,right}
              --animation-slide-in-{up,down,left,right}

              --animation-spin
              --animation-ping
              --animation-blink
              --animation-float
              --animation-bounce
              --animation-pulse
            
Usage Sample

            .loaded {
              animation: var(--animation-fade-in) forwards;
            }

            .actionsheet {
              animation: var(--animation-slide-out-down) forwards;

              &.open {
                animation: var(--animation-slide-in-up) forwards;  
              }
            }

            .alert {
              animation: var(--animation-blink);
            }
          
Samples
Fade In
Fade Out
Scale Up
Scale Down
Slide Out Up
Slide Out Down
Slide Out Right
Slide Out Left
Slide In Up
Slide In Down
Slide In Right
Slide In Left
Spin
Ping
Blink
Float
Bounce
Pulse
Shake X
Shake Y

Combine 'em!

Slide Fade

                .slide-fade {
                  animation: 
                    var(--animation-fade-out) forwards,
                    var(--animation-slide-out-down);
                  animation-timing-function: var(--ease-squish-3);
                  animation-duration: 1s;
                }
              
Shake In

                .shake-in {
                  animation: 
                    var(--animation-shake-y),
                    var(--animation-fade-in),
                    var(--animation-slide-in-left);
                }
              
Push Out

                .push-out {
                  animation: 
                    var(--animation-scale-down),
                    var(--animation-fade-out);
                  animation-timing-function: var(--ease-squish-4);
                }
              

Sizes

No px here, relative units all the way. 0s are unsafe but common negative values, while 1-N are safe.

The Props

            --size-{000-15}
            --size-fluid-{1-10}
            --size-content-{1-3}
            --size-header-{1-3}
          
Relative Sizes

              --size-000: -.5rem;
              --size-00: -.25rem;
              --size-1: .25rem;
              --size-2: .5rem;
              --size-3: 1rem;
              --size-4: 1.25rem;
              --size-5: 1.5rem;
              --size-6: 1.75rem;
              --size-7: 2rem;
              --size-8: 3rem;
              --size-9: 4rem;
              --size-10: 5rem;
              --size-11: 7.5rem;
              --size-12: 10rem;
              --size-13: 15rem;
              --size-14: 20rem;
              --size-15: 30rem;
            
Usage Sample

            article { 
              display: grid;
              gap: var(--size-3);
            }

            li { 
              padding-inline-start: var(--size-2);
            }

            .icon {
              inline-size: var(--size-5);
              block-size: var(--size-5);
            }
          
Fluid Sizes

              --size-fluid-1: clamp(.5rem, 1vw, 1rem);
              --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
              --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
              --size-fluid-4: clamp(2rem, 4vw, 3rem);
              --size-fluid-5: clamp(4rem, 5vw, 5rem);
              --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
              --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
              --size-fluid-8: clamp(10rem, 20vw, 15rem);
              --size-fluid-9: clamp(15rem, 30vw, 20rem);
              --size-fluid-10: clamp(20rem, 40vw, 30rem);
            
Usage Sample

            body { 
              padding: var(--size-fluid-3);
            }

            hr { 
              margin-block: var(--size-fluid-5);
            }
          
Reading Content Sizes

              --size-content-1: 20ch;
              --size-content-2: 45ch;
              --size-content-3: 60ch;
            
Usage Sample

            p { 
              max-inline-size: var(--size-content-3);
            }

            aside { 
              max-inline-size: var(--size-content-2);
            }
          

Carrot cake gummi bears sweet caramels cotton candy topping.

Carrot cake gummi bears sweet caramels cotton candy topping. Jelly candy apple pie gingerbread tootsie roll chupa chups.

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.

Headline Content Sizes

              --size-header-1: 20ch;
              --size-header-2: 25ch;
              --size-header-3: 35ch;
            
Usage Sample

            h1 { 
              max-inline-size: var(--size-header-2);
            }

            small { 
              max-inline-size: var(--size-header-1);
            }
          
Carrot cake gummi bears sweet caramel candy.
Carrot cake gummi bears sweet caramels cotton candy topping.
Carrot cake gummi bears sweet caramels cotton candy topping. Jelly candy apple pie gingerbread tootsie roll chupa chups.

Borders

Sizes, corner radii, a circle helper, conditional radii, and some blobs.

Vars Sample

              --border-size-{1-5}
              --radius-{1-6}
              --radius-round
              --radius-blob-{1-5}
              --radius-conditional-{1-6}
            
Usage Sample

            .card {
              /* no radius when fullscreen */
              border-radius: var(--radius-conditional-3);
              border: var(--border-size-1) solid var(--gray-1);
            }

            .circle {
              inline-size: var(--size-5);
              aspect-ratio: var(--ratio-box);
              border-radius: var(--radius-round);
            }
          

Border Size

1
2
3
4
5

Border Radius

1
2
3
4
5
round

Blobs

1
2
3
4
5

Z Index

All the z-index values you could possibly need!

The Props

              --layer-{1-5}
              --layer-important: 2147483647;
            
Usage Sample

            figure {
              position: relative;

              & figcaption {
                position: absolute;
                z-index: var(--layer-1);
                inset-inline: 0;
                inset-block: auto 0;
              }
            }

            .desperate-measures {
              position: fixed;
              z-index: var(--layer-important);
            }
          

Media Queries

Currently one step ahead of the CSS spec, Open Props offers named media queries with the @custom-media syntax. Available only with this PostCSS plugin, for now 😈

xxs
240px
xs
360px
sm
480px
md
768px
lg
1024px
xl
1440px
xxl
1920px
The Props

              --portrait
              --landscape

              --{xxs,xs,sm,md,lg,xl,xxl}-only
              --{xxs,xs,sm,md,lg,xl,xxl}-n-above
              --{xxs,xs,sm,md,lg,xl,xxl}-n-below
              --{xxs,xs,sm,md,lg}-phone
            
Viewport Vars Sample

              @custom-media --portrait      (orientation: portrait);
              @custom-media --landscape     (orientation: landscape);

              @custom-media --md-only       (480px <= width <= 768px);
              @custom-media --md-n-above    (width >= 768px);
              @custom-media --md-n-below    (width <= 768px);
              @custom-media --md-phone      (--md-only) and (--portrait);

              @custom-media --xxl-only      (1440px <= width <= 1920px);
              @custom-media --xxl-n-above   (width >= 1920px);
              @custom-media --xxl-n-below   (width <= 1920px);
            
Capability Vars

              @custom-media --touch    (hover: none) and (pointer: coarse);
              @custom-media --stylus   (hover: none) and (pointer: fine);
              @custom-media --pointer  (hover) and (pointer: coarse);
              @custom-media --mouse    (hover) and (pointer: fine);

              @custom-media --HDcolor  (dynamic-range: high);
            
Preference Vars

              @custom-media --OSdark        (prefers-color-scheme: dark);
              @custom-media --OSlight       (prefers-color-scheme: light);

              @custom-media --motionOK      (prefers-reduced-motion: no-preference);
              @custom-media --motionNotOK   (prefers-reduced-motion: reduce);
            
Preference Vars Extended

              @custom-media --highContrast  (prefers-contrast: high);
              @custom-media --lowContrast   (prefers-contrast: low);

              @custom-media --opacityOK     (prefers-reduced-transparency: no-preference);
              @custom-media --opacityNotOK  (prefers-reduced-transparency: reduce);

              @custom-media --useDataOK     (prefers-reduced-data: no-preference);
              @custom-media --useDataNotOK  (prefers-reduced-data: reduce);
            
Light / Dark Usage Samples

            html {
              background: white;
              color: var(--gray-8);
            }

            @media (--OSdark) {
              html {
                background: var(--gray-9);
                color: var(--gray-1);
              }
            }
          
Reducing Motion Usage Samples

            transform: translateX(100%);

            @media (--motionOK) {
              transition: transform .5s var(--ease-3);
            }