Radius

Radius tokens define one single radius, such as 4px .

Example Token Payload

This is what the radius payload looks like:

{
  "id": string
  "name": string
  "description": string
  "tokenType": "Radius"
  "origin": ItemOrigin | null
  "value": {
    "radius": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "topLeft": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "topRight": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "bottomLeft": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "bottomRight": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "referencedToken": Radius | null
  }
}

Radius can either define symmetric radius (all box corners have the same value) in which case radius property is used, or the radius can be defined for each box corner separately.

Associated functions

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

• @ds.allTokens

• @ds.tokensByType (with "Radius") attribute

• @ds.tokensByGroupId