npm - ui-foundations - Versions diffs - 0.4.1 → 0.7.0 - Mend

ui-foundations 0.4.1 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/LICENSE +73 -0
package/README.md +49 -13
package/dist/core/index.css +1 -0
package/dist/macros/ui.njk +94 -0
package/dist/main.css +723 -138
package/dist/react/accordion.js +36 -0
package/dist/react/avatar.js +34 -0
package/dist/react/button.js +1 -12
package/dist/react/checkbox.js +3 -20
package/dist/react/divider.js +31 -0
package/dist/react/form.js +111 -0
package/dist/react/icon.js +1 -12
package/dist/react/index.js +7 -0
package/dist/react/input.js +7 -0
package/dist/react/radio.js +3 -20
package/dist/react/switch.js +3 -20
package/dist/react/tabs.js +72 -0
package/dist/react/textarea.js +45 -0
package/dist/react/tooltip.js +25 -0
package/dist/react/warn-dev.js +15 -0
package/dist/tokens/css/appearance-modes.tokens.mode-dark.css +12 -6
package/dist/tokens/css/appearance-modes.tokens.mode-light.css +7 -1
package/dist/tokens/css/components-ui.tokens.css +93 -73
package/dist/tokens/css/core-primitives.tokens.css +72 -1
package/dist/tokens/css/semantics-roles.tokens.css +1 -1
package/dist/tokens/css/themes-brands.tokens.brand-a.css +11 -11
package/dist/tokens/css/themes-brands.tokens.brand-b.css +1 -1
package/dist/tokens/css/themes-brands.tokens.brand-c.css +22 -0
package/dist/tokens/json/appearance-modes.tokens.mode-dark.json +24 -0
package/dist/tokens/json/appearance-modes.tokens.mode-light.json +24 -0
package/dist/tokens/json/components-ui.tokens.json +403 -269
package/dist/tokens/json/core-primitives.tokens.json +302 -0
package/dist/tokens/json/themes-brands.tokens.brand-a.json +10 -10
package/dist/tokens/json/themes-brands.tokens.brand-b.json +10 -10
package/dist/tokens/json/themes-brands.tokens.brand-c.json +81 -0
package/dist/tokens/tokens.yaml +2138 -578
package/dist/tokens/ts/appearance-modes.tokens.mode-dark.ts +12 -6
package/dist/tokens/ts/appearance-modes.tokens.mode-light.ts +7 -1
package/dist/tokens/ts/components-ui.tokens.ts +94 -74
package/dist/tokens/ts/core-primitives.tokens.ts +73 -2
package/dist/tokens/ts/semantics-roles.tokens.ts +1 -1
package/dist/tokens/ts/themes-brands.tokens.brand-a.ts +11 -11
package/dist/tokens/ts/themes-brands.tokens.brand-b.ts +1 -1
package/dist/tokens/ts/themes-brands.tokens.brand-c.ts +32 -0
package/dist/ui/index.css +7 -0
package/dist/ui/patterns/accordion.css +81 -0
package/dist/ui/patterns/avatar.css +57 -0
package/dist/ui/patterns/button.css +3 -3
package/dist/ui/patterns/checkbox.css +28 -28
package/dist/ui/patterns/divider.css +25 -0
package/dist/ui/patterns/form.css +112 -0
package/dist/ui/patterns/input.css +12 -12
package/dist/ui/patterns/label.css +1 -1
package/dist/ui/patterns/tabs.css +71 -0
package/dist/ui/patterns/textarea.css +50 -0
package/dist/ui/patterns/tooltip.css +64 -0
package/docs/agentic/README.md +1 -0
package/docs/agentic/skills/component-accessibility-audit.md +132 -0
package/docs/foundations/foundation-007-typography-selectors-and-specificity.md +1 -1
package/package.json +15 -3
package/dist/tokens/missing-tokens.json +0 -43

package/dist/tokens/tokens.yaml CHANGED Viewed

@@ -1,8 +1,8 @@
 # Auto-generated design tokens from Figma
-# Generated on 2026-04-28T09:23:28.582Z
+# Generated on 2026-06-06T14:29:01.231Z
 summary:
-  total: 440
+  total: 560
 tokens:
   -
     cssVar: "--breakpoint-100"
@@ -85,7 +85,7 @@ tokens:
   -
     cssVar: "--brand-color-accent"
     name: "brand-color-accent"
-    value: "var(--color-brand-a-green-400)"
+    value: "var(--color-brand-c-coolblue-60)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Accent"
@@ -108,10 +108,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-accent"
+    name: "brand-color-accent"
+    value: "var(--color-brand-a-green-400)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Accent"
+    pathKey: "Brand.Color.Accent"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-accent-dark"
     name: "brand-color-accent-dark"
-    value: "var(--color-brand-a-green-600)"
+    value: "var(--color-brand-c-coolblue-10)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Accent Dark"
@@ -134,10 +147,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-accent-dark"
+    name: "brand-color-accent-dark"
+    value: "var(--color-brand-a-green-600)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Accent Dark"
+    pathKey: "Brand.Color.Accent Dark"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-functional-base"
     name: "brand-color-functional-base"
-    value: "var(--color-brand-a-green-700)"
+    value: "var(--color-brand-c-blue-10)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Functional/Base"
@@ -160,10 +186,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-functional-base"
+    name: "brand-color-functional-base"
+    value: "var(--color-brand-a-green-700)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Base"
+    pathKey: "Brand.Color.Functional.Base"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-functional-base-dark"
     name: "brand-color-functional-base-dark"
-    value: "var(--color-brand-a-green-900)"
+    value: "var(--color-brand-c-midnight-10)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Functional/Base Dark"
@@ -186,10 +225,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-functional-base-dark"
+    name: "brand-color-functional-base-dark"
+    value: "var(--color-brand-a-green-900)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Base Dark"
+    pathKey: "Brand.Color.Functional.Base Dark"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-functional-danger"
     name: "brand-color-functional-danger"
-    value: "var(--color-brand-a-red-600)"
+    value: "var(--color-brand-c-red-30)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Functional/Danger"
@@ -212,10 +264,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-functional-danger"
+    name: "brand-color-functional-danger"
+    value: "var(--color-brand-a-red-600)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Danger"
+    pathKey: "Brand.Color.Functional.Danger"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-functional-success"
     name: "brand-color-functional-success"
-    value: "var(--color-brand-a-green-600)"
+    value: "var(--color-brand-c-green-30)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Functional/Success"
@@ -238,10 +303,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-functional-success"
+    name: "brand-color-functional-success"
+    value: "var(--color-brand-a-green-600)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Success"
+    pathKey: "Brand.Color.Functional.Success"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-primary"
     name: "brand-color-primary"
-    value: "var(--color-brand-a-sand-700)"
+    value: "var(--color-brand-c-blue-40)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Primary"
@@ -264,10 +342,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-primary"
+    name: "brand-color-primary"
+    value: "var(--color-brand-a-sand-700)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Primary"
+    pathKey: "Brand.Color.Primary"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-primary-dark"
     name: "brand-color-primary-dark"
-    value: "var(--color-brand-a-sand-900)"
+    value: "var(--color-brand-c-blue-10)"
     type: "color"
     group: "colors"
     path: "Brand/Color/Primary Dark"
@@ -290,6 +381,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-primary-dark"
+    name: "brand-color-primary-dark"
+    value: "var(--color-brand-a-sand-900)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Primary Dark"
+    pathKey: "Brand.Color.Primary Dark"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-subtle"
     name: "brand-color-subtle"
@@ -316,6 +420,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-subtle"
+    name: "brand-color-subtle"
+    value: "var(--color-neutral-500)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Subtle"
+    pathKey: "Brand.Color.Subtle"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-subtle-dark"
     name: "brand-color-subtle-dark"
@@ -342,6 +459,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-subtle-dark"
+    name: "brand-color-subtle-dark"
+    value: "var(--color-neutral-800)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Subtle Dark"
+    pathKey: "Brand.Color.Subtle Dark"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-color-subtle-light"
     name: "brand-color-subtle-light"
@@ -368,6 +498,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-color-subtle-light"
+    name: "brand-color-subtle-light"
+    value: "var(--color-neutral-200)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Subtle Light"
+    pathKey: "Brand.Color.Subtle Light"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--color-border-brand"
     name: "color-border-brand"
@@ -1305,132 +1448,925 @@ tokens:
     selector: ":root"
     sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-active"
