Movatterモバイル変換

Getting Started

These props come in many flavors:CSS,PostCSS,JSON, orJavascript. Get em from aCDN orNPM. Try it in browser withPreact,Vite,Vanilla Extract,Lit,Qwik, you name it, it's in thishelpful Stackblitz collection

Need help?
Ask a question onDiscord

Learn with Jason & Adam

CDN

No installation required.

View all ↗

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";                  /* just dark or light themes */                  @import "https://unpkg.com/open-props/normalize.dark.min.css";                  @import "https://unpkg.com/open-props/buttons.dark.min.css";                  @import "https://unpkg.com/open-props/normalize.light.min.css";                  @import "https://unpkg.com/open-props/buttons.light.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';                  // just go dark themed or light themed                  import 'https://unpkg.com/open-props/normalize.dark.min.css';                  import 'https://unpkg.com/open-props/buttons.dark.min.css';                  import 'https://unpkg.com/open-props/normalize.light.min.css';                  import 'https://unpkg.com/open-props/buttons.light.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

PostCSS

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.

JSON

Follows the(draft) Design Tokens Spec

                    https://unpkg.com/open-props/open-props.tokens.json

Figma Tokens

Community createdsetup instructions.

                    https://unpkg.com/open-props/open-props.figma-tokens.json                    https://unpkg.com/open-props/open-props.figma-tokens.sync.json

Style Dictionary

Preview the JSON Example usage (community added)Use with @csstools/postcss-design-tokens More details

Tokens

                    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

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

CSS

CSS Imports

                    /* the props */                    @import "open-props/style";                    /* 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 */

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

All JavaScript imports

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 list

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

Stop 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 path = require('path');                    module.exports = {                      plugins: [                        postcssJitProps({                          files: [                            path.resolve(__dirname, 'node_modules/open-props/open-props.min.css'),                          ]                        }),                      ]                    }

CLI

git clone https://github.com/argyleink/open-props.git

Customize your build

Customize Bundles

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

Autocomplete

VScode

VScode has an intellisense feature which you can tap into, by passing the path to thenode_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.jsonfile. 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

Sublime Text

There are number of ways with which the autocomplete engine of Sublime Text can be extended. You can decide to use thecompletion files,snippets orplugins.
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:

                // .sublime-completions file                {                  "scope": "path/to/your/variables",              }

Another approach for enabling autocomplete would be to open the settings json file of Sublime Text viaPreferences > Settings, then you'll modify the file to include the snippet below — replacing "source" with the path to your variables.

                "auto-complete-selector": "source, text"

You can learn more about the completion process in Sublime Text here.

Colors

Open Props includesOpen Color, an open-source color scheme optimized for UI development, and its extension,Colar.

Open the color picker in your browser dev tools, set the swatches to the page's custom properties, and enjoy picking from the set!

The Props

              --gray-{0-12}              --stone-{0-12}              --red-{0-12}              --pink-{0-12}              --purple-{0-12}              --violet-{0-12}              --indigo-{0-12}              --blue-{0-12}              --cyan-{0-12}              --teal-{0-12}              --green-{0-12}              --lime-{0-12}              --yellow-{0-12}              --orange-{0-12}              --choco-{0-12}              --brown-{0-12}              --sand-{0-12}              --camo-{0-12}              --jungle-{0-12}

Button Sample

            button.blue {              color: var(--blue-6);              background-color: var(--blue-0);              border: 1px solid var(--blue-1);              text-shadow: 0 1px 0 var(--blue-2);              &:hover {                background-color: var(--blue-1);              }            }

Light & Dark Example

            html {              --text-1: var(--gray-9);              --text-2: var(--gray-7);              @media (--OSdark) {                --text-1: var(--gray-1);                --text-2: var(--gray-2);              }            }

Modify Opacity Example

            /* additional import required */            /* @import "open-props/gray-hsl"; */            @import "open-props/colors-hsl";            .backdrop {              background-color: hsl(var(--gray-9-hsl) / 30%);            }

Gray

Stone

Red

Pink

Purple

Violet

Indigo

Blue

Cyan

Teal

Green

Lime

Yellow

Orange

Choco

Brown

Sand

Camo

Jungle

Brand Colors

Various brand colors.

Not part of the main bundle. Must be individually imported.

NPM Imported Usage Sample

@import "open-props/brand-colors";.facebook-logo {  fill: var(--brand-facebook);}

facebook

youtube

twitter

instagram yellow

instagram red

instagram magenta

instagram blue

snapchat

google blue

google red

google yellow

google green

tiktok razzmatazz

tiktok splash

microsoft red

microsoft green

microsoft blue

microsoft yellow

spotify

discord

amazon

twitch

Color 101: Themes

1) Color theming

Low numbers are light and high numbers are dark. See how the Open Props normalize.css implementslight anddark modes.

See it live:auto, light, dark, dim and purple themes demonstrated with Open Props!

Light

                html {                  --brand-light: var(--orange-6);                  --text-1-light: var(--gray-8);                  --text-2-light: var(--gray-7);                  --surface-1-light: var(--gray-0);                  --surface-2-light: var(--gray-1);                  --surface-3-light: var(--gray-2);                  --surface-4-light: var(--gray-3);                }

