@helixui/library 3.0.0-next.65 → 3.1.0-next.66

package/dist/css/helix-layout.css

@@ -132,7 +132,7 @@ export const helixGridItemStyles = css`
 :host {
     display: flex;
     --_divider-size: var(--hx-split-panel-divider-size, 4px);
-    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));
+    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-border-default, #e2e8f0));
     --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
     overflow: hidden;
   }
@@ -260,8 +260,8 @@ export const helixGridItemStyles = css`
 
   .collapse-btn {
     background: var(--_divider-hover-color);
-    border: 2px solid var(--hx-color-neutral-0);
-    color: var(--hx-color-neutral-0);
+    border: 2px solid var(--hx-color-surface-default);
+    color: var(--hx-color-surface-default);
     width: var(--hx-size-5, 1.25rem);
     height: var(--hx-size-5, 1.25rem);
     border-radius: 50%;

package/dist/css/helix-navigation.css

@@ -72,9 +72,9 @@
     display: flex;
     flex-direction: column;
     padding: var(--hx-space-1, 0.25rem);
-    background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-menu-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-shadow,
@@ -371,7 +371,7 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: transparent;
-    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #475569));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -391,11 +391,11 @@
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
   }
 
   .trigger--open {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
   }
 
   /* ─── Size Variants ─── */
@@ -428,8 +428,8 @@
     position: fixed;
     z-index: var(--hx-overflow-menu-panel-z-index, 1000);
     min-width: var(--hx-overflow-menu-panel-min-width, 160px);
-    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #e2e8f0));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -454,7 +454,7 @@
     border: none;
     text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #0f172a);
+    color: var(--hx-color-text-primary, #0f172a);
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -463,7 +463,7 @@
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-neutral-50, #f8fafc);
+    background-color: var(--hx-color-surface-raised, #f8fafc);
   }
 
   ::slotted([role='menuitem']:focus-visible),
@@ -555,10 +555,10 @@
     min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -571,7 +571,7 @@
   }
 
   .button:hover:not(:disabled) {
-    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
+    background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #f1f5f9));
     border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
   }
 
@@ -587,7 +587,7 @@
       --hx-pagination-active-border-color,
       var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
     );
-    color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
     cursor: default;
     pointer-events: none;
@@ -604,7 +604,7 @@
     justify-content: center;
     min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
-    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #64748b));
     font-size: var(--hx-font-size-sm, 0.875rem);
     user-select: none;
   }
@@ -625,7 +625,7 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     white-space: nowrap;
   }
 
@@ -633,10 +633,10 @@
     min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -717,8 +717,8 @@
        Without this, axe-core cannot resolve the background for slotted nodes
        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-neutral-900, #0f172a));
-    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
   }
 
   * {
@@ -732,12 +732,12 @@
     flex-direction: column;
     height: 100%;
     width: var(--hx-side-nav-width, 16rem);
-    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
     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-neutral-700, #334155));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
   }
 
   /* ─── Collapsed State ─── */
@@ -755,7 +755,7 @@
     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-neutral-700, #334155));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
     overflow: hidden;
   }
 
@@ -782,7 +782,7 @@
     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-neutral-700, #334155));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
     overflow: hidden;
   }
 
@@ -805,7 +805,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #94a3b8));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -817,7 +817,7 @@
       --hx-overlay-white-10,
       rgba(255, 255, 255, 0.1)
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-text-inverse, #f1f5f9);
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -1062,10 +1062,10 @@
   /* ─── Nav container ─── */
 
   .nav {
-    background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-top-nav-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-top-nav-color, var(--hx-color-text-strong, #1e293b));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
     font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
@@ -1099,13 +1099,13 @@
     background: transparent;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-top-nav-toggle-color, var(--hx-color-text-strong, #334155));
     cursor: pointer;
     line-height: 0;
   }
 
   .mobile-toggle:hover {
-    background: var(--hx-color-neutral-100, #f1f5f9);
+    background: var(--hx-color-surface-sunken, #f1f5f9);
   }
 
   .mobile-toggle:focus-visible {
@@ -1127,7 +1127,7 @@
     width: 100%;
     padding-block: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
   }
 
   .nav__collapsible--open {
@@ -1149,7 +1149,7 @@
     margin-top: var(--hx-space-3, 0.75rem);
     padding-top: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-top-nav-border-color, var(--hx-color-border-default, #e2e8f0));
   }
 
   /* ─── Desktop breakpoint ─── */

package/dist/css/helix-overlay.css

@@ -26,8 +26,8 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));
-    color: var(--hx-dialog-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-dialog-bg, var(--hx-color-surface-default));
+    color: var(--hx-dialog-color, var(--hx-color-text-primary));
     border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
     box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
     width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
@@ -62,7 +62,7 @@
   /* ─── Native backdrop (modal mode) ─── */
 
   dialog::backdrop {
-    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
     opacity: 0;
     transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
   }
@@ -82,7 +82,7 @@
   .dialog-backdrop {
     position: fixed;
     inset: 0;
-    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
     opacity: var(--hx-dialog-backdrop-opacity, 0.5);
     /* D5 — backdrop z-index must be lower than the dialog element's z-index */
     z-index: var(--hx-z-index-modal, 1400);
@@ -96,7 +96,7 @@
     justify-content: space-between;
     padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));
+      var(--hx-dialog-header-border-color, var(--hx-color-border-default));
     gap: var(--hx-space-4);
     flex-shrink: 0;
   }
@@ -107,7 +107,7 @@
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
-    color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));
+    color: var(--hx-dialog-heading-color, var(--hx-color-text-primary));
     flex: 1 1 auto;
   }
 
