hds-design-tokens

Design tokens for the Helsinki Design System.

Getting started

Install the package.

yarn add hds-design-tokens

What's included

hds-design-tokens/
├── tokens/                                 # token source files
└── lib/
    ├── breakpoint/
    │    ├── all (.scss|.css)
    │    ├── breakpoint (.scss|.css)        # breakpoint variables
    │    └── container-width (.scss|.css)   # container-width variables
    ├── color/
    │    ├── all (.scss|.css)
    │    ├── brand (.scss|.css)             # brand color variables
    │    └── ui (.scss|.css)                # ui color variables
    ├── spacing/
    │   ├── all (.scss|.css)
    │   ├── layout (.scss|.css)             # layout spacing variables
    │   └── spacing (.scss|.css)            # component spacing variables
    ├── typography/
    │   ├── all (.scss|.css)
    │   ├── font (.scss|.css)               # font variables
    │   ├── font-size (.scss|.css)          # font-size variables
    │   └── line-height (.scss|.css)        # line-height variables
    └── all (.scss|.css)                    # all variables

Using the tokens

Import any of the available .css or .scss files. Imported CSS variables will be applied to the :root element.

JS

// import all tokens
import 'hds-design-tokens';

SCSS

@import '~hds-design-tokens';

Development

Read more here.

Built with

• Style Dictionary
• clean-css