@healform/design-tokens

Automatically generate visual primitives such as typography, color, and spacing that are shared across platforms.

Installation

Depending on your preference, run one of the following in your terminal:

# With Yarn
yarn add @healform/design-tokens

# With npm
npm install @healform/design-tokens

What's included

design-tokens/
├── src
└── dist/
    ├── css/
    │   ├── variables-host.css
    │   └── variables-root.css
    ├── js/
    │   ├── tokens.d.ts
    │   └── tokens.js
    ├── json/
    │   ├── tokens-flat.json
    │   ├── tokens-nested.json
    │   └── tokens-raw.json
    ├── less/
    │   └── variables.less
    └── scss/
        ├── variables.scss
        └── variables-map.scss

Usage

The package currently exports a single theme that is meant to be used with HEALFORM's React component library, Liquid UI.

JavaScript

import tokens from "@healform/design-tokens/dist/js/tokens";

const Colored = styled.strong`
  color: ${tokens.colors.primary.value};
`;

const App = () => (
  <Colored>This styled component has access to the theme.</Colored>
);

CSS

import "@healform/design-tokens/dist/css/variables--root.css"

#example {
  background: var(--colors-white);
  color: var(--colors-black);
}

#example a {
  color: var(--colors-primary);
  padding: var(--spacings-md);
}

Import via UNPKG CDN

All design tokens are also automatically accessible via the UNPKG CDN after each release.

<link rel="stylesheet" href="https://unpkg.com/@healform/design-tokens@latest/dist/css/variables--root.css">

Development

Conventional Commits

Please follow the Conventional Commits specification to make sure we can automatically determine the next release version if necessary.

Deployment

TravisCI is building as soon as a branch gets merged into the master branch. After successful linting, the HEALFORM Design Tokens package will be published to npm. You can find the package on npm here.