@@ -129,7 +129,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     font-size: var(--hx-font-size-xl, 1.25rem);
     line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
     transition:
@@ -142,8 +142,8 @@
   }
 
   .dialog__close-btn:hover {
-    color: var(--hx-color-neutral-900);
-    background-color: var(--hx-color-neutral-100);
+    color: var(--hx-color-text-primary);
+    background-color: var(--hx-color-surface-sunken);
   }
 
   .dialog__close-btn:focus-visible {
@@ -173,7 +173,7 @@
     gap: var(--hx-space-3);
     padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
     border-top: var(--hx-border-width-thin) solid
-      var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));
+      var(--hx-dialog-footer-border-color, var(--hx-color-border-default));
     flex-shrink: 0;
   }
 
@@ -252,7 +252,10 @@
   .drawer-backdrop {
     position: absolute;
     inset: 0;
-    background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));
+    background-color: var(
+      --hx-drawer-backdrop-color,
+      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
+    );
     opacity: 0;
     transition: opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
   }
@@ -273,8 +276,8 @@
     position: absolute;
     display: flex;
     flex-direction: column;
-    background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));
-    color: var(--hx-drawer-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-drawer-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-drawer-color, var(--hx-color-text-primary, #0f172a));
     box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
     overflow: hidden;
     outline: none;
@@ -372,7 +375,7 @@
     gap: var(--hx-space-4, 1rem);
     padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));
+      var(--hx-drawer-header-border-color, var(--hx-color-border-default, #e2e8f0));
     flex-shrink: 0;
   }
 
@@ -383,7 +386,7 @@
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
-    color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));
+    color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0f172a));
   }
 
   .drawer-header-actions {
@@ -406,15 +409,15 @@
     border: none;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted, #64748b);
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
   }
 
   .drawer-close-button:hover {
-    background-color: var(--hx-color-neutral-100);
-    color: var(--hx-color-neutral-900);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #0f172a);
   }
 
   .drawer-close-button:focus-visible {
@@ -470,7 +473,7 @@
     gap: var(--hx-space-3, 0.75rem);
     padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
+      var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #e2e8f0));
     flex-shrink: 0;
   }
 
@@ -513,8 +516,8 @@
     position: fixed;
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
-    background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-dropdown-panel-bg, var(--hx-color-surface-default, #ffffff));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-dropdown-panel-shadow,
@@ -565,12 +568,12 @@
     z-index: var(--hx-popover-z-index, 9999);
     max-width: var(--hx-popover-max-width, 320px);
     padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
-    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-popover-color, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-popover-color, var(--hx-color-text-primary, #0f172a));
     font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-normal, 1.5);
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-popover-shadow,
@@ -599,8 +602,8 @@
     position: absolute;
     width: var(--hx-popover-arrow-size, 10px);
     height: var(--hx-popover-arrow-size, 10px);
-    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -679,8 +682,8 @@
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
     max-width: var(--hx-tooltip-max-width, 280px);
     padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
+    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
+    color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #f8fafc));
     font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
     line-height: var(--hx-line-height-normal, 1.5);
@@ -706,7 +709,7 @@
     position: absolute;
     width: var(--hx-tooltip-arrow-size, 8px);
     height: var(--hx-tooltip-arrow-size, 8px);
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0f172a));
     transform: rotate(45deg);
     pointer-events: none;
   }

package/dist/css/helix-tokens.css

@@ -89,8 +89,10 @@
   --hx-color-info-900: #0A3553;
   --hx-color-info-950: #082F49;
   --hx-color-text-primary: var(--hx-color-neutral-900);
+  --hx-color-text-strong: var(--hx-color-neutral-800);
   --hx-color-text-secondary: var(--hx-color-neutral-600);
   --hx-color-text-muted: var(--hx-color-neutral-500);
+  --hx-color-text-placeholder: var(--hx-color-neutral-500);
   --hx-color-text-disabled: var(--hx-color-neutral-400);
   --hx-color-text-inverse: var(--hx-color-neutral-0);
   --hx-color-text-on-primary: var(--hx-color-neutral-0);
@@ -108,6 +110,7 @@
   --hx-color-surface-default: var(--hx-color-neutral-0);
   --hx-color-surface-raised: var(--hx-color-neutral-50);
   --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-border-default: var(--hx-color-neutral-200);
   --hx-color-border-subtle: var(--hx-color-neutral-100);
