@helixui/library 3.2.0-next.83 → 3.2.0-next.89

package/figma-inventory.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-04-25T20:44:50.116Z",
+  "generatedAt": "2026-04-25T22:33:58.197Z",
   "sourceCem": "custom-elements.json",
   "helixVersion": "3.2.0",
   "tokensVersion": "3.2.0",
@@ -2690,36 +2690,36 @@
       ],
       "cssProperties": [
         {
-          "description": "Button background color.",
+          "description": "Button background color (3.2.1 cascade — variant rules route through action.{primary,secondary,ghost,danger}.bg).",
           "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; when set, overrides the variant default hover background from outside the shadow DOM.",
           "name": "--hx-button-hover-bg",
           "figmaBinding": null
         },
         {
-          "description": "Button text color.",
+          "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 +2779,144 @@
           }
         },
         {
-          "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.",
+          "description": "Ghost hover bg when inverted (overlay-white-30 ≈ 5:1 vs neutral-900).",
           "name": "--hx-button-inverted-ghost-hover-bg",
-          "default": "rgba(255,255,255,0.15)",
+          "default": "var(--hx-color-border-on-dark-default)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": null,
+            "semanticToken": "color/border/on/dark/default",
             "fallbackPrimitive": null,
-            "literalFallback": "rgba(255,255,255,0.15)"
+            "literalFallback": null
           }
         },
         {
-          "description": "Focus ring color when inverted.",
+          "description": "Focus ring color when inverted (overlay-white-70 = ~5:1 vs neutral-900).",
           "name": "--hx-button-inverted-focus-ring-color",
-          "default": "rgba(255,255,255,0.5)",
+          "default": "var(--hx-color-border-on-dark-strong)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
-            "semanticToken": null,
+            "semanticToken": "color/border/on/dark/strong",
             "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": "Color.",
-          "name": "--hx-focus-ring-color",
-          "figmaBinding": null
-        },
-        {
-          "description": "CSS custom property.",
-          "name": "--hx-focus-ring-offset",
-          "figmaBinding": null
-        },
-        {
-          "description": "CSS filter.",
-          "name": "--hx-filter-brightness-hover",
-          "figmaBinding": null
-        },
-        {
-          "description": "CSS filter.",
-          "name": "--hx-filter-brightness-active",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-1",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-3",
-          "figmaBinding": null
-        },
-        {
-          "description": "Font size.",
-          "name": "--hx-font-size-sm",
+          "description": "Primary variant resting fill (3.2.1 semantic action layer).",
+          "name": "--hx-color-action-primary-bg",
           "figmaBinding": null
         },
         {
-          "description": "Minimum touch target size.",
-          "name": "--hx-touch-target-min",
+          "description": "Primary variant hover fill.",
+          "name": "--hx-color-action-primary-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-4",
+          "description": "Primary variant active/pressed fill.",
+          "name": "--hx-color-action-primary-bg-active",
           "figmaBinding": null
         },
         {
-          "description": "Font size.",
-          "name": "--hx-font-size-md",
+          "description": "Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark).",
+          "name": "--hx-color-action-secondary-fg",
           "figmaBinding": null
         },
         {
-          "description": "Size token.",
-          "name": "--hx-size-10",
+          "description": "Secondary/outline variant border.",
+          "name": "--hx-color-action-secondary-border",
           "figmaBinding": null
         },
         {
-          "description": "Spacing token.",
-          "name": "--hx-space-6",
+          "description": "Secondary/outline variant hover fill.",
+          "name": "--hx-color-action-secondary-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "Font size.",
-          "name": "--hx-font-size-lg",
+          "description": "Ghost variant fg.",
+          "name": "--hx-color-action-ghost-fg",
           "figmaBinding": null
         },
         {
-          "description": "Size token.",
-          "name": "--hx-size-12",
+          "description": "Ghost variant hover fill.",
+          "name": "--hx-color-action-ghost-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-primary-50",
+          "description": "Danger variant resting fill.",
+          "name": "--hx-color-action-danger-bg",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-100",
+          "description": "Danger variant hover fill.",
+          "name": "--hx-color-action-danger-bg-hover",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-900",
+          "description": "Danger variant active fill.",
+          "name": "--hx-color-action-danger-bg-active",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-neutral-200",
+          "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-error-500",
+          "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-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",
+          "description": "Foreground for danger fill (resolves to neutral-900).",
+          "name": "--hx-color-text-on-error",
           "figmaBinding": null
         },
         {
-          "description": "Animation duration.",
-          "name": "--hx-duration-spinner",
+          "description": "Foreground for danger-hover fill (resolves to neutral-0 across modes).",
+          "name": "--hx-color-text-on-error-strong",
           "figmaBinding": null
         },
         {
-          "description": "Opacity.",
-          "name": "--hx-opacity-muted",
+          "description": "Foreground for tertiary variant on surface.sunken.",
+          "name": "--hx-color-text-primary",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-50",
+          "description": "Tertiary variant resting fill.",
+          "name": "--hx-color-surface-sunken",
           "figmaBinding": null
         },
         {
-          "description": "Color.",
-          "name": "--hx-color-primary-400",
+          "description": "Tertiary variant hover fill.",
+          "name": "--hx-color-surface-raised",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-70",
+          "description": "Inverted-tertiary resting border (overlay-white-10).",
+          "name": "--hx-color-border-on-dark-subtle",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-15",
+          "description": "Inverted-tertiary hover border + inverted-secondary/ghost hover border (overlay-white-30).",
+          "name": "--hx-color-border-on-dark-default",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-25",
-          "figmaBinding": null
-        },
-        {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-20",
+          "description": "Inverted focus-visible outline (overlay-white-70).",
+          "name": "--hx-color-border-on-dark-strong",
           "figmaBinding": null
         }
       ],
@@ -17732,98 +17627,23 @@
           }
         },
         {
-          "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",
+          "description": "Side-nav surface fill (resolves to neutral-900 light, near-black dark).",
+          "name": "--hx-color-surface-inverse",
           "figmaBinding": null
         },
         {
-          "description": "Transition timing.",
-          "name": "--hx-transition-fast",
+          "description": "Side-nav text color (resolves to neutral-0).",
+          "name": "--hx-color-text-inverse",
           "figmaBinding": null
         },
         {
-          "description": "Overlay color.",
-          "name": "--hx-overlay-white-10",
+          "description": "Header/footer divider border.",
+          "name": "--hx-color-border-strong",
           "figmaBinding": null
         },
         {
-          "description": "Width.",
-          "name": "--hx-focus-ring-width",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-focus-ring-color",
-          "figmaBinding": null
-        },
-        {
-          "description": "Color.",
-          "name": "--hx-color-primary-400",
-          "figmaBinding": null
-        },
-        {
-          "description": "CSS custom property.",
-          "name": "--hx-focus-ring-offset",
-          "figmaBinding": null
-        },
-        {
-          "description": "Spacing token.",
-          "name": "--hx-space-5",
+          "description": "Toggle button hover surface (overlay-white-10 primitive — semantic layer for inverted affordances).",
+          "name": "--hx-color-border-on-dark-subtle",
           "figmaBinding": null
         }
       ],
@@ -23522,153 +23342,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 focus-state cascade.",
+          "name": "--hx-color-error-600",
           "figmaBinding": null
         }
       ],
@@ -25085,13 +24838,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
         },
         {
@@ -25149,23 +24902,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
         },
         {