-    name: "color-fill-active"
-    value: "var(--brand-color-accent)"
+    cssVar: "--color-brand-c-blue-10"
+    name: "color-brand-c-blue-10"
+    value: "rgb(27 17 92)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Active"
-    pathKey: "Color.Fill.Active"
-    scope: "mode:dark"
-    scopeBucket: "mode"
-    scopeId: "dark"
-    selector: ":root[data-mode=\"dark\"]"
-    sourceFile: "Appearance (Modes).tokens.json"
+    path: "Color/Brand C/Blue/10"
+    pathKey: "Color.Brand C.Blue.10"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-active"
-    name: "color-fill-active"
-    value: "var(--brand-color-accent)"
+    cssVar: "--color-brand-c-blue-20"
+    name: "color-brand-c-blue-20"
+    value: "rgb(7 45 146)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Active"
-    pathKey: "Color.Fill.Active"
-    scope: "mode:light"
-    scopeBucket: "mode"
-    scopeId: "light"
+    path: "Color/Brand C/Blue/20"
+    pathKey: "Color.Brand C.Blue.20"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
     selector: ":root"
-    sourceFile: "Appearance (Modes).tokens.json"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-brand"
-    name: "color-fill-brand"
-    value: "var(--brand-color-primary)"
+    cssVar: "--color-brand-c-blue-30"
+    name: "color-brand-c-blue-30"
+    value: "rgb(10 60 194)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Brand"
-    pathKey: "Color.Fill.Brand"
-    scope: "mode:dark"
-    scopeBucket: "mode"
-    scopeId: "dark"
-    selector: ":root[data-mode=\"dark\"]"
-    sourceFile: "Appearance (Modes).tokens.json"
+    path: "Color/Brand C/Blue/30"
+    pathKey: "Color.Brand C.Blue.30"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-brand"
-    name: "color-fill-brand"
-    value: "var(--brand-color-primary)"
+    cssVar: "--color-brand-c-blue-40"
+    name: "color-brand-c-blue-40"
+    value: "rgb(12 75 243)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Brand"
-    pathKey: "Color.Fill.Brand"
-    scope: "mode:light"
-    scopeBucket: "mode"
-    scopeId: "light"
+    path: "Color/Brand C/Blue/40"
+    pathKey: "Color.Brand C.Blue.40"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
     selector: ":root"
-    sourceFile: "Appearance (Modes).tokens.json"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-danger"
-    name: "color-fill-danger"
-    value: "var(--brand-color-functional-danger)"
+    cssVar: "--color-brand-c-blue-50"
+    name: "color-brand-c-blue-50"
+    value: "rgb(53 103 246)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Danger"
-    pathKey: "Color.Fill.Danger"
-    scope: "mode:dark"
-    scopeBucket: "mode"
-    scopeId: "dark"
-    selector: ":root[data-mode=\"dark\"]"
-    sourceFile: "Appearance (Modes).tokens.json"
+    path: "Color/Brand C/Blue/50"
+    pathKey: "Color.Brand C.Blue.50"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-danger"
-    name: "color-fill-danger"
-    value: "var(--brand-color-functional-danger)"
+    cssVar: "--color-brand-c-blue-60"
+    name: "color-brand-c-blue-60"
+    value: "rgb(109 147 248)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Danger"
-    pathKey: "Color.Fill.Danger"
-    scope: "mode:light"
-    scopeBucket: "mode"
-    scopeId: "light"
+    path: "Color/Brand C/Blue/60"
+    pathKey: "Color.Brand C.Blue.60"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
     selector: ":root"
-    sourceFile: "Appearance (Modes).tokens.json"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-disabled"
-    name: "color-fill-disabled"
-    value: "var(--color-neutral-300)"
+    cssVar: "--color-brand-c-blue-70"
+    name: "color-brand-c-blue-70"
+    value: "rgb(148 176 250)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Disabled"
-    pathKey: "Color.Fill.Disabled"
-    scope: "mode:dark"
-    scopeBucket: "mode"
-    scopeId: "dark"
-    selector: ":root[data-mode=\"dark\"]"
-    sourceFile: "Appearance (Modes).tokens.json"
+    path: "Color/Brand C/Blue/70"
+    pathKey: "Color.Brand C.Blue.70"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-disabled"
-    name: "color-fill-disabled"
-    value: "var(--color-neutral-300)"
+    cssVar: "--color-brand-c-blue-80"
+    name: "color-brand-c-blue-80"
+    value: "rgb(182 200 252)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Disabled"
-    pathKey: "Color.Fill.Disabled"
-    scope: "mode:light"
-    scopeBucket: "mode"
-    scopeId: "light"
+    path: "Color/Brand C/Blue/80"
+    pathKey: "Color.Brand C.Blue.80"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
     selector: ":root"
-    sourceFile: "Appearance (Modes).tokens.json"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-hover"
-    name: "color-fill-hover"
-    value: "var(--color-neutral-alpha-500)"
+    cssVar: "--color-brand-c-blue-90"
+    name: "color-brand-c-blue-90"
+    value: "rgb(216 226 253)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Hover"
-    pathKey: "Color.Fill.Hover"
-    scope: "mode:dark"
-    scopeBucket: "mode"
-    scopeId: "dark"
-    selector: ":root[data-mode=\"dark\"]"
-    sourceFile: "Appearance (Modes).tokens.json"
+    path: "Color/Brand C/Blue/90"
+    pathKey: "Color.Brand C.Blue.90"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
   -
-    cssVar: "--color-fill-hover"
-    name: "color-fill-hover"
-    value: "var(--color-neutral-alpha-500)"
+    cssVar: "--color-brand-c-blue-100"
+    name: "color-brand-c-blue-100"
+    value: "rgb(27 17 92)"
     type: "color"
     group: "colors"
