@atlaskit/tokens/figma/atlassian-shape.json

Design tokens are the single source of truth to name and store design decisions.

{
  "name": "Shape",
  "tokens": {
    "Shape/radius.xsmall": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "2px"
        ],
        "introduced": "6.1.0",
        "description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
      },
      "value": 2
    },
    "Shape/radius.small": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "4px"
        ],
        "introduced": "6.1.0",
        "description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
      },
      "value": 4
    },
    "Shape/radius.medium": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "6px"
        ],
        "introduced": "6.1.0",
        "description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
      },
      "value": 6
    },
    "Shape/radius.large": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "8px"
        ],
        "introduced": "6.1.0",
        "description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
      },
      "value": 8
    },
    "Shape/radius.xlarge": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "12px"
        ],
        "introduced": "6.1.0",
        "description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
      },
      "value": 12
    },
    "Shape/radius.xxlarge": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "12px"
        ],
        "introduced": "8.1.0",
        "description": "Use for video player containers."
      },
      "value": 16
    },
    "Shape/radius.full": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "50%"
        ],
        "introduced": "6.1.0",
        "description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
      },
      "value": 9999
    },
    "Shape/radius.tile": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "introduced": "6.2.0",
        "description": "Use this specific radius token exclusively for the tile component system."
      },
      "value": "25%"
    },
    "Shape/border.width": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "1px"
        ],
        "introduced": "1.5.2",
        "description": "The default width for all standard component borders and dividers."
      },
      "value": 1
    },
    "Shape/border.width.selected": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "2px"
        ],
        "introduced": "6.1.0",
        "description": "The width used to indicate a selected element, such as an active tab or a chosen item."
      },
      "value": 2
    },
    "Shape/border.width.focused": {
      "attributes": {
        "group": "shape",
        "state": "active",
        "suggest": [
          "2px"
        ],
        "introduced": "6.1.0",
        "description": "The width used for the focus ring on interactive elements."
      },
      "value": 2
    }
  },
  "renameMap": {}
}