@helixui/library 3.2.0 → 3.3.0-next.112

package/dist/css/helix-navigation.css

@@ -136,10 +136,7 @@
 
   [part='toggle']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -192,10 +189,7 @@
 
   .nav__link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -389,10 +383,7 @@
 
   .trigger:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -485,10 +476,7 @@
   ::slotted([role='menuitemcheckbox']:focus-visible),
   ::slotted([role='menuitemradio']:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: 0;
   }
 
@@ -592,10 +580,7 @@
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-pagination-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -662,10 +647,7 @@
 
   .page-size-select:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-pagination-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -739,7 +721,7 @@
        and evaluates their text against the page white background, producing
        false-positive color-contrast violations (WCAG 2.1 AA). */
     background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
-    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ebeee9));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));
   }
 
   * {
@@ -754,11 +736,14 @@
     height: 100%;
     width: var(--hx-side-nav-width, 16rem);
     background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));
-    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ebeee9));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));
     transition: width var(--hx-transition-normal, 300ms) ease;
     overflow: hidden;
     border-inline-end: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
   }
 
   /* ─── Collapsed State ─── */
@@ -776,7 +761,10 @@
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
     overflow: hidden;
   }
 
@@ -803,7 +791,10 @@
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #313e4b));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
     overflow: hidden;
   }
 
@@ -826,7 +817,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #b6bfb9));
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -834,25 +825,34 @@
   }
 
   .side-nav__toggle:hover {
+    /* Read both deprecated --hx-color-border-on-dark-subtle (3.2.0/3.2.1 API)
+       and canonical --hx-color-surface-on-dark-overlay-subtle so consumer
+       overrides on either name reach paint. Deprecated removal: 4.0.0.
+       Hex fallback for browsers without color-mix(). */
     background-color: var(
-      --hx-overlay-white-10,
-      rgba(255, 255, 255, 0.1)
-    ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-text-inverse, #ebeee9);
+      --hx-color-border-on-dark-subtle,
+      var(--hx-color-surface-on-dark-overlay-subtle, rgba(255, 255, 255, 0.1))
+    );
+    color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
+    /* Fold color-mix() into the same deprecated-first chain so consumer
+       overrides on either token reach paint on the modern path too. */
     .side-nav__toggle:hover {
-      background-color: color-mix(in srgb, currentColor 15%, transparent);
+      background-color: var(
+        --hx-color-border-on-dark-subtle,
+        var(
+          --hx-color-surface-on-dark-overlay-subtle,
+          color-mix(in srgb, currentColor 15%, transparent)
+        )
+      );
     }
   }
 
   .side-nav__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-side-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-side-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -898,10 +898,18 @@
     }
 
     .side-nav__toggle {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
       color: ButtonText;
       border: 1px solid ButtonText;
     }
 
+    .side-nav__toggle:hover {
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
     .side-nav__toggle:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -1134,10 +1142,7 @@
 
   .mobile-toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-top-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -1303,8 +1308,7 @@
   }
 
   .tree:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }

package/dist/css/helix-overlay.css

@@ -154,10 +154,7 @@
 
   .dialog__close-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-dialog-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-dialog-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -429,10 +426,7 @@
 
   .drawer-close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-drawer-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-drawer-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -601,10 +595,7 @@
 
   [part='body']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-popover-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/helix-tokens.css

@@ -101,6 +101,9 @@
   --hx-color-text-on-success: var(--hx-color-neutral-900);
   --hx-color-text-on-warning: var(--hx-color-neutral-900);
   --hx-color-text-on-info: var(--hx-color-neutral-900);
+  --hx-color-text-on-primary-strong: var(--hx-color-neutral-0);
+  --hx-color-text-on-success-strong: var(--hx-color-neutral-0);
+  --hx-color-text-on-error-strong: var(--hx-color-neutral-0);
   --hx-color-text-link: var(--hx-color-primary-600);
   --hx-color-text-link-hover: var(--hx-color-primary-700);
   --hx-color-text-link-visited: var(--hx-color-secondary-600);
@@ -112,13 +115,34 @@
   --hx-color-surface-sunken: var(--hx-color-neutral-100);
   --hx-color-surface-inverse: var(--hx-color-neutral-900);
   --hx-color-surface-overlay: rgba(0, 0, 0, 0.75);