-    path: "Color/Fill/Hover"
-    pathKey: "Color.Fill.Hover"
-    scope: "mode:light"
-    scopeBucket: "mode"
+    path: "Color/Brand C/Blue/100"
+    pathKey: "Color.Brand C.Blue.100"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-10"
+    name: "color-brand-c-coolblue-10"
+    value: "rgb(5 68 97)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/10"
+    pathKey: "Color.Brand C.Coolblue.10"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-20"
+    name: "color-brand-c-coolblue-20"
+    value: "rgb(7 102 146)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/20"
+    pathKey: "Color.Brand C.Coolblue.20"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-30"
+    name: "color-brand-c-coolblue-30"
+    value: "rgb(10 136 194)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/30"
+    pathKey: "Color.Brand C.Coolblue.30"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-40"
+    name: "color-brand-c-coolblue-40"
+    value: "rgb(12 170 243)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/40"
+    pathKey: "Color.Brand C.Coolblue.40"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-50"
+    name: "color-brand-c-coolblue-50"
+    value: "rgb(56 185 245)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/50"
+    pathKey: "Color.Brand C.Coolblue.50"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-60"
+    name: "color-brand-c-coolblue-60"
+    value: "rgb(112 203 244)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/60"
+    pathKey: "Color.Brand C.Coolblue.60"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-70"
+    name: "color-brand-c-coolblue-70"
+    value: "rgb(169 223 248)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/70"
+    pathKey: "Color.Brand C.Coolblue.70"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-80"
+    name: "color-brand-c-coolblue-80"
+    value: "rgb(198 234 251)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/80"
+    pathKey: "Color.Brand C.Coolblue.80"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-90"
+    name: "color-brand-c-coolblue-90"
+    value: "rgb(226 244 253)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/90"
+    pathKey: "Color.Brand C.Coolblue.90"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-coolblue-100"
+    name: "color-brand-c-coolblue-100"
+    value: "rgb(11 68 97)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Coolblue/100"
+    pathKey: "Color.Brand C.Coolblue.100"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-10"
+    name: "color-brand-c-green-10"
+    value: "rgb(5 66 61)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/10"
+    pathKey: "Color.Brand C.Green.10"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-20"
+    name: "color-brand-c-green-20"
+    value: "rgb(36 111 73)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/20"
+    pathKey: "Color.Brand C.Green.20"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-30"
+    name: "color-brand-c-green-30"
+    value: "rgb(43 161 104)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/30"
+    pathKey: "Color.Brand C.Green.30"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-40"
+    name: "color-brand-c-green-40"
+    value: "rgb(48 182 117)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/40"
+    pathKey: "Color.Brand C.Green.40"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-50"
+    name: "color-brand-c-green-50"
+    value: "rgb(97 196 141)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/50"
+    pathKey: "Color.Brand C.Green.50"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-60"
+    name: "color-brand-c-green-60"
+    value: "rgb(135 210 166)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/60"
+    pathKey: "Color.Brand C.Green.60"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-70"
+    name: "color-brand-c-green-70"
+    value: "rgb(169 224 191)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/70"
+    pathKey: "Color.Brand C.Green.70"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-80"
+    name: "color-brand-c-green-80"
+    value: "rgb(197 228 205)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/80"
+    pathKey: "Color.Brand C.Green.80"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-90"
+    name: "color-brand-c-green-90"
+    value: "rgb(223 246 235)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/90"
+    pathKey: "Color.Brand C.Green.90"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-green-100"
+    name: "color-brand-c-green-100"
+    value: "rgb(239 251 245)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Green/100"
+    pathKey: "Color.Brand C.Green.100"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-midnight-10"
+    name: "color-brand-c-midnight-10"
+    value: "rgb(11 9 45)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Midnight/10"
+    pathKey: "Color.Brand C.Midnight.10"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-10"
+    name: "color-brand-c-orange-10"
+    value: "rgb(102 61 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/10"
+    pathKey: "Color.Brand C.Orange.10"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-20"
+    name: "color-brand-c-orange-20"
+    value: "rgb(153 92 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/20"
+    pathKey: "Color.Brand C.Orange.20"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-30"
+    name: "color-brand-c-orange-30"
+    value: "rgb(204 122 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/30"
+    pathKey: "Color.Brand C.Orange.30"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-40"
+    name: "color-brand-c-orange-40"
+    value: "rgb(255 153 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/40"
+    pathKey: "Color.Brand C.Orange.40"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-50"
+    name: "color-brand-c-orange-50"
+    value: "rgb(255 171 46)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/50"
+    pathKey: "Color.Brand C.Orange.50"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-60"
+    name: "color-brand-c-orange-60"
+    value: "rgb(255 194 102)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/60"
+    pathKey: "Color.Brand C.Orange.60"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-70"
+    name: "color-brand-c-orange-70"
+    value: "rgb(255 210 143)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/70"
+    pathKey: "Color.Brand C.Orange.70"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-80"
+    name: "color-brand-c-orange-80"
+    value: "rgb(255 224 178)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/80"
+    pathKey: "Color.Brand C.Orange.80"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-90"
+    name: "color-brand-c-orange-90"
+    value: "rgb(255 239 214)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/90"
+    pathKey: "Color.Brand C.Orange.90"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-orange-100"
+    name: "color-brand-c-orange-100"
+    value: "rgb(255 247 235)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Orange/100"
+    pathKey: "Color.Brand C.Orange.100"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-10"
+    name: "color-brand-c-purple-10"
+    value: "rgb(57 17 92)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/10"
+    pathKey: "Color.Brand C.Purple.10"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-20"
+    name: "color-brand-c-purple-20"
+    value: "rgb(81 7 146)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/20"
+    pathKey: "Color.Brand C.Purple.20"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-30"
+    name: "color-brand-c-purple-30"
+    value: "rgb(108 10 194)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/30"
+    pathKey: "Color.Brand C.Purple.30"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-40"
+    name: "color-brand-c-purple-40"
+    value: "rgb(135 12 243)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/40"
+    pathKey: "Color.Brand C.Purple.40"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-50"
+    name: "color-brand-c-purple-50"
+    value: "rgb(156 53 246)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/50"
+    pathKey: "Color.Brand C.Purple.50"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-60"
+    name: "color-brand-c-purple-60"
+    value: "rgb(183 109 248)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/60"
+    pathKey: "Color.Brand C.Purple.60"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-70"
+    name: "color-brand-c-purple-70"
+    value: "rgb(202 148 250)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/70"
+    pathKey: "Color.Brand C.Purple.70"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-80"
+    name: "color-brand-c-purple-80"
+    value: "rgb(219 182 252)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/80"
+    pathKey: "Color.Brand C.Purple.80"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-90"
+    name: "color-brand-c-purple-90"
+    value: "rgb(236 216 253)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/90"
+    pathKey: "Color.Brand C.Purple.90"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-purple-100"
+    name: "color-brand-c-purple-100"
+    value: "rgb(245 236 254)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Purple/100"
+    pathKey: "Color.Brand C.Purple.100"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-10"
+    name: "color-brand-c-red-10"
+    value: "rgb(96 6 9)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/10"
+    pathKey: "Color.Brand C.Red.10"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-20"
+    name: "color-brand-c-red-20"
+    value: "rgb(144 9 14)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/20"
+    pathKey: "Color.Brand C.Red.20"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-30"
+    name: "color-brand-c-red-30"
+    value: "rgb(192 12 18)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/30"
+    pathKey: "Color.Brand C.Red.30"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-40"
+    name: "color-brand-c-red-40"
+    value: "rgb(240 15 23)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/40"
+    pathKey: "Color.Brand C.Red.40"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-50"
+    name: "color-brand-c-red-50"
+    value: "rgb(242 58 65)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/50"
+    pathKey: "Color.Brand C.Red.50"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-60"
+    name: "color-brand-c-red-60"
+    value: "rgb(246 111 116)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/60"
+    pathKey: "Color.Brand C.Red.60"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-70"
+    name: "color-brand-c-red-70"
+    value: "rgb(248 150 153)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/70"
+    pathKey: "Color.Brand C.Red.70"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-80"
+    name: "color-brand-c-red-80"
+    value: "rgb(250 183 185)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/80"
+    pathKey: "Color.Brand C.Red.80"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-90"
+    name: "color-brand-c-red-90"
+    value: "rgb(253 226 227)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/90"
+    pathKey: "Color.Brand C.Red.90"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-brand-c-red-100"
+    name: "color-brand-c-red-100"
+    value: "rgb(254 236 236)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand C/Red/100"
+    pathKey: "Color.Brand C.Red.100"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-fill-active"
+    name: "color-fill-active"
+    value: "var(--brand-color-accent)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Active"
+    pathKey: "Color.Fill.Active"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-active"
+    name: "color-fill-active"
+    value: "var(--brand-color-accent)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Active"
+    pathKey: "Color.Fill.Active"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-brand"
+    name: "color-fill-brand"
+    value: "var(--brand-color-primary)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Brand"
+    pathKey: "Color.Fill.Brand"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-brand"
+    name: "color-fill-brand"
+    value: "var(--brand-color-primary)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Brand"
+    pathKey: "Color.Fill.Brand"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-danger"
+    name: "color-fill-danger"
+    value: "var(--brand-color-functional-danger)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Danger"
+    pathKey: "Color.Fill.Danger"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-danger"
+    name: "color-fill-danger"
+    value: "var(--brand-color-functional-danger)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Danger"
+    pathKey: "Color.Fill.Danger"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-disabled"
+    name: "color-fill-disabled"
+    value: "var(--color-neutral-300)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Disabled"
+    pathKey: "Color.Fill.Disabled"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-disabled"
+    name: "color-fill-disabled"
+    value: "var(--color-neutral-300)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Disabled"
+    pathKey: "Color.Fill.Disabled"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-hover"
+    name: "color-fill-hover"
+    value: "var(--color-neutral-alpha-inverse-100)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Hover"
+    pathKey: "Color.Fill.Hover"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-fill-hover"
+    name: "color-fill-hover"
+    value: "var(--color-neutral-alpha-500)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Hover"
+    pathKey: "Color.Fill.Hover"
+    scope: "mode:light"
+    scopeBucket: "mode"
     scopeId: "light"
     selector: ":root"
     sourceFile: "Appearance (Modes).tokens.json"
@@ -1811,10 +2747,140 @@ tokens:
     scopeId: "core-primitives"
     selector: ":root"
     sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-000"
+    name: "color-neutral-alpha-inverse-000"
+    value: "rgba(255 255 255 / 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/000"
+    pathKey: "Color.Neutral.Alpha Inverse.000"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-100"
+    name: "color-neutral-alpha-inverse-100"
+    value: "rgba(255 255 255 / 0.1)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/100"
+    pathKey: "Color.Neutral.Alpha Inverse.100"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-200"
+    name: "color-neutral-alpha-inverse-200"
+    value: "rgba(255 255 255 / 0.2)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/200"
+    pathKey: "Color.Neutral.Alpha Inverse.200"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-300"
+    name: "color-neutral-alpha-inverse-300"
+    value: "rgba(255 255 255 / 0.3)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/300"
+    pathKey: "Color.Neutral.Alpha Inverse.300"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-400"
+    name: "color-neutral-alpha-inverse-400"
+    value: "rgba(255 255 255 / 0.4)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/400"
+    pathKey: "Color.Neutral.Alpha Inverse.400"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-500"
+    name: "color-neutral-alpha-inverse-500"
+    value: "rgba(255 255 255 / 0.5)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/500"
+    pathKey: "Color.Neutral.Alpha Inverse.500"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-600"
+    name: "color-neutral-alpha-inverse-600"
+    value: "rgba(255 255 255 / 0.6)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/600"
+    pathKey: "Color.Neutral.Alpha Inverse.600"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-700"
+    name: "color-neutral-alpha-inverse-700"
+    value: "rgba(255 255 255 / 0.7)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/700"
+    pathKey: "Color.Neutral.Alpha Inverse.700"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-800"
+    name: "color-neutral-alpha-inverse-800"
+    value: "rgba(255 255 255 / 0.8)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/800"
+    pathKey: "Color.Neutral.Alpha Inverse.800"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-inverse-900"
+    name: "color-neutral-alpha-inverse-900"
+    value: "rgba(255 255 255 / 0.9)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha Inverse/900"
+    pathKey: "Color.Neutral.Alpha Inverse.900"
+    scope: "global:core-primitives"
+    scopeBucket: "global"
+    scopeId: "core-primitives"
+    selector: ":root"
+    sourceFile: "Core (Primitives).tokens.json"
   -
     cssVar: "--color-overlay-active"
     name: "color-overlay-active"
