@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/css/hx-select.css

@@ -4,36 +4,36 @@
     display: block;
 
     /* Background & foreground */
-    --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
-    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
+    --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
+    --_color: var(--hx-select-color, var(--hx-color-text-strong, #202b39));
+    --_placeholder-color: var(
+      --hx-select-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
 
     /* Label */
-    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
+    --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #202b39));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #66787b));
     --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
 
     /* Focus ring */
-    --_focus-ring-color: var(
-      --hx-select-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    --_focus-ring-color: var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
 
     /* Error */
-    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
+    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #e5493e));
 
     /* Chevron */
-    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #4a5362));
     --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
 
     /* Listbox */
-    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
-    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
+    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
     --_option-selected-bg: var(
       --hx-select-option-selected-bg,
-      var(--hx-color-primary-100, #dbeafe)
+      var(--hx-color-primary-100, #dbf0f0)
     );
 
     /* Typography */
@@ -68,7 +68,7 @@
   }
 
   .field__required-marker {
-    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -231,8 +231,7 @@
 
   .field__option--focused {
     background-color: var(--_option-hover-bg);
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--_focus-ring-color, var(--hx-color-primary-500));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--_focus-ring-color);
     outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
   }
 
@@ -277,11 +276,11 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
   }
 
   .field__error {
-    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-select-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/css/hx-side-nav.css

@@ -7,8 +7,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, #0d1825));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));
   }
 
   * {
@@ -22,12 +22,15 @@
     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, #0d1825));
+    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-neutral-700, #334155));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
   }
 
   /* ─── Collapsed State ─── */
@@ -45,7 +48,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-neutral-700, #334155));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
     overflow: hidden;
   }
 
@@ -72,7 +78,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-neutral-700, #334155));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
     overflow: hidden;
   }
 
@@ -95,7 +104,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, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -104,10 +113,10 @@
 
   .side-nav__toggle:hover {
     background-color: var(
-      --hx-overlay-white-10,
+      --hx-color-surface-on-dark-overlay-subtle,
       rgba(255, 255, 255, 0.1)
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -118,7 +127,7 @@
 
   .side-nav__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-side-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -164,10 +173,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;

package/dist/css/hx-skeleton.css

@@ -11,7 +11,7 @@
 
   .skeleton {
     display: block;
-    background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #d6dbd5));
     overflow: hidden;
     position: relative;
     width: var(--_width, 100%);

package/dist/css/hx-slider.css

@@ -33,14 +33,14 @@
   .slider__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-slider-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .slider__value-display {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #313e4b));
     line-height: var(--hx-line-height-normal, 1.5);
     font-variant-numeric: tabular-nums;
     min-width: var(--hx-size-8, 2rem);
@@ -58,7 +58,7 @@
     position: relative;
     width: 100%;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #d6dbd5));
     overflow: visible;
   }
 
@@ -101,7 +101,7 @@
     height: 100%;
     width: 100%;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #429797));
     pointer-events: none;
     transform-origin: left center;
     transform: scaleX(var(--_fill-ratio, 0));
@@ -180,9 +180,9 @@
     left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
     transform: translate(-50%, -50%);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-slider-thumb-border-width, 2px) solid
-      var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
+      var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #429797));
     box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
     pointer-events: none;
     transition:
@@ -199,10 +199,7 @@
   .slider__input:focus-visible ~ .slider__thumb-visual {
     box-shadow:
       0 0 0 var(--hx-focus-ring-width, 2px)
-        var(
-          --hx-slider-focus-ring-color,
-          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-        ),
+        var(--hx-slider-focus-ring-color, var(--hx-focus-ring-color, #0f7078)),
       var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
   }
 
@@ -258,7 +255,7 @@
     top: 0;
     width: var(--hx-border-width-thin, 1px);
     height: 100%;
-    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
+    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #66787b));
     transform: translateX(-50%);
   }
 
@@ -268,7 +265,7 @@
     display: flex;
     justify-content: space-between;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
     margin-top: var(--hx-space-0-5, 0.125rem);
   }
@@ -277,16 +274,19 @@
 
   .slider__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Disabled state ─── */
 
   .slider--disabled .slider__fill {
-    background-color: var(--hx-color-neutral-400, #94a3b8);
+    background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #66787b));
   }
 
   .slider--disabled .slider__thumb-visual {
-    border-color: var(--hx-color-neutral-400, #94a3b8);
+    border-color: var(
+      --hx-slider-disabled-thumb-border-color,
+      var(--hx-color-border-strong, #66787b)
+    );
   }

package/dist/css/hx-spinner.css

@@ -87,13 +87,13 @@
   /* ─── Variant Colors ─── */
 
   :host([variant='default']) {
-    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));
-    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #4a5362));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   :host([variant='primary']) {
-    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));
-    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #429797));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbf0f0));
   }
 
   :host([variant='inverted']) {

package/dist/css/hx-split-button.css

@@ -28,8 +28,8 @@
     border-inline-end: none;
     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));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    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);
