Gradient

Gradient tokens define one single gradient, such as linear black-to-white .

Example Token Payload

This is what the gradient payload looks like:

{
  "id": string
  "name": string
  "description": string
  "tokenType": "Gradient"
  "origin": ItemOrigin | null
  "value": {
    "from": {
      "x": double
      "y": double
    }, 
    "to": {
      "x": double
      "y": double
    },
    "type": "Linear" | "Radial" | "Angular",
    "aspectRatio": double
    "stops": [Gradient Stop],
    "referencedToken": Gradient | null
  }
}

Gradient Stop

Gradient Stop represents one point where a new color is introduced within the gradient blend. Take the following example:

Gradient defined within Figma

This gradient has 3 stops - red at the beginning, transparent in the middle, and purple at the end. In Supernova, the gradient stop is defined like this:

{
  "position": number
  "color": {
    "hex": string
    "r": int (0-255),
    "g": int (0-255),
    "b": int (0-255),
    "a": int (0-255),
    "referencedToken": Color | null
  }
}

Note that each gradient stop color can be referenced from a different color token. If that is the case, referencedToken will contain Color Token that is referenced.

Associated functions

You can use the following functions to retrieve font tokens from your design system:

• @ds.allTokens
• @ds.tokensByType (with "Gradient") attribute
• @ds.tokensByGroupId