JSPM – open-props@1.4.11

Package Exports

open-props
open-props/animations
open-props/aspects
open-props/blue
open-props/blue-hsl
open-props/borders
open-props/buttons
open-props/colors
open-props/colors-hsl
open-props/cyan
open-props/cyan-hsl
open-props/design-tokens
open-props/easings
open-props/fonts
open-props/gradients
open-props/grape
open-props/grape-hsl
open-props/gray
open-props/gray-hsl
open-props/green
open-props/green-hsl
open-props/indigo
open-props/indigo-hsl
open-props/json
open-props/lime
open-props/lime-hsl
open-props/masks/corner-cuts
open-props/masks/edges
open-props/media
open-props/normalize
open-props/orange
open-props/orange-hsl
open-props/pink
open-props/pink-hsl
open-props/postcss/normalize
open-props/postcss/style
open-props/red
open-props/red-hsl
open-props/shadow/animations
open-props/shadow/aspects
open-props/shadow/blue
open-props/shadow/blue-hsl
open-props/shadow/borders
open-props/shadow/colors
open-props/shadow/colors-hsl
open-props/shadow/cyan
open-props/shadow/cyan-hsl
open-props/shadow/easings
open-props/shadow/fonts
open-props/shadow/gradients
open-props/shadow/grape
open-props/shadow/grape-hsl
open-props/shadow/gray
open-props/shadow/gray-hsl
open-props/shadow/green
open-props/shadow/green-hsl
open-props/shadow/indigo
open-props/shadow/indigo-hsl
open-props/shadow/lime
open-props/shadow/lime-hsl
open-props/shadow/normalize
open-props/shadow/orange
open-props/shadow/orange-hsl
open-props/shadow/pink
open-props/shadow/pink-hsl
open-props/shadow/red
open-props/shadow/red-hsl
open-props/shadow/shadows
open-props/shadow/sizes
open-props/shadow/style
open-props/shadow/teal
open-props/shadow/teal-hsl
open-props/shadow/violet
open-props/shadow/violet-hsl
open-props/shadow/yellow
open-props/shadow/yellow-hsl
open-props/shadow/zindex
open-props/shadows
open-props/sizes
open-props/src
open-props/src/animations
open-props/src/aspects
open-props/src/borders
open-props/src/colors
open-props/src/colors-hsl
open-props/src/easing
open-props/src/fonts
open-props/src/gradients
open-props/src/shadows
open-props/src/sizes
open-props/src/svg
open-props/src/zindex
open-props/style
open-props/teal
open-props/teal-hsl
open-props/tokens
open-props/violet
open-props/violet-hsl
open-props/yellow
open-props/yellow-hsl
open-props/zindex

Readme

Open Props Logo

Open Source CSS Variables

colors gradients shadows aspect ratios typography
easings animations sizes borders z-indexes media-queries

Discord

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 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