Open Props

CSS custom properties to help accelerate adaptive and consistent design.

Open Source CSS Variables

colorsgradientsshadowsaspect ratiostypographyeasingsanimationssizesbordersz-indexesmedia-queries

https://unpkg.com/open-props

https://unpkg.com/open-props/normalize.min.css - Normalize (light + dark) demo

https://unpkg.com/open-props/open-props.tokens.json - Design Tokens

https://unpkg.com/open-props/open-props.figma-tokens.sync.json - Figma Design Tokens

npm run gen:op- runs through src/js files and creates the PostCSS files in src/

npm run gen:nowhere- creates a version of Open Props without the use of :where()

npm run gen:shadowdom- creates a version of Open Props with :hostas the selector scope

npm run gen:prefixed- creates a version of Open Props with each prop prefixed with op, like --op-font-size-1

npm run bundle- creates all the various minified bundles of props

npm run lib:js- builds the JS modules for NPM