-    value: "var(--color-neutral-alpha-400)"
+    value: "var(--color-neutral-alpha-inverse-200)"
     type: "color"
     group: "colors"
     path: "Color/Overlay/Active"
@@ -1840,7 +2906,7 @@ tokens:
   -
     cssVar: "--color-overlay-backdrop"
     name: "color-overlay-backdrop"
-    value: "var(--color-neutral-alpha-400)"
+    value: "var(--color-neutral-alpha-inverse-400)"
     type: "color"
     group: "colors"
     path: "Color/Overlay/Backdrop"
@@ -1866,7 +2932,7 @@ tokens:
   -
     cssVar: "--color-overlay-hover"
     name: "color-overlay-hover"
-    value: "var(--color-neutral-alpha-200)"
+    value: "var(--color-neutral-alpha-inverse-100)"
     type: "color"
     group: "colors"
     path: "Color/Overlay/Hover"
@@ -1892,7 +2958,7 @@ tokens:
   -
     cssVar: "--color-overlay-selected"
     name: "color-overlay-selected"
-    value: "var(--color-neutral-alpha-600)"
+    value: "var(--color-neutral-alpha-inverse-300)"
     type: "color"
     group: "colors"
     path: "Color/Overlay/Selected"
@@ -1968,78 +3034,234 @@ tokens:
     selector: ":root"
     sourceFile: "Appearance (Modes).tokens.json"
   -
-    cssVar: "--color-text-default"
-    name: "color-text-default"
+    cssVar: "--color-text-default"
+    name: "color-text-default"
+    value: "var(--color-neutral-800)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Default"
+    pathKey: "Color.Text.Default"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-default"
+    name: "color-text-default"
+    value: "var(--color-neutral-800)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Default"
+    pathKey: "Color.Text.Default"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-disabled"
+    name: "color-text-disabled"
+    value: "var(--color-neutral-600)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Disabled"
+    pathKey: "Color.Text.Disabled"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-disabled"
+    name: "color-text-disabled"
+    value: "var(--color-neutral-600)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Disabled"
+    pathKey: "Color.Text.Disabled"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-inverse"
+    name: "color-text-inverse"
+    value: "var(--color-neutral-1000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Inverse"
+    pathKey: "Color.Text.Inverse"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-inverse"
+    name: "color-text-inverse"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Inverse"
+    pathKey: "Color.Text.Inverse"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-on-active"
+    name: "color-text-on-active"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/On Active"
+    pathKey: "Color.Text.On Active"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-on-active"
+    name: "color-text-on-active"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/On Active"
+    pathKey: "Color.Text.On Active"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-on-brand"
+    name: "color-text-on-brand"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/On Brand"
+    pathKey: "Color.Text.On Brand"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-on-brand"
+    name: "color-text-on-brand"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/On Brand"
+    pathKey: "Color.Text.On Brand"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-on-danger"
+    name: "color-text-on-danger"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/On Danger"
+    pathKey: "Color.Text.On Danger"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-on-danger"
+    name: "color-text-on-danger"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/On Danger"
+    pathKey: "Color.Text.On Danger"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Appearance (Modes).tokens.json"
+  -
+    cssVar: "--color-text-on-disabled"
+    name: "color-text-on-disabled"
     value: "var(--color-neutral-800)"
     type: "color"
     group: "colors"
-    path: "Color/Text/Default"
-    pathKey: "Color.Text.Default"
+    path: "Color/Text/On Disabled"
+    pathKey: "Color.Text.On Disabled"
     scope: "mode:dark"
     scopeBucket: "mode"
     scopeId: "dark"
     selector: ":root[data-mode=\"dark\"]"
     sourceFile: "Appearance (Modes).tokens.json"
   -
-    cssVar: "--color-text-default"
-    name: "color-text-default"
+    cssVar: "--color-text-on-disabled"
+    name: "color-text-on-disabled"
     value: "var(--color-neutral-800)"
     type: "color"
     group: "colors"
-    path: "Color/Text/Default"
-    pathKey: "Color.Text.Default"
+    path: "Color/Text/On Disabled"
+    pathKey: "Color.Text.On Disabled"
     scope: "mode:light"
     scopeBucket: "mode"
     scopeId: "light"
     selector: ":root"
     sourceFile: "Appearance (Modes).tokens.json"
   -
-    cssVar: "--color-text-disabled"
-    name: "color-text-disabled"
-    value: "var(--color-neutral-600)"
+    cssVar: "--color-text-on-subtle"
+    name: "color-text-on-subtle"
+    value: "var(--brand-color-primary-dark)"
     type: "color"
     group: "colors"
-    path: "Color/Text/Disabled"
-    pathKey: "Color.Text.Disabled"
+    path: "Color/Text/On Subtle"
+    pathKey: "Color.Text.On Subtle"
     scope: "mode:dark"
     scopeBucket: "mode"
     scopeId: "dark"
     selector: ":root[data-mode=\"dark\"]"
     sourceFile: "Appearance (Modes).tokens.json"
   -
-    cssVar: "--color-text-disabled"
-    name: "color-text-disabled"
-    value: "var(--color-neutral-600)"
+    cssVar: "--color-text-on-subtle"
+    name: "color-text-on-subtle"
+    value: "var(--brand-color-primary)"
     type: "color"
     group: "colors"
-    path: "Color/Text/Disabled"
-    pathKey: "Color.Text.Disabled"
+    path: "Color/Text/On Subtle"
+    pathKey: "Color.Text.On Subtle"
     scope: "mode:light"
     scopeBucket: "mode"
     scopeId: "light"
     selector: ":root"
     sourceFile: "Appearance (Modes).tokens.json"
   -
-    cssVar: "--color-text-inverse"
-    name: "color-text-inverse"
-    value: "var(--color-neutral-1000)"
+    cssVar: "--color-text-on-success"
+    name: "color-text-on-success"
+    value: "var(--color-neutral-000)"
     type: "color"
     group: "colors"
-    path: "Color/Text/Inverse"
-    pathKey: "Color.Text.Inverse"
+    path: "Color/Text/On Success"
+    pathKey: "Color.Text.On Success"
     scope: "mode:dark"
     scopeBucket: "mode"
     scopeId: "dark"
     selector: ":root[data-mode=\"dark\"]"
     sourceFile: "Appearance (Modes).tokens.json"
   -
-    cssVar: "--color-text-inverse"
-    name: "color-text-inverse"
+    cssVar: "--color-text-on-success"
+    name: "color-text-on-success"
     value: "var(--color-neutral-000)"
     type: "color"
     group: "colors"
-    path: "Color/Text/Inverse"
-    pathKey: "Color.Text.Inverse"
+    path: "Color/Text/On Success"
+    pathKey: "Color.Text.On Success"
     scope: "mode:light"
     scopeBucket: "mode"
     scopeId: "light"
@@ -2149,6 +3371,32 @@ tokens:
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-border-size-default"
+    name: "badge-border-size-default"
+    value: "var(--size-border-100)"
+    type: "number"
+    group: "components"
+    path: "Badge/Border Size Default"
+    pathKey: "Badge.Border Size Default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-brand-border-color"
+    name: "badge-brand-border-color"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Badge/Brand/Border Color"
+    pathKey: "Badge.Brand.Border Color"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--badge-brand-container-background"
     name: "badge-brand-container-background"
@@ -2165,7 +3413,7 @@ tokens:
   -
     cssVar: "--badge-brand-text-color"
     name: "badge-brand-text-color"
-    value: "var(--color-text-inverse)"
+    value: "var(--color-text-on-brand)"
     type: "color"
     group: "components"
     path: "Badge/Brand/Text Color"
@@ -2175,6 +3423,19 @@ tokens:
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-danger-border-color"
+    name: "badge-danger-border-color"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Badge/Danger/Container/Border Color"
+    pathKey: "Badge.Danger.Container.Border Color"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--badge-danger-container-background"
     name: "badge-danger-container-background"
@@ -2191,7 +3452,7 @@ tokens:
   -
     cssVar: "--badge-danger-text-color"
     name: "badge-danger-text-color"
-    value: "var(--color-text-inverse)"
+    value: "var(--color-text-on-danger)"
     type: "color"
     group: "components"
     path: "Badge/Danger/Text Color"
@@ -2201,6 +3462,19 @@ tokens:
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-default-border-color"
+    name: "badge-default-border-color"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Badge/Default/Border Color"
+    pathKey: "Badge.Default.Border Color"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--badge-default-container-background"
     name: "badge-default-container-background"
@@ -2230,7 +3504,7 @@ tokens:
   -
     cssVar: "--badge-font-family"
     name: "badge-font-family"
