@hashicorp/design-system-tokens 2.2.1 → 2.3.0

package/dist/docs/products/tokens.json

@@ -1,4 +1,80 @@
 [
+  {
+    "value": "3px",
+    "type": "size",
+    "original": {
+      "value": "3",
+      "type": "size"
+    },
+    "name": "token-border-radius-x-small",
+    "attributes": {
+      "category": "border",
+      "type": "radius",
+      "item": "x-small"
+    },
+    "path": [
+      "border",
+      "radius",
+      "x-small"
+    ]
+  },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-border-radius-small",
+    "attributes": {
+      "category": "border",
+      "type": "radius",
+      "item": "small"
+    },
+    "path": [
+      "border",
+      "radius",
+      "small"
+    ]
+  },
+  {
+    "value": "6px",
+    "type": "size",
+    "original": {
+      "value": "6",
+      "type": "size"
+    },
+    "name": "token-border-radius-medium",
+    "attributes": {
+      "category": "border",
+      "type": "radius",
+      "item": "medium"
+    },
+    "path": [
+      "border",
+      "radius",
+      "medium"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-border-radius-large",
+    "attributes": {
+      "category": "border",
+      "type": "radius",
+      "item": "large"
+    },
+    "path": [
+      "border",
+      "radius",
+      "large"
+    ]
+  },
   {
     "value": "#1c345f",
     "type": "color",
@@ -3860,87 +3936,87 @@
     ]
   },
   {
-    "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
+    "value": "inset 0px 1px 2px 1px #656a761a",
     "original": {
-      "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
+      "value": "{elevation.inset.box-shadow-01.value}"
     },
-    "name": "token-elevation-high-box-shadow",
+    "name": "token-elevation-inset-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "high",
+      "type": "inset",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "high",
+      "inset",
       "box-shadow"
     ]
   },
   {
-    "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
+    "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
     "original": {
-      "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
+      "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
     },
-    "name": "token-elevation-higher-box-shadow",
+    "name": "token-elevation-low-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "higher",
+      "type": "low",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "higher",
+      "low",
       "box-shadow"
     ]
   },
   {
-    "value": "inset 0px 1px 2px 1px #656a761a",
+    "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
     "original": {
-      "value": "{elevation.inset.box-shadow-01.value}"
+      "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
     },
-    "name": "token-elevation-inset-box-shadow",
+    "name": "token-elevation-mid-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "inset",
+      "type": "mid",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "inset",
+      "mid",
       "box-shadow"
     ]
   },
   {
-    "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
+    "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
     "original": {
-      "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
+      "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
     },
-    "name": "token-elevation-low-box-shadow",
+    "name": "token-elevation-high-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "low",
+      "type": "high",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "low",
+      "high",
       "box-shadow"
     ]
   },
   {
-    "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
+    "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
     "original": {
-      "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
+      "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
     },
-    "name": "token-elevation-mid-box-shadow",
+    "name": "token-elevation-higher-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "mid",
+      "type": "higher",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "mid",
+      "higher",
       "box-shadow"
     ]
   },
