Design Tokens JSON

Whenever the Pinwheel app or help documentation refers to “Design Tokens JSON”, we’re talking about the Design Tokens Format Module specification, created by the Design Tokens Community Group.

Our intention is to match the specification as closely as possible, while also providing additional behaviour where it’s required for Pinwheel features.

Color space support #

Color space support is coming to Design Tokens JSON soon. We’ve chosen to adopt the proposed changes, even though they are still being reviewed for inclusion.

Here’s how colors appear before color space support.

"Color Name": {
  "$type": "color",
  "$value": {
    "$hex": "#FFF8F8"
    }
  }
}

Here is the improved JSON, with the addition of color space support. Please note that components are in the 0 to 1 range. Alpha is only needed if the value isn’t 1. Hex values are provided for backwards compatibility.

"Color Name": {
  "$type": "color",
  "$value": {
    "$hex": "#FFF8F8",
    "$colorSpace": {
      "name": "srgb",
      "$components": [1, 0.9725, 0.9725],
      "$alpha": 0.5
    }
  }
}

Mode support #

The Design Tokens JSON specification has no support for variants of colors (dark, high contrast, etc). As a workaround, Pinwheel uses top level groups:

• “Light” to indicate that everything under this group is a light variant color.
• “Dark” to indicate that everything under this group is a dark variant color.
• “High Contrast” to indicate that everything under this group is a high contrast variant color.
• “Dark High Contrast” to indicate that everything under this group is a dark high contrast variant color.

We check for these in Pinwheel on import, and if they exist instead of creating groups with all those names, we combine all the colours inside them that have the same names and levels to be single colors with variants.