-    value: "var(--typography-label-font-family)"
+    value: "var(--brand-font-lead)"
     type: "string"
     group: "components"
     path: "Badge/Font Family"
@@ -2243,11 +3517,11 @@ tokens:
   -
     cssVar: "--badge-font-size-md"
     name: "badge-font-size-md"
-    value: "var(--font-size-sm)"
+    value: ".875rem"
     type: "number"
     group: "components"
-    path: "Badge/Font Size Md"
-    pathKey: "Badge.Font Size Md"
+    path: "Badge/font-size/md"
+    pathKey: "Badge.font-size.md"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -2256,11 +3530,11 @@ tokens:
   -
     cssVar: "--badge-font-size-sm"
     name: "badge-font-size-sm"
-    value: "var(--font-size-xs)"
+    value: ".75rem"
     type: "number"
     group: "components"
-    path: "Badge/Font Size Sm"
-    pathKey: "Badge.Font Size Sm"
+    path: "Badge/font-size/sm"
+    pathKey: "Badge.font-size.sm"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -2269,7 +3543,7 @@ tokens:
   -
     cssVar: "--badge-font-weight"
     name: "badge-font-weight"
-    value: "var(--font-weight-700)"
+    value: "var(--typography-label-font-weight)"
     type: "string"
     group: "components"
     path: "Badge/Font Weight"
@@ -2292,14 +3566,27 @@ tokens:
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-height-min"
+    name: "badge-height-min"
+    value: "2.5rem"
+    type: "number"
+    group: "components"
+    path: "Badge/Height Min"
+    pathKey: "Badge.Height Min"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--badge-line-height-md"
     name: "badge-line-height-md"
-    value: "var(--line-height-sm)"
+    value: "1.25rem"
     type: "number"
     group: "components"
-    path: "Badge/Line Height Md"
-    pathKey: "Badge.Line Height Md"
+    path: "Badge/line-height/md"
+    pathKey: "Badge.line-height.md"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -2308,11 +3595,11 @@ tokens:
   -
     cssVar: "--badge-line-height-sm"
     name: "badge-line-height-sm"
-    value: "var(--line-height-xs)"
+    value: "1rem"
     type: "number"
     group: "components"
-    path: "Badge/Line Height Sm"
-    pathKey: "Badge.Line Height Sm"
+    path: "Badge/line-height/sm"
+    pathKey: "Badge.line-height.sm"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -2334,11 +3621,24 @@ tokens:
   -
     cssVar: "--badge-padding-block-sm"
     name: "badge-padding-block-sm"
-    value: "var(--size-spacing-000)"
+    value: ".125rem"
+    type: "number"
+    group: "components"
+    path: "Badge/padding-block/sm"
+    pathKey: "Badge.padding-block.sm"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-padding-inline-icon-only"
+    name: "badge-padding-inline-icon-only"
+    value: "var(--size-spacing-200)"
     type: "number"
     group: "components"
-    path: "Badge/Padding Block Sm"
-    pathKey: "Badge.Padding Block Sm"
+    path: "Badge/Padding Inline Icon Only"
+    pathKey: "Badge.Padding Inline Icon Only"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -2360,11 +3660,24 @@ tokens:
   -
     cssVar: "--badge-padding-inline-sm"
     name: "badge-padding-inline-sm"
-    value: "var(--size-spacing-200)"
+    value: ".5rem"
     type: "number"
     group: "components"
-    path: "Badge/Padding Inline Sm"
-    pathKey: "Badge.Padding Inline Sm"
+    path: "Badge/padding-inline/sm"
+    pathKey: "Badge.padding-inline.sm"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-success-border-color"
+    name: "badge-success-border-color"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Badge/Success/Border Color"
+    pathKey: "Badge.Success.Border Color"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -2386,7 +3699,7 @@ tokens:
   -
     cssVar: "--badge-success-text-color"
     name: "badge-success-text-color"
-    value: "var(--color-text-inverse)"
+    value: "var(--color-text-on-success)"
     type: "color"
     group: "components"
     path: "Badge/Success/Text Color"
@@ -2396,6 +3709,19 @@ tokens:
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--badge-width-min"
+    name: "badge-width-min"
+    value: "2.5rem"
+    type: "number"
+    group: "components"
+    path: "Badge/Width Min"
+    pathKey: "Badge.Width Min"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--button-border-color-disabled"
     name: "button-border-color-disabled"
@@ -3023,7 +4349,7 @@ tokens:
   -
     cssVar: "--button-solid-text-color-active"
     name: "button-solid-text-color-active"
-    value: "var(--color-text-inverse)"
+    value: "var(--color-text-on-brand)"
     type: "color"
     group: "components"
     path: "Button/Solid/Text Color Active"
@@ -3036,7 +4362,7 @@ tokens:
   -
     cssVar: "--button-solid-text-color-default"
     name: "button-solid-text-color-default"
-    value: "var(--color-text-inverse)"
+    value: "var(--color-text-on-brand)"
     type: "color"
     group: "components"
     path: "Button/Solid/Text Color Default"
@@ -3049,7 +4375,7 @@ tokens:
   -
     cssVar: "--button-solid-text-color-hover"
     name: "button-solid-text-color-hover"
-    value: "var(--color-text-inverse)"
+    value: "var(--color-text-on-brand)"
     type: "color"
     group: "components"
     path: "Button/Solid/Text Color Hover"
@@ -3085,14 +4411,105 @@ tokens:
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-border-color-active"
+    name: "checkbox-border-color-active"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Border/Color Active"
+    pathKey: "Checkbox.Border.Color Active"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-border-color-default"
+    name: "checkbox-border-color-default"
+    value: "var(--color-border-subtle)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Border/Color Default"
+    pathKey: "Checkbox.Border.Color Default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-border-color-disabled"
+    name: "checkbox-border-color-disabled"
+    value: "var(--color-border-disabled)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Border/Color Disabled"
+    pathKey: "Checkbox.Border.Color Disabled"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-border-color-focus"
+    name: "checkbox-border-color-focus"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Border/Color Focus"
+    pathKey: "Checkbox.Border.Color Focus"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-border-color-hover"
+    name: "checkbox-border-color-hover"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Border/Color Hover"
+    pathKey: "Checkbox.Border.Color Hover"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-border-color-invalid"
+    name: "checkbox-border-color-invalid"
+    value: "var(--color-border-danger)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Border/Color Invalid"
+    pathKey: "Checkbox.Border.Color Invalid"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-border-color-valid"
+    name: "checkbox-border-color-valid"
+    value: "var(--color-border-strong)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Border/Color Valid"
+    pathKey: "Checkbox.Border.Color Valid"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--checkbox-border-size-default"
     name: "checkbox-border-size-default"
     value: "var(--size-border-100)"
     type: "number"
     group: "components"
-    path: "Input/Checkbox/Border Size Default"
-    pathKey: "Input.Checkbox.Border Size Default"
+    path: "Checkbox/Border/Size Default"
+    pathKey: "Checkbox.Border.Size Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -3104,8 +4521,8 @@ tokens:
     value: "var(--size-border-000)"
     type: "number"
     group: "components"
-    path: "Input/Checkbox/Border Size Disabled"
-    pathKey: "Input.Checkbox.Border Size Disabled"
+    path: "Checkbox/Border/Size Disabled"
+    pathKey: "Checkbox.Border.Size Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -3117,8 +4534,125 @@ tokens:
     value: "var(--size-border-200)"
     type: "number"
     group: "components"
