Skip to content

kaelig/tokens2palettes-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tokens2palettes-example

This is an example showing how to transform Design tokens into color palettes usable by designers:

.sketchpalette: Sketch (with the sketch-palettes plugin)

Download here

.ase: Adobe Swatch Exchange (Photoshop, Illustrator…)

Download here

.clr: macOS color palette

Download here


Quick start

This repository uses Material Design Colors as an example. Follow these steps to generate palettes with your own colors:

  1. In a terminal, type:

    git clone https://github.com/kaelig/tokens2palettes-example

    (or clone your own fork of this repository)

  2. Open package.json and change the value of palettename to something else:

      "config": {
        "palettename": "Material Design"
      },
  3. Define the color palette in ./tokens/colors.yml following the design tokens specification.

  4. Generate the color palettes:

    yarn
    yarn dist
  5. That’s it! Color palettes are in the ./dist folder.

How does it work?

  1. The script uses Theo to consume tokens from ./tokens/colors.yml. Custom formats for ase and sketchpalette are passed to the Theo v6 command line interface, which does the rest and outputs files to ./dist.
  2. Then, ase2clr takes the ase file and exports it into a clr file
  3. Finally, the script renames all of the colors.* files something more human-friendly that designers will appreciate.

About

Example showing how to transform design tokens into color palettes usable by designers

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published