Page Comparison

Composite tokens in style-dictionary

Adam Stankiewicz

Why?

Simpler tokens schema in JSON for theme authors, by combining style properties under a composite token vs. implementing separate tokens.

style-dictionary v3 did not support composite tokens, IIRC; v4 now does!

Docs:

• https://tr.designtokens.org/format/#composite-types (“Composite types”)

• https://tr.designtokens.org/format/#groups-versus-composite-tokens (“groups vs. composite tokens”)

• https://styledictionary.com/reference/config/#expand (expand)

Examples:

{
  "shadow-token": {
    "$type": "shadow",
    "$value": {
      "color": "#00000080",
      "offsetX": "0.5rem",
      "offsetY": "0.5rem",
      "blur": "1.5rem",
      "spread": "0rem"
    }
  }
}

https://tr.designtokens.org/format/#typography (“Typography”)

{
  "type styles": {
    "heading-level-1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Roboto",
        "fontSize": "42px",
        "fontWeight": 700,
        "letterSpacing": "0.1px",
        "lineHeight": 1.2
      }
    }
  }
}

Discussion

• Related to now supporting the DTCG format, do we want to migrate any tokens (e.g., typography) to composite tokens before merging alpha → master?

  • I.e., within the scope of style-dictionary upgrade v3 → v4