@@ -4115,819 +4191,1396 @@
     ]
   },
   {
-    "value": "#0c0c0e",
-    "type": "color",
-    "group": "components",
+    "value": "60px",
+    "type": "size",
     "original": {
-      "value": "{color.foreground.strong.value}",
-      "type": "color",
-      "group": "components"
+      "value": "60",
+      "type": "size"
     },
-    "name": "token-form-control-base-foreground-value-color",
+    "name": "token-app-header-height",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "foreground",
-      "state": "value-color"
+      "category": "app-header",
+      "type": "height"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "foreground",
-      "value-color"
+      "app-header",
+      "height"
     ]
   },
   {
-    "value": "#656a76",
-    "type": "color",
-    "group": "components",
+    "value": "36px",
+    "type": "size",
     "original": {
-      "value": "{color.foreground.faint.value}",
-      "type": "color",
-      "group": "components"
+      "value": "36",
+      "type": "size"
     },
-    "name": "token-form-control-base-foreground-placeholder-color",
+    "name": "token-app-header-home-link-size",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "foreground",
-      "state": "placeholder-color"
+      "category": "app-header",
+      "type": "home-link",
+      "item": "size"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "foreground",
-      "placeholder-color"
+      "app-header",
+      "home-link",
+      "size"
     ]
   },
   {
-    "value": "#ffffff",
-    "type": "color",
-    "group": "components",
+    "value": "28px",
+    "type": "size",
     "original": {
-      "value": "{color.surface.interactive.value}",
-      "type": "color",
-      "group": "components"
+      "value": "28",
+      "type": "size"
     },
-    "name": "token-form-control-base-surface-color-default",
+    "name": "token-app-header-logo-size",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "surface-color",
-      "state": "default"
+      "category": "app-header",
+      "type": "logo",
+      "item": "size"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "surface-color",
-      "default"
+      "app-header",
+      "logo",
+      "size"
     ]
   },
   {
-    "value": "#f1f2f3",
-    "type": "color",
-    "group": "components",
+    "value": "1px",
+    "type": "size",
     "original": {
-      "value": "{color.surface.interactive-hover.value}",
-      "type": "color",
-      "group": "components"
+      "value": "1",
+      "type": "size"
     },
-    "name": "token-form-control-base-surface-color-hover",
+    "name": "token-app-side-nav-wrapper-border-width",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "surface-color",
-      "state": "hover"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "border",
+      "subitem": "width"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "surface-color",
-      "hover"
+      "app-side-nav",
+      "wrapper",
+      "border",
+      "width"
     ]
   },
   {
-    "value": "#8c909c",
+    "value": "var(--token-color-palette-neutral-200)",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.palette.neutral-400.value}",
+      "value": "var(--token-color-palette-neutral-200)",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-base-border-color-default",
+    "name": "token-app-side-nav-wrapper-border-color",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "border-color",
-      "state": "default"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "border",
+      "subitem": "color"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "border-color",
-      "default"
+      "app-side-nav",
+      "wrapper",
+      "border",
+      "color"
     ]
   },
   {
-    "value": "#656a76",
-    "type": "color",
-    "group": "components",
+    "value": "16px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.neutral-500.value}",
-      "type": "color",
-      "group": "components"
+      "value": "16",
+      "type": "size"
     },
