Gradient

Not implemented — do not use yet

gradient appears in the token dialog’s type dropdown, but nothing behind it is finished. A gradient token you create today will:

• get no dedicated input field — you land on the generic free-text fallback
• display as [Invalid] on its tile, whatever you enter
• have no apply target, so it cannot be pushed onto a layer
• be validated against a legacy rule that expects a CSS string like linear-gradient(…), which contradicts the DTCG shape below

Use a pair of color tokens and the Gradient stop colour apply targets instead. See the workaround below.

---

Intended value format

For reference, this is the DTCG shape the type will eventually store — an array of stops:

{
  "$type": "gradient",
  "$value": [
    { "color": { "colorSpace": "srgb", "components": [0, 0, 0] }, "position": 0 },
    { "color": { "colorSpace": "srgb", "components": [1, 1, 1] }, "position": 1 }
  ]
}

position is 0–1. The DTCG spec keeps the gradient geometry (linear vs radial, angle) out of the token — that is a usage decision, not a value.

---

Workaround today

Model the gradient as two colour tokens and apply them to the stops:

1. Create gradient.hero.from and gradient.hero.to as color tokens.
2. Select the layer.
3. Apply …from with the target Gradient stop colour X.
4. Apply …to with the target Gradient stop colour Y.

If the layer has no gradient fill yet, the first apply creates a two-stop linear gradient seeded from the existing solid fill. You then set the angle and stop positions in Figma by hand; only the two stop colours are token-driven.

Only stops 0 and 1 are addressable — a three-stop gradient cannot be fully token-driven this way.

---

Status

Tracked on the roadmap. The type interfaces exist in the codebase, but the input field, display formatter, validator, and applicator are all still missing.