Skip to content

ui-js/chromatic

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
bin
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A build system for managing cross-platform design systems using design tokens.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published