-    "name": "token-form-control-base-border-color-hover",
+    "name": "token-app-side-nav-wrapper-padding-horizontal",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "border-color",
-      "state": "hover"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "horizontal"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "border-color",
-      "hover"
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "horizontal"
+    ]
+  },
+  {
+    "value": "16px",
+    "type": "size",
+    "original": {
+      "value": "16",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-wrapper-padding-vertical",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "vertical"
+    },
+    "path": [
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "vertical"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-wrapper-padding-horizontal-minimized",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "horizontal-minimized"
+    },
+    "path": [
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "horizontal-minimized"
+    ]
+  },
+  {
+    "value": "22px",
+    "type": "size",
+    "original": {
+      "value": "22",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-wrapper-padding-vertical-minimized",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "vertical-minimized"
+    },
+    "path": [
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "vertical-minimized"
+    ]
+  },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-toggle-button-border-radius",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "toggle-button",
+      "item": "border",
+      "subitem": "radius"
+    },
+    "path": [
+      "app-side-nav",
+      "toggle-button",
+      "border",
+      "radius"
+    ]
+  },
+  {
+    "value": "4px",
+    "type": "size",
+    "original": {
+      "value": "4",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-header-home-link-padding",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "home-link",
+      "subitem": "padding"
+    },
+    "path": [
+      "app-side-nav",
+      "header",
+      "home-link",
+      "padding"
+    ]
+  },
+  {
+    "value": "48px",
+    "type": "size",
+    "original": {
+      "value": "48",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-header-home-link-logo-size",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "home-link",
+      "subitem": "logo-size"
+    },
+    "path": [
+      "app-side-nav",
+      "header",
+      "home-link",
+      "logo-size"
+    ]
+  },
+  {
+    "value": "32px",
+    "type": "size",
+    "original": {
+      "value": "32",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-header-home-link-logo-size-minimized",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "home-link",
+      "subitem": "logo-size-minimized"
+    },
+    "path": [
+      "app-side-nav",
+      "header",
+      "home-link",
+      "logo-size-minimized"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-header-actions-spacing",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "actions",
+      "subitem": "spacing"
+    },
+    "path": [
+      "app-side-nav",
+      "header",
+      "actions",
+      "spacing"
+    ]
+  },
+  {
+    "value": "24px",
+    "type": "size",
+    "original": {
+      "value": "24",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-margin-vertical",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list",
+      "subitem": "margin-vertical"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list",
+      "margin-vertical"
+    ]
+  },
+  {
+    "value": "36px",
+    "type": "size",
+    "original": {
+      "value": "36",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-height",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "height"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "height"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-padding-horizontal",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "padding",
+      "state": "horizontal"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "padding",
+      "horizontal"
+    ]
+  },
+  {
+    "value": "4px",
+    "type": "size",
+    "original": {
+      "value": "4",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-padding-vertical",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "padding",
+      "state": "vertical"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "padding",
+      "vertical"
+    ]
+  },
+  {
+    "value": "2px",
+    "type": "size",
+    "original": {
+      "value": "2",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-spacing-vertical",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "spacing-vertical"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "spacing-vertical"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-content-spacing-horizontal",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "content-spacing-horizontal"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "content-spacing-horizontal"
+    ]
+  },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-border-radius",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "border-radius"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "border-radius"
+    ]
+  },
+  {
+    "value": "var(--token-color-foreground-primary)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-foreground-primary)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-app-side-nav-color-foreground-primary",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "primary"
+    },
+    "path": [
+      "app-side-nav",
+      "color",
+      "foreground",
+      "primary"
+    ]
+  },
+  {
+    "value": "var(--token-color-foreground-primary)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-foreground-primary)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-app-side-nav-color-foreground-strong",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "strong"
+    },
+    "path": [
+      "app-side-nav",
+      "color",
+      "foreground",
+      "strong"
+    ]
+  },
+  {
+    "value": "var(--token-color-foreground-faint)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-foreground-faint)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-app-side-nav-color-foreground-faint",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "faint"
+    },
+    "path": [
+      "app-side-nav",
+      "color",
+      "foreground",
+      "faint"
+    ]
+  },
+  {
+    "value": "var(--token-color-surface-faint)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-surface-faint)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-app-side-nav-color-surface-primary",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "surface",
+      "subitem": "primary"
+    },
+    "path": [
+      "app-side-nav",
+      "color",
+      "surface",
+      "primary"
+    ]
+  },
+  {
+    "value": "var(--token-color-surface-interactive-hover)",
+    "type": "color",
+    "group": "semantic",
+    "original": {
+      "value": "var(--token-color-surface-interactive-hover)",
+      "type": "color",
+      "group": "semantic"
+    },
+    "name": "token-app-side-nav-color-surface-interactive-hover",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "surface",
+      "subitem": "interactive-hover"
+    },
+    "path": [
+      "app-side-nav",
+      "color",
+      "surface",
+      "interactive-hover"
+    ]
+  },
+  {
+    "value": "var(--token-color-palette-neutral-300)",
+    "type": "color",
+    "group": "semantic",
+    "original": {
+      "value": "var(--token-color-palette-neutral-300)",
+      "type": "color",
+      "group": "semantic"
+    },
+    "name": "token-app-side-nav-color-surface-interactive-active",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "surface",
+      "subitem": "interactive-active"
+    },
+    "path": [
+      "app-side-nav",
+      "color",
+      "surface",
+      "interactive-active"
+    ]
+  },
+  {
+    "value": "#0c0c0e",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "{color.foreground.strong.value}",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-form-label-color",
+    "attributes": {
+      "category": "form",
+      "type": "label",
+      "item": "color"
+    },
+    "path": [
+      "form",
+      "label",
+      "color"
+    ]
+  },
+  {
+    "value": "#0c0c0e",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "{form.label.color.value}",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-form-legend-color",
+    "attributes": {
+      "category": "form",
+      "type": "legend",
+      "item": "color"
+    },
+    "path": [
+      "form",
+      "legend",
+      "color"
     ]
   },
   {
-    "value": "#ffffff",
+    "value": "#656a76",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.foreground.high-contrast.value}",
+      "value": "{color.foreground.faint.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-checked-foreground-color",
+    "name": "token-form-helper-text-color",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "foreground-color"
+      "type": "helper-text",
+      "item": "color"
     },
     "path": [
       "form",
-      "control",
-      "checked",
-      "foreground-color"
+      "helper-text",
+      "color"
     ]
   },
   {
-    "value": "#1060ff",
+    "value": "#656a76",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.palette.blue-200.value}",
+      "value": "{color.foreground.faint.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-checked-surface-color-default",
+    "name": "token-form-indicator-optional-color",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "surface-color",
-      "state": "default"
+      "type": "indicator",
+      "item": "optional",
+      "subitem": "color"
     },
     "path": [
       "form",
-      "control",
-      "checked",
-      "surface-color",
-      "default"
+      "indicator",
+      "optional",
+      "color"
     ]
   },
   {
-    "value": "#0c56e9",
+    "value": "#c00005",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.palette.blue-300.value}",
+      "value": "{color.palette.red-300.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-checked-surface-color-hover",
+    "name": "token-form-error-color",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "surface-color",
-      "state": "hover"
+      "type": "error",
+      "item": "color"
     },
     "path": [
       "form",
-      "control",
-      "checked",
-      "surface-color",
-      "hover"
+      "error",
+      "color"
     ]
   },
   {
-    "value": "#0c56e9",
-    "type": "color",
-    "group": "components",
+    "value": "14px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.blue-300.value}",
-      "type": "color",
-      "group": "components"
+      "value": "14",
+      "type": "size"
     },