+  --hx-color-surface-success-strong: var(--hx-color-success-700);
+  --hx-color-surface-warning-strong: var(--hx-color-warning-500);
+  --hx-color-surface-danger-strong: var(--hx-color-error-600);
+  --hx-color-surface-info-strong: var(--hx-color-primary-600);
+  --hx-color-surface-on-dark-overlay-default: var(--hx-overlay-white-30);
+  --hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-white-10);
   --hx-color-border-default: var(--hx-color-neutral-200);
   --hx-color-border-subtle: var(--hx-color-neutral-100);
-  --hx-color-border-strong: var(--hx-color-neutral-400);
+  --hx-color-border-strong: var(--hx-color-neutral-500);
   --hx-color-border-focus: var(--hx-color-primary-500);
-  --hx-color-focus-ring: var(--hx-color-primary-400);
+  --hx-color-border-on-dark-strong: var(--hx-overlay-white-70);
+  --hx-color-focus-ring: var(--hx-color-primary-600);
   --hx-color-selection-bg: var(--hx-color-primary-200);
   --hx-color-selection-color: var(--hx-color-neutral-900);
+  --hx-color-action-primary-bg: var(--hx-color-primary-500);
+  --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-500);
+  --hx-color-action-primary-bg-hover: var(--hx-color-primary-600);
+  --hx-color-action-primary-bg-active: var(--hx-color-primary-700);
+  --hx-color-action-primary-bg-inverted-hover: var(--hx-color-primary-400);
+  --hx-color-action-secondary-fg: var(--hx-color-primary-600);
+  --hx-color-action-secondary-border: var(--hx-color-primary-600);
+  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-50);
+  --hx-color-action-ghost-fg: var(--hx-color-primary-600);
+  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-50);
+  --hx-color-action-danger-bg: var(--hx-color-error-500);
+  --hx-color-action-danger-bg-hover: var(--hx-color-error-600);
+  --hx-color-action-danger-bg-active: var(--hx-color-error-700);
+  --hx-color-action-danger-bg-inverted-hover: var(--hx-color-error-400);
   --hx-body-bg: var(--hx-color-surface-default);
   --hx-body-color: var(--hx-color-text-primary);
   --hx-body-font-family: var(--hx-font-family-sans);
@@ -218,7 +242,7 @@
   --hx-transition-slow: 350ms ease;
   --hx-touch-target-min: 2.75rem;
   --hx-touch-target-size: 44px;
-  --hx-focus-ring-color: var(--hx-color-primary-400);
+  --hx-focus-ring-color: var(--hx-color-primary-600);
   --hx-focus-ring-width: 2px;
   --hx-focus-ring-offset: 2px;
   --hx-focus-ring-style: solid;
@@ -344,15 +368,25 @@
     --hx-color-surface-sunken: var(--hx-color-neutral-950);
     --hx-color-surface-inverse: var(--hx-color-neutral-100);
     --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
+    --hx-color-surface-on-dark-overlay-default: var(--hx-overlay-black-30);
+    --hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-black-10);
     --hx-color-border-default: var(--hx-color-neutral-700);
     --hx-color-border-subtle: var(--hx-color-neutral-800);
-    --hx-color-border-strong: var(--hx-color-neutral-500);
+    --hx-color-border-strong: var(--hx-color-neutral-400);
     --hx-color-border-focus: var(--hx-color-primary-400);
+    --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
     --hx-color-focus-ring: var(--hx-color-primary-400);
     --hx-color-selection-bg: var(--hx-color-primary-800);
     --hx-color-selection-color: var(--hx-color-neutral-100);
+    --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
+    --hx-color-action-secondary-fg: var(--hx-color-primary-400);
+    --hx-color-action-secondary-border: var(--hx-color-primary-400);
+    --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
+    --hx-color-action-ghost-fg: var(--hx-color-primary-400);
+    --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
     --hx-body-bg: var(--hx-color-surface-default);
     --hx-body-color: var(--hx-color-text-primary);
+    --hx-focus-ring-color: var(--hx-color-primary-400);
     --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
     --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
     --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -380,15 +414,25 @@
   --hx-color-surface-sunken: var(--hx-color-neutral-950);
   --hx-color-surface-inverse: var(--hx-color-neutral-100);
   --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
