css-design-tokens

Create Design Tokens by going through CSS to find colors, font-sizes, gradients etcetera and turn them into a spec-compliant token format.

Installation

npm install @projectwallace/css-design-tokens

Usage

import { css_to_tokens } from '@projectwallace/css-design-tokens'

let tokens = css_to_tokens(`.my-design-system { color: green; }`)

// Or if you already have done CSS analysis with @projectwallace/css-analyzer:
// NOTE: it is important that `useLocations` is true
import { analyze } from '@projectwallace/css-analyzer'
import { analysis_to_tokens } from '@projectwallace/css-design-tokens'

let analysis = analyze(`.my-design-system { color: green; }`, {
  useLocations: true // MUST be true
})
let tokens = analysis_to_tokens(analysis)

Acknowledgements

• CSSTree does all the heavy lifting of parsing CSS
• ColorJS.io powers all color conversions necessary for grouping and sorting

Related projects

• CSS Analyzer - The best CSS analyzer that powers all analysis on projectwallace.com
• Color Sorter - Sort CSS colors by hue, saturation, lightness and opacity