token2css ·
token2css takes a list of design tokens in a structured format such as JSON or YAML and converts them to a list of CSS preprocessor variables (Less, Sass/SCSS, and Stylus currently supported).
Usage
With stdin/stdout
cat ./tokens.yaml | npx token2css -f stylus > output.styl
With input/output flags
npx token2css ./tokens.json -f scss -o output.scss
Example
Design tokens:
color: blue: 25: "#000d80" 50: "#001aff" 100: "#f5fafe" grey: 35: "#595959" 50: "#787878" 85: "#dddddd"button: border-radius: 5px min-width: 60px font-weight: 300 padding: 7px 12px variant: primary: background-color: $color--blue--50 border: 1px solid $color--blue--25 color: white
SCSS output:
;;;;;;;;;;;;;
Token Guidelines
- Do not use arrays in your token file — named keys are required for each nested property (accomplished by using objects).
Wrong:
color: - blue: 25: "#000d80" 50: "#001aff" - grey: 35: "#595959" 50: "#787878"
Correct:
color: blue: 25: "#000d80" 50: "#001aff" grey: 35: "#595959" 50: "#787878"
- Each nested level of a token results in another
--
appended to the name.
Input:
button: disabled: background-color: grey
Output:
;
- If you want to reference a variable, always perpend the name with
$
— regardless of the target variable syntax you choose.$
indicates that the following value is a variable and allows it to be reformatted for other languages.
color: blue: 50: "#787878" button: background-color: $color--blue--50