https://github.com/ui-js/chromatic

A build system for managing cross-platform design systems using design tokens.
https://github.com/ui-js/chromatic

design-systems design-tokens

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ui-js/chromatic
• Owner: ui-js
• License: mit
• Created: 2019-11-26T18:02:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-02-11T10:10:07.000Z (over 1 year ago)
• Last Synced: 2024-05-21T08:22:47.629Z (about 1 month ago)
• Topics: design-systems, design-tokens
• Language: TypeScript
• Size: 1.9 MB
• Stars: 58
• Watchers: 4
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• Awesome-Design-Tokens - Chromatic

README

        
# 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.

```yaml

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.

```yaml

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

```shell

$ npm install -g @arnog/chromatic

```

To create a directory with an example:

```shell

$ chromatic example ./test

$ chromatic ./test -o tokens.scss

$ chromatic ./test -o tokens.html

```

Or writing your own token file:

```yaml

# tokens.yaml

tokens:

  background: '#f1f1f1'

  body-color: '#333'

```

```shell

$ chromatic tokens.yaml -o tokens.scss

```

```scss

$background: #f1f1f1 !default;

$body-color: #333 !default;

```

Now, let's create a dark theme:

```yaml

# tokens-dark.yaml

theme: dark

tokens:

  background: '#222'

  body-color: '#a0a0a0'

```

```yaml

# tokens.yaml

import: ./tokens-dark.yaml

tokens:

  background: '#f1f1f1'

  body-color: '#333'

```

```shell

$ chromatic tokens.yaml -o tokens.scss

```

```css

:root {

  --background: #f1f1f1;

  --body-color: #333;

}

body[data-theme='dark'] {

  --background: #222;

  --body-color: #a0a0a0;

}

```