-    "name": "token-form-control-checked-border-color-default",
+    "name": "token-form-error-icon-size",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "border-color",
-      "state": "default"
+      "type": "error",
+      "item": "icon-size"
     },
     "path": [
       "form",
-      "control",
-      "checked",
-      "border-color",
-      "default"
+      "error",
+      "icon-size"
     ]
   },
   {
-    "value": "#0046d1",
-    "type": "color",
-    "group": "components",
+    "value": "16px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.blue-400.value}",
-      "type": "color",
-      "group": "components"
+      "value": "16",
+      "type": "size"
     },
-    "name": "token-form-control-checked-border-color-hover",
+    "name": "token-form-checkbox-size",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "border-color",
-      "state": "hover"
+      "type": "checkbox",
+      "item": "size"
     },
     "path": [
       "form",
-      "control",
-      "checked",
-      "border-color",
-      "hover"
+      "checkbox",
+      "size"
     ]
   },
   {
-    "value": "#c00005",
-    "type": "color",
-    "group": "components",
+    "value": "3px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.red-300.value}",
-      "type": "color",
-      "group": "components"
+      "value": "3",
+      "type": "size"
     },
-    "name": "token-form-control-invalid-border-color-default",
+    "name": "token-form-checkbox-border-radius",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "invalid",
-      "subitem": "border-color",
-      "state": "default"
+      "type": "checkbox",
+      "item": "border",
+      "subitem": "radius"
     },
     "path": [
       "form",
-      "control",
-      "invalid",
-      "border-color",
-      "default"
+      "checkbox",
+      "border",
+      "radius"
     ]
   },
   {
-    "value": "#940004",
-    "type": "color",
-    "group": "components",
+    "value": "1px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.red-400.value}",
-      "type": "color",
-      "group": "components"
+      "value": "1",
+      "type": "size"
     },
-    "name": "token-form-control-invalid-border-color-hover",
+    "name": "token-form-checkbox-border-width",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "invalid",
-      "subitem": "border-color",
-      "state": "hover"
+      "type": "checkbox",
+      "item": "border",
+      "subitem": "width"
     },
     "path": [
       "form",
-      "control",
-      "invalid",
-      "border-color",
-      "hover"
+      "checkbox",
+      "border",
+      "width"
     ]
   },
   {
-    "value": "#3b3d45",
-    "type": "color",
-    "group": "components",
+    "value": "12px",
+    "type": "size",
     "original": {
-      "value": "{color.foreground.primary.value}",
-      "type": "color",
-      "group": "components"
+      "value": "12",
+      "type": "size"
     },
-    "name": "token-form-control-readonly-foreground-color",
+    "name": "token-form-checkbox-background-image-size",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "size"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "size"
+    ]
+  },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'tick' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'tick' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "data-url"
+    ]
+  },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dash' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dash' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url-indeterminate",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url-indeterminate"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "data-url-indeterminate"
+    ]
+  },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'tick' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'tick' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url-disabled",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url-disabled"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "data-url-disabled"
+    ]
+  },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dash' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dash' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
     "attributes": {
       "category": "form",
-      "type": "control",
-      "item": "readonly",
-      "subitem": "foreground-color"
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url-indeterminate-disabled"
     },
     "path": [
       "form",
-      "control",
-      "readonly",
-      "foreground-color"
+      "checkbox",
+      "background-image",
+      "data-url-indeterminate-disabled"
     ]
   },
   {
-    "value": "#f1f2f3",
+    "value": "#0c0c0e",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.surface.strong.value}",
+      "value": "{color.foreground.strong.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-readonly-surface-color",
+    "name": "token-form-control-base-foreground-value-color",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "readonly",
-      "subitem": "surface-color"
+      "item": "base",
+      "subitem": "foreground",
+      "state": "value-color"
     },
     "path": [
       "form",
       "control",
-      "readonly",
-      "surface-color"
+      "base",
+      "foreground",
+      "value-color"
     ]
   },
   {
-    "value": "#656a761a",
+    "value": "#656a76",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.border.faint.value}",
+      "value": "{color.foreground.faint.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-readonly-border-color",
+    "name": "token-form-control-base-foreground-placeholder-color",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "readonly",
-      "subitem": "border-color"
+      "item": "base",
+      "subitem": "foreground",
+      "state": "placeholder-color"
     },
     "path": [
       "form",
       "control",
-      "readonly",
-      "border-color"
+      "base",
+      "foreground",
+      "placeholder-color"
     ]
   },
   {
-    "value": "#8c909c",
+    "value": "#ffffff",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.foreground.disabled.value}",
+      "value": "{color.surface.interactive.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-disabled-foreground-color",
+    "name": "token-form-control-base-surface-color-default",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "disabled",
-      "subitem": "foreground-color"
+      "item": "base",
+      "subitem": "surface-color",
+      "state": "default"
     },
     "path": [
       "form",
       "control",
-      "disabled",
-      "foreground-color"
+      "base",
+      "surface-color",
+      "default"
     ]
   },
   {
-    "value": "#fafafa",
+    "value": "#f1f2f3",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.surface.interactive-disabled.value}",
+      "value": "{color.surface.interactive-hover.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-disabled-surface-color",
+    "name": "token-form-control-base-surface-color-hover",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "disabled",
-      "subitem": "surface-color"
+      "item": "base",
+      "subitem": "surface-color",
+      "state": "hover"
     },
     "path": [
       "form",
       "control",
-      "disabled",
-      "surface-color"
+      "base",
+      "surface-color",
+      "hover"
     ]
   },
   {
-    "value": "#656a7633",
+    "value": "#8c909c",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.border.primary.value}",
+      "value": "{color.palette.neutral-400.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-disabled-border-color",
+    "name": "token-form-control-base-border-color-default",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "disabled",
-      "subitem": "border-color"
+      "item": "base",
+      "subitem": "border-color",
+      "state": "default"
     },
     "path": [
       "form",
       "control",
-      "disabled",
-      "border-color"
+      "base",
+      "border-color",
+      "default"
     ]
   },
   {
-    "value": "7px",
-    "type": "size",
-    "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
+    "value": "#656a76",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "7",
-      "type": "size",
-      "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
+      "value": "{color.palette.neutral-500.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-control-padding",
+    "name": "token-form-control-base-border-color-hover",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "padding"
+      "item": "base",
+      "subitem": "border-color",
+      "state": "hover"
     },
     "path": [
       "form",
       "control",
-      "padding"
+      "base",
+      "border-color",
+      "hover"
     ]
   },
   {
-    "value": "5px",
-    "type": "size",
+    "value": "#ffffff",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "5",
-      "type": "size"
+      "value": "{color.foreground.high-contrast.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-control-border-radius",
+    "name": "token-form-control-checked-foreground-color",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "border",
-      "subitem": "radius"
+      "item": "checked",
+      "subitem": "foreground-color"
     },
     "path": [
       "form",
       "control",
-      "border",
-      "radius"
+      "checked",
+      "foreground-color"
     ]
   },
   {
-    "value": "1px",
-    "type": "size",
+    "value": "#1060ff",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "1",
-      "type": "size"
+      "value": "{color.palette.blue-200.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-control-border-width",
+    "name": "token-form-control-checked-surface-color-default",
     "attributes": {
       "category": "form",
       "type": "control",
-      "item": "border",
-      "subitem": "width"
+      "item": "checked",
+      "subitem": "surface-color",
+      "state": "default"
     },
     "path": [
       "form",
       "control",
-      "border",
-      "width"
+      "checked",
+      "surface-color",
+      "default"
     ]
   },
   {
-    "value": "#0c0c0e",
+    "value": "#0c56e9",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.foreground.strong.value}",
+      "value": "{color.palette.blue-300.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-label-color",
+    "name": "token-form-control-checked-surface-color-hover",
     "attributes": {
       "category": "form",
-      "type": "label",
-      "item": "color"
+      "type": "control",
+      "item": "checked",
+      "subitem": "surface-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "label",
-      "color"
+      "control",
+      "checked",
+      "surface-color",
+      "hover"
     ]
   },
   {
-    "value": "#0c0c0e",
+    "value": "#0c56e9",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{form.label.color.value}",
+      "value": "{color.palette.blue-300.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-legend-color",
+    "name": "token-form-control-checked-border-color-default",
     "attributes": {
       "category": "form",
-      "type": "legend",
-      "item": "color"
+      "type": "control",
+      "item": "checked",
+      "subitem": "border-color",
+      "state": "default"
     },
     "path": [
       "form",
-      "legend",
-      "color"
+      "control",
+      "checked",
+      "border-color",
+      "default"
     ]
   },
   {
-    "value": "#656a76",
+    "value": "#0046d1",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.foreground.faint.value}",
+      "value": "{color.palette.blue-400.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-helper-text-color",
+    "name": "token-form-control-checked-border-color-hover",
     "attributes": {
       "category": "form",
-      "type": "helper-text",
-      "item": "color"
+      "type": "control",
+      "item": "checked",
+      "subitem": "border-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "helper-text",
-      "color"
+      "control",
+      "checked",
+      "border-color",
+      "hover"
     ]
   },
   {
-    "value": "#656a76",
+    "value": "#c00005",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.foreground.faint.value}",
+      "value": "{color.palette.red-300.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-indicator-optional-color",
+    "name": "token-form-control-invalid-border-color-default",
     "attributes": {
       "category": "form",
-      "type": "indicator",
-      "item": "optional",
-      "subitem": "color"
+      "type": "control",
+      "item": "invalid",
+      "subitem": "border-color",
+      "state": "default"
     },
     "path": [
       "form",
-      "indicator",
-      "optional",
-      "color"
+      "control",
+      "invalid",
+      "border-color",
+      "default"
     ]
   },
   {
-    "value": "#c00005",
+    "value": "#940004",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.palette.red-300.value}",
+      "value": "{color.palette.red-400.value}",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-error-color",
+    "name": "token-form-control-invalid-border-color-hover",
     "attributes": {
       "category": "form",
-      "type": "error",
-      "item": "color"
+      "type": "control",
+      "item": "invalid",
+      "subitem": "border-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "error",
-      "color"
+      "control",
+      "invalid",
+      "border-color",
+      "hover"
     ]
   },
   {
-    "value": "14px",
-    "type": "size",
-    "original": {
-      "value": "14",
-      "type": "size"
+    "value": "#3b3d45",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "{color.foreground.primary.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-error-icon-size",
+    "name": "token-form-control-readonly-foreground-color",
     "attributes": {
       "category": "form",
-      "type": "error",
-      "item": "icon-size"
+      "type": "control",
+      "item": "readonly",
+      "subitem": "foreground-color"
     },
     "path": [
       "form",
-      "error",
-      "icon-size"
+      "control",
+      "readonly",
+      "foreground-color"
     ]
   },
   {
-    "value": "16px",
-    "type": "size",
+    "value": "#f1f2f3",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "16",
-      "type": "size"
+      "value": "{color.surface.strong.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-checkbox-size",
+    "name": "token-form-control-readonly-surface-color",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "size"
+      "type": "control",
+      "item": "readonly",
+      "subitem": "surface-color"
     },
     "path": [
       "form",
-      "checkbox",
-      "size"
+      "control",
+      "readonly",
+      "surface-color"
     ]
   },
   {
-    "value": "3px",
-    "type": "size",
+    "value": "#656a761a",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "3",
-      "type": "size"
+      "value": "{color.border.faint.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-checkbox-border-radius",
+    "name": "token-form-control-readonly-border-color",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "border",
-      "subitem": "radius"
+      "type": "control",
+      "item": "readonly",
+      "subitem": "border-color"
     },
     "path": [
       "form",
-      "checkbox",
-      "border",
-      "radius"
+      "control",
+      "readonly",
+      "border-color"
     ]
   },
   {
-    "value": "1px",
-    "type": "size",
+    "value": "#8c909c",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "1",
-      "type": "size"
+      "value": "{color.foreground.disabled.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-checkbox-border-width",
+    "name": "token-form-control-disabled-foreground-color",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "border",
-      "subitem": "width"
+      "type": "control",
+      "item": "disabled",
+      "subitem": "foreground-color"
     },
     "path": [
       "form",
-      "checkbox",
-      "border",
-      "width"
+      "control",
+      "disabled",
+      "foreground-color"
     ]
   },
   {
-    "value": "12px",
-    "type": "size",
+    "value": "#fafafa",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "12",
-      "type": "size"
+      "value": "{color.surface.interactive-disabled.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-checkbox-background-image-size",
+    "name": "token-form-control-disabled-surface-color",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "background-image",
-      "subitem": "size"
+      "type": "control",
+      "item": "disabled",
+      "subitem": "surface-color"
     },
     "path": [
       "form",
-      "checkbox",
-      "background-image",
-      "size"
+      "control",
+      "disabled",
+      "surface-color"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'tick' color is hardcoded here!",
+    "value": "#656a7633",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'tick' color is hardcoded here!"
+      "value": "{color.border.primary.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-checkbox-background-image-data-url",
+    "name": "token-form-control-disabled-border-color",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "background-image",
-      "subitem": "data-url"
+      "type": "control",
+      "item": "disabled",
+      "subitem": "border-color"
     },
     "path": [
       "form",
-      "checkbox",
-      "background-image",
-      "data-url"
+      "control",
+      "disabled",
+      "border-color"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'dash' color is hardcoded here!",
+    "value": "7px",
+    "type": "size",
+    "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'dash' color is hardcoded here!"
+      "value": "7",
+      "type": "size",
+      "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
     },
