@helixui/library 3.2.0 → 3.3.0-next.112

package/figma-inventory.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-04-25T16:30:29.862Z",
+  "generatedAt": "2026-04-27T10:30:57.950Z",
   "sourceCem": "custom-elements.json",
-  "helixVersion": "3.2.0",
-  "tokensVersion": "3.2.0",
+  "helixVersion": "3.3.0",
+  "tokensVersion": "3.3.0",
   "components": [
     {
       "tag": "hx-accordion",
@@ -2690,36 +2690,41 @@
       ],
       "cssProperties": [
         {
-          "description": "Button background color.",
+          "description": "Button background color. **Variant-shadowed**: every `.button--{variant}` rule rebinds this property at descendant scope, so a host-level override (`style=\"--hx-button-bg: …\"` or `:host`-targeting CSS) does not reach paint for primary/secondary/tertiary/danger/ghost/outline buttons. To recolor a variant fill, override the upstream semantic instead — e.g. `--hx-color-action-primary-bg` (light primary), `--hx-color-action-primary-bg-inverted-rest` (inverted primary), `--hx-color-action-danger-bg` (danger), or the inverted overlay tokens for tertiary/secondary/ghost/outline. The `--hx-button-bg` hook still works for the rare case of an unstyled base button without a `variant` class, and is internally rebound by the variant rules to participate in the active/hover override chain.",
           "name": "--hx-button-bg",
-          "default": "var(--hx-color-primary-500)",
+          "default": "var(--hx-color-action-primary-bg)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/primary",
-            "fallbackPrimitive": "color/primary/500",
+            "semanticToken": "color/action/primary/bg",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
-          "description": "Hover background color override. When set, overrides the variant default hover background from outside the shadow DOM.",
+          "description": "Hover background override (primary and danger variants only). Other variants (secondary/outline, ghost) keep their hover fills routed through their semantic action.* tokens and do not consume this hook. Under [inverted] for primary/danger, hover and active share a paint (combined :hover, :active rule), so this override applies to both states unless --hx-button-active-bg also takes precedence.",
           "name": "--hx-button-hover-bg",
           "figmaBinding": null
         },
         {
-          "description": "Button text color.",
+          "description": "Pressed/active background override (primary and danger variants only, including their inverted modes). Takes precedence over --hx-button-hover-bg in the fallback chain. Standard-mode primary/danger default to action.{primary,danger}.bg-active (with filter:none) for AA-pinned pressed contrast. Inverted-mode primary/danger reuse action.{primary,danger}.bg-inverted-hover (combined :hover, :active rule); setting --hx-button-active-bg under [inverted] therefore overrides the lifted hover fill as well as the pressed fill — the two share a paint in inverted mode. Other variants do not consume this hook.",
+          "name": "--hx-button-active-bg",
+          "figmaBinding": null
+        },
+        {
+          "description": "Button text color (variants route through text.on-{role} / text.on-{role}-strong).",
           "name": "--hx-button-color",
-          "default": "var(--hx-color-neutral-0)",
+          "default": "var(--hx-color-text-on-primary)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/0",
+            "semanticToken": "color/text/on/primary",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
-          "description": "Button border color.",
+          "description": "Button border color (secondary/outline variants route through action.secondary.border).",
           "name": "--hx-button-border-color",
           "default": "transparent",
           "figmaBinding": {
@@ -2779,249 +2784,188 @@
           }
         },
         {
-          "description": "Text color when inverted.",
+          "description": "Text color when inverted (resolves to neutral-0).",
           "name": "--hx-button-inverted-color",
-          "default": "#ffffff",
+          "default": "var(--hx-color-text-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": null,
+            "semanticToken": "color/text/inverse",
             "fallbackPrimitive": null,
-            "literalFallback": "#ffffff"
+            "literalFallback": null
           }
         },
         {
-          "description": "Ghost hover bg when inverted.",
-          "name": "--hx-button-inverted-ghost-hover-bg",
-          "default": "rgba(255,255,255,0.15)",
+          "description": "Foreground override for inverted primary hover and pressed (combined :hover, :active rule). Defaults to text.on-primary (neutral-900, no dark-mode flip) so dark text rides the lifted primary-400 fill — text.inverse on light teal collapses to ~2.4:1 in light mode.",
+          "name": "--hx-button-inverted-primary-interactive-color",
+          "default": "var(--hx-color-text-on-primary)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": null,
+            "semanticToken": "color/text/on/primary",
             "fallbackPrimitive": null,
-            "literalFallback": "rgba(255,255,255,0.15)"
+            "literalFallback": null
           }
         },
         {
-          "description": "Focus ring color when inverted.",
-          "name": "--hx-button-inverted-focus-ring-color",
-          "default": "rgba(255,255,255,0.5)",
+          "description": "Foreground override for inverted danger hover and pressed (combined :hover, :active rule). Defaults to text.on-error (neutral-900); same rationale as the primary override.",
+          "name": "--hx-button-inverted-danger-interactive-color",
+          "default": "var(--hx-color-text-on-error)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": null,
+            "semanticToken": "color/text/on/error",
             "fallbackPrimitive": null,
-            "literalFallback": "rgba(255,255,255,0.5)"
+            "literalFallback": null
           }
         },
         {
-          "description": "Opacity.",
-          "name": "--hx-opacity-disabled",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-2",
-          "figmaBinding": null
-        },
-        {
-          "description": "Width.",
-          "name": "--hx-border-width-thin",
-          "figmaBinding": null
-        },
-        {
-          "description": "CSS custom property.",
-          "name": "--hx-border-radius-md",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-primary-500",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-0",
-          "figmaBinding": null
-        },
-        {
-          "description": "Font family.",
-          "name": "--hx-font-family-sans",
-          "figmaBinding": null
-        },
-        {
-          "description": "Font weight.",
-          "name": "--hx-font-weight-semibold",
-          "figmaBinding": null
-        },
-        {
-          "description": "Line height.",
-          "name": "--hx-line-height-tight",
-          "figmaBinding": null
-        },
-        {
-          "description": "Transition timing.",
-          "name": "--hx-transition-fast",
-          "figmaBinding": null
-        },
-        {
-          "description": "Width.",
-          "name": "--hx-focus-ring-width",
-          "figmaBinding": null
+          "description": "Ghost hover bg when inverted (overlay-white-30 — translucent fill, not a border; contrast not applicable).",
+          "name": "--hx-button-inverted-ghost-hover-bg",
+          "default": "var(--hx-color-surface-on-dark-overlay-default)",
+          "figmaBinding": {
+            "target": "Fill",
+            "layerSelector": "root",
+            "semanticToken": "color/surface/on/dark/overlay/default",
+            "fallbackPrimitive": null,
+            "literalFallback": null
+          }
         },
         {
-          "description": "Color.",
-          "name": "--hx-focus-ring-color",
-          "figmaBinding": null
+          "description": "Focus ring color when inverted (overlay-white-70 ≈ 5:1 vs neutral-900 — clears WCAG 1.4.11 3:1 floor for non-text UI).",
+          "name": "--hx-button-inverted-focus-ring-color",
+          "default": "var(--hx-color-border-on-dark-strong)",
+          "figmaBinding": {
+            "target": "Fill",
+            "layerSelector": "root",
+            "semanticToken": "color/border/on/dark/strong",
+            "fallbackPrimitive": null,
+            "literalFallback": null
+          }
         },
         {
-          "description": "CSS custom property.",
-          "name": "--hx-focus-ring-offset",
+          "description": "Primary variant resting fill (3.2.1 semantic action layer).",
+          "name": "--hx-color-action-primary-bg",
           "figmaBinding": null
         },
         {
-          "description": "CSS filter.",
-          "name": "--hx-filter-brightness-hover",
+          "description": "Primary variant hover fill.",
+          "name": "--hx-color-action-primary-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "CSS filter.",
-          "name": "--hx-filter-brightness-active",
+          "description": "Primary variant active/pressed fill.",
+          "name": "--hx-color-action-primary-bg-active",
           "figmaBinding": null
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-1",
+          "description": "Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark). Consumed only by .button--secondary; the actual border/surface paint for outline currently routes through --hx-color-border-strong / --hx-color-surface-raised in styles, with this token reserved for the foreground.",
+          "name": "--hx-color-action-secondary-fg",
           "figmaBinding": null
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-3",
+          "description": "Secondary/outline variant border (3.2.1 semantic; outline still routes through --hx-color-border-strong by default).",
+          "name": "--hx-color-action-secondary-border",
           "figmaBinding": null
         },
         {
-          "description": "Font size.",
-          "name": "--hx-font-size-sm",
+          "description": "Secondary/outline variant hover fill (3.2.1 semantic; outline still routes through --hx-color-surface-raised by default).",
+          "name": "--hx-color-action-secondary-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "Minimum touch target size.",
-          "name": "--hx-touch-target-min",
+          "description": "Ghost variant fg.",
+          "name": "--hx-color-action-ghost-fg",
           "figmaBinding": null
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-4",
+          "description": "Ghost variant hover fill.",
+          "name": "--hx-color-action-ghost-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "Font size.",
-          "name": "--hx-font-size-md",
+          "description": "Danger variant resting fill.",
+          "name": "--hx-color-action-danger-bg",
           "figmaBinding": null
         },
         {
-          "description": "Size token.",
-          "name": "--hx-size-10",
+          "description": "Danger variant hover fill.",
+          "name": "--hx-color-action-danger-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-6",
+          "description": "Danger variant active fill.",
+          "name": "--hx-color-action-danger-bg-active",
           "figmaBinding": null
         },
         {
-          "description": "Font size.",
-          "name": "--hx-font-size-lg",
+          "description": "Primary variant hover/pressed fill on dark/inverted surface (resolves to primary-400, 7.27:1 on neutral-900).",
+          "name": "--hx-color-action-primary-bg-inverted-hover",
           "figmaBinding": null
         },
         {
-          "description": "Size token.",
-          "name": "--hx-size-12",
+          "description": "Danger variant hover/pressed fill on dark/inverted surface (resolves to error-400, 6.58:1 on neutral-900).",
+          "name": "--hx-color-action-danger-bg-inverted-hover",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-primary-50",
+          "description": "Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).",
+          "name": "--hx-color-text-on-primary",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-100",
+          "description": "Foreground for primary-hover fill (resolves to neutral-0 across modes).",
+          "name": "--hx-color-text-on-primary-strong",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-900",
+          "description": "Foreground for danger fill (resolves to neutral-900).",
+          "name": "--hx-color-text-on-error",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-200",
+          "description": "Foreground for danger-hover fill (resolves to neutral-0 across modes).",
+          "name": "--hx-color-text-on-error-strong",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-error-500",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-error-600",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-300",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-50",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-primary-600",
-          "figmaBinding": null
-        },
-        {
-          "description": "Animation duration.",
-          "name": "--hx-duration-spinner",
+          "description": "Foreground for tertiary variant on surface.sunken.",
+          "name": "--hx-color-text-primary",
           "figmaBinding": null
         },
         {
-          "description": "Opacity.",
-          "name": "--hx-opacity-muted",
+          "description": "Tertiary variant resting fill.",
+          "name": "--hx-color-surface-sunken",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-50",
+          "description": "Tertiary variant hover fill.",
+          "name": "--hx-color-surface-raised",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-primary-400",
+          "description": "Inverted-tertiary resting fill (overlay-white-10 — translucent fill, not a border).",
+          "name": "--hx-color-surface-on-dark-overlay-subtle",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-70",
+          "description": "Inverted-tertiary hover fill + inverted-secondary/ghost/outline hover fill (overlay-white-30 — translucent fill, not a border).",
+          "name": "--hx-color-surface-on-dark-overlay-default",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-15",
+          "description": "Inverted-secondary/outline border + inverted focus-visible outline (overlay-white-70 ≈ 5:1 — clears WCAG 1.4.11 3:1 floor).",
+          "name": "--hx-color-border-on-dark-strong",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-25",
+          "description": "DEPRECATED 3.2.2; renamed to --hx-color-surface-on-dark-overlay-subtle (the value paints a translucent fill, not a border). Consume sites read both names via deprecated-first fallback so existing overrides keep working until removal in 4.0.0.",
+          "name": "--hx-color-border-on-dark-subtle",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-20",
+          "description": "DEPRECATED 3.2.2; renamed to --hx-color-surface-on-dark-overlay-default (the value paints a translucent fill, not a border). Consume sites read both names via deprecated-first fallback so existing overrides keep working until removal in 4.0.0.",
+          "name": "--hx-color-border-on-dark-default",
           "figmaBinding": null
         }
       ],