@@ -326,8 +329,10 @@
     --hx-color-error-text: var(--hx-color-error-400);
     --hx-color-success-text: var(--hx-color-success-400);
     --hx-color-text-primary: var(--hx-color-neutral-100);
+    --hx-color-text-strong: var(--hx-color-neutral-50);
     --hx-color-text-secondary: var(--hx-color-neutral-300);
     --hx-color-text-muted: var(--hx-color-neutral-400);
+    --hx-color-text-placeholder: var(--hx-color-neutral-500);
     --hx-color-text-disabled: var(--hx-color-neutral-600);
     --hx-color-text-inverse: var(--hx-color-neutral-900);
     --hx-color-text-link: var(--hx-color-primary-400);
@@ -337,6 +342,7 @@
     --hx-color-surface-default: var(--hx-color-neutral-900);
     --hx-color-surface-raised: var(--hx-color-neutral-800);
     --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-border-default: var(--hx-color-neutral-700);
     --hx-color-border-subtle: var(--hx-color-neutral-800);
@@ -359,8 +365,10 @@
   --hx-color-error-text: var(--hx-color-error-400);
   --hx-color-success-text: var(--hx-color-success-400);
   --hx-color-text-primary: var(--hx-color-neutral-100);
+  --hx-color-text-strong: var(--hx-color-neutral-50);
   --hx-color-text-secondary: var(--hx-color-neutral-300);
   --hx-color-text-muted: var(--hx-color-neutral-400);
+  --hx-color-text-placeholder: var(--hx-color-neutral-500);
   --hx-color-text-disabled: var(--hx-color-neutral-600);
   --hx-color-text-inverse: var(--hx-color-neutral-900);
   --hx-color-text-link: var(--hx-color-primary-400);
@@ -370,6 +378,7 @@
   --hx-color-surface-default: var(--hx-color-neutral-900);
   --hx-color-surface-raised: var(--hx-color-neutral-800);
   --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-border-default: var(--hx-color-neutral-700);
   --hx-color-border-subtle: var(--hx-color-neutral-800);
@@ -405,8 +414,10 @@
     --hx-color-info-500: #38BDF8;
     --hx-color-info-600: #7DD3FC;
     --hx-color-text-primary: #FFFFFF;
+    --hx-color-text-strong: #FFFFFF;
     --hx-color-text-secondary: #FFFFFF;
     --hx-color-text-muted: #E0E0E0;
+    --hx-color-text-placeholder: #B0B0B0;
     --hx-color-text-disabled: #767676;
     --hx-color-text-inverse: #000000;
     --hx-color-text-on-primary: #000000;
@@ -422,6 +433,7 @@
     --hx-color-surface-default: #000000;
     --hx-color-surface-raised: #1A1A1A;
     --hx-color-surface-sunken: #000000;
+    --hx-color-surface-inverse: #FFFFFF;
     --hx-color-surface-overlay: rgba(0, 0, 0, 0.95);
     --hx-color-border-default: #FFFFFF;
     --hx-color-border-subtle: #C0C0C0;

package/dist/css/helix-utility.css

@@ -52,10 +52,10 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0)
     );
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }
@@ -63,7 +63,7 @@
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f8fafc));
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }
 
@@ -393,7 +393,7 @@
     border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -446,7 +446,7 @@
     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, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -534,7 +534,7 @@
   .split-button--primary .split-button__primary,
   .split-button--primary .split-button__trigger {
     --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --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, #60a5fa);
   }
@@ -559,15 +559,15 @@
 
   .split-button--tertiary .split-button__primary,
   .split-button--tertiary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-split-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
+    --hx-split-button-color: var(--hx-color-text-primary, #0f172a);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #e2e8f0);
   }
 
   .split-button--tertiary .split-button__primary:hover,
   .split-button--tertiary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
     filter: none;
   }
 
@@ -576,7 +576,7 @@
   .split-button--danger .split-button__primary,
   .split-button--danger .split-button__trigger {
     --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-split-button-border-color: transparent;
     --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
   }
@@ -599,7 +599,7 @@
 
   .split-button--ghost .split-button__primary:hover,
   .split-button--ghost .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
     filter: none;
   }
 
@@ -608,14 +608,14 @@
   .split-button--outline .split-button__primary,
   .split-button--outline .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-color: var(--hx-color-text-primary, #0f172a);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #94a3b8);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #e2e8f0);
   }
 
   .split-button--outline .split-button__primary:hover,
   .split-button--outline .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f8fafc);
     filter: none;
   }
 
@@ -640,9 +640,9 @@
     min-width: 100%;
     max-height: var(--hx-split-button-menu-max-height, 18rem);
     overflow-y: auto;
-    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-split-button-menu-shadow,

package/dist/css/hx-action-bar.css

@@ -50,10 +50,10 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0)
     );
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }
@@ -61,7 +61,7 @@
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f8fafc));
     border-radius: var(--hx-border-radius-md, 0.375rem);
   }