-    path: "Input/Checkbox/Border Size Hover"
-    pathKey: "Input.Checkbox.Border Size Hover"
+    path: "Checkbox/Border/Size Hover"
+    pathKey: "Checkbox.Border.Size Hover"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-container-background-active"
+    name: "checkbox-container-background-active"
+    value: "var(--color-fill-brand)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Container/Background Active"
+    pathKey: "Checkbox.Container.Background Active"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-container-background-default"
+    name: "checkbox-container-background-default"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Container/Background Default"
+    pathKey: "Checkbox.Container.Background Default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-container-background-disabled"
+    name: "checkbox-container-background-disabled"
+    value: "var(--color-fill-disabled)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Container/Background Disabled"
+    pathKey: "Checkbox.Container.Background Disabled"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-container-background-focus"
+    name: "checkbox-container-background-focus"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Container/Background Focus"
+    pathKey: "Checkbox.Container.Background Focus"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-container-background-hover"
+    name: "checkbox-container-background-hover"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Container/Background Hover"
+    pathKey: "Checkbox.Container.Background Hover"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-text-color-active"
+    name: "checkbox-text-color-active"
+    value: "var(--color-text-on-brand)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Text Color Active"
+    pathKey: "Checkbox.Text Color Active"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-text-color-default"
+    name: "checkbox-text-color-default"
+    value: "var(--color-text-default)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Text Color Default"
+    pathKey: "Checkbox.Text Color Default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-text-color-disabled"
+    name: "checkbox-text-color-disabled"
+    value: "var(--color-text-disabled)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Text Color Disabled"
+    pathKey: "Checkbox.Text Color Disabled"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--checkbox-text-color-hover"
+    name: "checkbox-text-color-hover"
+    value: "var(--color-text-brand)"
+    type: "color"
+    group: "components"
+    path: "Checkbox/Text Color Hover"
+    pathKey: "Checkbox.Text Color Hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -3281,286 +4815,208 @@ tokens:
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-border-color-disabled"
-    name: "input-border-color-disabled"
-    value: "var(--color-border-disabled)"
-    type: "color"
-    group: "components"
-    path: "Input/Border Color Disabled"
-    pathKey: "Input.Border Color Disabled"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-border-radius"
-    name: "input-border-radius"
-    value: "var(--brand-corner-input)"
-    type: "number"
-    group: "components"
-    path: "Input/Border Radius"
-    pathKey: "Input.Border Radius"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-border-size-active"
-    name: "input-border-size-active"
-    value: "var(--size-border-200)"
-    type: "number"
-    group: "components"
-    path: "Input/Border Size Active"
-    pathKey: "Input.Border Size Active"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-border-size-default"
-    name: "input-border-size-default"
-    value: "var(--size-border-100)"
-    type: "number"
-    group: "components"
-    path: "Input/Border Size Default"
-    pathKey: "Input.Border Size Default"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-border-size-hover"
-    name: "input-border-size-hover"
-    value: "var(--size-border-100)"
-    type: "number"
-    group: "components"
-    path: "Input/Border Size Hover"
-    pathKey: "Input.Border Size Hover"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-checkbox-border-color-active"
-    name: "input-checkbox-border-color-active"
+    cssVar: "--input-border-color-active"
+    name: "input-border-color-active"
     value: "var(--color-border-brand)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Border/Color Active"
-    pathKey: "Input.Checkbox.Border.Color Active"
+    path: "Input/Border/Border Color Active"
+    pathKey: "Input.Border.Border Color Active"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-border-color-default"
-    name: "input-checkbox-border-color-default"
-    value: "var(--color-border-subtle)"
+    cssVar: "--input-border-color-default"
+    name: "input-border-color-default"
+    value: "var(--color-border-default)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Border/Color Default"
-    pathKey: "Input.Checkbox.Border.Color Default"
+    path: "Input/Border/Border Color Default"
+    pathKey: "Input.Border.Border Color Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-border-color-disabled"
-    name: "input-checkbox-border-color-disabled"
+    cssVar: "--input-border-color-disabled"
+    name: "input-border-color-disabled"
     value: "var(--color-border-disabled)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Border/Color Disabled"
-    pathKey: "Input.Checkbox.Border.Color Disabled"
+    path: "Input/Border/Border Color Disabled"
+    pathKey: "Input.Border.Border Color Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-border-color-focus"
-    name: "input-checkbox-border-color-focus"
+    cssVar: "--input-border-color-focus"
+    name: "input-border-color-focus"
     value: "var(--color-border-brand)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Border/Color Focus"
-    pathKey: "Input.Checkbox.Border.Color Focus"
+    path: "Input/Border/Border Color Focus"
+    pathKey: "Input.Border.Border Color Focus"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-border-color-hover"
-    name: "input-checkbox-border-color-hover"
-    value: "var(--color-border-strong)"
+    cssVar: "--input-border-color-hover"
+    name: "input-border-color-hover"
+    value: "var(--color-border-brand)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Border/Color Hover"
-    pathKey: "Input.Checkbox.Border.Color Hover"
+    path: "Input/Border/Border Color Hover"
+    pathKey: "Input.Border.Border Color Hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-border-color-invalid"
-    name: "input-checkbox-border-color-invalid"
+    cssVar: "--input-border-color-invalid"
+    name: "input-border-color-invalid"
     value: "var(--color-border-danger)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Border/Color Invalid"
-    pathKey: "Input.Checkbox.Border.Color Invalid"
+    path: "Input/Border/Border Color Invalid"
+    pathKey: "Input.Border.Border Color Invalid"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-border-color-valid"
-    name: "input-checkbox-border-color-valid"
+    cssVar: "--input-border-color-valid"
+    name: "input-border-color-valid"
     value: "var(--color-border-strong)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Border/Color Valid"
-    pathKey: "Input.Checkbox.Border.Color Valid"
+    path: "Input/Border/Border Color Valid"
+    pathKey: "Input.Border.Border Color Valid"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-container-background-active"
-    name: "input-checkbox-container-background-active"
-    value: "var(--color-fill-brand)"
-    type: "color"
+    cssVar: "--input-border-radius"
+    name: "input-border-radius"
+    value: "var(--brand-corner-input)"
+    type: "number"
     group: "components"
-    path: "Input/Checkbox/Container/Background Active"
-    pathKey: "Input.Checkbox.Container.Background Active"
+    path: "Input/Border/Border Radius"
+    pathKey: "Input.Border.Border Radius"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-container-background-default"
-    name: "input-checkbox-container-background-default"
-    value: "var(--color-fill-surface)"
-    type: "color"
+    cssVar: "--input-border-size-active"
+    name: "input-border-size-active"
+    value: "var(--size-border-200)"
+    type: "number"
     group: "components"
-    path: "Input/Checkbox/Container/Background Default"
-    pathKey: "Input.Checkbox.Container.Background Default"
+    path: "Input/Border/Border Size Active"
+    pathKey: "Input.Border.Border Size Active"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-container-background-disabled"
-    name: "input-checkbox-container-background-disabled"
-    value: "var(--color-fill-disabled)"
-    type: "color"
+    cssVar: "--input-border-size-default"
+    name: "input-border-size-default"
+    value: "var(--size-border-100)"
+    type: "number"
     group: "components"
-    path: "Input/Checkbox/Container/Background Disabled"
-    pathKey: "Input.Checkbox.Container.Background Disabled"
+    path: "Input/Border/Border Size Default"
+    pathKey: "Input.Border.Border Size Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-container-background-focus"
-    name: "input-checkbox-container-background-focus"
-    value: "var(--color-fill-surface)"
-    type: "color"
+    cssVar: "--input-border-size-hover"
+    name: "input-border-size-hover"
+    value: "var(--size-border-100)"
+    type: "number"
     group: "components"
-    path: "Input/Checkbox/Container/Background Focus"
-    pathKey: "Input.Checkbox.Container.Background Focus"
+    path: "Input/Border/Border Size Hover"
+    pathKey: "Input.Border.Border Size Hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-container-background-hover"
-    name: "input-checkbox-container-background-hover"
+    cssVar: "--input-container-background-active"
+    name: "input-container-background-active"
     value: "var(--color-fill-surface)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Container/Background Hover"
-    pathKey: "Input.Checkbox.Container.Background Hover"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-checkbox-text-color-active"
-    name: "input-checkbox-text-color-active"
-    value: "var(--color-text-inverse)"
-    type: "color"
-    group: "components"
-    path: "Input/Checkbox/Text Color Active"
-    pathKey: "Input.Checkbox.Text Color Active"
+    path: "Input/Container/Background Active"
+    pathKey: "Input.Container.Background Active"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-text-color-default"
-    name: "input-checkbox-text-color-default"
-    value: "var(--color-text-default)"
+    cssVar: "--input-container-background-default"
+    name: "input-container-background-default"
+    value: "var(--color-fill-surface)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Text Color Default"
-    pathKey: "Input.Checkbox.Text Color Default"
+    path: "Input/Container/Background Default"
+    pathKey: "Input.Container.Background Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-text-color-disabled"
-    name: "input-checkbox-text-color-disabled"
-    value: "var(--color-text-disabled)"
+    cssVar: "--input-container-background-disabled"
+    name: "input-container-background-disabled"
+    value: "var(--color-fill-disabled)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Text Color Disabled"
-    pathKey: "Input.Checkbox.Text Color Disabled"
+    path: "Input/Container/Background Disabled"
+    pathKey: "Input.Container.Background Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-checkbox-text-color-hover"
-    name: "input-checkbox-text-color-hover"
-    value: "var(--color-text-strong)"
+    cssVar: "--input-container-background-focus"
+    name: "input-container-background-focus"
+    value: "var(--color-fill-surface)"
     type: "color"
     group: "components"
-    path: "Input/Checkbox/Text Color Hover"
-    pathKey: "Input.Checkbox.Text Color Hover"
+    path: "Input/Container/Background Focus"
+    pathKey: "Input.Container.Background Focus"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-container-background-disabled"
-    name: "input-container-background-disabled"
-    value: "var(--color-fill-disabled)"
+    cssVar: "--input-container-background-hover"
+    name: "input-container-background-hover"
+    value: "var(--color-fill-surface)"
     type: "color"
     group: "components"
