open-props
open-props copied to clipboard
CSS custom properties to help accelerate adaptive and consistent design.

Open Source CSS Variables
colors gradients shadows aspect ratios typography
easings animations sizes borders z-indexes media-queries
Need help? 👉 Discord
CDN (browse)
- 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
CLI
npm run gen:op- runs throughsrc/js files and creates the PostCSS files insrc/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 scopenpm run gen:prefixed- creates a version of Open Props with each prop prefixed withop, like--op-font-size-1npm run bundle- creates all the various minified bundles of propsnpm run lib:js- builds the JS modules for NPM