@@ -13658,12 +13602,12 @@
         {
           "description": "Item text color.",
           "name": "--hx-nav-item-color",
-          "default": "var(--hx-color-neutral-300)",
+          "default": "var(--hx-color-text-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/300",
+            "semanticToken": "color/text/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
@@ -13675,36 +13619,36 @@
         {
           "description": "Item hover text color.",
           "name": "--hx-nav-item-hover-color",
-          "default": "var(--hx-color-neutral-100)",
+          "default": "var(--hx-color-text-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/100",
+            "semanticToken": "color/text/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
           "description": "Active item background.",
           "name": "--hx-nav-item-active-bg",
-          "default": "var(--hx-color-primary-600)",
+          "default": "var(--hx-color-action-primary-bg-hover)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/primary",
-            "fallbackPrimitive": "color/primary/600",
+            "semanticToken": "color/action/primary/bg/hover",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
           "description": "Active item text color.",
           "name": "--hx-nav-item-active-color",
-          "default": "var(--hx-color-neutral-50)",
+          "default": "var(--hx-color-text-on-primary-strong)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/50",
+            "semanticToken": "color/text/on/primary/strong",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
@@ -13716,12 +13660,36 @@
         {
           "description": "Component host background color.",
           "name": "--hx-nav-item-host-bg",
-          "default": "var(--hx-color-neutral-900)",
+          "default": "var(--hx-color-surface-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/900",
+            "semanticToken": "color/surface/inverse",
+            "fallbackPrimitive": null,
+            "literalFallback": null
+          }
+        },
+        {
+          "description": "Tooltip background color (collapsed-rail tooltip).",
+          "name": "--hx-nav-item-tooltip-bg",
+          "default": "var(--hx-color-surface-inverse)",
+          "figmaBinding": {
+            "target": "Fill",
+            "layerSelector": "root",
+            "semanticToken": "color/surface/inverse",
+            "fallbackPrimitive": null,
+            "literalFallback": null
+          }
+        },
+        {
+          "description": "Tooltip text color (collapsed-rail tooltip).",
+          "name": "--hx-nav-item-tooltip-color",
+          "default": "var(--hx-color-text-inverse)",
+          "figmaBinding": {
+            "target": "Fill",
+            "layerSelector": "root",
+            "semanticToken": "color/text/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         }
@@ -17626,36 +17594,36 @@
         {
           "description": "Background color.",
           "name": "--hx-side-nav-bg",
-          "default": "var(--hx-color-neutral-900)",
+          "default": "var(--hx-color-surface-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/900",
+            "semanticToken": "color/surface/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
           "description": "Text color.",
           "name": "--hx-side-nav-color",
-          "default": "var(--hx-color-neutral-100)",
+          "default": "var(--hx-color-text-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/100",
+            "semanticToken": "color/text/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
-          "description": "Border color.",
+          "description": "Border color (against the dark surface-inverse host bg).",
           "name": "--hx-side-nav-border-color",
-          "default": "var(--hx-color-neutral-700)",
+          "default": "var(--hx-color-border-on-dark-strong)",
           "figmaBinding": {
             "target": "Stroke",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/700",
+            "semanticToken": "color/border/on/dark/strong",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
@@ -17684,110 +17652,52 @@
           }
         },
         {
-          "description": "Toggle button icon color.",
+          "description": "Toggle button icon color (resting).",
           "name": "--hx-side-nav-toggle-color",
-          "default": "var(--hx-color-neutral-400)",
+          "default": "var(--hx-color-text-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "::part(toggle)",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/400",
+            "semanticToken": "color/text/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-900",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-100",
-          "figmaBinding": null
-        },
-        {
-          "description": "Transition timing.",
-          "name": "--hx-transition-normal",
-          "figmaBinding": null
-        },
-        {
-          "description": "Width.",
-          "name": "--hx-border-width-thin",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-700",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-4",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-14",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-3",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-2",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-8",
-          "figmaBinding": null
-        },
-        {
-          "description": "CSS custom property.",
-          "name": "--hx-border-radius-sm",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-400",
-          "figmaBinding": null
-        },
-        {
-          "description": "Transition timing.",
-          "name": "--hx-transition-fast",
-          "figmaBinding": null
-        },
-        {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-10",
-          "figmaBinding": null
+          "description": "Toggle button icon color on hover.",
+          "name": "--hx-side-nav-toggle-hover-color",
+          "default": "var(--hx-color-text-inverse)",
+          "figmaBinding": {
+            "target": "Fill",
+            "layerSelector": "root",
+            "semanticToken": "color/text/inverse",
+            "fallbackPrimitive": null,
+            "literalFallback": null
+          }
         },
         {
-          "description": "Width.",
-          "name": "--hx-focus-ring-width",
+          "description": "Side-nav surface fill (resolves to neutral-900 light, near-black dark).",
+          "name": "--hx-color-surface-inverse",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-focus-ring-color",
+          "description": "Side-nav text color (resolves to neutral-0).",
+          "name": "--hx-color-text-inverse",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-primary-400",
+          "description": "Container/header/footer divider border (overlay-white-70 light, overlay-black-50 dark — sized for visibility on the mode-flipped surface-inverse).",
+          "name": "--hx-color-border-on-dark-strong",
           "figmaBinding": null
         },
         {
-          "description": "CSS custom property.",
-          "name": "--hx-focus-ring-offset",
+          "description": "Toggle button hover surface (overlay-white-10 primitive — translucent fill, not a border).",
+          "name": "--hx-color-surface-on-dark-overlay-subtle",
           "figmaBinding": null
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-5",
+          "description": "DEPRECATED 3.2.2; renamed to --hx-color-surface-on-dark-overlay-subtle (the value paints a translucent fill, not a border). Toggle-hover rule reads both names via deprecated-first fallback so existing overrides keep working until removal in 4.0.0.",
+          "name": "--hx-color-border-on-dark-subtle",
           "figmaBinding": null
         }
       ],
@@ -18895,12 +18805,12 @@
         {
           "description": "Color of the divider between primary and trigger.",
           "name": "--hx-split-button-divider-color",
-          "default": "var(--hx-color-primary-400)",
+          "default": "var(--hx-color-primary-900)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
             "semanticToken": "color/primary",
-            "fallbackPrimitive": "color/primary/400",
+            "fallbackPrimitive": "color/primary/900",
             "literalFallback": null
           }
         },
@@ -23368,36 +23278,36 @@
         {
           "description": "Input background color.",
           "name": "--hx-input-bg",
-          "default": "var(--hx-color-neutral-0)",
+          "default": "var(--hx-color-surface-default)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/0",
+            "semanticToken": "color/surface/default",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
           "description": "Input text color.",
           "name": "--hx-input-color",
-          "default": "var(--hx-color-neutral-800)",
+          "default": "var(--hx-color-text-strong)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/800",
+            "semanticToken": "color/text/strong",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
           "description": "Input border color.",
           "name": "--hx-input-border-color",
-          "default": "var(--hx-color-neutral-300)",
+          "default": "var(--hx-color-border-strong)",
           "figmaBinding": {
             "target": "Stroke",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/300",
+            "semanticToken": "color/border/strong",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
@@ -23440,24 +23350,24 @@
         {
           "description": "Error state color.",
           "name": "--hx-input-error-color",
-          "default": "var(--hx-color-error-500)",
+          "default": "var(--hx-color-error-text)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/error",
-            "fallbackPrimitive": "color/error/500",
+            "semanticToken": "color/error/text",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
           "description": "Label text color.",
           "name": "--hx-input-label-color",
-          "default": "var(--hx-color-neutral-700)",
+          "default": "var(--hx-color-text-strong)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/700",
+            "semanticToken": "color/text/strong",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
@@ -23486,153 +23396,86 @@
           }
         },
         {
-          "description": "Opacity.",
-          "name": "--hx-opacity-disabled",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-focus-ring-color",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-primary-400",
-          "figmaBinding": null
+          "description": "Outer border-width override (canonical hx-{tag}-* prefix; sits above --hx-input-* aliases in the cascade).",
+          "name": "--hx-text-input-border-width",
+          "default": "var(--hx-border-width-thin)",
+          "figmaBinding": {
+            "target": "Stroke",
+            "layerSelector": "root",
+            "semanticToken": "border/width/thin",
+            "fallbackPrimitive": null,
+            "literalFallback": null
+          }
         },
         {
-          "description": "Width.",
-          "name": "--hx-focus-ring-width",
-          "figmaBinding": null
+          "description": "Outer horizontal padding override.",
+          "name": "--hx-text-input-padding-x",
+          "default": "var(--hx-space-3)",
+          "figmaBinding": {
+            "target": "Padding",
+            "layerSelector": "root",
+            "semanticToken": "space",
+            "fallbackPrimitive": "space/3",
+            "literalFallback": null
+          }
         },
         {
-          "description": "CSS custom property.",
-          "name": "--hx-focus-ring-opacity",
-          "figmaBinding": null
+          "description": "Outer vertical padding override.",
+          "name": "--hx-text-input-padding-y",
+          "default": "var(--hx-space-2)",
+          "figmaBinding": {
+            "target": "Padding",
+            "layerSelector": "root",
+            "semanticToken": "space",
+            "fallbackPrimitive": "space/2",
+            "literalFallback": null
+          }
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-1",
-          "figmaBinding": null
+          "description": "Outer font-size override.",
+          "name": "--hx-text-input-font-size",
+          "default": "var(--hx-font-size-md)",
+          "figmaBinding": {
+            "target": "FontSize",
+            "layerSelector": "root",
+            "semanticToken": null,
+            "fallbackPrimitive": "font-size/md",
+            "literalFallback": null
+          }
         },
         {
-          "description": "Font family.",
-          "name": "--hx-font-family-sans",
+          "description": "Outer sm-variant font-size override (falls through to --hx-input-sm-font-size).",
+          "name": "--hx-text-input-sm-font-size",
           "figmaBinding": null
         },
         {
-          "description": "Font size.",
-          "name": "--hx-font-size-sm",
+          "description": "Outer lg-variant font-size override (falls through to --hx-input-lg-font-size).",
+          "name": "--hx-text-input-lg-font-size",
           "figmaBinding": null
         },
         {
-          "description": "Font weight.",
-          "name": "--hx-font-weight-medium",
+          "description": "Resting field surface (semantic).",
+          "name": "--hx-color-surface-default",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-700",
+          "description": "Resting input text + label color (semantic).",
+          "name": "--hx-color-text-strong",
           "figmaBinding": null
         },
         {
-          "description": "Line height.",
-          "name": "--hx-line-height-normal",
+          "description": "Resting border color (semantic).",
+          "name": "--hx-color-border-strong",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
+          "description": "Error state text + border color (semantic).",
           "name": "--hx-color-error-text",
           "figmaBinding": null
         },
         {
-          "description": "Font weight.",
-          "name": "--hx-font-weight-bold",
-          "figmaBinding": null
-        },
-        {
-          "description": "Width.",
-          "name": "--hx-border-width-thin",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-300",
-          "figmaBinding": null
-        },
-        {
-          "description": "CSS custom property.",
-          "name": "--hx-border-radius-md",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-0",
-          "figmaBinding": null
-        },
-        {
-          "description": "Transition timing.",
-          "name": "--hx-transition-fast",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-error-500",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-500",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-3",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-2",
-          "figmaBinding": null
-        },
-        {
-          "description": "Font size.",
-          "name": "--hx-font-size-md",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-800",
-          "figmaBinding": null
-        },
-        {
-          "description": "Size token.",
-          "name": "--hx-size-10",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-neutral-400",
-          "figmaBinding": null
-        },
-        {
-          "description": "Size token.",
-          "name": "--hx-size-8",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-4",
-          "figmaBinding": null
-        },
-        {
-          "description": "Size token.",
-          "name": "--hx-size-12",
-          "figmaBinding": null
-        },
-        {
-          "description": "Font size.",
-          "name": "--hx-font-size-xs",
+          "description": "Error border primitive fallback inside the invalid-state cascade.",
+          "name": "--hx-color-error-600",
           "figmaBinding": null
         }
       ],
@@ -24983,24 +24826,24 @@
         {
           "description": "Toast background color.",
           "name": "--hx-toast-bg",
-          "default": "var(--hx-color-neutral-900)",
+          "default": "var(--hx-color-surface-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/900",
+            "semanticToken": "color/surface/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
         {
           "description": "Toast text color.",
           "name": "--hx-toast-color",
-          "default": "var(--hx-color-neutral-0)",
+          "default": "var(--hx-color-text-inverse)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": "color/neutral",
-            "fallbackPrimitive": "color/neutral/0",
+            "semanticToken": "color/text/inverse",
+            "fallbackPrimitive": null,
             "literalFallback": null
           }
         },
@@ -25049,13 +24892,13 @@
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-900",
+          "description": "Default-variant background semantic (neutral-900 anchor; flipped per mode).",
+          "name": "--hx-color-surface-inverse",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-0",
+          "description": "Default-variant foreground semantic (neutral-0 anchor; flipped per mode).",
+          "name": "--hx-color-text-inverse",
           "figmaBinding": null
         },
         {
@@ -25113,23 +24956,43 @@
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-success-600",
+          "description": "Success-variant background semantic (3.2.1 cascade).",
+          "name": "--hx-color-surface-success-strong",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-warning-500",
+          "description": "Warning-variant background semantic (3.2.1 cascade).",
+          "name": "--hx-color-surface-warning-strong",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-error-600",
+          "description": "Danger-variant background semantic (3.2.1 cascade).",
+          "name": "--hx-color-surface-danger-strong",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-primary-600",
+          "description": "Info-variant background semantic (3.2.1 cascade).",
+          "name": "--hx-color-surface-info-strong",
+          "figmaBinding": null
+        },
+        {
+          "description": "Success-variant foreground semantic (neutral-0 across modes).",
+          "name": "--hx-color-text-on-success-strong",
+          "figmaBinding": null
+        },
+        {
+          "description": "Warning-variant foreground semantic (neutral-900; warning sits on lighter -500 fill).",
+          "name": "--hx-color-text-on-warning",
+          "figmaBinding": null
+        },
+        {
+          "description": "Danger-variant foreground semantic (neutral-0 across modes).",
+          "name": "--hx-color-text-on-error-strong",
+          "figmaBinding": null
+        },
+        {
+          "description": "Info-variant foreground semantic (neutral-0 across modes).",
+          "name": "--hx-color-text-on-primary-strong",
           "figmaBinding": null
         },
         {