Dark

                html {                  --brand-dark: var(--orange-3);                  --text-1-dark: var(--gray-3);                  --text-2-dark: var(--gray-5);                  --surface-1-dark: var(--gray-12);                  --surface-2-dark: var(--gray-11);                  --surface-3-dark: var(--gray-10);                  --surface-4-dark: var(--gray-9);                }

Dim

                html {                  --brand-dim: var(--orange-4);                  --text-1-dim: var(--gray-3);                  --text-2-dim: var(--gray-4);                  --surface-1-dim: var(--gray-8);                  --surface-2-dim: var(--gray-7);                  --surface-3-dim: var(--gray-6);                  --surface-4-dim: var(--gray-5);                }

Purple

                html {                  --brand-purple: var(--purple-5);                  --text-1-purple: var(--purple-9);                  --text-2-purple: var(--purple-7);                  --surface-1-purple: var(--purple-0);                  --surface-2-purple: var(--purple-1);                  --surface-3-purple: var(--purple-2);                  --surface-4-purple: var(--purple-3);                }

2) Creating adaptive color schemes

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.

No Preference (Light)

                :root {                  --brand: var(--brand-light);                  --text-1: var(--text-1-light);                  --text-2: var(--text-2-light);                  --surface-1: var(--surface-1-light);                  --surface-2: var(--surface-2-light);                  --surface-3: var(--surface-3-light);                  --surface-4: var(--surface-4-light);                }

Prefers Dark

                @media (prefers-color-scheme: dark) {                  :root {                    --brand: var(--brand-dark);                    --text-1: var(--text-1-dark);                    --text-2: var(--text-2-dark);                    --surface-1: var(--surface-1-dark);                    --surface-2: var(--surface-2-dark);                    --surface-3: var(--surface-3-dark);                    --surface-4: var(--surface-4-dark);                  }                }

Prefers Dim

                @media (prefers-contrast: less) {                  :root {                    --brand: var(--brand-dim);                    --text-1: var(--text-1-dim);                    --text-2: var(--text-2-dim);                    --surface-1: var(--surface-1-dim);                    --surface-2: var(--surface-2-dim);                    --surface-3: var(--surface-3-dim);                    --surface-4: var(--surface-4-dim);                  }                }

Prefers Purple

                [color-scheme="purple"] {                  --brand: var(--brand-purple);                  --text-1: var(--text-1-purple);                  --text-2: var(--text-2-purple);                  --surface-1: var(--surface-1-purple);                  --surface-2: var(--surface-2-purple);                  --surface-3: var(--surface-3-purple);                  --surface-4: var(--surface-4-purple);                }

3) Using the aliases

Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.

Page Styles Using Themes

                html {                  background-color: var(--surface-1);                  color: var(--text-1);                  accent-color: var(--link);                }

Utilities

                .surface-1 {                  background-color: var(--surface-1);                  color: var(--text-2);                }                .surface-2 {                  background-color: var(--surface-2);                  color: var(--text-2);                }                .surface-3 {                  background-color: var(--surface-3);                  color: var(--text-1);                }                .surface-4 {                  background-color: var(--surface-4);                  color: var(--text-1);                }

Typography

                h1,h2,h3,h4,p,dt {                  color: var(--text-1);                }                h5,h6,small,dd {                  color: var(--text-2);                }

Color 201: Normalize Theme Switch

1) Normalize Theme Switch

                @import "https://unpkg.com/open-props/theme.light.switch.min.css";                @import "https://unpkg.com/open-props/theme.dark.switch.min.css";

The Open Propsnormalize.css has light and dark built in, but it only changes with the media query / operating system. If you want users to be able to change this, you'll needOpen Props switch imports. These have the same theme values from normalize, but scoped to selectors.

Light Selectors:.light |.light-theme |data-theme="light"

Dark Selectors:.dark |.dark-theme |data-theme="dark"

This allows you to apply a light or dark theme to the page or a portion of the page using the selectors imported.

See it in action:here

2) Section theme

When you need to control the appearance of a specific section, use any of the selectors from the switch imports, like.dark or.light, and apply them to HTML elements.

Try ithere

                  @import "https://unpkg.com/open-props/theme.light.switch.min.css";                  @import "https://unpkg.com/open-props/theme.dark.switch.min.css";                  /* classes toggle the adaptive props */                  .dark, .light {                    color: var(--text-1);                    background: var(--surface-1);                  }

Typography

Variable and static font sizes, smart line heights,modern font stacks, and other familiar typography variables, all ready to go.

The Props

              --font-size-{00-8}              --font-size-fluid-{0-3}              --font-weight-{1-9}              --font-letterspacing-{0-7}              --font-lineheight-{00-5}

Usage Sample

              .hero {                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

These rad font-families from Dan Klammer's modern font stacks provide great typefaces that are entirely local. With these font stacks you won't have to worry about slowing down your page load or layout shift from external fonts!

          --font-system-ui: system-ui, sans-serif;          --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;          --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;          --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;          --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;          --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;          --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;          --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;          --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono,Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code,Menlo, Consolas, DejaVu Sans Mono, monospace;          --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;          --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;          --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;          --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;          --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;          --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;

Unlike the other props, which are identical to their modern font stack counterparts,--font-monospace-code is modified in open-props.

--font-system-ui