2.0.0 • Published 5 years ago
token2css v2.0.0
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:
$color--blue--25: #000d80;
$color--blue--50: #001aff;
$color--blue--100: #f5fafe;
$color--grey--35: #595959;
$color--grey--50: #787878;
$color--grey--85: #dddddd;
$button--border-radius: 5px;
$button--min-width: 60px;
$button--font-weight: 300;
$button--padding: 7px 12px;
$button--variant--primary--background-color: $color--blue--50;
$button--variant--primary--border: 1px solid $color--blue--25;
$button--variant--primary--color: white;
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:
$button--disabled-background-color: grey;
- 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