-    path: "Input/Container Background Disabled"
-    pathKey: "Input.Container Background Disabled"
+    path: "Input/Container/Background Hover"
+    pathKey: "Input.Container.Background Hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -3631,6 +5087,19 @@ tokens:
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--input-height-min"
+    name: "input-height-min"
+    value: "2.5rem"
+    type: "number"
+    group: "components"
+    path: "Input/Height Min"
+    pathKey: "Input.Height Min"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--input-line-height"
     name: "input-line-height"
@@ -3703,380 +5172,211 @@ tokens:
     type: "number"
     group: "components"
     path: "Input/Padding Inline Icon Only"
-    pathKey: "Input.Padding Inline Icon Only"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-border-color-active"
-    name: "input-radio-border-color-active"
-    value: "var(--color-border-brand)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Border/Color Active"
-    pathKey: "Input.Radio.Border.Color Active"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-border-color-default"
-    name: "input-radio-border-color-default"
-    value: "var(--color-border-subtle)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Border/Color Default"
-    pathKey: "Input.Radio.Border.Color Default"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-border-color-disabled"
-    name: "input-radio-border-color-disabled"
-    value: "var(--color-border-disabled)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Border/Color Disabled"
-    pathKey: "Input.Radio.Border.Color Disabled"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-border-color-focus"
-    name: "input-radio-border-color-focus"
-    value: "var(--color-border-brand)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Border/Color Focus"
-    pathKey: "Input.Radio.Border.Color Focus"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-border-color-hover"
-    name: "input-radio-border-color-hover"
-    value: "var(--color-border-strong)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Border/Color Hover"
-    pathKey: "Input.Radio.Border.Color Hover"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-container-background-active"
-    name: "input-radio-container-background-active"
-    value: "var(--color-fill-brand)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Container/Background Active"
-    pathKey: "Input.Radio.Container.Background Active"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-container-background-default"
-    name: "input-radio-container-background-default"
-    value: "var(--color-fill-surface)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Container/Background Default"
-    pathKey: "Input.Radio.Container.Background Default"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-container-background-disabled"
-    name: "input-radio-container-background-disabled"
-    value: "var(--color-fill-disabled)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Container/Background Disabled"
-    pathKey: "Input.Radio.Container.Background Disabled"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-container-background-focus"
-    name: "input-radio-container-background-focus"
-    value: "var(--color-fill-surface)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Container/Background Focus"
-    pathKey: "Input.Radio.Container.Background Focus"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-container-background-hover"
-    name: "input-radio-container-background-hover"
-    value: "var(--color-fill-surface)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Container/Background Hover"
-    pathKey: "Input.Radio.Container.Background Hover"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-text-color-active"
-    name: "input-radio-text-color-active"
-    value: "var(--color-text-inverse)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Text Color Active"
-    pathKey: "Input.Radio.Text Color Active"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-text-color-default"
-    name: "input-radio-text-color-default"
-    value: "var(--color-text-default)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Text Color Default"
-    pathKey: "Input.Radio.Text Color Default"
-    scope: "global:components-ui"
-    scopeBucket: "global"
-    scopeId: "components-ui"
-    selector: ":root"
-    sourceFile: "Components (UI).tokens.json"
-  -
-    cssVar: "--input-radio-text-color-disabled"
-    name: "input-radio-text-color-disabled"
-    value: "var(--color-text-disabled)"
-    type: "color"
-    group: "components"
-    path: "Input/Radio/Text Color Disabled"
-    pathKey: "Input.Radio.Text Color Disabled"
+    pathKey: "Input.Padding Inline Icon Only"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-radio-text-color-hover"
-    name: "input-radio-text-color-hover"
-    value: "var(--color-text-strong)"
+    cssVar: "--input-radio-border-color-active"
+    name: "input-radio-border-color-active"
+    value: "var(--color-border-brand)"
     type: "color"
     group: "components"
-    path: "Input/Radio/Text Color Hover"
-    pathKey: "Input.Radio.Text Color Hover"
+    path: "Radio/Border/Color Active"
+    pathKey: "Radio.Border.Color Active"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-border-color-active"
-    name: "input-text-border-color-active"
-    value: "var(--color-border-brand)"
+    cssVar: "--input-radio-border-color-default"
+    name: "input-radio-border-color-default"
+    value: "var(--color-border-subtle)"
     type: "color"
     group: "components"
-    path: "Input/Text/Border/Color Active"
-    pathKey: "Input.Text.Border.Color Active"
+    path: "Radio/Border/Color Default"
+    pathKey: "Radio.Border.Color Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-border-color-default"
-    name: "input-text-border-color-default"
-    value: "var(--color-border-default)"
+    cssVar: "--input-radio-border-color-disabled"
+    name: "input-radio-border-color-disabled"
+    value: "var(--color-border-disabled)"
     type: "color"
     group: "components"
-    path: "Input/Text/Border/Color Default"
-    pathKey: "Input.Text.Border.Color Default"
+    path: "Radio/Border/Color Disabled"
+    pathKey: "Radio.Border.Color Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-border-color-focus"
-    name: "input-text-border-color-focus"
+    cssVar: "--input-radio-border-color-focus"
+    name: "input-radio-border-color-focus"
     value: "var(--color-border-brand)"
     type: "color"
     group: "components"
-    path: "Input/Text/Border/Color Focus"
-    pathKey: "Input.Text.Border.Color Focus"
+    path: "Input/radio/border-color/focus"
+    pathKey: "Input.radio.border-color.focus"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-border-color-hover"
-    name: "input-text-border-color-hover"
+    cssVar: "--input-radio-border-color-hover"
+    name: "input-radio-border-color-hover"
     value: "var(--color-border-brand)"
     type: "color"
     group: "components"
-    path: "Input/Text/Border/Color Hover"
-    pathKey: "Input.Text.Border.Color Hover"
+    path: "Radio/Border/Color Hover"
+    pathKey: "Radio.Border.Color Hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-border-color-invalid"
-    name: "input-text-border-color-invalid"
-    value: "var(--color-border-danger)"
+    cssVar: "--input-radio-container-background-default"
+    name: "input-radio-container-background-default"
+    value: "var(--color-fill-surface)"
     type: "color"
     group: "components"
-    path: "Input/Text/Border/Color Invalid"
-    pathKey: "Input.Text.Border.Color Invalid"
+    path: "Radio/Container/Background Default"
+    pathKey: "Radio.Container.Background Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-border-color-valid"
-    name: "input-text-border-color-valid"
-    value: "var(--color-border-strong)"
+    cssVar: "--input-radio-container-background-disabled"
+    name: "input-radio-container-background-disabled"
+    value: "var(--color-fill-disabled)"
     type: "color"
     group: "components"
-    path: "Input/Text/Border/Color Valid"
-    pathKey: "Input.Text.Border.Color Valid"
+    path: "Radio/Container/Background Disabled"
+    pathKey: "Radio.Container.Background Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-color-disabled"
-    name: "input-text-color-disabled"
-    value: "var(--color-text-disabled)"
+    cssVar: "--input-radio-container-background-hover"
+    name: "input-radio-container-background-hover"
+    value: "var(--color-fill-surface)"
     type: "color"
     group: "components"
-    path: "Input/Text Color Disabled"
-    pathKey: "Input.Text Color Disabled"
+    path: "Input/radio/container-background/hover"
+    pathKey: "Input.radio.container-background.hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-container-background-active"
-    name: "input-text-container-background-active"
-    value: "var(--color-fill-surface)"
+    cssVar: "--input-radio-text-color-active"
+    name: "input-radio-text-color-active"
+    value: "var(--color-text-default)"
     type: "color"
     group: "components"
-    path: "Input/Text/Container/Background Active"
-    pathKey: "Input.Text.Container.Background Active"
+    path: "Input/radio/text-color/active"
+    pathKey: "Input.radio.text-color.active"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-container-background-default"
-    name: "input-text-container-background-default"
-    value: "var(--color-fill-surface)"
+    cssVar: "--input-radio-text-color-default"
+    name: "input-radio-text-color-default"
+    value: "var(--color-text-default)"
     type: "color"
     group: "components"
-    path: "Input/Text/Container/Background Default"
-    pathKey: "Input.Text.Container.Background Default"
+    path: "Radio/Text Color Default"
+    pathKey: "Radio.Text Color Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-container-background-focus"
-    name: "input-text-container-background-focus"
-    value: "var(--color-fill-surface)"
+    cssVar: "--input-radio-text-color-disabled"
+    name: "input-radio-text-color-disabled"
+    value: "var(--color-text-disabled)"
     type: "color"
     group: "components"
-    path: "Input/Text/Container/Background Focus"
-    pathKey: "Input.Text.Container.Background Focus"
+    path: "Radio/Text Color Disabled"
+    pathKey: "Radio.Text Color Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-container-background-hover"
-    name: "input-text-container-background-hover"
-    value: "var(--color-fill-surface)"
+    cssVar: "--input-radio-text-color-hover"
+    name: "input-radio-text-color-hover"
+    value: "var(--color-text-strong)"
     type: "color"
     group: "components"
