ui-foundations 0.1.0

package/dist/tokens/tokens.yaml

@@ -0,0 +1,4400 @@
+# Auto-generated design tokens from Figma
+# Generated on 2026-03-04T20:50:34.083Z
+
+summary:
+  total: 338
+tokens:
+  -
+    cssVar: "--breakpoint-100"
+    name: "breakpoint-100"
+    value: "580px"
+    type: "number"
+    group: "breakpoints"
+    path: "Breakpoint/100"
+    pathKey: "Breakpoint.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--breakpoint-200"
+    name: "breakpoint-200"
+    value: "760px"
+    type: "number"
+    group: "breakpoints"
+    path: "Breakpoint/200"
+    pathKey: "Breakpoint.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--breakpoint-300"
+    name: "breakpoint-300"
+    value: "960px"
+    type: "number"
+    group: "breakpoints"
+    path: "Breakpoint/300"
+    pathKey: "Breakpoint.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--breakpoint-400"
+    name: "breakpoint-400"
+    value: "1200px"
+    type: "number"
+    group: "breakpoints"
+    path: "Breakpoint/400"
+    pathKey: "Breakpoint.400"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--breakpoint-500"
+    name: "breakpoint-500"
+    value: "1440px"
+    type: "number"
+    group: "breakpoints"
+    path: "Breakpoint/500"
+    pathKey: "Breakpoint.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--breakpoint-600"
+    name: "breakpoint-600"
+    value: "1920px"
+    type: "number"
+    group: "breakpoints"
+    path: "Breakpoint/600"
+    pathKey: "Breakpoint.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--brand-color-accent"
+    name: "brand-color-accent"
+    value: "var(--color-brand-a-blue-500)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Accent"
+    pathKey: "Brand.Color.Accent"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-accent"
+    name: "brand-color-accent"
+    value: "var(--color-brand-b-purple-600)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Accent"
+    pathKey: "Brand.Color.Accent"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--brand-color-accent-dark"
+    name: "brand-color-accent-dark"
+    value: "var(--color-brand-a-blue-700)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Accent Dark"
+    pathKey: "Brand.Color.Accent Dark"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-accent-dark"
+    name: "brand-color-accent-dark"
+    value: "var(--color-brand-b-purple-800)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Accent Dark"
+    pathKey: "Brand.Color.Accent Dark"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--brand-color-functional-base"
+    name: "brand-color-functional-base"
+    value: "var(--color-brand-a-blue-700)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Base"
+    pathKey: "Brand.Color.Functional.Base"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-functional-base"
+    name: "brand-color-functional-base"
+    value: "var(--color-brand-b-purple-600)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Base"
+    pathKey: "Brand.Color.Functional.Base"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--brand-color-functional-base-dark"
+    name: "brand-color-functional-base-dark"
+    value: "var(--color-brand-a-blue-800)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Base Dark"
+    pathKey: "Brand.Color.Functional.Base Dark"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-functional-base-dark"
+    name: "brand-color-functional-base-dark"
+    value: "var(--color-brand-b-purple-800)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Base Dark"
+    pathKey: "Brand.Color.Functional.Base Dark"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--brand-color-functional-danger"
+    name: "brand-color-functional-danger"
+    value: "var(--color-brand-a-red)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Danger"
+    pathKey: "Brand.Color.Functional.Danger"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-functional-danger"
+    name: "brand-color-functional-danger"
+    value: "var(--color-brand-b-red)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Danger"
+    pathKey: "Brand.Color.Functional.Danger"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--brand-color-functional-success"
+    name: "brand-color-functional-success"
+    value: "var(--color-brand-a-green)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Success"
+    pathKey: "Brand.Color.Functional.Success"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-functional-success"
+    name: "brand-color-functional-success"
+    value: "var(--color-brand-b-green)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Functional/Success"
+    pathKey: "Brand.Color.Functional.Success"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--brand-color-primary"
+    name: "brand-color-primary"
+    value: "var(--color-brand-a-purple-600)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Primary"
+    pathKey: "Brand.Color.Primary"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-primary"
+    name: "brand-color-primary"
+    value: "var(--color-brand-b-blue-500)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Primary"
+    pathKey: "Brand.Color.Primary"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--brand-color-primary-dark"
+    name: "brand-color-primary-dark"
+    value: "var(--color-brand-a-purple-800)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Primary Dark"
+    pathKey: "Brand.Color.Primary Dark"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-color-primary-dark"
+    name: "brand-color-primary-dark"
+    value: "var(--color-brand-b-blue-700)"
+    type: "color"
+    group: "colors"
+    path: "Brand/Color/Primary Dark"
+    pathKey: "Brand.Color.Primary Dark"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.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:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.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:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.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:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--color-border-brand"
+    name: "color-border-brand"
+    value: "var(--brand-color-primary)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Brand"
+    pathKey: "Color.Border.Brand"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-border-brand"
+    name: "color-border-brand"
+    value: "var(--brand-color-primary)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Brand"
+    pathKey: "Color.Border.Brand"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-border-danger"
+    name: "color-border-danger"
+    value: "var(--brand-color-functional-danger)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Danger"
+    pathKey: "Color.Border.Danger"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-border-danger"
+    name: "color-border-danger"
+    value: "var(--brand-color-functional-danger)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Danger"
+    pathKey: "Color.Border.Danger"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-border-default"
+    name: "color-border-default"
+    value: "var(--color-neutral-800)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Default"
+    pathKey: "Color.Border.Default"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-border-default"
+    name: "color-border-default"
+    value: "var(--color-neutral-800)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Default"
+    pathKey: "Color.Border.Default"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-border-disabled"
+    name: "color-border-disabled"
+    value: "var(--color-neutral-500)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Disabled"
+    pathKey: "Color.Border.Disabled"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-border-disabled"
+    name: "color-border-disabled"
+    value: "var(--color-neutral-500)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Disabled"
+    pathKey: "Color.Border.Disabled"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-border-strong"
+    name: "color-border-strong"
+    value: "var(--color-neutral-1000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Strong"
+    pathKey: "Color.Border.Strong"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-border-strong"
+    name: "color-border-strong"
+    value: "var(--color-neutral-1000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Strong"
+    pathKey: "Color.Border.Strong"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-border-subtle"
+    name: "color-border-subtle"
+    value: "var(--brand-color-subtle-dark)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Subtle"
+    pathKey: "Color.Border.Subtle"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-border-subtle"
+    name: "color-border-subtle"
+    value: "var(--brand-color-subtle)"
+    type: "color"
+    group: "colors"
+    path: "Color/Border/Subtle"
+    pathKey: "Color.Border.Subtle"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-brand-a-blue-200"
+    name: "color-brand-a-blue-200"
+    value: "rgb(226 244 253)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Blue/200"
+    pathKey: "Color.Brand A.Blue.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-blue-500"
+    name: "color-brand-a-blue-500"
+    value: "rgb(112 203 244)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Blue/500"
+    pathKey: "Color.Brand A.Blue.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-blue-700"
+    name: "color-brand-a-blue-700"
+    value: "rgb(12 75 243)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Blue/700"
+    pathKey: "Color.Brand A.Blue.700"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-blue-800"
+    name: "color-brand-a-blue-800"
+    value: "rgb(27 17 92)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Blue/800"
+    pathKey: "Color.Brand A.Blue.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-green"
+    name: "color-brand-a-green"
+    value: "rgb(19 174 92)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Green"
+    pathKey: "Color.Brand A.Green"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-purple-200"
+    name: "color-brand-a-purple-200"
+    value: "rgb(222 192 255)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Purple/200"
+    pathKey: "Color.Brand A.Purple.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-purple-600"
+    name: "color-brand-a-purple-600"
+    value: "rgb(151 71 255)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Purple/600"
+    pathKey: "Color.Brand A.Purple.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-purple-800"
+    name: "color-brand-a-purple-800"
+    value: "rgb(85 26 139)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Purple/800"
+    pathKey: "Color.Brand A.Purple.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-a-red"
+    name: "color-brand-a-red"
+    value: "rgb(255 0 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand A/Red"
+    pathKey: "Color.Brand A.Red"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-blue-200"
+    name: "color-brand-b-blue-200"
+    value: "rgb(179 226 250)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Blue/200"
+    pathKey: "Color.Brand B.Blue.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-blue-500"
+    name: "color-brand-b-blue-500"
+    value: "rgb(66 186 240)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Blue/500"
+    pathKey: "Color.Brand B.Blue.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-blue-700"
+    name: "color-brand-b-blue-700"
+    value: "rgb(10 60 194)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Blue/700"
+    pathKey: "Color.Brand B.Blue.700"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-blue-800"
+    name: "color-brand-b-blue-800"
+    value: "rgb(14 9 47)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Blue/800"
+    pathKey: "Color.Brand B.Blue.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-green"
+    name: "color-brand-b-green"
+    value: "rgb(14 129 68)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Green"
+    pathKey: "Color.Brand B.Green"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-purple-200"
+    name: "color-brand-b-purple-200"
+    value: "rgb(196 143 255)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Purple/200"
+    pathKey: "Color.Brand B.Purple.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-purple-600"
+    name: "color-brand-b-purple-600"
+    value: "rgb(122 20 255)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Purple/600"
+    pathKey: "Color.Brand B.Purple.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-purple-800"
+    name: "color-brand-b-purple-800"
+    value: "rgb(58 18 95)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Purple/800"
+    pathKey: "Color.Brand B.Purple.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-brand-b-red"
+    name: "color-brand-b-red"
+    value: "rgb(204 0 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Brand B/Red"
+    pathKey: "Color.Brand B.Red"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "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: "Dark Mode.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: "Light Mode.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: "Dark Mode.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: "Light Mode.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: "Dark Mode.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: "Light Mode.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: "Dark Mode.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: "Light Mode.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:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.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: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-fill-subtle"
+    name: "color-fill-subtle"
+    value: "var(--brand-color-subtle)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Subtle"
+    pathKey: "Color.Fill.Subtle"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-fill-subtle"
+    name: "color-fill-subtle"
+    value: "var(--brand-color-subtle-light)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Subtle"
+    pathKey: "Color.Fill.Subtle"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-fill-success"
+    name: "color-fill-success"
+    value: "var(--brand-color-functional-success)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Success"
+    pathKey: "Color.Fill.Success"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-fill-success"
+    name: "color-fill-success"
+    value: "var(--brand-color-functional-success)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Success"
+    pathKey: "Color.Fill.Success"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-fill-surface"
+    name: "color-fill-surface"
+    value: "var(--color-neutral-1000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Surface"
+    pathKey: "Color.Fill.Surface"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-fill-surface"
+    name: "color-fill-surface"
+    value: "var(--color-neutral-000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Fill/Surface"
+    pathKey: "Color.Fill.Surface"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-focus"
+    name: "color-focus"
+    value: "var(--brand-color-primary-dark)"
+    type: "color"
+    group: "colors"
+    path: "Color/Focus"
+    pathKey: "Color.Focus"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-focus"
+    name: "color-focus"
+    value: "var(--brand-color-primary)"
+    type: "color"
+    group: "colors"
+    path: "Color/Focus"
+    pathKey: "Color.Focus"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-neutral-000"
+    name: "color-neutral-000"
+    value: "rgb(255 255 255)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/000"
+    pathKey: "Color.Neutral.000"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-100"
+    name: "color-neutral-100"
+    value: "rgb(230 230 230)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/100"
+    pathKey: "Color.Neutral.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-200"
+    name: "color-neutral-200"
+    value: "rgb(204 204 204)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/200"
+    pathKey: "Color.Neutral.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-300"
+    name: "color-neutral-300"
+    value: "rgb(179 179 179)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/300"
+    pathKey: "Color.Neutral.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-400"
+    name: "color-neutral-400"
+    value: "rgb(128 128 128)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/400"
+    pathKey: "Color.Neutral.400"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-500"
+    name: "color-neutral-500"
+    value: "rgb(128 128 128)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/500"
+    pathKey: "Color.Neutral.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-600"
+    name: "color-neutral-600"
+    value: "rgb(102 102 102)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/600"
+    pathKey: "Color.Neutral.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-700"
+    name: "color-neutral-700"
+    value: "rgb(77 77 77)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/700"
+    pathKey: "Color.Neutral.700"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-800"
+    name: "color-neutral-800"
+    value: "rgb(51 51 51)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/800"
+    pathKey: "Color.Neutral.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-900"
+    name: "color-neutral-900"
+    value: "rgb(26 26 26)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/900"
+    pathKey: "Color.Neutral.900"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-1000"
+    name: "color-neutral-1000"
+    value: "rgb(0 0 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/1000"
+    pathKey: "Color.Neutral.1000"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-000"
+    name: "color-neutral-alpha-000"
+    value: "rgba(0 0 0 / 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/000"
+    pathKey: "Color.Neutral.Alpha.000"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-100"
+    name: "color-neutral-alpha-100"
+    value: "rgba(0 0 0 / 0.1)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/100"
+    pathKey: "Color.Neutral.Alpha.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-200"
+    name: "color-neutral-alpha-200"
+    value: "rgba(0 0 0 / 0.2)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/200"
+    pathKey: "Color.Neutral.Alpha.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-300"
+    name: "color-neutral-alpha-300"
+    value: "rgba(0 0 0 / 0.3)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/300"
+    pathKey: "Color.Neutral.Alpha.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-400"
+    name: "color-neutral-alpha-400"
+    value: "rgba(0 0 0 / 0.4)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/400"
+    pathKey: "Color.Neutral.Alpha.400"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-500"
+    name: "color-neutral-alpha-500"
+    value: "rgba(0 0 0 / 0.5)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/500"
+    pathKey: "Color.Neutral.Alpha.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-600"
+    name: "color-neutral-alpha-600"
+    value: "rgba(0 0 0 / 0.6)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/600"
+    pathKey: "Color.Neutral.Alpha.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-700"
+    name: "color-neutral-alpha-700"
+    value: "rgba(0 0 0 / 0.7)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/700"
+    pathKey: "Color.Neutral.Alpha.700"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-800"
+    name: "color-neutral-alpha-800"
+    value: "rgba(0 0 0 / 0.8)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/800"
+    pathKey: "Color.Neutral.Alpha.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-neutral-alpha-900"
+    name: "color-neutral-alpha-900"
+    value: "rgba(0 0 0 / 0.9)"
+    type: "color"
+    group: "colors"
+    path: "Color/Neutral/Alpha/900"
+    pathKey: "Color.Neutral.Alpha.900"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--color-overlay-active"
+    name: "color-overlay-active"
+    value: "var(--color-neutral-alpha-400)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Active"
+    pathKey: "Color.Overlay.Active"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-overlay-active"
+    name: "color-overlay-active"
+    value: "var(--color-neutral-alpha-400)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Active"
+    pathKey: "Color.Overlay.Active"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-overlay-backdrop"
+    name: "color-overlay-backdrop"
+    value: "var(--color-neutral-alpha-400)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Backdrop"
+    pathKey: "Color.Overlay.Backdrop"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-overlay-backdrop"
+    name: "color-overlay-backdrop"
+    value: "var(--color-neutral-alpha-400)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Backdrop"
+    pathKey: "Color.Overlay.Backdrop"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-overlay-hover"
+    name: "color-overlay-hover"
+    value: "var(--color-neutral-alpha-200)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Hover"
+    pathKey: "Color.Overlay.Hover"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-overlay-hover"
+    name: "color-overlay-hover"
+    value: "var(--color-neutral-alpha-200)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Hover"
+    pathKey: "Color.Overlay.Hover"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-overlay-selected"
+    name: "color-overlay-selected"
+    value: "var(--color-neutral-alpha-600)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Selected"
+    pathKey: "Color.Overlay.Selected"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-overlay-selected"
+    name: "color-overlay-selected"
+    value: "var(--color-neutral-alpha-600)"
+    type: "color"
+    group: "colors"
+    path: "Color/Overlay/Selected"
+    pathKey: "Color.Overlay.Selected"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-text-brand"
+    name: "color-text-brand"
+    value: "var(--brand-color-primary-dark)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Brand"
+    pathKey: "Color.Text.Brand"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-text-brand"
+    name: "color-text-brand"
+    value: "var(--brand-color-primary)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Brand"
+    pathKey: "Color.Text.Brand"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-text-danger"
+    name: "color-text-danger"
+    value: "var(--brand-color-functional-danger)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Danger"
+    pathKey: "Color.Text.Danger"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-text-danger"
+    name: "color-text-danger"
+    value: "var(--brand-color-functional-danger)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Danger"
+    pathKey: "Color.Text.Danger"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.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:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.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: "Light Mode.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: "Dark Mode.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: "Light Mode.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: "Dark Mode.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: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-text-strong"
+    name: "color-text-strong"
+    value: "var(--color-neutral-1000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Strong"
+    pathKey: "Color.Text.Strong"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-text-strong"
+    name: "color-text-strong"
+    value: "var(--color-neutral-1000)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Strong"
+    pathKey: "Color.Text.Strong"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-text-subtle"
+    name: "color-text-subtle"
+    value: "var(--brand-color-subtle-dark)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Subtle"
+    pathKey: "Color.Text.Subtle"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-text-subtle"
+    name: "color-text-subtle"
+    value: "var(--brand-color-subtle)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Subtle"
+    pathKey: "Color.Text.Subtle"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-text-success"
+    name: "color-text-success"
+    value: "var(--brand-color-functional-success)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Success"
+    pathKey: "Color.Text.Success"
+    scope: "mode:dark"
+    scopeBucket: "mode"
+    scopeId: "dark"
+    selector: ":root[data-mode=\"dark\"]"
+    sourceFile: "Dark Mode.tokens.json"
+  -
+    cssVar: "--color-text-success"
+    name: "color-text-success"
+    value: "var(--brand-color-functional-success)"
+    type: "color"
+    group: "colors"
+    path: "Color/Text/Success"
+    pathKey: "Color.Text.Success"
+    scope: "mode:light"
+    scopeBucket: "mode"
+    scopeId: "light"
+    selector: ":root"
+    sourceFile: "Light Mode.tokens.json"
+  -
+    cssVar: "--color-transparent"
+    name: "color-transparent"
+    value: "rgba(0 0 0 / 0)"
+    type: "color"
+    group: "colors"
+    path: "Color/Transparent"
+    pathKey: "Color.Transparent"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--button-border-color-disabled"
+    name: "button-border-color-disabled"
+    value: "var(--color-border-disabled)"
+    type: "color"
+    group: "components"
+    path: "Button/Border Color Disabled"
+    pathKey: "Button.Border Color Disabled"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-border-radius"
+    name: "button-border-radius"
+    value: "var(--brand-corner-button)"
+    type: "number"
+    group: "components"
+    path: "Button/Border Radius"
+    pathKey: "Button.Border Radius"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-border-size-active"
+    name: "button-border-size-active"
+    value: "var(--size-border-200)"
+    type: "number"
+    group: "components"
+    path: "Button/Border Size Active"
+    pathKey: "Button.Border Size Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-border-size-default"
+    name: "button-border-size-default"
+    value: "var(--size-border-000)"
+    type: "number"
+    group: "components"
+    path: "Button/Border Size Default"
+    pathKey: "Button.Border Size Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-border-size-hover"
+    name: "button-border-size-hover"
+    value: "var(--size-border-100)"
+    type: "number"
+    group: "components"
+    path: "Button/Border Size Hover"
+    pathKey: "Button.Border Size Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-container-background-disabled"
+    name: "button-container-background-disabled"
+    value: "var(--color-fill-disabled)"
+    type: "color"
+    group: "components"
+    path: "Button/Container Background Disabled"
+    pathKey: "Button.Container Background Disabled"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-font-family"
+    name: "button-font-family"
+    value: "var(--brand-font-lead)"
+    type: "string"
+    group: "components"
+    path: "Button/Font Family"
+    pathKey: "Button.Font Family"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-font-size"
+    name: "button-font-size"
+    value: "var(--typography-label-font-size)"
+    type: "number"
+    group: "components"
+    path: "Button/Font Size"
+    pathKey: "Button.Font Size"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-font-weight"
+    name: "button-font-weight"
+    value: "var(--typography-label-font-weight)"
+    type: "string"
+    group: "components"
+    path: "Button/Font Weight"
+    pathKey: "Button.Font Weight"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-gap"
+    name: "button-gap"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Button/Gap"
+    pathKey: "Button.Gap"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-border-color-active"
+    name: "button-ghost-border-color-active"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Border/Color Active"
+    pathKey: "Button.Ghost.Border.Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-border-color-default"
+    name: "button-ghost-border-color-default"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Border/Color Default"
+    pathKey: "Button.Ghost.Border.Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-border-color-focus"
+    name: "button-ghost-border-color-focus"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Border/Color Focus"
+    pathKey: "Button.Ghost.Border.Color Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-border-color-hover"
+    name: "button-ghost-border-color-hover"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Border/Color Hover"
+    pathKey: "Button.Ghost.Border.Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-container-background-active"
+    name: "button-ghost-container-background-active"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Container/Background Active"
+    pathKey: "Button.Ghost.Container.Background Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-container-background-default"
+    name: "button-ghost-container-background-default"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Container/Background Default"
+    pathKey: "Button.Ghost.Container.Background Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-container-background-focus"
+    name: "button-ghost-container-background-focus"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Container/Background Focus"
+    pathKey: "Button.Ghost.Container.Background Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-container-background-hover"
+    name: "button-ghost-container-background-hover"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Container/Background Hover"
+    pathKey: "Button.Ghost.Container.Background Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-text-color-active"
+    name: "button-ghost-text-color-active"
+    value: "var(--color-text-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Text Color Active"
+    pathKey: "Button.Ghost.Text Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-text-color-default"
+    name: "button-ghost-text-color-default"
+    value: "var(--color-text-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Text Color Default"
+    pathKey: "Button.Ghost.Text Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-ghost-text-color-hover"
+    name: "button-ghost-text-color-hover"
+    value: "var(--color-text-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Ghost/Text Color Hover"
+    pathKey: "Button.Ghost.Text Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-height"
+    name: "button-height"
+    value: "2.5rem"
+    type: "number"
+    group: "components"
+    path: "Button/Height"
+    pathKey: "Button.Height"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-line-height"
+    name: "button-line-height"
+    value: "var(--typography-label-line-height)"
+    type: "number"
+    group: "components"
+    path: "Button/Line Height"
+    pathKey: "Button.Line Height"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-border-color-active"
+    name: "button-outline-border-color-active"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Border/Color Active"
+    pathKey: "Button.Outline.Border.Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-border-color-default"
+    name: "button-outline-border-color-default"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Border/Color Default"
+    pathKey: "Button.Outline.Border.Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-border-color-focus"
+    name: "button-outline-border-color-focus"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Border/Color Focus"
+    pathKey: "Button.Outline.Border.Color Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-border-color-hover"
+    name: "button-outline-border-color-hover"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Border/Color Hover"
+    pathKey: "Button.Outline.Border.Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-container-background-active"
+    name: "button-outline-container-background-active"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Container/Background Active"
+    pathKey: "Button.Outline.Container.Background Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-container-background-default"
+    name: "button-outline-container-background-default"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Container/Background Default"
+    pathKey: "Button.Outline.Container.Background Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-container-background-focus"
+    name: "button-outline-container-background-focus"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Container/Background Focus"
+    pathKey: "Button.Outline.Container.Background Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-container-background-hover"
+    name: "button-outline-container-background-hover"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Container/Background Hover"
+    pathKey: "Button.Outline.Container.Background Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-text-color-active"
+    name: "button-outline-text-color-active"
+    value: "var(--color-text-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Text Color Active"
+    pathKey: "Button.Outline.Text Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-text-color-default"
+    name: "button-outline-text-color-default"
+    value: "var(--color-text-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Text Color Default"
+    pathKey: "Button.Outline.Text Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-outline-text-color-hover"
+    name: "button-outline-text-color-hover"
+    value: "var(--color-text-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Outline/Text Color Hover"
+    pathKey: "Button.Outline.Text Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-overlay-active"
+    name: "button-overlay-active"
+    value: "var(--color-overlay-active)"
+    type: "color"
+    group: "components"
+    path: "Button/Overlay Active"
+    pathKey: "Button.Overlay Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-overlay-hover"
+    name: "button-overlay-hover"
+    value: "var(--color-overlay-hover)"
+    type: "color"
+    group: "components"
+    path: "Button/Overlay Hover"
+    pathKey: "Button.Overlay Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-padding-block"
+    name: "button-padding-block"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Button/Padding Block"
+    pathKey: "Button.Padding Block"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-padding-inline"
+    name: "button-padding-inline"
+    value: "var(--size-spacing-400)"
+    type: "number"
+    group: "components"
+    path: "Button/Padding Inline"
+    pathKey: "Button.Padding Inline"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-padding-inline-icon-only"
+    name: "button-padding-inline-icon-only"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Button/Padding Inline Icon Only"
+    pathKey: "Button.Padding Inline Icon Only"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-border-color-active"
+    name: "button-solid-border-color-active"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Border/Color Active"
+    pathKey: "Button.Solid.Border.Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-border-color-default"
+    name: "button-solid-border-color-default"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Border/Color Default"
+    pathKey: "Button.Solid.Border.Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-border-color-focus"
+    name: "button-solid-border-color-focus"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Border/Color Focus"
+    pathKey: "Button.Solid.Border.Color Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-border-color-hover"
+    name: "button-solid-border-color-hover"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Border/Color Hover"
+    pathKey: "Button.Solid.Border.Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-container-background-active"
+    name: "button-solid-container-background-active"
+    value: "var(--color-fill-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Container/Background Active"
+    pathKey: "Button.Solid.Container.Background Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-container-background-default"
+    name: "button-solid-container-background-default"
+    value: "var(--color-fill-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Container/Background Default"
+    pathKey: "Button.Solid.Container.Background Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-container-background-focus"
+    name: "button-solid-container-background-focus"
+    value: "var(--color-fill-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Container/Background Focus"
+    pathKey: "Button.Solid.Container.Background Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-container-background-hover"
+    name: "button-solid-container-background-hover"
+    value: "var(--color-fill-brand)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Container/Background Hover"
+    pathKey: "Button.Solid.Container.Background Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-text-color-active"
+    name: "button-solid-text-color-active"
+    value: "var(--color-text-inverse)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Text Color Active"
+    pathKey: "Button.Solid.Text Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-text-color-default"
+    name: "button-solid-text-color-default"
+    value: "var(--color-text-inverse)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Text Color Default"
+    pathKey: "Button.Solid.Text Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-solid-text-color-hover"
+    name: "button-solid-text-color-hover"
+    value: "var(--color-text-inverse)"
+    type: "color"
+    group: "components"
+    path: "Button/Solid/Text Color Hover"
+    pathKey: "Button.Solid.Text Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--button-text-color-disabled"
+    name: "button-text-color-disabled"
+    value: "var(--color-text-disabled)"
+    type: "color"
+    group: "components"
+    path: "Button/Text Color Disabled"
+    pathKey: "Button.Text Color Disabled"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-border-radius"
+    name: "form-border-radius"
+    value: "var(--brand-corner-card)"
+    type: "number"
+    group: "components"
+    path: "Form/Border Radius"
+    pathKey: "Form.Border Radius"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-border-size"
+    name: "form-border-size"
+    value: "var(--size-border-100)"
+    type: "number"
+    group: "components"
+    path: "Form/Border Size"
+    pathKey: "Form.Border Size"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-container-background"
+    name: "form-container-background"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Form/Container Background"
+    pathKey: "Form.Container Background"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-container-border-color"
+    name: "form-container-border-color"
+    value: "var(--color-border-subtle)"
+    type: "color"
+    group: "components"
+    path: "Form/Container Border Color"
+    pathKey: "Form.Container Border Color"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-field-gap"
+    name: "form-field-gap"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Form/Field/Gap"
+    pathKey: "Form.Field.Gap"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-field-helper-text-color-default"
+    name: "form-field-helper-text-color-default"
+    value: "var(--color-text-subtle)"
+    type: "color"
+    group: "components"
+    path: "Form/Field/Helper Text Color Default"
+    pathKey: "Form.Field.Helper Text Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-field-helper-text-color-invalid"
+    name: "form-field-helper-text-color-invalid"
+    value: "var(--color-text-danger)"
+    type: "color"
+    group: "components"
+    path: "Form/Field/Helper Text Color Invalid"
+    pathKey: "Form.Field.Helper Text Color Invalid"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-gap"
+    name: "form-gap"
+    value: "var(--size-spacing-400)"
+    type: "number"
+    group: "components"
+    path: "Form/Gap"
+    pathKey: "Form.Gap"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-group-gap"
+    name: "form-group-gap"
+    value: "var(--size-spacing-400)"
+    type: "number"
+    group: "components"
+    path: "Form/Group/Gap"
+    pathKey: "Form.Group.Gap"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-group-title-color"
+    name: "form-group-title-color"
+    value: "var(--color-text-default)"
+    type: "color"
+    group: "components"
+    path: "Form/Group/Title Color"
+    pathKey: "Form.Group.Title Color"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-padding-block"
+    name: "form-padding-block"
+    value: "var(--size-spacing-400)"
+    type: "number"
+    group: "components"
+    path: "Form/Padding Block"
+    pathKey: "Form.Padding Block"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--form-padding-inline"
+    name: "form-padding-inline"
+    value: "var(--size-spacing-400)"
+    type: "number"
+    group: "components"
+    path: "Form/Padding Inline"
+    pathKey: "Form.Padding Inline"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.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:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.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:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.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:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.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:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.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:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-container-background-disabled"
+    name: "input-container-background-disabled"
+    value: "var(--color-fill-disabled)"
+    type: "color"
+    group: "components"
+    path: "Input/Container Background Disabled"
+    pathKey: "Input.Container Background Disabled"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-font-family"
+    name: "input-font-family"
+    value: "var(--brand-font-base)"
+    type: "string"
+    group: "components"
+    path: "Input/Font Family"
+    pathKey: "Input.Font Family"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-font-size"
+    name: "input-font-size"
+    value: "var(--typography-label-font-size)"
+    type: "number"
+    group: "components"
+    path: "Input/Font Size"
+    pathKey: "Input.Font Size"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-font-weight"
+    name: "input-font-weight"
+    value: "var(--typography-body-font-weight)"
+    type: "string"
+    group: "components"
+    path: "Input/Font Weight"
+    pathKey: "Input.Font Weight"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-gap"
+    name: "input-gap"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Input/Gap"
+    pathKey: "Input.Gap"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-height"
+    name: "input-height"
+    value: "2.5rem"
+    type: "number"
+    group: "components"
+    path: "Input/Height"
+    pathKey: "Input.Height"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-line-height"
+    name: "input-line-height"
+    value: "var(--typography-body-line-height)"
+    type: "number"
+    group: "components"
+    path: "Input/Line Height"
+    pathKey: "Input.Line Height"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-overlay-active"
+    name: "input-overlay-active"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Input/Overlay Active"
+    pathKey: "Input.Overlay Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-overlay-hover"
+    name: "input-overlay-hover"
+    value: "var(--color-transparent)"
+    type: "color"
+    group: "components"
+    path: "Input/Overlay Hover"
+    pathKey: "Input.Overlay Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-padding-block"
+    name: "input-padding-block"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Input/Padding Block"
+    pathKey: "Input.Padding Block"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-padding-inline"
+    name: "input-padding-inline"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Input/Padding Inline"
+    pathKey: "Input.Padding Inline"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-padding-inline-icon-only"
+    name: "input-padding-inline-icon-only"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "components"
+    path: "Input/Padding Inline Icon Only"
+    pathKey: "Input.Padding Inline Icon Only"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-border-color-active"
+    name: "input-text-border-color-active"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Border/Color Active"
+    pathKey: "Input.Text.Border.Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-border-color-default"
+    name: "input-text-border-color-default"
+    value: "var(--color-border-default)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Border/Color Default"
+    pathKey: "Input.Text.Border.Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-border-color-focus"
+    name: "input-text-border-color-focus"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Border/Color Focus"
+    pathKey: "Input.Text.Border.Color Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-border-color-hover"
+    name: "input-text-border-color-hover"
+    value: "var(--color-border-brand)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Border/Color Hover"
+    pathKey: "Input.Text.Border.Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-border-color-invalid"
+    name: "input-text-border-color-invalid"
+    value: "var(--color-border-danger)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Border/Color Invalid"
+    pathKey: "Input.Text.Border.Color Invalid"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-border-color-valid"
+    name: "input-text-border-color-valid"
+    value: "var(--color-border-strong)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Border/Color Valid"
+    pathKey: "Input.Text.Border.Color Valid"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-color-disabled"
+    name: "input-text-color-disabled"
+    value: "var(--color-text-disabled)"
+    type: "color"
+    group: "components"
+    path: "Input/Text Color Disabled"
+    pathKey: "Input.Text Color Disabled"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-container-background-active"
+    name: "input-text-container-background-active"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Container/Background Active"
+    pathKey: "Input.Text.Container.Background Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-container-background-default"
+    name: "input-text-container-background-default"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Container/Background Default"
+    pathKey: "Input.Text.Container.Background Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-container-background-focus"
+    name: "input-text-container-background-focus"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Container/Background Focus"
+    pathKey: "Input.Text.Container.Background Focus"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-container-background-hover"
+    name: "input-text-container-background-hover"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Container/Background Hover"
+    pathKey: "Input.Text.Container.Background Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-text-color-active"
+    name: "input-text-text-color-active"
+    value: "var(--color-text-default)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Text Color Active"
+    pathKey: "Input.Text.Text Color Active"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-text-color-default"
+    name: "input-text-text-color-default"
+    value: "var(--color-text-default)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Text Color Default"
+    pathKey: "Input.Text.Text Color Default"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-text-color-hover"
+    name: "input-text-text-color-hover"
+    value: "var(--color-text-default)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Text Color Hover"
+    pathKey: "Input.Text.Text Color Hover"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--input-text-text-color-placeholder"
+    name: "input-text-text-color-placeholder"
+    value: "var(--color-text-subtle)"
+    type: "color"
+    group: "components"
+    path: "Input/Text/Text Color Placeholder"
+    pathKey: "Input.Text.Text Color Placeholder"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--layout-base-grid"
+    name: "layout-base-grid"
+    value: ".25rem"
+    type: "number"
+    group: "components"
+    path: "Layout/Base Grid"
+    pathKey: "Layout.Base Grid"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--layout-column-max-width"
+    name: "layout-column-max-width"
+    value: "412px"
+    type: "number"
+    group: "components"
+    path: "Layout/Column Max Width"
+    pathKey: "Layout.Column Max Width"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--layout-columns"
+    name: "layout-columns"
+    value: 12
+    type: "number"
+    group: "components"
+    path: "Layout/Columns"
+    pathKey: "Layout.Columns"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--layout-float-breakpoint"
+    name: "layout-float-breakpoint"
+    value: "1220px"
+    type: "number"
+    group: "components"
+    path: "Layout/Float Breakpoint"
+    pathKey: "Layout.Float Breakpoint"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--layout-gutter"
+    name: "layout-gutter"
+    value: "1rem"
+    type: "number"
+    group: "components"
+    path: "Layout/Gutter"
+    pathKey: "Layout.Gutter"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--layout-max-width"
+    name: "layout-max-width"
+    value: "1236px"
+    type: "number"
+    group: "components"
+    path: "Layout/Max Width"
+    pathKey: "Layout.Max Width"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--modal-backdrop-color"
+    name: "modal-backdrop-color"
+    value: "var(--color-overlay-backdrop)"
+    type: "color"
+    group: "components"
+    path: "Modal/Backdrop/Color"
+    pathKey: "Modal.Backdrop.Color"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--modal-surface-border-radius"
+    name: "modal-surface-border-radius"
+    value: "var(--brand-corner-modal)"
+    type: "number"
+    group: "components"
+    path: "Modal/Surface/Border Radius"
+    pathKey: "Modal.Surface.Border Radius"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--modal-surface-color"
+    name: "modal-surface-color"
+    value: "var(--color-fill-surface)"
+    type: "color"
+    group: "components"
+    path: "Modal/Surface/Color"
+    pathKey: "Modal.Surface.Color"
+    scope: "global:component"
+    scopeBucket: "global"
+    scopeId: "component"
+    selector: ":root"
+    sourceFile: "Component.tokens.json"
+  -
+    cssVar: "--size-border-000"
+    name: "size-border-000"
+    value: "0"
+    type: "number"
+    group: "components"
+    path: "Size/Border/000"
+    pathKey: "Size.Border.000"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-border-100"
+    name: "size-border-100"
+    value: ".0625rem"
+    type: "number"
+    group: "components"
+    path: "Size/Border/100"
+    pathKey: "Size.Border.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-border-200"
+    name: "size-border-200"
+    value: ".125rem"
+    type: "number"
+    group: "components"
+    path: "Size/Border/200"
+    pathKey: "Size.Border.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-border-300"
+    name: "size-border-300"
+    value: ".1875rem"
+    type: "number"
+    group: "components"
+    path: "Size/Border/300"
+    pathKey: "Size.Border.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-base"
+    name: "zindex-base"
+    value: 0
+    type: "number"
+    group: "components"
+    path: "ZIndex/Base"
+    pathKey: "ZIndex.Base"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-dropdown"
+    name: "zindex-dropdown"
+    value: 1000
+    type: "number"
+    group: "components"
+    path: "ZIndex/Dropdown"
+    pathKey: "ZIndex.Dropdown"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-dropdown-base"
+    name: "zindex-dropdown-base"
+    value: 900
+    type: "number"
+    group: "components"
+    path: "ZIndex/Dropdown Base"
+    pathKey: "ZIndex.Dropdown Base"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-fixed"
+    name: "zindex-fixed"
+    value: 1030
+    type: "number"
+    group: "components"
+    path: "ZIndex/Fixed"
+    pathKey: "ZIndex.Fixed"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-hidden"
+    name: "zindex-hidden"
+    value: -1
+    type: "number"
+    group: "components"
+    path: "ZIndex/Hidden"
+    pathKey: "ZIndex.Hidden"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-modal"
+    name: "zindex-modal"
+    value: 1050
+    type: "number"
+    group: "components"
+    path: "ZIndex/Modal"
+    pathKey: "ZIndex.Modal"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-modal-overlay"
+    name: "zindex-modal-overlay"
+    value: 1040
+    type: "number"
+    group: "components"
+    path: "ZIndex/Modal Overlay"
+    pathKey: "ZIndex.Modal Overlay"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-popover"
+    name: "zindex-popover"
+    value: 1060
+    type: "number"
+    group: "components"
+    path: "ZIndex/Popover"
+    pathKey: "ZIndex.Popover"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-raised"
+    name: "zindex-raised"
+    value: 1
+    type: "number"
+    group: "components"
+    path: "ZIndex/Raised"
+    pathKey: "ZIndex.Raised"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-sticky"
+    name: "zindex-sticky"
+    value: 1020
+    type: "number"
+    group: "components"
+    path: "ZIndex/Sticky"
+    pathKey: "ZIndex.Sticky"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--zindex-tooltip"
+    name: "zindex-tooltip"
+    value: 1070
+    type: "number"
+    group: "components"
+    path: "ZIndex/Tooltip"
+    pathKey: "ZIndex.Tooltip"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--container-100"
+    name: "container-100"
+    value: "192px"
+    type: "number"
+    group: "containers"
+    path: "Container/100"
+    pathKey: "Container.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--container-200"
+    name: "container-200"
+    value: "384px"
+    type: "number"
+    group: "containers"
+    path: "Container/200"
+    pathKey: "Container.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--container-300"
+    name: "container-300"
+    value: "576px"
+    type: "number"
+    group: "containers"
+    path: "Container/300"
+    pathKey: "Container.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--container-400"
+    name: "container-400"
+    value: "768px"
+    type: "number"
+    group: "containers"
+    path: "Container/400"
+    pathKey: "Container.400"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--container-500"
+    name: "container-500"
+    value: "960px"
+    type: "number"
+    group: "containers"
+    path: "Container/500"
+    pathKey: "Container.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--container-600"
+    name: "container-600"
+    value: "1152px"
+    type: "number"
+    group: "containers"
+    path: "Container/600"
+    pathKey: "Container.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--brand-corner-button"
+    name: "brand-corner-button"
+    value: "var(--size-radius-full)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Button"
+    pathKey: "Brand.Corner.Button"
+    scope: "brand:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-corner-button"
+    name: "brand-corner-button"
+    value: "var(--size-radius-000)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Button"
+    pathKey: "Brand.Corner.Button"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-corner-card"
+    name: "brand-corner-card"
+    value: "var(--size-radius-100)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Card"
+    pathKey: "Brand.Corner.Card"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-corner-input"
+    name: "brand-corner-input"
+    value: "var(--size-radius-000)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Input"
+    pathKey: "Brand.Corner.Input"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.tokens.json"
+  -
+    cssVar: "--brand-corner-modal"
+    name: "brand-corner-modal"
+    value: "var(--size-radius-200)"
+    type: "number"
+    group: "radii"
+    path: "Brand/Corner/Modal"
+    pathKey: "Brand.Corner.Modal"
+    scope: "brand:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--corner-button-radius"
+    name: "corner-button-radius"
+    value: "var(--brand-corner-button)"
+    type: "number"
+    group: "radii"
+    path: "Corner/Button Radius"
+    pathKey: "Corner.Button Radius"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--corner-card-radius"
+    name: "corner-card-radius"
+    value: "var(--brand-corner-card)"
+    type: "number"
+    group: "radii"
+    path: "Corner/Card Radius"
+    pathKey: "Corner.Card Radius"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--corner-form-radius"
+    name: "corner-form-radius"
+    value: "var(--brand-corner-card)"
+    type: "number"
+    group: "radii"
+    path: "Corner/Form Radius"
+    pathKey: "Corner.Form Radius"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--corner-modal-radius"
+    name: "corner-modal-radius"
+    value: "var(--brand-corner-modal)"
+    type: "number"
+    group: "radii"
+    path: "Corner/Modal Radius"
+    pathKey: "Corner.Modal Radius"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--size-radius-000"
+    name: "size-radius-000"
+    value: "0"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/000"
+    pathKey: "Size.Radius.000"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-100"
+    name: "size-radius-100"
+    value: ".125rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/100"
+    pathKey: "Size.Radius.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-200"
+    name: "size-radius-200"
+    value: ".25rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/200"
+    pathKey: "Size.Radius.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-300"
+    name: "size-radius-300"
+    value: ".375rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/300"
+    pathKey: "Size.Radius.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-400"
+    name: "size-radius-400"
+    value: ".5rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/400"
+    pathKey: "Size.Radius.400"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-500"
+    name: "size-radius-500"
+    value: ".75rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/500"
+    pathKey: "Size.Radius.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-600"
+    name: "size-radius-600"
+    value: "1rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/600"
+    pathKey: "Size.Radius.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-700"
+    name: "size-radius-700"
+    value: "1.25rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/700"
+    pathKey: "Size.Radius.700"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-800"
+    name: "size-radius-800"
+    value: "1.5rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/800"
+    pathKey: "Size.Radius.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-900"
+    name: "size-radius-900"
+    value: "2rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/900"
+    pathKey: "Size.Radius.900"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-radius-full"
+    name: "size-radius-full"
+    value: "625rem"
+    type: "number"
+    group: "radii"
+    path: "Size/Radius/full"
+    pathKey: "Size.Radius.full"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--shadow-focus"
+    name: "shadow-focus"
+    value: ".5rem"
+    type: "number"
+    group: "shadows"
+    path: "Shadow/Focus"
+    pathKey: "Shadow.Focus"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-000"
+    name: "size-spacing-000"
+    value: "0"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/000"
+    pathKey: "Size.Spacing.000"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-100"
+    name: "size-spacing-100"
+    value: ".25rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/100"
+    pathKey: "Size.Spacing.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-200"
+    name: "size-spacing-200"
+    value: ".5rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/200"
+    pathKey: "Size.Spacing.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-300"
+    name: "size-spacing-300"
+    value: ".75rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/300"
+    pathKey: "Size.Spacing.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-400"
+    name: "size-spacing-400"
+    value: "1rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/400"
+    pathKey: "Size.Spacing.400"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-500"
+    name: "size-spacing-500"
+    value: "1.25rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/500"
+    pathKey: "Size.Spacing.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-600"
+    name: "size-spacing-600"
+    value: "1.5rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/600"
+    pathKey: "Size.Spacing.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-700"
+    name: "size-spacing-700"
+    value: "2rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/700"
+    pathKey: "Size.Spacing.700"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-800"
+    name: "size-spacing-800"
+    value: "2.5rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/800"
+    pathKey: "Size.Spacing.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-900"
+    name: "size-spacing-900"
+    value: "3rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/900"
+    pathKey: "Size.Spacing.900"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--size-spacing-1000"
+    name: "size-spacing-1000"
+    value: "4rem"
+    type: "number"
+    group: "spacing"
+    path: "Size/Spacing/1000"
+    pathKey: "Size.Spacing.1000"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.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:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.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:a"
+    scopeBucket: "brand"
+    scopeId: "a"
+    selector: ":root[data-brand=\"a\"]"
+    sourceFile: "Brand A.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:b"
+    scopeBucket: "brand"
+    scopeId: "b"
+    selector: ":root[data-brand=\"b\"]"
+    sourceFile: "Brand B.tokens.json"
+  -
+    cssVar: "--font-family-mono"
+    name: "font-family-mono"
+    value: "SFMono-Regular"
+    type: "string"
+    group: "typography"
+    path: "Font/Family/Mono"
+    pathKey: "Font.Family.Mono"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-family-sans"
+    name: "font-family-sans"
+    value: "Inter"
+    type: "string"
+    group: "typography"
+    path: "Font/Family/Sans"
+    pathKey: "Font.Family.Sans"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-family-serif"
+    name: "font-family-serif"
+    value: "Rokkitt"
+    type: "string"
+    group: "typography"
+    path: "Font/Family/Serif"
+    pathKey: "Font.Family.Serif"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-size-lg"
+    name: "font-size-lg"
+    value: "1.25rem"
+    type: "number"
+    group: "typography"
+    path: "Font/Size/lg"
+    pathKey: "Font.Size.lg"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-size-md"
+    name: "font-size-md"
+    value: "1rem"
+    type: "number"
+    group: "typography"
+    path: "Font/Size/md"
+    pathKey: "Font.Size.md"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-size-sm"
+    name: "font-size-sm"
+    value: ".875rem"
+    type: "number"
+    group: "typography"
+    path: "Font/Size/sm"
+    pathKey: "Font.Size.sm"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-size-xl"
+    name: "font-size-xl"
+    value: "1.5rem"
+    type: "number"
+    group: "typography"
+    path: "Font/Size/xl"
+    pathKey: "Font.Size.xl"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-size-xs"
+    name: "font-size-xs"
+    value: ".75rem"
+    type: "number"
+    group: "typography"
+    path: "Font/Size/xs"
+    pathKey: "Font.Size.xs"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-size-xxl"
+    name: "font-size-xxl"
+    value: "2rem"
+    type: "number"
+    group: "typography"
+    path: "Font/Size/xxl"
+    pathKey: "Font.Size.xxl"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-size-xxxl"
+    name: "font-size-xxxl"
+    value: "2.5rem"
+    type: "number"
+    group: "typography"
+    path: "Font/Size/xxxl"
+    pathKey: "Font.Size.xxxl"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-100"
+    name: "font-weight-100"
+    value: 100
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/100"
+    pathKey: "Font.Weight.100"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-200"
+    name: "font-weight-200"
+    value: 200
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/200"
+    pathKey: "Font.Weight.200"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-300"
+    name: "font-weight-300"
+    value: 300
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/300"
+    pathKey: "Font.Weight.300"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-400"
+    name: "font-weight-400"
+    value: 400
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/400"
+    pathKey: "Font.Weight.400"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-500"
+    name: "font-weight-500"
+    value: 500
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/500"
+    pathKey: "Font.Weight.500"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-600"
+    name: "font-weight-600"
+    value: 600
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/600"
+    pathKey: "Font.Weight.600"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-700"
+    name: "font-weight-700"
+    value: 700
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/700"
+    pathKey: "Font.Weight.700"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-800"
+    name: "font-weight-800"
+    value: 800
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/800"
+    pathKey: "Font.Weight.800"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--font-weight-900"
+    name: "font-weight-900"
+    value: 900
+    type: "string"
+    group: "typography"
+    path: "Font/Weight/900"
+    pathKey: "Font.Weight.900"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--line-height-lg"
+    name: "line-height-lg"
+    value: "1.75rem"
+    type: "number"
+    group: "typography"
+    path: "Line Height/lg"
+    pathKey: "Line Height.lg"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--line-height-md"
+    name: "line-height-md"
+    value: "1.5rem"
+    type: "number"
+    group: "typography"
+    path: "Line Height/md"
+    pathKey: "Line Height.md"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--line-height-sm"
+    name: "line-height-sm"
+    value: "1.25rem"
+    type: "number"
+    group: "typography"
+    path: "Line Height/sm"
+    pathKey: "Line Height.sm"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--line-height-xl"
+    name: "line-height-xl"
+    value: "2rem"
+    type: "number"
+    group: "typography"
+    path: "Line Height/xl"
+    pathKey: "Line Height.xl"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--line-height-xs"
+    name: "line-height-xs"
+    value: "1rem"
+    type: "number"
+    group: "typography"
+    path: "Line Height/xs"
+    pathKey: "Line Height.xs"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--line-height-xxl"
+    name: "line-height-xxl"
+    value: "2.75rem"
+    type: "number"
+    group: "typography"
+    path: "Line Height/xxl"
+    pathKey: "Line Height.xxl"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--line-height-xxxl"
+    name: "line-height-xxxl"
+    value: "3.5rem"
+    type: "number"
+    group: "typography"
+    path: "Line Height/xxxl"
+    pathKey: "Line Height.xxxl"
+    scope: "global:primitives"
+    scopeBucket: "global"
+    scopeId: "primitives"
+    selector: ":root"
+    sourceFile: "Primitives.tokens.json"
+  -
+    cssVar: "--typography-body-font-family"
+    name: "typography-body-font-family"
+    value: "var(--brand-font-base)"
+    type: "string"
+    group: "typography"
+    path: "Typography/Body/Font Family"
+    pathKey: "Typography.Body.Font Family"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-body-font-size"
+    name: "typography-body-font-size"
+    value: "var(--font-size-md)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Body/Font Size"
+    pathKey: "Typography.Body.Font Size"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-body-font-weight"
+    name: "typography-body-font-weight"
+    value: "var(--font-weight-400)"
+    type: "string"
+    group: "typography"
+    path: "Typography/Body/Font Weight"
+    pathKey: "Typography.Body.Font Weight"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-body-line-height"
+    name: "typography-body-line-height"
+    value: "var(--line-height-md)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Body/Line Height"
+    pathKey: "Typography.Body.Line Height"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-code"
+    name: "typography-code"
+    value: "var(--font-family-mono)"
+    type: "string"
+    group: "typography"
+    path: "Typography/Code"
+    pathKey: "Typography.Code"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-family"
+    name: "typography-heading-font-family"
+    value: "var(--brand-font-lead)"
+    type: "string"
+    group: "typography"
+    path: "Typography/Heading/Font Family"
+    pathKey: "Typography.Heading.Font Family"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-size-lg"
+    name: "typography-heading-font-size-lg"
+    value: "var(--font-size-lg)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Font Size/lg"
+    pathKey: "Typography.Heading.Font Size.lg"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-size-md"
+    name: "typography-heading-font-size-md"
+    value: "var(--font-size-md)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Font Size/md"
+    pathKey: "Typography.Heading.Font Size.md"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-size-sm"
+    name: "typography-heading-font-size-sm"
+    value: "var(--font-size-sm)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Font Size/sm"
+    pathKey: "Typography.Heading.Font Size.sm"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-size-xl"
+    name: "typography-heading-font-size-xl"
+    value: "var(--font-size-xl)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Font Size/xl"
+    pathKey: "Typography.Heading.Font Size.xl"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-size-xs"
+    name: "typography-heading-font-size-xs"
+    value: "var(--font-size-xs)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Font Size/xs"
+    pathKey: "Typography.Heading.Font Size.xs"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-size-xxl"
+    name: "typography-heading-font-size-xxl"
+    value: "var(--font-size-xxl)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Font Size/xxl"
+    pathKey: "Typography.Heading.Font Size.xxl"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-size-xxxl"
+    name: "typography-heading-font-size-xxxl"
+    value: "var(--font-size-xxxl)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Font Size/xxxl"
+    pathKey: "Typography.Heading.Font Size.xxxl"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-font-weight"
+    name: "typography-heading-font-weight"
+    value: "var(--font-weight-700)"
+    type: "string"
+    group: "typography"
+    path: "Typography/Heading/Font Weight"
+    pathKey: "Typography.Heading.Font Weight"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-line-height-lg"
+    name: "typography-heading-line-height-lg"
+    value: "var(--line-height-lg)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Line Height/lg"
+    pathKey: "Typography.Heading.Line Height.lg"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-line-height-md"
+    name: "typography-heading-line-height-md"
+    value: "var(--line-height-md)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Line Height/md"
+    pathKey: "Typography.Heading.Line Height.md"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-line-height-sm"
+    name: "typography-heading-line-height-sm"
+    value: "var(--line-height-sm)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Line Height/sm"
+    pathKey: "Typography.Heading.Line Height.sm"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-line-height-xl"
+    name: "typography-heading-line-height-xl"
+    value: "var(--line-height-xl)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Line Height/xl"
+    pathKey: "Typography.Heading.Line Height.xl"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-line-height-xs"
+    name: "typography-heading-line-height-xs"
+    value: "var(--line-height-xs)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Line Height/xs"
+    pathKey: "Typography.Heading.Line Height.xs"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-line-height-xxl"
+    name: "typography-heading-line-height-xxl"
+    value: "var(--line-height-xxl)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Line Height/xxl"
+    pathKey: "Typography.Heading.Line Height.xxl"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-heading-line-height-xxxl"
+    name: "typography-heading-line-height-xxxl"
+    value: "var(--line-height-xxxl)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Heading/Line Height/xxxl"
+    pathKey: "Typography.Heading.Line Height.xxxl"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-label-font-family"
+    name: "typography-label-font-family"
+    value: "var(--brand-font-lead)"
+    type: "string"
+    group: "typography"
+    path: "Typography/Label/Font Family"
+    pathKey: "Typography.Label.Font Family"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-label-font-size"
+    name: "typography-label-font-size"
+    value: "var(--font-size-md)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Label/Font Size"
+    pathKey: "Typography.Label.Font Size"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-label-font-weight"
+    name: "typography-label-font-weight"
+    value: "var(--font-weight-600)"
+    type: "string"
+    group: "typography"
+    path: "Typography/Label/Font Weight"
+    pathKey: "Typography.Label.Font Weight"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-label-gap"
+    name: "typography-label-gap"
+    value: "var(--size-spacing-200)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Label/Gap"
+    pathKey: "Typography.Label.Gap"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"
+  -
+    cssVar: "--typography-label-line-height"
+    name: "typography-label-line-height"
+    value: "var(--line-height-md)"
+    type: "number"
+    group: "typography"
+    path: "Typography/Label/Line Height"
+    pathKey: "Typography.Label.Line Height"
+    scope: "global:semantic"
+    scopeBucket: "global"
+    scopeId: "semantic"
+    selector: ":root"
+    sourceFile: "Semantic.tokens.json"