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
https://unpkg.com/open-props/open-props.style-dictionary-tokens.json - Style Dictionary Tokens

Bookmarklet

javascript: (() => {
  const href = "https://unpkg.com/open-props";
  document.head.append(Object.assign(document.createElement("link"),{rel:"stylesheet",href}));
})();

CLI

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 :host as 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

Testing

npm run build && npm run bundle
npm test

Open Props

Open Props