-    "name": "token-form-checkbox-background-image-data-url-indeterminate",
+    "name": "token-form-control-padding",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "background-image",
-      "subitem": "data-url-indeterminate"
+      "type": "control",
+      "item": "padding"
     },
     "path": [
       "form",
-      "checkbox",
-      "background-image",
-      "data-url-indeterminate"
+      "control",
+      "padding"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'tick' color is hardcoded here!",
+    "value": "5px",
+    "type": "size",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'tick' color is hardcoded here!"
+      "value": "5",
+      "type": "size"
     },
-    "name": "token-form-checkbox-background-image-data-url-disabled",
+    "name": "token-form-control-border-radius",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "background-image",
-      "subitem": "data-url-disabled"
+      "type": "control",
+      "item": "border",
+      "subitem": "radius"
     },
     "path": [
       "form",
-      "checkbox",
-      "background-image",
-      "data-url-disabled"
+      "control",
+      "border",
+      "radius"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'dash' color is hardcoded here!",
+    "value": "1px",
+    "type": "size",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'dash' color is hardcoded here!"
+      "value": "1",
+      "type": "size"
     },
-    "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
+    "name": "token-form-control-border-width",
     "attributes": {
       "category": "form",
-      "type": "checkbox",
-      "item": "background-image",
-      "subitem": "data-url-indeterminate-disabled"
+      "type": "control",
+      "item": "border",
+      "subitem": "width"
     },
     "path": [
       "form",
-      "checkbox",
-      "background-image",
-      "data-url-indeterminate-disabled"
+      "control",
+      "border",
+      "width"
     ]
   },
   {
@@ -5659,61 +6312,6 @@
       "thumb-size"
     ]
   },
