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