+  --hx-color-surface-on-dark-overlay-default: var(--hx-overlay-black-30);
+  --hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-black-10);
   --hx-color-border-default: var(--hx-color-neutral-700);
   --hx-color-border-subtle: var(--hx-color-neutral-800);
-  --hx-color-border-strong: var(--hx-color-neutral-500);
+  --hx-color-border-strong: var(--hx-color-neutral-400);
   --hx-color-border-focus: var(--hx-color-primary-400);
+  --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
   --hx-color-focus-ring: var(--hx-color-primary-400);
   --hx-color-selection-bg: var(--hx-color-primary-800);
   --hx-color-selection-color: var(--hx-color-neutral-100);
+  --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
+  --hx-color-action-secondary-fg: var(--hx-color-primary-400);
+  --hx-color-action-secondary-border: var(--hx-color-primary-400);
+  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
+  --hx-color-action-ghost-fg: var(--hx-color-primary-400);
+  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
   --hx-body-bg: var(--hx-color-surface-default);
   --hx-body-color: var(--hx-color-text-primary);
+  --hx-focus-ring-color: var(--hx-color-primary-400);
   --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
   --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
   --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -426,6 +470,9 @@
     --hx-color-text-on-success: #000000;
     --hx-color-text-on-warning: #000000;
     --hx-color-text-on-info: #000000;
+    --hx-color-text-on-primary-strong: #000000;
+    --hx-color-text-on-error-strong: #000000;
+    --hx-color-text-on-success-strong: #000000;
     --hx-color-text-link: #FFFF00;
     --hx-color-text-link-hover: #FFFF99;
     --hx-color-text-link-visited: #FF80FF;
@@ -435,13 +482,21 @@
     --hx-color-surface-sunken: #000000;
     --hx-color-surface-inverse: #FFFFFF;
     --hx-color-surface-overlay: rgba(0, 0, 0, 0.95);
+    --hx-color-surface-success-strong: var(--hx-color-success-500);
+    --hx-color-surface-warning-strong: var(--hx-color-warning-500);
+    --hx-color-surface-danger-strong: var(--hx-color-error-500);
+    --hx-color-surface-info-strong: var(--hx-color-primary-500);
+    --hx-color-surface-on-dark-overlay-default: #FFFFFF;
+    --hx-color-surface-on-dark-overlay-subtle: #C0C0C0;
     --hx-color-border-default: #FFFFFF;
     --hx-color-border-subtle: #C0C0C0;
     --hx-color-border-strong: #FFFFFF;
     --hx-color-border-focus: #FFFF00;
+    --hx-color-border-on-dark-strong: #FFFFFF;
     --hx-color-focus-ring: #FFFF00;
     --hx-color-selection-bg: #1AEBFF;
     --hx-color-selection-color: #000000;
+    --hx-color-action-danger-bg-active: var(--hx-color-error-500);
     --hx-body-bg: #000000;
     --hx-body-color: #FFFFFF;
     --hx-focus-ring-color: #FFFF00;

package/dist/css/helix-utility.css

@@ -415,10 +415,7 @@
 
   .split-button__primary:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
     position: relative;
@@ -445,7 +442,7 @@
     flex-shrink: 0;
     border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #6ab1b1));
+      var(--hx-split-button-divider-color, var(--hx-color-primary-900, #0b3232));
     border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
     background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
@@ -460,10 +457,7 @@
 
   .split-button__trigger:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
     position: relative;
@@ -539,7 +533,7 @@
     --hx-split-button-bg: var(--hx-color-primary-500, #429797);
     --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-400, #6ab1b1);
+    --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);
   }
 
   /* primary:hover — replace the universal brightness(0.9) filter (which would
@@ -626,7 +620,7 @@
   .split-button--outline .split-button__trigger {
     --hx-split-button-bg: transparent;
     --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
-    --hx-split-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #66787b);
     --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 

package/dist/css/hx-alert.css

@@ -158,10 +158,7 @@
 
   .alert__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-alert-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-alert-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }

package/dist/css/hx-banner.css

@@ -96,10 +96,7 @@
 
   .banner__action:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-banner-action-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-banner-action-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -140,10 +137,7 @@
 
   .banner__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-banner-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-banner-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }