CDN
No installation required.
CSS
index.css
/* the props */
@import "https://unpkg.com/open-props";
/* optional imports that use the props */
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";
/* individual imports */
@import "https://unpkg.com/open-props/indigo.min.css";
@import "https://unpkg.com/open-props/indigo-hsl.min.css";
@import "https://unpkg.com/open-props/easings.min.css";
@import "https://unpkg.com/open-props/animations.min.css";
@import "https://unpkg.com/open-props/sizes.min.css";
@import "https://unpkg.com/open-props/gradients.min.css";
/* see PropPacks for the full list */index.html
<!-- the props -->
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
<!-- optional imports that use the props -->
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/buttons.min.css"/>
<!-- individual imports -->
<link rel="stylesheet" href="https://unpkg.com/open-props/indigo.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/indigo-hsl.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/easings.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/animations.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/sizes.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/gradients.min.css"/>
<!-- see PropPacks for the full list -->index.js
// the props
import 'https://unpkg.com/open-props';
// optional imports that use the props
import 'https://unpkg.com/open-props/normalize.min.css';
import 'https://unpkg.com/open-props/buttons.min.css';
// individual imports
import 'https://unpkg.com/open-props/indigo.min.css';
import 'https://unpkg.com/open-props/indigo-hsl.min.css';
import 'https://unpkg.com/open-props/easings.min.css';
import 'https://unpkg.com/open-props/animations.min.css';
import 'https://unpkg.com/open-props/sizes.min.css';
import 'https://unpkg.com/open-props/gradients.min.css';
// see PropPacks for the full listPostCSS
CSS import examples
/* the props */
@import "https://unpkg.com/open-props/src/index.css";
/* optional imports that use the props */
@import "https://unpkg.com/open-props/src/extra/normalize.css";
@import "https://unpkg.com/open-props/src/extra/buttons.css";
/* individual imports */
@import "https://unpkg.com/open-props/src/indigo.min.css";
@import "https://unpkg.com/open-props/src/indigo-hsl.min.css";
@import "https://unpkg.com/open-props/src/easings.min.css";
@import "https://unpkg.com/open-props/src/animations.min.css";
@import "https://unpkg.com/open-props/src/sizes.min.css";
@import "https://unpkg.com/open-props/src/gradients.min.css";
/* see PropPacks for the full list */Design Tokens
Not all props can be represented as a design token.
Figma Tokens
Community created setup instructions.
https://unpkg.com/open-props/open-props.figma-tokens.json
https://unpkg.com/open-props/open-props.figma-tokens.sync.jsonWeb Components
NPM import examples
/* the props */
@import "open-props/shadow/style";
@import "open-props/open-props.shadow.min.css";
/* individual imports */
@import "open-props/shadow/indigo";
@import "open-props/shadow/indigo-hsl";
@import "open-props/shadow/easings";
@import "open-props/shadow/animations";
@import "open-props/shadow/sizes";
@import "open-props/shadow/gradients";
/* see PropPacks for the full list */CDN import examples
These props are scoped to :host for use in shadow DOM.
/* the props */
@import "https://unpkg.com/open-props/open-props.shadow.min.css";
/* individual imports */
@import "https://unpkg.com/open-props/indigo.shadow.min.css";
@import "https://unpkg.com/open-props/indigo.shadow-hsl.min.css";
@import "https://unpkg.com/open-props/easings.shadow.min.css";
@import "https://unpkg.com/open-props/animations.shadow.min.css";
@import "https://unpkg.com/open-props/sizes.shadow.min.css";
@import "https://unpkg.com/open-props/gradients.shadow.min.css";
/* see PropPacks for the full list */NPM
npm install open-propsCSS
CSS Imports
/* the props */
@import "open-props/style";
/* optional imports that use the props */
@import "open-props/normalize";
@import "open-props/buttons";
/* individual imports */
@import "open-props/indigo";
@import "open-props/easings";
@import "open-props/animations";
@import "open-props/sizes";
@import "open-props/gradients";
/* see PropPacks for the full list */Full Path Imports
/* the props */
@import "open-props/open-props.min.css";
/* optional imports that use the props */
@import "open-props/normalize.min.css";
@import "open-props/buttons.min.css";
/* individual imports */
@import "open-props/indigo.min.css";
@import "open-props/easings.min.css";
@import "open-props/animations.min.css";
@import "open-props/sizes.min.css";
@import "open-props/gradients.min.css";
/* see PropPacks for the full list */PostCSS
CSS Imports
/* the props */
@import "open-props/postcss/style";
/* optional imports that use the props */
@import "open-props/postcss/normalize";
@import "open-props/postcss/buttons";
/* individual imports */
@import "open-props/postcss/indigo";
@import "open-props/postcss/easings";
@import "open-props/postcss/animations";
@import "open-props/postcss/sizes";
@import "open-props/postcss/gradients";
/* see PropPacks for the full list */Full Path CSS Imports
/* the props */
@import "open-props/postcss/index.css";
/* optional imports that use the props */
@import "open-props/postcss/extra/normalize.css";
@import "open-props/postcss/extra/buttons.css";
/* individual imports */
@import "open-props/postcss/indigo.min.css";
@import "open-props/postcss/easings.min.css";
@import "open-props/postcss/animations.min.css";
@import "open-props/postcss/sizes.min.css";
@import "open-props/postcss/gradients.min.css";
/* see PropPacks for the full list */JavaScript
Bundles
// index.js loading JS object
import OpenProps from 'open-props'; // module
import OpenProps from 'open-props/src'; // unbundled ES module
import Colors from 'open-props/src/colors';
// object notation access is special to OpenProps
console.info(OpenProps.size1);
console.info(OpenProps['--size-1']);
console.info(Colors['--indigo-5']);Individual imports
// import just 1 color set object
import {indigo} from 'open-props/src/colors';
// import shadows without prop deps
import {StaticShadows} from 'open-props/src/shadows';
// import the gradients
import Gradients from 'open-props/src/gradients';
// see PropPacks for the full listDesign Tokens
/* 3 ways to import */
import 'open-props/tokens'
import 'open-props/json'
import 'open-props/design-tokens'PostCSS JIT Props
Only ship the props you use. Learn more.
PostCSS
npm install postcss-jit-propsStop importing Open Props in your CSS (if you were).
This plugin adds them to your stylesheet as you use them 🙂
Props as Javascript
// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');
module.exports = {
plugins: [
postcssJitProps(OpenProps),
]
}Props from CSS
// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');
module.exports = {
plugins: [
postcssJitProps({
files: [
require('open-props/open-props.min.css'),
]
}),
]
}CLI
git clone https://github.com/argyleink/open-props.gitCustomize your build
Customize Bundles
// bulid src files
npm run gen:shadowdom // src files with `:host` instead of `html`
npm run gen:nowhere // src files without `:where()`
npm run gen:prefixed // each prop prefixed with `op`, like `--op-font-size-1`
// full custom! pass args with node to the props.js script
node props.js 'ns' true ':root' 'my'
⇣
// arg1: default '', is a custom namespace, props will be --ns-gray-1
// arg2: default false, indicates wrapping in :where() or not
// arg3: default '', set a custom selector like :scope, .my-class, etc
// arg4: default '', set a file prefix, files will be my.props.easing.css, etcBuild Locally
npm run gen:op // runs through `src/` js files and creates the PostCSS files in `src/`
npm run gen:shadowdom // runs through `src/` js files and creates the PostCSS files in `src/`
npm run build // does both gen:op and gen:shadowdom
npm run bundle // creates all the various minified bundles of props
npm run lib:js // builds the JS modules for NPMAutocomplete
VScode
-
VScode has an intellisense feature which you can tap into,
by passing the path to the
node_modulesfolder when open-props is installed - In your VScode environment, navigate to the extensions marketplace, and install this CSS Var Complete extension
-
When the extension is installed, you'll have to add
open-prop's css file path to a
.vscode/settings.jsonfile. Take a look at an illustration below - Check details on settings and it's defaults in the repo
// .vscode/settings.json file
{
"cssvar.files": [
"./node_modules/open-props/open-props.min.css",
// if you have an alternative path to where your styles are located
// you can add it in this array of files
"assets/styles/variables.css"
],
// Do not ignore node_modules css files, which is ignored by default
"cssvar.ignore": [],
// add support for autocomplete in JS or JS like files
"cssvar.extensions": [
"css", "html", "jsx", "tsx"
]
}