@oneli8/tokens 1.0.0-beta.4 → 1.0.0-beta.6

package/README.md

@@ -1,6 +1,6 @@
 # @oneli8/tokens
 
-OneLi8 Design System — design tokens compiled from Figma.
+OneLi8 Design System, design tokens compiled from Figma.
 
 ```sh
 npm install @oneli8/tokens
@@ -12,33 +12,54 @@ import { tokens } from '@oneli8/tokens';  // flat { 'color-text-primary': '#1518
 ```
 
 Every value is generated from `src/tokens.json`, which is verified against the
-Figma file rather than hand-maintained. Do not edit `dist/` — edit the source and
+Figma file rather than maintained by hand. Do not edit `dist/`, edit the source and
 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` | flat `{ name: value }` map, with a literal union key type |
 | `@oneli8/tokens/css` | the custom properties and `.ol8-type-*` classes |
 | `@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 |
+| `@oneli8/tokens/figma` | round trip payload: collections, theme modes, type and elevation styles |
 | `@oneli8/tokens/status` | component maturity records |
 | `@oneli8/tokens/source` | the editable `tokens.json` |
 
@@ -62,17 +83,36 @@ primary family; it does not bake a blue at build time.
 The JS map is the exception: it holds resolved literals, because code that reads
 it wants an actual colour, not a `var()` string.
 
+## Why this exists
+
+OneLi8 means One Light. It was created by Akshay Dhore, intended for broad human
+benefit and conceived as service to Guruji Shrii Arnav, whose teachings inspire
+it. Service, clarity, harmony, proportion, restraint and evolution guide its
+decisions. `PRINCIPLES.md` ships inside this package and sets them out in full.
+
+The practical intention: most design systems hand you components and hope you
+stay inside them. This one hands you the reasoning too, so when you need
+something it does not ship you can build it and have it still belong.
+
 ## Naming
 
-Hyphens separate hierarchy levels; compound words inside a level run together.
-So `--ol8-focus-ring-innerwidth`, not `inner-width` — and likewise
-`surfacedefault`, `disabledcontent`, `paddinginline`, `cutedge`,
-`opaqueequivalent`. This mirrors the Figma variable names exactly.
+The structure is borrowed from Sanskrit grammar rather than a CSS convention.
+
+**A compound naming one thing is one word.** `actionprimary` is not action plus
+primary, it is a single role. `cutedge` is one feature of the Gem material.
+
+**A qualifier stays separate from what it qualifies.** In
+`--ol8-material-control-gem--primary-hover-start`, `hover` is a state applied to
+`start`, so it keeps its hyphen. That is why `disabledcontent` is joined and
+`hover-start` is not.
+
+Hyphens separate levels of the hierarchy, never words inside a level. The words
+themselves stay readable: no abbreviations and no truncation.
 
 ## Theming
 
-Three independent axes, each an attribute. They compose — set two at once and you
-get both; there is no Cartesian product of pre-baked modes.
+Three independent axes, each an attribute. They compose, set two at once and you
+get both; there is no Cartesian product of pre baked modes.
 
 ```html
 <html data-ol8-color-scheme="dark" data-ol8-primary="orange">
@@ -92,9 +132,9 @@ primitive, or your UI will not follow the theme.
 Not yet ported from the Figma theme source: the `typographyViewport` axis
 (`medium` / `expanded`), which needs `font.size.090`, `font.line.096` and a
 `font.tracking.*` scale this tree has never synced; dark overrides for the five
-`elevation-*` composites; and dark link-state and icon-button-surface roles,
+`elevation-*` composites; and dark link state and icon button surface roles,
 which have no token in this vocabulary yet.
 
 ## Licence
 
-Apache-2.0. Created by Akshay Dhore. See `LICENSE` and `NOTICE`.
+Apache 2.0. Created by Akshay Dhore. See `LICENSE` and `NOTICE`.

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.4",
+  "version": "1.0.0-beta.6",
   "meaning": "OneLi8 means One Light.",
   "foundations": {
     "package": "@oneli8/tokens",

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";