@oneli8/tokens 1.0.0-beta.5 → 1.0.0-beta.7

package/README.md

@@ -7,7 +7,7 @@ npm install @oneli8/tokens
 ```
 
 ```js
-import '@oneli8/tokens/css';        // :root custom properties + .ol8-type-* classes
+import '@oneli8/tokens/css';        // every token as a :root custom property
 import { tokens } from '@oneli8/tokens';  // flat { 'color-text-primary': '#151817', ... }
 ```
 
@@ -17,25 +17,46 @@ rebuild.
 
 ## What the vocabulary contains
 
-99 colour primitives across 9 ramps, 68 semantic colour roles, 45 Gem material
-roles, 27 control material roles, a 3px atomic dimension scale, 9 radii, 9
-composite typography roles and 5 elevations.
+601 tokens in three tiers: 170 primitives, 270 semantic roles and 161 component
+roles. Nine colour ramps, a 3px atomic dimension scale, nine radii, nine
+composite typography roles, five elevation surfaces and the Gem material.
+
+The tiers are not decoration. A primitive is a value, a semantic role is a
+decision, and a component role is that decision applied to one part of one
+component. Each tier may only reference the tier above it, and the build refuses
+a component token that reaches straight for a primitive.
 
 Two rules matter when consuming it:
 
 - **Use semantic roles, not primitives.** `color-blue-600` is a swatch;
   `color-actionprimary-default` is a decision. Primitives are hidden from Figma
   pickers for the same reason.
-- **Use the `.ol8-type-<role>` class, not individual font variables.** Typography
-  is composite in Figma, a role bundles family, size, line height, weight and
-  tracking, and the class applies all of them together.
+- **Use a whole typography role, not loose font variables.** Typography is
+  composite in Figma: a role bundles family, size, line height, weight and
+  tracking, and those five belong together. Nine roles ship, each as five
+  custom properties.
+
+```css
+.article-lead {
+  font-family:     var(--ol8-typography-body-large-font-family);
+  font-size:       var(--ol8-typography-body-large-font-size);
+  font-weight:     var(--ol8-typography-body-large-font-weight);
+  line-height:     var(--ol8-typography-body-large-line-height);
+  letter-spacing:  var(--ol8-typography-body-large-letter-spacing);
+}
+```
+
+  The roles are `display-large`, `display-medium`, `display-small`,
+  `title-large`, `title-medium`, `title-small`, `body-large`, `body-medium` and
+  `body-small`. This package ships custom properties and no class names, so
+  nothing here can collide with your own stylesheet.
 
 ## Entry points
 
 | Import | What it gives you |
 |---|---|
 | `@oneli8/tokens` | flat `{ name: value }` map, with a literal union key type |
-| `@oneli8/tokens/css` | the custom properties and `.ol8-type-*` classes |
+| `@oneli8/tokens/css` | every token as a CSS custom property |
 | `@oneli8/tokens/tailwind` | Tailwind v3 preset |
 | `@oneli8/tokens/tailwind.css` | Tailwind v4 `@theme` bridge |
 | `@oneli8/tokens/figma` | round trip payload: collections, theme modes, type and elevation styles |

package/ai-context.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED by packages/sync/src/build-package-context.mjs — do not edit.",
   "system": "OneLi8",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "meaning": "OneLi8 means One Light.",
   "foundations": {
     "package": "@oneli8/tokens",
@@ -13,7 +13,7 @@
       "color-primary-* is an alias ramp onto color-blue-* — identical values, distinct names. Prefer the semantic role over either.",
       "Dimension scale is 3px-atomic. Even multiples for structural layout; odd multiples are deliberate optical or micro-gap choices.",
       "Elevation ink is cyan-840 rgb(22,63,75) — never default black.",
-      "Typography roles are composite. Use the .ol8-type-<role> class, not the individual font vars.",
+      "Typography roles are composite. Apply a whole role, all five of --ol8-typography-<role>-{font-family,font-size,font-weight,line-height,letter-spacing}, rather than picking loose font vars. This package ships custom properties and no class names.",
       "shape-radius-full (999px) is reserved for pills and circles. Soft hexagons are component-specific recipes, not a radius token."
     ]
   },

package/build/css/tokens.css

@@ -296,9 +296,9 @@
   --ol8-material-control-gem--rim-hover: color-mix(in srgb, var(--ol8-color-neutral-030) 36%, transparent);
   --ol8-material-control-gem--rim-specular: color-mix(in srgb, var(--ol8-color-neutral-030) 54%, transparent);
   --ol8-material-control-gem--blur: 12px;
-  --ol8-material-control-gem-gradient-start: 14.639%;
-  --ol8-material-control-gem-gradient-mid: 48.586%;
-  --ol8-material-control-gem-gradient-end: 85.361%;
+  --ol8-material-control-gem--gradient-start: 14.639%;
+  --ol8-material-control-gem--gradient-mid: 48.586%;
+  --ol8-material-control-gem--gradient-end: 85.361%;
   --ol8-material-gem-color-quiet-environmentalface: color-mix(in srgb, var(--ol8-color-neutral-030) 48%, transparent);
   --ol8-material-gem-color-quiet-stabilizedface: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
   --ol8-material-gem-color-quiet-opaqueequivalent: var(--ol8-color-neutral-030);
@@ -527,6 +527,7 @@
   --ol8-component-iconbutton-pressedscrim: var(--ol8-color-scrim-pressed);
   --ol8-component-link-underline-default: 1px;
   --ol8-component-link-underline-emphasis: 2px;
+  --ol8-component-link-underline-current: 3px;
   --ol8-component-link-underline-offset: 3px;
   --ol8-component-link-gap-small: 6px;
   --ol8-component-link-gap-standard: 6px;
@@ -546,7 +547,9 @@
   --ol8-component-textfield-radius-large: 18px;
   --ol8-component-textfield-boundary: 2px;
   --ol8-component-textfield-gap-label: 6px;
+  --ol8-component-textfield-gap-requirement: 3px;
   --ol8-component-textfield-gap-supporting: 6px;
+  --ol8-component-textfield-gap-inline: 6px;
   --ol8-component-textfield-gap-status: 3px;
   --ol8-component-textfield-gap-messagecounter: 12px;
   --ol8-component-choice-indicator-compact: 18px;
@@ -581,6 +584,7 @@
   --ol8-component-selectionpopup-railinsetinline: 3px;
   --ol8-component-selectionpopup-maximumblock-standard: 288px;
   --ol8-component-selectionpopup-maximumblock-large: 360px;
+  --ol8-component-selectionpopup-inset: 6px;
   --ol8-component-selectionoption-minimum-standard: 48px;
   --ol8-component-selectionoption-minimum-large: 60px;
   --ol8-component-selectionoption-inset-standard: 12px;
@@ -601,18 +605,23 @@
   --ol8-component-choicechip-inset-standard: 24px;
   --ol8-component-choicechip-inset-comfortable: 27px;
   --ol8-component-choicechip-inset-large: 27px;
-  --ol8-component-choicechip-gap: 6px;
+  --ol8-component-choice-chip-gap: 6px;
   --ol8-component-choicechip-markgap: 9px;
   --ol8-component-choicechip-mark: 18px;
-  --ol8-component-tokenfield-minimuminput: 96px;
-  --ol8-component-tokenfield-gap: 6px;
-  --ol8-component-tokenfield-paddingblock: 3px;
+  --ol8-component-choice-chip-mark-target: 24px;
+  --ol8-component-choice-chip-rail-inset-compact: 9px;
+  --ol8-component-choice-chip-rail-inset-standard: 12px;
+  --ol8-component-choice-chip-rail-inset-comfortable: 15px;
+  --ol8-component-choice-chip-rail-inset-large: 15px;
+  --ol8-component-token-field-minimum-input: 96px;
+  --ol8-component-token-field-gap: 6px;
+  --ol8-component-token-field-padding-block: 3px;
   --ol8-component-suggestionrail-gap: 6px;
   --ol8-component-suggestionrail-fieldseparation: 6px;
-  --ol8-component-navigation-itemgap: 6px;
+  --ol8-component-navigation-item-gap: 6px;
   --ol8-component-navigation-icon: 18px;
   --ol8-component-navigation-target: 48px;
-  --ol8-component-navigation-focusinset: 3px;
+  --ol8-component-navigation-focus-inset: 3px;
   --ol8-component-tab-item-height-compact: 36px;
   --ol8-component-tab-item-height-standard: 42px;
   --ol8-component-tab-item-height-comfortable: 48px;
@@ -621,21 +630,21 @@
   --ol8-component-tab-item-inset-standard: 15px;
   --ol8-component-tab-item-inset-comfortable: 18px;
   --ol8-component-tab-item-inset-large: 24px;
-  --ol8-component-tabitem-radius: 9px;
+  --ol8-component-tab-item-radius: 9px;
   --ol8-component-tab-item-indicator-thickness: 3px;
-  --ol8-component-tabitem-indicatorinset: 15px;
-  --ol8-component-tabitem-rail: 1px;
-  --ol8-component-segmentedcontrol-trackinset: 3px;
-  --ol8-component-segmentedcontrol-outlinedgap: 6px;
-  --ol8-component-segmentedcontrol-trackradius: 12px;
-  --ol8-component-segmentedcontrol-itemradius: 9px;
-  --ol8-component-segmentedcontrol-line: 3px;
-  --ol8-component-segmentedcontrol-boundary: 1px;
-  --ol8-component-tabbar-inset: 6px;
-  --ol8-component-tabbar-inlineinset: 3px;
-  --ol8-component-tabbar-gap: 0px;
-  --ol8-component-tabbar-radius: 18px;
-  --ol8-component-tabbar-itemradius: 12px;
+  --ol8-component-tab-item-indicator-inset: 15px;
+  --ol8-component-tab-item-rail: 1px;
+  --ol8-component-segmented-control-track-inset: 3px;
+  --ol8-component-segmented-control-outlined-gap: 6px;
+  --ol8-component-segmented-control-track-radius: 12px;
+  --ol8-component-segmented-control-item-radius: 9px;
+  --ol8-component-segmented-control-line: 3px;
+  --ol8-component-segmented-control-boundary: 1px;
+  --ol8-component-tab-bar-inset: 6px;
+  --ol8-component-tab-bar-inline-inset: 3px;
+  --ol8-component-tab-bar-gap: 0px;
+  --ol8-component-tab-bar-radius: 18px;
+  --ol8-component-tab-bar-item-radius: 12px;
 }
 
 [data-ol8-color-scheme="dark"] {

package/build/figma/variables.json

@@ -4523,6 +4523,17 @@
         "reference": "border.width.standard",
         "description": "Hover and Pressed Link underline."
       },
+      {
+        "path": "component.link.underline.current",
+        "name": "Component / Link / Underline / Current",
+        "type": "dimension",
+        "value": {
+          "value": 3,
+          "unit": "px"
+        },
+        "reference": "border.width.strong",
+        "description": "Marker that shows the current destination in a Navigation Link. It sits where the underline sits and replaces it."
+      },
       {
         "path": "component.link.underline.offset",
         "name": "Component / Link / Underline / Offset",
@@ -4732,6 +4743,17 @@
         "reference": "spacing.stack.tight",
         "description": "Label-to-control gap."
       },
+      {
+        "path": "component.textField.gap.requirement",
+        "name": "Component / Text Field / Gap / Requirement",
+        "type": "dimension",
+        "value": {
+          "value": 3,
+          "unit": "px"
+        },
+        "reference": "spacing.inline.minimal",
+        "description": "Gap between the label and the mark that says the field is required."
+      },
       {
         "path": "component.textField.gap.supporting",
         "name": "Component / Text Field / Gap / Supporting",
@@ -4743,6 +4765,17 @@
         "reference": "spacing.stack.tight",
         "description": "Control-to-supporting-region gap."
       },
+      {
+        "path": "component.textField.gap.inline",
+        "name": "Component / Text Field / Gap / Inline",
+        "type": "dimension",
+        "value": {
+          "value": 6,
+          "unit": "px"
+        },
+        "reference": "spacing.inline.related",
+        "description": "Gap between the slots inside the control: leading icon, prefix, value, suffix and trailing action."
+      },
       {
         "path": "component.textField.gap.status",
         "name": "Component / Text Field / Gap / Status",
@@ -5117,6 +5150,17 @@
         "reference": null,
         "description": "Suggested Large maximum visible option region before scrolling."
       },
+      {
+        "path": "component.selectionPopup.inset",
+        "name": "Component / Selection Popup / Inset",
+        "type": "dimension",
+        "value": {
+          "value": 6,
+          "unit": "px"
+        },
+        "reference": "spacing.inline.related",
+        "description": "Selection popup internal inset."
+      },
       {
         "path": "component.selectionOption.minimum.standard",
         "name": "Component / Selection Option / Minimum / Standard",
@@ -5370,6 +5414,61 @@
         "reference": "size.icon.small",
         "description": "Canonical Icon Frame presentation for Check or Remove artwork."
       },
+      {
+        "path": "component.choiceChip.markTarget",
+        "name": "Component / Choice Chip / Mark Target",
+        "type": "dimension",
+        "value": {
+          "value": 24,
+          "unit": "px"
+        },
+        "reference": null,
+        "description": "Minimum reachable target for the Remove mark. The mark is drawn at 18; the contract asks for at least 24 that overlaps neither the label nor the chip edge, so the target is expanded around the drawn mark rather than enlarging it."
+      },
+      {
+        "path": "component.choiceChip.railInset.compact",
+        "name": "Component / Choice Chip / Rail Inset / Compact",
+        "type": "dimension",
+        "value": {
+          "value": 9,
+          "unit": "px"
+        },
+        "reference": null,
+        "description": "9px rail inset; with the 12px terminal this produces the approved 21px content inset."
+      },
+      {
+        "path": "component.choiceChip.railInset.standard",
+        "name": "Component / Choice Chip / Rail Inset / Standard",
+        "type": "dimension",
+        "value": {
+          "value": 12,
+          "unit": "px"
+        },
+        "reference": null,
+        "description": "12px rail inset; with the terminal this produces the approved 24px content inset."
+      },
+      {
+        "path": "component.choiceChip.railInset.comfortable",
+        "name": "Component / Choice Chip / Rail Inset / Comfortable",
+        "type": "dimension",
+        "value": {
+          "value": 15,
+          "unit": "px"
+        },
+        "reference": null,
+        "description": "15px rail inset; with the terminal this produces the approved 27px content inset."
+      },
+      {
+        "path": "component.choiceChip.railInset.large",
+        "name": "Component / Choice Chip / Rail Inset / Large",
+        "type": "dimension",
+        "value": {
+          "value": 15,
+          "unit": "px"
+        },
+        "reference": null,
+        "description": "15px rail inset; with the terminal this produces the approved 27px content inset."
+      },
       {
         "path": "component.tokenField.minimumInput",
         "name": "Component / Token Field / Minimum Input",

package/build/manifest.json

@@ -4,9 +4,9 @@
   "counts": {
     "primitive": 170,
     "semantic": 270,
-    "component": 152,
+    "component": 161,
     "componentStatuses": 10,
-    "figmaVariables": 578,
+    "figmaVariables": 587,
     "figmaTypographyStyles": 9,
     "figmaElevationStyles": 5
   },

package/build/typescript/index.d.ts

@@ -1,5 +1,5 @@
 // @generated by @oneli8/tokens — do not edit
-export type TokenPath = "border.width.hairline" | "border.width.none" | "border.width.standard" | "border.width.strong" | "color.actionDestructive.content" | "color.actionDestructive.default" | "color.actionDestructive.disabled" | "color.actionDestructive.disabledContent" | "color.actionDestructive.hover" | "color.actionDestructive.pressed" | "color.actionPrimary.content" | "color.actionPrimary.default" | "color.actionPrimary.disabled" | "color.actionPrimary.disabledContent" | "color.actionPrimary.hover" | "color.actionPrimary.pressed" | "color.actionQuiet.contentDefault" | "color.actionQuiet.contentDisabled" | "color.actionQuiet.contentHover" | "color.actionQuiet.contentPressed" | "color.actionQuiet.surfaceDefault" | "color.actionQuiet.surfaceDisabled" | "color.actionQuiet.surfaceHover" | "color.actionQuiet.surfacePressed" | "color.actionSecondary.contentDefault" | "color.actionSecondary.contentDisabled" | "color.actionSecondary.contentHover" | "color.actionSecondary.contentPressed" | "color.actionSecondary.surfaceDefault" | "color.actionSecondary.surfaceDisabled" | "color.actionSecondary.surfaceHover" | "color.actionSecondary.surfacePressed" | "color.background.canvas" | "color.background.inverse" | "color.background.subtle" | "color.blue.030" | "color.blue.060" | "color.blue.090" | "color.blue.120" | "color.blue.240" | "color.blue.360" | "color.blue.480" | "color.blue.600" | "color.blue.720" | "color.blue.840" | "color.blue.930" | "color.border.default" | "color.border.disabled" | "color.border.strong" | "color.border.subtle" | "color.control.thumb" | "color.cyan.030" | "color.cyan.060" | "color.cyan.090" | "color.cyan.120" | "color.cyan.240" | "color.cyan.360" | "color.cyan.480" | "color.cyan.600" | "color.cyan.720" | "color.cyan.840" | "color.cyan.930" | "color.feedbackCaution.content" | "color.feedbackCaution.inlineContent" | "color.feedbackCaution.surface" | "color.feedbackCritical.content" | "color.feedbackCritical.inlineContent" | "color.feedbackCritical.surface" | "color.feedbackInformative.content" | "color.feedbackInformative.inlineContent" | "color.feedbackInformative.surface" | "color.feedbackPositive.content" | "color.feedbackPositive.inlineContent" | "color.feedbackPositive.surface" | "color.focus.inner" | "color.focus.outer" | "color.green.030" | "color.green.060" | "color.green.090" | "color.green.120" | "color.green.240" | "color.green.360" | "color.green.480" | "color.green.600" | "color.green.720" | "color.green.840" | "color.green.930" | "color.icon.disabled" | "color.icon.inverse" | "color.icon.muted" | "color.icon.onGem" | "color.icon.primary" | "color.icon.secondary" | "color.iconButton.quietHoverSurface" | "color.iconButton.secondaryHoverSurface" | "color.navigationBadge.contentDefault" | "color.navigationBadge.contentGem" | "color.navigationBadge.contentSelected" | "color.navigationBadge.surfaceDefault" | "color.navigationBadge.surfaceGem" | "color.navigationBadge.surfaceSelected" | "color.neutral.030" | "color.neutral.060" | "color.neutral.090" | "color.neutral.120" | "color.neutral.240" | "color.neutral.360" | "color.neutral.480" | "color.neutral.600" | "color.neutral.720" | "color.neutral.840" | "color.neutral.930" | "color.orange.030" | "color.orange.060" | "color.orange.090" | "color.orange.120" | "color.orange.240" | "color.orange.360" | "color.orange.480" | "color.orange.600" | "color.orange.720" | "color.orange.840" | "color.orange.930" | "color.pink.030" | "color.pink.060" | "color.pink.090" | "color.pink.120" | "color.pink.240" | "color.pink.360" | "color.pink.480" | "color.pink.600" | "color.pink.720" | "color.pink.840" | "color.pink.930" | "color.primary.030" | "color.primary.060" | "color.primary.090" | "color.primary.120" | "color.primary.240" | "color.primary.360" | "color.primary.480" | "color.primary.600" | "color.primary.720" | "color.primary.840" | "color.primary.930" | "color.red.030" | "color.red.060" | "color.red.090" | "color.red.120" | "color.red.240" | "color.red.360" | "color.red.480" | "color.red.600" | "color.red.720" | "color.red.840" | "color.red.930" | "color.scrim.pressed" | "color.selection.content" | "color.selection.surface" | "color.surface.default" | "color.surface.disabled" | "color.surface.raised" | "color.surface.selected" | "color.surface.sunken" | "color.text.disabled" | "color.text.inverse" | "color.text.link.default" | "color.text.link.hover" | "color.text.link.pressed" | "color.text.link.visited" | "color.text.muted" | "color.text.primary" | "color.text.secondary" | "color.violet.030" | "color.violet.060" | "color.violet.090" | "color.violet.120" | "color.violet.240" | "color.violet.360" | "color.violet.480" | "color.violet.600" | "color.violet.720" | "color.violet.840" | "color.violet.930" | "color.yellow.030" | "color.yellow.060" | "color.yellow.090" | "color.yellow.120" | "color.yellow.240" | "color.yellow.360" | "color.yellow.480" | "color.yellow.600" | "color.yellow.720" | "color.yellow.840" | "color.yellow.930" | "component.button.gap.comfortable" | "component.button.gap.compact" | "component.button.height.comfortable" | "component.button.height.compact" | "component.button.height.large" | "component.button.height.standard" | "component.button.icon.comfortable" | "component.button.icon.compact" | "component.button.paddingInline.comfortable" | "component.button.paddingInline.compact" | "component.button.paddingInline.large" | "component.button.paddingInline.standard" | "component.button.radius.comfortable" | "component.button.radius.compact" | "component.button.radius.large" | "component.button.radius.standard" | "component.button.secondaryBoundary" | "component.button.target.comfortable" | "component.button.target.compact" | "component.button.target.large" | "component.button.target.standard" | "component.checkbox.boundary" | "component.checkbox.mark.mixedWidth" | "component.checkbox.mark.stroke" | "component.checkbox.radius.comfortable" | "component.checkbox.radius.compact" | "component.choice.gap.compact" | "component.choice.gap.large" | "component.choice.gap.standard" | "component.choice.indicator.comfortable" | "component.choice.indicator.compact" | "component.choice.opticalStroke" | "component.choice.rowMinimum" | "component.choiceChip.bezelInset" | "component.choiceChip.centerCut" | "component.choiceChip.gap" | "component.choiceChip.height.comfortable" | "component.choiceChip.height.compact" | "component.choiceChip.height.large" | "component.choiceChip.height.standard" | "component.choiceChip.innerCenterCut" | "component.choiceChip.innerTerminal" | "component.choiceChip.inset.comfortable" | "component.choiceChip.inset.compact" | "component.choiceChip.inset.large" | "component.choiceChip.inset.standard" | "component.choiceChip.mark" | "component.choiceChip.markGap" | "component.choiceChip.target.large" | "component.choiceChip.target.standard" | "component.choiceChip.terminal" | "component.icon.stroke" | "component.iconButton.artwork.comfortable" | "component.iconButton.artwork.compact" | "component.iconButton.artwork.large" | "component.iconButton.artwork.standard" | "component.iconButton.box.comfortable" | "component.iconButton.box.compact" | "component.iconButton.box.large" | "component.iconButton.box.standard" | "component.iconButton.pressedScrim" | "component.iconButton.radius.circle" | "component.iconButton.radius.comfortable" | "component.iconButton.radius.compact" | "component.iconButton.radius.large" | "component.iconButton.radius.standard" | "component.iconButton.target.comfortable" | "component.iconButton.target.compact" | "component.iconButton.target.large" | "component.iconButton.target.standard" | "component.link.gap.large" | "component.link.gap.small" | "component.link.gap.standard" | "component.link.targetNavigation" | "component.link.underline.default" | "component.link.underline.emphasis" | "component.link.underline.offset" | "component.navigation.focusInset" | "component.navigation.icon" | "component.navigation.itemGap" | "component.navigation.target" | "component.opticalStroke" | "component.radio.boundary" | "component.radio.dot.comfortable" | "component.radio.dot.compact" | "component.segmentedControl.boundary" | "component.segmentedControl.itemRadius" | "component.segmentedControl.line" | "component.segmentedControl.outlinedGap" | "component.segmentedControl.trackInset" | "component.segmentedControl.trackRadius" | "component.selectionOption.check" | "component.selectionOption.inset.large" | "component.selectionOption.inset.standard" | "component.selectionOption.minimum.large" | "component.selectionOption.minimum.standard" | "component.selectionPopup.gap" | "component.selectionPopup.maximumBlock.large" | "component.selectionPopup.maximumBlock.standard" | "component.selectionPopup.paddingBlock" | "component.selectionPopup.paddingInline" | "component.selectionPopup.railInsetInline" | "component.suggestionRail.fieldSeparation" | "component.suggestionRail.gap" | "component.switch.inset" | "component.switch.thumb.comfortable" | "component.switch.thumb.compact" | "component.switch.thumbIcon.comfortable" | "component.switch.thumbIcon.compact" | "component.switch.trackHeight.comfortable" | "component.switch.trackHeight.compact" | "component.switch.trackWidth.comfortable" | "component.switch.trackWidth.compact" | "component.switch.travel.comfortable" | "component.switch.travel.compact" | "component.tabBar.gap" | "component.tabBar.inlineInset" | "component.tabBar.inset" | "component.tabBar.itemRadius" | "component.tabBar.radius" | "component.tabItem.height.comfortable" | "component.tabItem.height.compact" | "component.tabItem.height.large" | "component.tabItem.height.standard" | "component.tabItem.indicatorInset" | "component.tabItem.indicatorThickness" | "component.tabItem.inset.comfortable" | "component.tabItem.inset.compact" | "component.tabItem.inset.large" | "component.tabItem.inset.standard" | "component.tabItem.radius" | "component.tabItem.rail" | "component.textField.boundary" | "component.textField.gap.label" | "component.textField.gap.messageCounter" | "component.textField.gap.status" | "component.textField.gap.supporting" | "component.textField.height.comfortable" | "component.textField.height.compact" | "component.textField.height.large" | "component.textField.height.standard" | "component.textField.inset.comfortable" | "component.textField.inset.compact" | "component.textField.inset.large" | "component.textField.inset.standard" | "component.textField.radius.comfortable" | "component.textField.radius.compact" | "component.textField.radius.large" | "component.textField.radius.standard" | "component.tokenField.gap" | "component.tokenField.minimumInput" | "component.tokenField.paddingBlock" | "dimension.scale.000" | "dimension.scale.003" | "dimension.scale.006" | "dimension.scale.009" | "dimension.scale.012" | "dimension.scale.015" | "dimension.scale.018" | "dimension.scale.024" | "dimension.scale.030" | "dimension.scale.036" | "dimension.scale.042" | "dimension.scale.048" | "dimension.scale.060" | "dimension.scale.072" | "dimension.scale.084" | "dimension.scale.096" | "dimension.scale.108" | "elevation.surface.blocking" | "elevation.surface.flat" | "elevation.surface.floating" | "elevation.surface.overlay" | "elevation.surface.raised" | "focus.ring.innerWidth" | "focus.ring.offset" | "focus.ring.outerWidth" | "focus.ring.totalWidth" | "font.axis.arrr.baseline" | "font.family.display" | "font.family.fallback" | "font.family.functional" | "font.line.018" | "font.line.024" | "font.line.030" | "font.line.039" | "font.line.048" | "font.line.060" | "font.line.072" | "font.line.096" | "font.line.126" | "font.size.012" | "font.size.016" | "font.size.021" | "font.size.030" | "font.size.039" | "font.size.051" | "font.size.066" | "font.size.090" | "font.size.120" | "font.tracking.displaySoft" | "font.tracking.normal" | "font.tracking.open" | "font.tracking.snug" | "font.tracking.tight" | "font.tracking.tighter" | "font.tracking.titleSoft" | "font.tracking.titleTight" | "font.weight.bold" | "font.weight.regular" | "font.weight.semibold" | "layer.stack.base" | "layer.stack.modal" | "layer.stack.notification" | "layer.stack.overlay" | "layer.stack.sticky" | "material.control.gem.blur" | "material.control.gem.gradient.end" | "material.control.gem.gradient.mid" | "material.control.gem.gradient.start" | "material.control.gem.primary.content" | "material.control.gem.primary.end" | "material.control.gem.primary.hoverEnd" | "material.control.gem.primary.hoverMid" | "material.control.gem.primary.hoverStart" | "material.control.gem.primary.loadingEnd" | "material.control.gem.primary.loadingMid" | "material.control.gem.primary.loadingStart" | "material.control.gem.primary.mid" | "material.control.gem.primary.start" | "material.control.gem.rim.default" | "material.control.gem.rim.hover" | "material.control.gem.rim.specular" | "material.control.gem.secondary.content" | "material.control.gem.secondary.high" | "material.control.gem.secondary.hoverHigh" | "material.control.gem.secondary.hoverLow" | "material.control.gem.secondary.hoverMid" | "material.control.gem.secondary.loadingHigh" | "material.control.gem.secondary.loadingLow" | "material.control.gem.secondary.loadingMid" | "material.control.gem.secondary.low" | "material.control.gem.secondary.mid" | "material.gem.blur.environmental" | "material.gem.blur.stabilized" | "material.gem.color.cutEdge.high" | "material.gem.color.cutEdge.low" | "material.gem.color.cutEdge.mid" | "material.gem.color.cutEdge.outerAccent" | "material.gem.color.cutEdge.outerHigh" | "material.gem.color.cutEdge.outerLow" | "material.gem.color.cutEdge.outerMid" | "material.gem.color.cutEdge.shadow" | "material.gem.color.facet.cool" | "material.gem.color.facet.warm" | "material.gem.color.family.amethyst.edge" | "material.gem.color.family.amethyst.environmentalFace" | "material.gem.color.family.amethyst.innerHigh" | "material.gem.color.family.amethyst.innerLow" | "material.gem.color.family.amethyst.innerMid" | "material.gem.color.family.amethyst.opaqueEquivalent" | "material.gem.color.family.amethyst.stabilizedFace" | "material.gem.color.family.emerald.edge" | "material.gem.color.family.emerald.environmentalFace" | "material.gem.color.family.emerald.innerHigh" | "material.gem.color.family.emerald.innerLow" | "material.gem.color.family.emerald.innerMid" | "material.gem.color.family.emerald.opaqueEquivalent" | "material.gem.color.family.emerald.stabilizedFace" | "material.gem.color.family.ruby.edge" | "material.gem.color.family.ruby.environmentalFace" | "material.gem.color.family.ruby.innerHigh" | "material.gem.color.family.ruby.innerLow" | "material.gem.color.family.ruby.innerMid" | "material.gem.color.family.ruby.opaqueEquivalent" | "material.gem.color.family.ruby.stabilizedFace" | "material.gem.color.family.sapphire.edge" | "material.gem.color.family.sapphire.environmentalFace" | "material.gem.color.family.sapphire.innerHigh" | "material.gem.color.family.sapphire.innerLow" | "material.gem.color.family.sapphire.innerMid" | "material.gem.color.family.sapphire.opaqueEquivalent" | "material.gem.color.family.sapphire.stabilizedFace" | "material.gem.color.innerThinCut.face" | "material.gem.color.innerThinCut.high" | "material.gem.color.innerThinCut.low" | "material.gem.color.innerThinCut.mid" | "material.gem.color.quiet.environmentalFace" | "material.gem.color.quiet.opaqueEquivalent" | "material.gem.color.quiet.stabilizedFace" | "material.gem.opacity.cutDark" | "material.gem.opacity.cutLight" | "material.gem.opacity.edgeHigh" | "material.gem.opacity.edgeLow" | "material.gem.opacity.environmental" | "material.gem.spacing.clusterGap" | "material.gem.spacing.innerSeparation" | "material.gem.spacing.slabInset" | "motion.distance.expansive" | "motion.distance.large" | "motion.distance.minimal" | "motion.distance.short" | "motion.distance.standard" | "motion.duration.deliberate" | "motion.duration.extended" | "motion.duration.fast" | "motion.duration.instant" | "motion.duration.measured" | "motion.duration.quick" | "motion.duration.slow" | "motion.duration.standard" | "motion.easing.enter" | "motion.easing.exit" | "motion.easing.linear" | "motion.easing.standard" | "motion.interaction.focus" | "motion.interaction.hover" | "motion.interaction.press" | "motion.spring.gentle.blend" | "motion.spring.gentle.damping" | "motion.spring.gentle.response" | "motion.spring.interactive.blend" | "motion.spring.interactive.damping" | "motion.spring.interactive.response" | "motion.spring.standard.blend" | "motion.spring.standard.damping" | "motion.spring.standard.response" | "motion.state.change" | "shape.radius.comfortable" | "shape.radius.compact" | "shape.radius.container" | "shape.radius.display" | "shape.radius.full" | "shape.radius.medium" | "shape.radius.none" | "shape.radius.standard" | "shape.radius.subtle" | "size.avatar.display" | "size.avatar.large" | "size.avatar.micro" | "size.avatar.small" | "size.avatar.standard" | "size.avatar.xlarge" | "size.control.comfortable" | "size.control.compact" | "size.control.large" | "size.control.standard" | "size.icon.compact" | "size.icon.display" | "size.icon.hero" | "size.icon.landmark" | "size.icon.large" | "size.icon.medium" | "size.icon.micro" | "size.icon.small" | "size.icon.spacious" | "size.icon.standard" | "size.icon.xlarge" | "size.indicator.large" | "size.indicator.micro" | "size.indicator.small" | "size.indicator.standard" | "size.loader.display" | "size.loader.large" | "size.loader.small" | "size.loader.standard" | "size.target.comfortable" | "size.target.minimum" | "size.target.spacious" | "spacing.inline.minimal" | "spacing.inline.related" | "spacing.inline.standard" | "spacing.inset.comfortable" | "spacing.inset.compact" | "spacing.inset.spacious" | "spacing.inset.standard" | "spacing.layout.gutter" | "spacing.layout.margin" | "spacing.layout.region" | "spacing.none" | "spacing.section.compact" | "spacing.section.expansive" | "spacing.section.spacious" | "spacing.section.standard" | "spacing.stack.grouped" | "spacing.stack.related" | "spacing.stack.separated" | "spacing.stack.tight" | "typography.body.large" | "typography.body.medium" | "typography.body.small" | "typography.display.large" | "typography.display.medium" | "typography.display.small" | "typography.title.large" | "typography.title.medium" | "typography.title.small";
+export type TokenPath = "border.width.hairline" | "border.width.none" | "border.width.standard" | "border.width.strong" | "color.actionDestructive.content" | "color.actionDestructive.default" | "color.actionDestructive.disabled" | "color.actionDestructive.disabledContent" | "color.actionDestructive.hover" | "color.actionDestructive.pressed" | "color.actionPrimary.content" | "color.actionPrimary.default" | "color.actionPrimary.disabled" | "color.actionPrimary.disabledContent" | "color.actionPrimary.hover" | "color.actionPrimary.pressed" | "color.actionQuiet.contentDefault" | "color.actionQuiet.contentDisabled" | "color.actionQuiet.contentHover" | "color.actionQuiet.contentPressed" | "color.actionQuiet.surfaceDefault" | "color.actionQuiet.surfaceDisabled" | "color.actionQuiet.surfaceHover" | "color.actionQuiet.surfacePressed" | "color.actionSecondary.contentDefault" | "color.actionSecondary.contentDisabled" | "color.actionSecondary.contentHover" | "color.actionSecondary.contentPressed" | "color.actionSecondary.surfaceDefault" | "color.actionSecondary.surfaceDisabled" | "color.actionSecondary.surfaceHover" | "color.actionSecondary.surfacePressed" | "color.background.canvas" | "color.background.inverse" | "color.background.subtle" | "color.blue.030" | "color.blue.060" | "color.blue.090" | "color.blue.120" | "color.blue.240" | "color.blue.360" | "color.blue.480" | "color.blue.600" | "color.blue.720" | "color.blue.840" | "color.blue.930" | "color.border.default" | "color.border.disabled" | "color.border.strong" | "color.border.subtle" | "color.control.thumb" | "color.cyan.030" | "color.cyan.060" | "color.cyan.090" | "color.cyan.120" | "color.cyan.240" | "color.cyan.360" | "color.cyan.480" | "color.cyan.600" | "color.cyan.720" | "color.cyan.840" | "color.cyan.930" | "color.feedbackCaution.content" | "color.feedbackCaution.inlineContent" | "color.feedbackCaution.surface" | "color.feedbackCritical.content" | "color.feedbackCritical.inlineContent" | "color.feedbackCritical.surface" | "color.feedbackInformative.content" | "color.feedbackInformative.inlineContent" | "color.feedbackInformative.surface" | "color.feedbackPositive.content" | "color.feedbackPositive.inlineContent" | "color.feedbackPositive.surface" | "color.focus.inner" | "color.focus.outer" | "color.green.030" | "color.green.060" | "color.green.090" | "color.green.120" | "color.green.240" | "color.green.360" | "color.green.480" | "color.green.600" | "color.green.720" | "color.green.840" | "color.green.930" | "color.icon.disabled" | "color.icon.inverse" | "color.icon.muted" | "color.icon.onGem" | "color.icon.primary" | "color.icon.secondary" | "color.iconButton.quietHoverSurface" | "color.iconButton.secondaryHoverSurface" | "color.navigationBadge.contentDefault" | "color.navigationBadge.contentGem" | "color.navigationBadge.contentSelected" | "color.navigationBadge.surfaceDefault" | "color.navigationBadge.surfaceGem" | "color.navigationBadge.surfaceSelected" | "color.neutral.030" | "color.neutral.060" | "color.neutral.090" | "color.neutral.120" | "color.neutral.240" | "color.neutral.360" | "color.neutral.480" | "color.neutral.600" | "color.neutral.720" | "color.neutral.840" | "color.neutral.930" | "color.orange.030" | "color.orange.060" | "color.orange.090" | "color.orange.120" | "color.orange.240" | "color.orange.360" | "color.orange.480" | "color.orange.600" | "color.orange.720" | "color.orange.840" | "color.orange.930" | "color.pink.030" | "color.pink.060" | "color.pink.090" | "color.pink.120" | "color.pink.240" | "color.pink.360" | "color.pink.480" | "color.pink.600" | "color.pink.720" | "color.pink.840" | "color.pink.930" | "color.primary.030" | "color.primary.060" | "color.primary.090" | "color.primary.120" | "color.primary.240" | "color.primary.360" | "color.primary.480" | "color.primary.600" | "color.primary.720" | "color.primary.840" | "color.primary.930" | "color.red.030" | "color.red.060" | "color.red.090" | "color.red.120" | "color.red.240" | "color.red.360" | "color.red.480" | "color.red.600" | "color.red.720" | "color.red.840" | "color.red.930" | "color.scrim.pressed" | "color.selection.content" | "color.selection.surface" | "color.surface.default" | "color.surface.disabled" | "color.surface.raised" | "color.surface.selected" | "color.surface.sunken" | "color.text.disabled" | "color.text.inverse" | "color.text.link.default" | "color.text.link.hover" | "color.text.link.pressed" | "color.text.link.visited" | "color.text.muted" | "color.text.primary" | "color.text.secondary" | "color.violet.030" | "color.violet.060" | "color.violet.090" | "color.violet.120" | "color.violet.240" | "color.violet.360" | "color.violet.480" | "color.violet.600" | "color.violet.720" | "color.violet.840" | "color.violet.930" | "color.yellow.030" | "color.yellow.060" | "color.yellow.090" | "color.yellow.120" | "color.yellow.240" | "color.yellow.360" | "color.yellow.480" | "color.yellow.600" | "color.yellow.720" | "color.yellow.840" | "color.yellow.930" | "component.button.gap.comfortable" | "component.button.gap.compact" | "component.button.height.comfortable" | "component.button.height.compact" | "component.button.height.large" | "component.button.height.standard" | "component.button.icon.comfortable" | "component.button.icon.compact" | "component.button.paddingInline.comfortable" | "component.button.paddingInline.compact" | "component.button.paddingInline.large" | "component.button.paddingInline.standard" | "component.button.radius.comfortable" | "component.button.radius.compact" | "component.button.radius.large" | "component.button.radius.standard" | "component.button.secondaryBoundary" | "component.button.target.comfortable" | "component.button.target.compact" | "component.button.target.large" | "component.button.target.standard" | "component.checkbox.boundary" | "component.checkbox.mark.mixedWidth" | "component.checkbox.mark.stroke" | "component.checkbox.radius.comfortable" | "component.checkbox.radius.compact" | "component.choice.gap.compact" | "component.choice.gap.large" | "component.choice.gap.standard" | "component.choice.indicator.comfortable" | "component.choice.indicator.compact" | "component.choice.opticalStroke" | "component.choice.rowMinimum" | "component.choiceChip.bezelInset" | "component.choiceChip.centerCut" | "component.choiceChip.gap" | "component.choiceChip.height.comfortable" | "component.choiceChip.height.compact" | "component.choiceChip.height.large" | "component.choiceChip.height.standard" | "component.choiceChip.innerCenterCut" | "component.choiceChip.innerTerminal" | "component.choiceChip.inset.comfortable" | "component.choiceChip.inset.compact" | "component.choiceChip.inset.large" | "component.choiceChip.inset.standard" | "component.choiceChip.mark" | "component.choiceChip.markGap" | "component.choiceChip.markTarget" | "component.choiceChip.railInset.comfortable" | "component.choiceChip.railInset.compact" | "component.choiceChip.railInset.large" | "component.choiceChip.railInset.standard" | "component.choiceChip.target.large" | "component.choiceChip.target.standard" | "component.choiceChip.terminal" | "component.icon.stroke" | "component.iconButton.artwork.comfortable" | "component.iconButton.artwork.compact" | "component.iconButton.artwork.large" | "component.iconButton.artwork.standard" | "component.iconButton.box.comfortable" | "component.iconButton.box.compact" | "component.iconButton.box.large" | "component.iconButton.box.standard" | "component.iconButton.pressedScrim" | "component.iconButton.radius.circle" | "component.iconButton.radius.comfortable" | "component.iconButton.radius.compact" | "component.iconButton.radius.large" | "component.iconButton.radius.standard" | "component.iconButton.target.comfortable" | "component.iconButton.target.compact" | "component.iconButton.target.large" | "component.iconButton.target.standard" | "component.link.gap.large" | "component.link.gap.small" | "component.link.gap.standard" | "component.link.targetNavigation" | "component.link.underline.current" | "component.link.underline.default" | "component.link.underline.emphasis" | "component.link.underline.offset" | "component.navigation.focusInset" | "component.navigation.icon" | "component.navigation.itemGap" | "component.navigation.target" | "component.opticalStroke" | "component.radio.boundary" | "component.radio.dot.comfortable" | "component.radio.dot.compact" | "component.segmentedControl.boundary" | "component.segmentedControl.itemRadius" | "component.segmentedControl.line" | "component.segmentedControl.outlinedGap" | "component.segmentedControl.trackInset" | "component.segmentedControl.trackRadius" | "component.selectionOption.check" | "component.selectionOption.inset.large" | "component.selectionOption.inset.standard" | "component.selectionOption.minimum.large" | "component.selectionOption.minimum.standard" | "component.selectionPopup.gap" | "component.selectionPopup.inset" | "component.selectionPopup.maximumBlock.large" | "component.selectionPopup.maximumBlock.standard" | "component.selectionPopup.paddingBlock" | "component.selectionPopup.paddingInline" | "component.selectionPopup.railInsetInline" | "component.suggestionRail.fieldSeparation" | "component.suggestionRail.gap" | "component.switch.inset" | "component.switch.thumb.comfortable" | "component.switch.thumb.compact" | "component.switch.thumbIcon.comfortable" | "component.switch.thumbIcon.compact" | "component.switch.trackHeight.comfortable" | "component.switch.trackHeight.compact" | "component.switch.trackWidth.comfortable" | "component.switch.trackWidth.compact" | "component.switch.travel.comfortable" | "component.switch.travel.compact" | "component.tabBar.gap" | "component.tabBar.inlineInset" | "component.tabBar.inset" | "component.tabBar.itemRadius" | "component.tabBar.radius" | "component.tabItem.height.comfortable" | "component.tabItem.height.compact" | "component.tabItem.height.large" | "component.tabItem.height.standard" | "component.tabItem.indicatorInset" | "component.tabItem.indicatorThickness" | "component.tabItem.inset.comfortable" | "component.tabItem.inset.compact" | "component.tabItem.inset.large" | "component.tabItem.inset.standard" | "component.tabItem.radius" | "component.tabItem.rail" | "component.textField.boundary" | "component.textField.gap.inline" | "component.textField.gap.label" | "component.textField.gap.messageCounter" | "component.textField.gap.requirement" | "component.textField.gap.status" | "component.textField.gap.supporting" | "component.textField.height.comfortable" | "component.textField.height.compact" | "component.textField.height.large" | "component.textField.height.standard" | "component.textField.inset.comfortable" | "component.textField.inset.compact" | "component.textField.inset.large" | "component.textField.inset.standard" | "component.textField.radius.comfortable" | "component.textField.radius.compact" | "component.textField.radius.large" | "component.textField.radius.standard" | "component.tokenField.gap" | "component.tokenField.minimumInput" | "component.tokenField.paddingBlock" | "dimension.scale.000" | "dimension.scale.003" | "dimension.scale.006" | "dimension.scale.009" | "dimension.scale.012" | "dimension.scale.015" | "dimension.scale.018" | "dimension.scale.024" | "dimension.scale.030" | "dimension.scale.036" | "dimension.scale.042" | "dimension.scale.048" | "dimension.scale.060" | "dimension.scale.072" | "dimension.scale.084" | "dimension.scale.096" | "dimension.scale.108" | "elevation.surface.blocking" | "elevation.surface.flat" | "elevation.surface.floating" | "elevation.surface.overlay" | "elevation.surface.raised" | "focus.ring.innerWidth" | "focus.ring.offset" | "focus.ring.outerWidth" | "focus.ring.totalWidth" | "font.axis.arrr.baseline" | "font.family.display" | "font.family.fallback" | "font.family.functional" | "font.line.018" | "font.line.024" | "font.line.030" | "font.line.039" | "font.line.048" | "font.line.060" | "font.line.072" | "font.line.096" | "font.line.126" | "font.size.012" | "font.size.016" | "font.size.021" | "font.size.030" | "font.size.039" | "font.size.051" | "font.size.066" | "font.size.090" | "font.size.120" | "font.tracking.displaySoft" | "font.tracking.normal" | "font.tracking.open" | "font.tracking.snug" | "font.tracking.tight" | "font.tracking.tighter" | "font.tracking.titleSoft" | "font.tracking.titleTight" | "font.weight.bold" | "font.weight.regular" | "font.weight.semibold" | "layer.stack.base" | "layer.stack.modal" | "layer.stack.notification" | "layer.stack.overlay" | "layer.stack.sticky" | "material.control.gem.blur" | "material.control.gem.gradient.end" | "material.control.gem.gradient.mid" | "material.control.gem.gradient.start" | "material.control.gem.primary.content" | "material.control.gem.primary.end" | "material.control.gem.primary.hoverEnd" | "material.control.gem.primary.hoverMid" | "material.control.gem.primary.hoverStart" | "material.control.gem.primary.loadingEnd" | "material.control.gem.primary.loadingMid" | "material.control.gem.primary.loadingStart" | "material.control.gem.primary.mid" | "material.control.gem.primary.start" | "material.control.gem.rim.default" | "material.control.gem.rim.hover" | "material.control.gem.rim.specular" | "material.control.gem.secondary.content" | "material.control.gem.secondary.high" | "material.control.gem.secondary.hoverHigh" | "material.control.gem.secondary.hoverLow" | "material.control.gem.secondary.hoverMid" | "material.control.gem.secondary.loadingHigh" | "material.control.gem.secondary.loadingLow" | "material.control.gem.secondary.loadingMid" | "material.control.gem.secondary.low" | "material.control.gem.secondary.mid" | "material.gem.blur.environmental" | "material.gem.blur.stabilized" | "material.gem.color.cutEdge.high" | "material.gem.color.cutEdge.low" | "material.gem.color.cutEdge.mid" | "material.gem.color.cutEdge.outerAccent" | "material.gem.color.cutEdge.outerHigh" | "material.gem.color.cutEdge.outerLow" | "material.gem.color.cutEdge.outerMid" | "material.gem.color.cutEdge.shadow" | "material.gem.color.facet.cool" | "material.gem.color.facet.warm" | "material.gem.color.family.amethyst.edge" | "material.gem.color.family.amethyst.environmentalFace" | "material.gem.color.family.amethyst.innerHigh" | "material.gem.color.family.amethyst.innerLow" | "material.gem.color.family.amethyst.innerMid" | "material.gem.color.family.amethyst.opaqueEquivalent" | "material.gem.color.family.amethyst.stabilizedFace" | "material.gem.color.family.emerald.edge" | "material.gem.color.family.emerald.environmentalFace" | "material.gem.color.family.emerald.innerHigh" | "material.gem.color.family.emerald.innerLow" | "material.gem.color.family.emerald.innerMid" | "material.gem.color.family.emerald.opaqueEquivalent" | "material.gem.color.family.emerald.stabilizedFace" | "material.gem.color.family.ruby.edge" | "material.gem.color.family.ruby.environmentalFace" | "material.gem.color.family.ruby.innerHigh" | "material.gem.color.family.ruby.innerLow" | "material.gem.color.family.ruby.innerMid" | "material.gem.color.family.ruby.opaqueEquivalent" | "material.gem.color.family.ruby.stabilizedFace" | "material.gem.color.family.sapphire.edge" | "material.gem.color.family.sapphire.environmentalFace" | "material.gem.color.family.sapphire.innerHigh" | "material.gem.color.family.sapphire.innerLow" | "material.gem.color.family.sapphire.innerMid" | "material.gem.color.family.sapphire.opaqueEquivalent" | "material.gem.color.family.sapphire.stabilizedFace" | "material.gem.color.innerThinCut.face" | "material.gem.color.innerThinCut.high" | "material.gem.color.innerThinCut.low" | "material.gem.color.innerThinCut.mid" | "material.gem.color.quiet.environmentalFace" | "material.gem.color.quiet.opaqueEquivalent" | "material.gem.color.quiet.stabilizedFace" | "material.gem.opacity.cutDark" | "material.gem.opacity.cutLight" | "material.gem.opacity.edgeHigh" | "material.gem.opacity.edgeLow" | "material.gem.opacity.environmental" | "material.gem.spacing.clusterGap" | "material.gem.spacing.innerSeparation" | "material.gem.spacing.slabInset" | "motion.distance.expansive" | "motion.distance.large" | "motion.distance.minimal" | "motion.distance.short" | "motion.distance.standard" | "motion.duration.deliberate" | "motion.duration.extended" | "motion.duration.fast" | "motion.duration.instant" | "motion.duration.measured" | "motion.duration.quick" | "motion.duration.slow" | "motion.duration.standard" | "motion.easing.enter" | "motion.easing.exit" | "motion.easing.linear" | "motion.easing.standard" | "motion.interaction.focus" | "motion.interaction.hover" | "motion.interaction.press" | "motion.spring.gentle.blend" | "motion.spring.gentle.damping" | "motion.spring.gentle.response" | "motion.spring.interactive.blend" | "motion.spring.interactive.damping" | "motion.spring.interactive.response" | "motion.spring.standard.blend" | "motion.spring.standard.damping" | "motion.spring.standard.response" | "motion.state.change" | "shape.radius.comfortable" | "shape.radius.compact" | "shape.radius.container" | "shape.radius.display" | "shape.radius.full" | "shape.radius.medium" | "shape.radius.none" | "shape.radius.standard" | "shape.radius.subtle" | "size.avatar.display" | "size.avatar.large" | "size.avatar.micro" | "size.avatar.small" | "size.avatar.standard" | "size.avatar.xlarge" | "size.control.comfortable" | "size.control.compact" | "size.control.large" | "size.control.standard" | "size.icon.compact" | "size.icon.display" | "size.icon.hero" | "size.icon.landmark" | "size.icon.large" | "size.icon.medium" | "size.icon.micro" | "size.icon.small" | "size.icon.spacious" | "size.icon.standard" | "size.icon.xlarge" | "size.indicator.large" | "size.indicator.micro" | "size.indicator.small" | "size.indicator.standard" | "size.loader.display" | "size.loader.large" | "size.loader.small" | "size.loader.standard" | "size.target.comfortable" | "size.target.minimum" | "size.target.spacious" | "spacing.inline.minimal" | "spacing.inline.related" | "spacing.inline.standard" | "spacing.inset.comfortable" | "spacing.inset.compact" | "spacing.inset.spacious" | "spacing.inset.standard" | "spacing.layout.gutter" | "spacing.layout.margin" | "spacing.layout.region" | "spacing.none" | "spacing.section.compact" | "spacing.section.expansive" | "spacing.section.spacious" | "spacing.section.standard" | "spacing.stack.grouped" | "spacing.stack.related" | "spacing.stack.separated" | "spacing.stack.tight" | "typography.body.large" | "typography.body.medium" | "typography.body.small" | "typography.display.large" | "typography.display.medium" | "typography.display.small" | "typography.title.large" | "typography.title.medium" | "typography.title.small";
 export type ColorScheme = "light" | "dark";
 export type PrimaryFamily = "blue" | "orange" | "green";
 export type TypographyViewport = "compact" | "medium" | "expanded";

package/build/typescript/index.js

@@ -3914,6 +3914,15 @@ export const tokens = {
     "description": "Hover and Pressed Link underline.",
     "tier": "component"
   },
+  "component.link.underline.current": {
+    "type": "dimension",
+    "value": {
+      "value": 3,
+      "unit": "px"
+    },
+    "description": "Marker that shows the current destination in a Navigation Link. It sits where the underline sits and replaces it.",
+    "tier": "component"
+  },
   "component.link.underline.offset": {
     "type": "dimension",
     "value": {
@@ -4085,6 +4094,15 @@ export const tokens = {
     "description": "Label-to-control gap.",
     "tier": "component"
   },
+  "component.textField.gap.requirement": {
+    "type": "dimension",
+    "value": {
+      "value": 3,
+      "unit": "px"
+    },
+    "description": "Gap between the label and the mark that says the field is required.",
+    "tier": "component"
+  },
   "component.textField.gap.supporting": {
     "type": "dimension",
     "value": {
@@ -4094,6 +4112,15 @@ export const tokens = {
     "description": "Control-to-supporting-region gap.",
     "tier": "component"
   },
+  "component.textField.gap.inline": {
+    "type": "dimension",
+    "value": {
+      "value": 6,
+      "unit": "px"
+    },
+    "description": "Gap between the slots inside the control: leading icon, prefix, value, suffix and trailing action.",
+    "tier": "component"
+  },
   "component.textField.gap.status": {
     "type": "dimension",
     "value": {
@@ -4400,6 +4427,15 @@ export const tokens = {
     "description": "Suggested Large maximum visible option region before scrolling.",
     "tier": "component"
   },
+  "component.selectionPopup.inset": {
+    "type": "dimension",
+    "value": {
+      "value": 6,
+      "unit": "px"
+    },
+    "description": "Selection popup internal inset.",
+    "tier": "component"
+  },
   "component.selectionOption.minimum.standard": {
     "type": "dimension",
     "value": {
@@ -4607,6 +4643,51 @@ export const tokens = {
     "description": "Canonical Icon Frame presentation for Check or Remove artwork.",
     "tier": "component"
   },
+  "component.choiceChip.markTarget": {
+    "type": "dimension",
+    "value": {
+      "value": 24,
+      "unit": "px"
+    },
+    "description": "Minimum reachable target for the Remove mark. The mark is drawn at 18; the contract asks for at least 24 that overlaps neither the label nor the chip edge, so the target is expanded around the drawn mark rather than enlarging it.",
+    "tier": "component"
+  },
+  "component.choiceChip.railInset.compact": {
+    "type": "dimension",
+    "value": {
+      "value": 9,
+      "unit": "px"
+    },
+    "description": "9px rail inset; with the 12px terminal this produces the approved 21px content inset.",
+    "tier": "component"
+  },
+  "component.choiceChip.railInset.standard": {
+    "type": "dimension",
+    "value": {
+      "value": 12,
+      "unit": "px"
+    },
+    "description": "12px rail inset; with the terminal this produces the approved 24px content inset.",
+    "tier": "component"
+  },
+  "component.choiceChip.railInset.comfortable": {
+    "type": "dimension",
+    "value": {
+      "value": 15,
+      "unit": "px"
+    },
+    "description": "15px rail inset; with the terminal this produces the approved 27px content inset.",
+    "tier": "component"
+  },
+  "component.choiceChip.railInset.large": {
+    "type": "dimension",
+    "value": {
+      "value": 15,
+      "unit": "px"
+    },
+    "description": "15px rail inset; with the terminal this produces the approved 27px content inset.",
+    "tier": "component"
+  },
   "component.tokenField.minimumInput": {
     "type": "dimension",
     "value": {
@@ -5140,6 +5221,11 @@ export const tokenPaths = [
   "component.choiceChip.inset.standard",
   "component.choiceChip.mark",
   "component.choiceChip.markGap",
+  "component.choiceChip.markTarget",
+  "component.choiceChip.railInset.comfortable",
+  "component.choiceChip.railInset.compact",
+  "component.choiceChip.railInset.large",
+  "component.choiceChip.railInset.standard",
   "component.choiceChip.target.large",
   "component.choiceChip.target.standard",
   "component.choiceChip.terminal",
@@ -5166,6 +5252,7 @@ export const tokenPaths = [
   "component.link.gap.small",
   "component.link.gap.standard",
   "component.link.targetNavigation",
+  "component.link.underline.current",
   "component.link.underline.default",
   "component.link.underline.emphasis",
   "component.link.underline.offset",
@@ -5189,6 +5276,7 @@ export const tokenPaths = [
   "component.selectionOption.minimum.large",
   "component.selectionOption.minimum.standard",
   "component.selectionPopup.gap",
+  "component.selectionPopup.inset",
   "component.selectionPopup.maximumBlock.large",
   "component.selectionPopup.maximumBlock.standard",
   "component.selectionPopup.paddingBlock",
@@ -5225,8 +5313,10 @@ export const tokenPaths = [
   "component.tabItem.radius",
   "component.tabItem.rail",
   "component.textField.boundary",
+  "component.textField.gap.inline",
   "component.textField.gap.label",
   "component.textField.gap.messageCounter",
+  "component.textField.gap.requirement",
   "component.textField.gap.status",
   "component.textField.gap.supporting",
   "component.textField.height.comfortable",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneli8/tokens",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "description": "OneLi8 Design System \u2014 design tokens compiled from Figma. CSS custom properties and a flat JS object.",
   "keywords": [
     "design-tokens",

package/scripts/test.mjs

@@ -89,8 +89,9 @@ ok(builtStatus.generated===true&&builtStatus.components.length===status.componen
 ok(component.component.choiceChip.height.compact.$value.value===30&&component.component.choiceChip.height.standard.$value==="{size.control.compact}"&&component.component.choiceChip.height.comfortable.$value==="{size.control.standard}","Soft Hexagon visible heights must retain the approved 30px, 36px, and 42px geometry");
 ok(component.component.choiceChip.terminal.$value==="{spacing.inline.standard}"&&component.component.choiceChip.innerTerminal.$value.value===11,"Soft Hexagon terminal geometry must remain fixed rather than scaling with label length");
 ok(component.component.choiceChip.inset.compact.$value.value===21&&component.component.choiceChip.inset.standard.$value==="{spacing.inset.comfortable}"&&component.component.choiceChip.inset.comfortable.$value.value===27,"Soft Hexagon insets must retain the approved 21px, 24px, and 27px progression");
+ok(component.component.choiceChip.markTarget.$value.value===24&&component.component.choiceChip.markTarget.$extensions["oneli8.geometry"]==="approved-component-recipe","The Remove mark target must stay a governed 24, not an enlarged 18px mark");
 ok(component.component.suggestionRail.gap.$value==="{component.choiceChip.gap}"&&component.component.suggestionRail.fieldSeparation.$value==="{spacing.stack.tight}","Suggested Values rail must reuse Choice Chip and structural spacing roles");
 ok(component.component.tabBar.gap.$value==="{spacing.none}"&&component.component.tabBar.inlineInset.$value==="{spacing.inline.minimal}","Tab Bar spacing must map to canonical zero gap and 3px Inline protection");
-ok(manifest.counts.primitive===170&&manifest.counts.semantic===270&&manifest.counts.component===152&&manifest.counts.componentStatuses===10&&manifest.counts.figmaVariables===578&&manifest.counts.figmaElevationStyles===5,"Navigation spacing and contextual token output counts must remain deterministic");
+ok(manifest.counts.primitive===170&&manifest.counts.semantic===270&&manifest.counts.component===161&&manifest.counts.componentStatuses===10&&manifest.counts.figmaVariables===587&&manifest.counts.figmaElevationStyles===5,"Navigation spacing and contextual token output counts must remain deterministic");
 
 console.log(`PASS ${checks}/${checks} canonical token package checks.`);