Open Props: sub-atomic styles

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

                  /* 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 created setup 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 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.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 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:


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

Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via Preferences > 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.

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