-  {
-    "value": "60px",
-    "type": "size",
-    "original": {
-      "value": "60",
-      "type": "size"
-    },
-    "name": "token-app-header-height",
-    "attributes": {
-      "category": "app-header",
-      "type": "height"
-    },
-    "path": [
-      "app-header",
-      "height"
-    ]
-  },
-  {
-    "value": "36px",
-    "type": "size",
-    "original": {
-      "value": "36",
-      "type": "size"
-    },
-    "name": "token-app-header-home-link-size",
-    "attributes": {
-      "category": "app-header",
-      "type": "home-link",
-      "item": "size"
-    },
-    "path": [
-      "app-header",
-      "home-link",
-      "size"
-    ]
-  },
-  {
-    "value": "28px",
-    "type": "size",
-    "original": {
-      "value": "28",
-      "type": "size"
-    },
-    "name": "token-app-header-logo-size",
-    "attributes": {
-      "category": "app-header",
-      "type": "logo",
-      "item": "size"
-    },
-    "path": [
-      "app-header",
-      "logo",
-      "size"
-    ]
-  },
   {
     "value": "36px",
     "type": "size",
@@ -6292,7 +6890,7 @@
     ]
   },
   {
-    "value": "#fff",
+    "value": "#ffffff",
     "type": "color",
     "group": "components",
     "original": {