-    path: "Input/Text/Container/Background Hover"
-    pathKey: "Input.Text.Container.Background Hover"
+    path: "Input/radio/text-color/hover"
+    pathKey: "Input.radio.text-color.hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-height-min"
-    name: "input-text-height-min"
-    value: "2.5rem"
-    type: "number"
+    cssVar: "--input-text-color-active"
+    name: "input-text-color-active"
+    value: "var(--color-text-default)"
+    type: "color"
     group: "components"
-    path: "Input/Text/Height Min"
-    pathKey: "Input.Text.Height Min"
+    path: "Input/Text/Text Color Active"
+    pathKey: "Input.Text.Text Color Active"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-text-color-active"
-    name: "input-text-text-color-active"
+    cssVar: "--input-text-color-default"
+    name: "input-text-color-default"
     value: "var(--color-text-default)"
     type: "color"
     group: "components"
-    path: "Input/Text/Text Color Active"
-    pathKey: "Input.Text.Text Color Active"
+    path: "Input/Text/Text Color Default"
+    pathKey: "Input.Text.Text Color Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-text-color-default"
-    name: "input-text-text-color-default"
-    value: "var(--color-text-default)"
+    cssVar: "--input-text-color-disabled"
+    name: "input-text-color-disabled"
+    value: "var(--color-text-disabled)"
     type: "color"
     group: "components"
-    path: "Input/Text/Text Color Default"
-    pathKey: "Input.Text.Text Color Default"
+    path: "Input/Text/Text Color Disabled"
+    pathKey: "Input.Text.Text Color Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-text-color-hover"
-    name: "input-text-text-color-hover"
-    value: "var(--color-text-default)"
+    cssVar: "--input-text-color-hover"
+    name: "input-text-color-hover"
+    value: "var(--color-text-brand)"
     type: "color"
     group: "components"
     path: "Input/Text/Text Color Hover"
@@ -4087,8 +5387,8 @@ tokens:
     selector: ":root"
     sourceFile: "Components (UI).tokens.json"
   -
-    cssVar: "--input-text-text-color-placeholder"
-    name: "input-text-text-color-placeholder"
+    cssVar: "--input-text-color-placeholder"
+    name: "input-text-color-placeholder"
     value: "var(--color-text-subtle)"
     type: "color"
     group: "components"
@@ -4222,8 +5522,8 @@ tokens:
     value: "var(--size-border-100)"
     type: "number"
     group: "components"
-    path: "Input/Radio/Border Size Default"
-    pathKey: "Input.Radio.Border Size Default"
+    path: "Radio/Border Size Default"
+    pathKey: "Radio.Border Size Default"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -4235,8 +5535,8 @@ tokens:
     value: "var(--size-border-000)"
     type: "number"
     group: "components"
-    path: "Input/Radio/Border Size Disabled"
-    pathKey: "Input.Radio.Border Size Disabled"
+    path: "Radio/Border Size Disabled"
+    pathKey: "Radio.Border Size Disabled"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -4248,8 +5548,8 @@ tokens:
     value: "var(--size-border-200)"
     type: "number"
     group: "components"
-    path: "Input/Radio/Border Size Hover"
-    pathKey: "Input.Radio.Border Size Hover"
+    path: "Radio/Border Size Hover"
+    pathKey: "Radio.Border Size Hover"
     scope: "global:components-ui"
     scopeBucket: "global"
     scopeId: "components-ui"
@@ -4307,6 +5607,188 @@ tokens:
     scopeId: "core-primitives"
     selector: ":root"
     sourceFile: "Core (Primitives).tokens.json"
+  -
+    cssVar: "--switch-text-color-default"
+    name: "switch-text-color-default"
+    value: "var(--color-text-default)"
+    type: "color"
+    group: "components"
+    path: "Switch/text-color/default"
+    pathKey: "Switch.text-color.default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-text-color-disabled"
+    name: "switch-text-color-disabled"
+    value: "var(--color-text-disabled)"
+    type: "color"
+    group: "components"
+    path: "Switch/text-color/disabled"
+    pathKey: "Switch.text-color.disabled"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-thumb-background-active"
+    name: "switch-thumb-background-active"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Switch/thumb/background/active"
+    pathKey: "Switch.thumb.background.active"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-thumb-background-default"
+    name: "switch-thumb-background-default"
+    value: "var(--color-border-default)"
+    type: "color"
+    group: "components"
+    path: "Switch/thumb/background/default"
+    pathKey: "Switch.thumb.background.default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-thumb-background-disabled"
+    name: "switch-thumb-background-disabled"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Switch/thumb/background/disabled"
+    pathKey: "Switch.thumb.background.disabled"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-thumb-background-hover"
+    name: "switch-thumb-background-hover"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Switch/thumb/background/hover"
+    pathKey: "Switch.thumb.background.hover"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-background-active"
+    name: "switch-track-background-active"
+    value: "var(--color-fill-brand)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/background/active"
+    pathKey: "Switch.track.background.active"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-background-default"
+    name: "switch-track-background-default"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/background/default"
+    pathKey: "Switch.track.background.default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-background-disabled"
+    name: "switch-track-background-disabled"
+    value: "var(--color-fill-disabled)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/background/disabled"
+    pathKey: "Switch.track.background.disabled"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-background-hover"
+    name: "switch-track-background-hover"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/background/hover"
+    pathKey: "Switch.track.background.hover"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-border-color-active"
+    name: "switch-track-border-color-active"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/border-color/active"
+    pathKey: "Switch.track.border-color.active"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-border-color-default"
+    name: "switch-track-border-color-default"
+    value: "var(--color-border-default)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/border-color/default"
+    pathKey: "Switch.track.border-color.default"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-border-color-disabled"
+    name: "switch-track-border-color-disabled"
+    value: "var(--color-border-disabled)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/border-color/disabled"
+    pathKey: "Switch.track.border-color.disabled"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
+  -
+    cssVar: "--switch-track-border-color-hover"
+    name: "switch-track-border-color-hover"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Switch/track/border-color/hover"
+    pathKey: "Switch.track.border-color.hover"
+    scope: "global:components-ui"
+    scopeBucket: "global"
+    scopeId: "components-ui"
+    selector: ":root"
+    sourceFile: "Components (UI).tokens.json"
   -
     cssVar: "--zindex-base"
     name: "zindex-base"
@@ -4531,7 +6013,7 @@ tokens:
   -
     cssVar: "--brand-corner-button"
     name: "brand-corner-button"
-    value: "var(--size-radius-700)"
+    value: "var(--size-radius-full)"
     type: "number"
     group: "radii"
     path: "Brand/Corner/Button"
@@ -4554,10 +6036,23 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-corner-button"
+    name: "brand-corner-button"
+    value: "var(--size-radius-700)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Button"
+    pathKey: "Brand.Corner.Button"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-corner-card"
     name: "brand-corner-card"
-    value: "var(--size-radius-200)"
+    value: "var(--size-radius-300)"
     type: "number"
     group: "radii"
     path: "Brand/Corner/Card"
@@ -4580,6 +6075,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-corner-card"
+    name: "brand-corner-card"
+    value: "var(--size-radius-200)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Card"
+    pathKey: "Brand.Corner.Card"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-corner-input"
     name: "brand-corner-input"
@@ -4606,6 +6114,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-corner-input"
+    name: "brand-corner-input"
+    value: "var(--size-radius-200)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Input"
+    pathKey: "Brand.Corner.Input"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-corner-modal"
     name: "brand-corner-modal"
@@ -4632,6 +6153,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-corner-modal"
+    name: "brand-corner-modal"
+    value: "var(--size-radius-400)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Modal"
+    pathKey: "Brand.Corner.Modal"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--corner-button-radius"
     name: "corner-button-radius"
@@ -5022,6 +6556,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-font-base"
+    name: "brand-font-base"
+    value: "var(--font-family-sans)"
+    type: "string"
+    group: "typography"
+    path: "Brand/Font/Base"
+    pathKey: "Brand.Font.Base"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--brand-font-lead"
     name: "brand-font-lead"
@@ -5048,6 +6595,19 @@ tokens:
     scopeId: "b"
     selector: ":root[data-brand=\"b\"]"
     sourceFile: "Themes (Brands).tokens.json"
+  -
+    cssVar: "--brand-font-lead"
+    name: "brand-font-lead"
+    value: "var(--font-family-serif)"
+    type: "string"
+    group: "typography"
+    path: "Brand/Font/Lead"
+    pathKey: "Brand.Font.Lead"
+    scope: "brand:c"
+    scopeBucket: "brand"
+    scopeId: "c"
+    selector: ":root[data-brand=\"c\"]"
+    sourceFile: "Themes (Brands).tokens.json"
   -
     cssVar: "--font-family-mono"
     name: "font-family-mono"