https://unpkg.com/open-props/open-props.figma-tokens.json
https://unpkg.com/open-props/open-props.figma-tokens.sync.json
import "open-props/style-dictionary-tokens"
// or
import "open-props/open-props.style-dictionary-tokens.json"
https://unpkg.com/open-props/open-props.style-dictionary-tokens.json
/* 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 */
@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 */
/* optional imports that use the props */
@import "open-props/normalize";
@import "open-props/buttons";
/* just light or dark themes */
@import "open-props/normalize/dark";
@import "open-props/buttons/dark";
@import "open-props/normalize/light";
@import "open-props/buttons/light";
/* 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 */
/* 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 */
/* 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 */
/* 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 */
// 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']);
// 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 path = require('path');
module.exports = {
plugins: [
postcssJitProps({
files: [
path.resolve(__dirname, 'node_modules/open-props/open-props.min.css'),
// build 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, etc
Build 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 NPM
VScode has an intellisense feature which you can tap into,
by passing the path to the
node_modules
folder where
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.json
file. Take a look at an
illustration below
// .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", "postcss", "jsx", "tsx"
Check details on settings and it's defaults
in the repo
There are number of ways with which the autocomplete engine of Sublime Text can be extended.
You can decide to use the
completion files
,
snippets
or
plugins
.
An approach that is less strenuous is the "completion file" approach.
Here, all you'd be required to do is point the `scope` keyword in the .sublime-completions file to the open-props classes in the node_modules folder like so:
// .sublime-completions file
"scope": "./node_modules/open-props/open-props.min.css",
"completions": [
// here you'll add the classes you want autocomplete for.
You can also add an alternative path to your variables, if you have one — in the completions file, like so:
It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.noise-noise-noise {
/* stack grain with a gradient */
background-image: var(--gradient-3), var(--noise-3);
/* force colors and noise to collide */
filter: var(--noise-filter-3);
/* fit noise image to element */
background-size: cover;
line-height: var(--font-lineheight-1);
font-size: var(--font-size-fluid-3);
font-weight: var(--font-weight-9);
font-family: var(--font-sans);
Font Families
--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
--font-serif: ui-serif, serif;
--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
--font-sans
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
1
2
3
4
5
6
7
8
9
0
+
=
!
@
#
%
$
%
^
&
--font-serif
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
1
2
3
4
5
6
7
8
9
0
+
=
!
@
#
%
$
%
^
&
--font-mono
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
1
2
3
4
5
6
7
8
9
0
+
=
!
@
#
%
$
%
^
&
--font-letterspacing-0: -.05em;
--font-letterspacing-1: .025em;
--font-letterspacing-2: .050em;
--font-letterspacing-3: .075em;
--font-letterspacing-4: .150em;
--font-letterspacing-5: .500em;
--font-letterspacing-6: .750em;
--font-letterspacing-7: 1em;
Letter Spacing
Almost before you knew it, we'd touched ground.
var(--font-size-0)
Almost before you knew it, we'd touched ground.
var(--font-size-1)
Almost before you knew it, we'd touched ground.
var(--font-size-2)
Almost before you knew it, we'd touched ground.
var(--font-size-3)
Almost before you knew it, we'd touched ground.
var(--font-size-4)
Almost before you knew it, we'd touched ground.
var(--font-size-5)
Almost before you knew it, we'd touched ground.
var(--font-size-6)
Almost before you knew it, we'd touched ground.
var(--font-size-7)
Almost before you knew it, we'd touched ground.
var(--font-size-8)
Almost before you knew it, we'd touched ground.
--font-size-fluid-0: clamp(.75rem, 1.5vw, 1rem);
--font-size-fluid-1: clamp(1rem, 2vw, 1.5rem);
--font-size-fluid-2: clamp(1.5rem, 3vw, 2.5rem);
--font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);
var(--font-size-fluid-0)
Almost before you knew it, we'd touched ground.
var(--font-size-fluid-1)
Almost before you knew it, we'd touched ground.
var(--font-size-fluid-2)
Almost before you knew it, we'd touched ground.
var(--font-size-fluid-3)
Almost before you knew it, we'd touched ground.
/* will be removed in v2 */
--ease-elastic-{1-5} /* deprecated; equal to elastic-out */
--ease-squish-{1-5} /* deprecated; equal to elastic-in-out */
var(--animation-fade-out) forwards,
var(--animation-slide-out-down);
animation-timing-function: var(--ease-elastic-in-out-3);
animation-duration: 1s;
var(--animation-scale-down),
var(--animation-fade-out);
animation-timing-function: var(--ease-elastic-in-out-4);
Sizes
Sizes use relative units by default with
rem
but static,
px
-based units are also available.
0
s are unsafe but common negative values, while 1-N are safe.
Carrot cake gummi bears sweet caramels cotton candy topping. Jelly candy apple pie gingerbread tootsie roll chupa chups.
Carrot cake gummi bears sweet caramels cotton candy topping. Jelly candy apple pie gingerbread tootsie roll chupa chups. Gummi bears lollipop apple pie pudding tart cake jelly. Soufflé lollipop jelly-o chocolate bar icing bonbon.
