https://github.com/kaelig/tokens2palettes-example
Example showing how to transform design tokens into color palettes usable by designers
https://github.com/kaelig/tokens2palettes-example
design-tokens sketch theo
Last synced: 2 months ago
JSON representation
Example showing how to transform design tokens into color palettes usable by designers
- Host: GitHub
- URL: https://github.com/kaelig/tokens2palettes-example
- Owner: kaelig
- Created: 2018-02-11T23:09:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-08T05:17:08.000Z (9 months ago)
- Last Synced: 2025-04-12T22:33:54.890Z (6 months ago)
- Topics: design-tokens, sketch, theo
- Language: JavaScript
- Size: 180 KB
- Stars: 20
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tokens2palettes-example
This is an example showing how to transform [Design tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) into color palettes usable by designers:
### `.sketchpalette`: Sketch (with the [sketch-palettes plugin](https://github.com/andrewfiorillo/sketch-palettes))
[Download here](https://github.com/kaelig/tokens2palettes-example/raw/master/dist/Material%20Design.sketchpalette)
### `.ase`: Adobe Swatch Exchange (Photoshop, Illustrator…)
[Download here](https://github.com/kaelig/tokens2palettes-example/raw/master/dist/Material%20Design.ase)
### `.clr`: macOS color palette
[Download here](https://github.com/kaelig/tokens2palettes-example/raw/master/dist/Material%20Design.clr)
---
## Quick start
This repository uses [Material Design Colors](https://material.io/guidelines/style/color.html#color-color-palette) as an example.
Follow these steps to generate palettes with your own colors:
1. In a terminal, type:
```sh
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:
```json
"config": {
"palettename": "Material Design"
},
```
3. Define the color palette in [`./tokens/colors.yml`](https://github.com/kaelig/tokens2palettes-example/blob/master/tokens/colors.yml) following the [design tokens specification](https://github.com/salesforce-ux/theo#spec).
4. Generate the color palettes:
```sh
yarn
yarn dist
```
5. That’s it! Color palettes are in the [`./dist`](https://github.com/kaelig/tokens2palettes-example/tree/master/dist) folder.
## How does it work?
1. The script uses [Theo](https://github.com/salesforce-ux/theo) to consume tokens from `./tokens/colors.yml`. Custom formats for `ase` and `sketchpalette` are passed to the [Theo v6 command line interface](https://github.com/salesforce-ux/theo/blob/master/CLI.md), 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.