Shadow tokens

You can create shadow tokens that define a layer's shadow, or define an Effect style. Those can be either one-level or even multiple levels, just like in Figma or CSS. A big advantage is that you can reuse your other tokens such as colors or dimensions inside this token.

Each individual shadow can be of type innerShadow or dropShadow.

{
  "my-shadow-tokens": {
    "default": {
      "value": [
        {
          "x": 5,
          "y": 5,
          "spread": 3,
          "color": "rgba({shadows.default}, 0.15)",
          "blur": 5,
          "type": "dropShadow"
        },
        {
          "x": 4,
          "y": 4,
          "spread": 6,
          "color": "#00000033",
          "blur": 5,
          "type": "innerShadow"
        }
      ],
      "type": "boxShadow"
    }
  }
}