@@ -48,10 +48,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, #60a5fa))
-      );
+      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;
@@ -78,11 +75,11 @@
     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, #60a5fa));
+      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, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -93,10 +90,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, #60a5fa))
-      );
+      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;
@@ -169,10 +163,20 @@
 
   .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-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, #60a5fa);
+    --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);
+  }
+
+  /* primary:hover — replace the universal brightness(0.9) filter (which would
+     drop primary-500 + on-primary contrast to ~4.4:1) with an explicit swap
+     to primary-600 and a neutral-0 foreground. Mirrors hx-button precedent. */
+  .split-button--primary .split-button__primary:hover,
+  .split-button--primary .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    filter: none;
   }
 
   /* ─── Variant: secondary ─── */
@@ -180,14 +184,14 @@
   .split-button--secondary .split-button__primary,
   .split-button--secondary .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-border-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-divider-color: var(--hx-color-primary-300, #97cdcc);
   }
 
   .split-button--secondary .split-button__primary:hover,
   .split-button--secondary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-split-button-bg: var(--hx-color-primary-50, #ebf8f8);
     filter: none;
   }
 
@@ -195,15 +199,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, #ebeee9);
+    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
     --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, #d6dbd5);
   }
 
   .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, #f5f8f3);
     filter: none;
   }
 
@@ -211,15 +215,19 @@
 
   .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-bg: var(--hx-color-error-500, #e5493e);
+    --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);
+    --hx-split-button-divider-color: var(--hx-color-error-400, #fc7264);
   }
 
+  /* danger:hover — on-error tokens are tuned for error-500. error-600 drops
+     the pair to 2.25:1 (AA fail). Pin fg at neutral-0 to keep the darker
+     hover fill legible. Mirrors hx-toast precedent (commit 300e21ab0). */
   .split-button--danger .split-button__primary:hover,
   .split-button--danger .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);
+    --hx-split-button-bg: var(--hx-color-error-600, #c92a2a);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
     filter: none;
   }
 
@@ -228,14 +236,14 @@
   .split-button--ghost .split-button__primary,
   .split-button--ghost .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);
+    --hx-split-button-divider-color: var(--hx-color-primary-200, #bce1e1);
   }
 
   .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, #f5f8f3);
     filter: none;
   }
 
@@ -244,14 +252,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, #0d1825);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #66787b);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .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, #f5f8f3);
     filter: none;
   }
 
@@ -276,9 +284,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, #d6dbd5));
     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-split-panel.css

@@ -2,8 +2,11 @@
 :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-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
+    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-border-default, #d6dbd5));
+    --_divider-hover-color: var(
+      --hx-split-panel-divider-hover-color,
+      var(--hx-color-primary-500, #429797)
+    );
     overflow: hidden;
   }
 
@@ -89,10 +92,7 @@
 
   .divider:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-split-panel-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-split-panel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);
   }
@@ -130,8 +130,8 @@
 
   .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%;
@@ -154,10 +154,7 @@
 
   .collapse-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-split-panel-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-split-panel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/hx-stat.css

@@ -8,7 +8,7 @@
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-stat-color, var(--hx-color-text-strong, #202b39));
   }
 
   /* ─── Size Variants ─── */
@@ -52,13 +52,13 @@
   }
 
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-stat-value-color, var(--hx-color-text-primary, #0d1825));
   }
 
   /* ─── Label ─── */
 
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-stat-label-color, var(--hx-color-text-muted, #4a5362));
     font-weight: var(--hx-font-weight-normal, 400);
   }
 
@@ -67,7 +67,7 @@
   .stat__icon {
     display: flex;
     align-items: center;
-    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #429797));
     flex-shrink: 0;
   }
 
@@ -84,13 +84,13 @@
   }
 
   .stat__trend--up {
-    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #166534));
-    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
+    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #146831));
+    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #eafaec));
   }
 
   .stat__trend--down {
-    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #991b1b));
-    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
+    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #a21312));
+    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fff2f0));
   }
 
   .stat__trend-arrow {

package/dist/css/hx-status-indicator.css

@@ -6,7 +6,7 @@
     gap: var(--hx-space-2, 0.5rem);
     position: relative;
     flex-shrink: 0;
-    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #cbd5e1));
+    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #b6bfb9));
     /* Default size (md) — always defined so .indicator never collapses to 0x0 */
     --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
   }
@@ -70,7 +70,7 @@
       --hx-status-indicator-label-font-size,
       var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
     );
-    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-status-indicator-label-color, var(--hx-color-text-strong, #202b39));
     line-height: 1;
     white-space: nowrap;
   }
@@ -106,23 +106,23 @@
   /* ─── Status Colors ─── */
 
   :host([status='online']) {
-    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));
+    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500, #3b9e58));
   }
 
   :host([status='offline']) {
-    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));
+    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400, #8e9c98));
   }
 
   :host([status='away']) {
-    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));
+    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500, #c2711c));
   }
 
   :host([status='busy']) {
-    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));
+    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500, #e5493e));
   }
 
   :host([status='unknown']) {
-    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
+    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300, #b6bfb9));
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */