Skip to content
A build system for managing cross-platform design systems using design tokens.
TypeScript JavaScript HTML Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot Hello world. Nov 26, 2019
.vscode feat (color-blind): Add color-blindness confusion warnings to the sty… Dec 14, 2019
bin chore(deps) Dec 22, 2019
chromatic-example (chore) Dependencies update Dec 9, 2019
config
docs feat (color-blind): Add color-blindness confusion warnings to the sty… Dec 14, 2019
examples feat (color-blind): Add color-blindness confusion warnings to the sty… Dec 14, 2019
scripts feat(relative-length-units) Nov 29, 2019
src Moved to @ui-js Dec 17, 2019
test
.editorconfig
.eslintignore
.eslintrc.js Fix issues on macOS Nov 26, 2019
.gitattributes Hello world. Nov 26, 2019
.gitignore Hello world. Nov 26, 2019
.npmrc
CHANGELOG.md Improved style guide. Color ramps. Improved custom formats. Dec 4, 2019
CODE_OF_CONDUCT.md Hello world. Nov 26, 2019
CONTRIBUTING.md Hello world. Nov 26, 2019
LICENSE.txt Hello world. Nov 26, 2019
README.md feat(onboarding): Add the 'chromatic example' command Nov 30, 2019
package-lock.json
package.json chore(deps) Dec 22, 2019
tsconfig.json Hello world. Nov 26, 2019

README.md

Chromatic

A tool to help manage design systems by generating platform-specific files from a source file describing design tokens.

Expressive Design Tokens

Tokens can contain rich expressions in a natural syntax, including arithmetic operations, units (12px), function (rgb(), mix(), saturate()...) and references to other tokens.

tokens:
    primary-hue: '210deg'
    primary: 'hsl({primary-hue}, 100%, 40%)'
    primary-dark: 'darken({primary}, 20%)'

    line-height: '18pt + 5px'

Themes

Each token can have a theme variant, such as dark/light, or compact/cozy layouts. The necessary output artifacts are generated automatically.

tokens:
    cta-button-background:
        value:
            dark: '#004082'
            light: '#0066ce'

Zero-conf

Get going quickly. A simple token file written YAML or JSON file is all you need.

But Chromatic is also customizable when you need to. You can write or modify the format of the output files to suit your needs.

Chromatic is also available as an API that can be invoked from a build system.

Multi-platform

From a single token file, generate platform specific artifacts:

  • for the web (Sass, CSS)
  • for iOS (JSON, plist)
  • for Android (XML)

Chromatic can also generate a style guide as a HTML file.

Getting started with Chromatic

$ npm install -g @arnog/chromatic

To create a directory with an example:

$ chromatic example ./test
$ chromatic ./test -o tokens.scss
$ chromatic ./test -o tokens.html

Or writing your own token file:

# tokens.yaml
tokens:
    background: '#f1f1f1'
    body-color: '#333'
$ chromatic tokens.yaml -o tokens.scss
$background: #f1f1f1 !default;
$body-color: #333 !default;

Now, let's create a dark theme:

# tokens-dark.yaml
theme: dark
tokens:
    background: '#222'
    body-color: '#a0a0a0'
# tokens.yaml
import: ./tokens-dark.yaml
tokens:
    background: '#f1f1f1'
    body-color: '#333'
$ chromatic tokens.yaml -o tokens.scss
:root {
    --background: #f1f1f1;
    --body-color: #333;
}
body[data-theme='dark'] {
    --background: #222;
    --body-color: #a0a0a0;
}
You can’t perform that action at this time.