@helixui/library 3.1.0 → 3.2.0-next.74

package/dist/css/hx-textarea.css

@@ -1,6 +1,42 @@
 /* hx-textarea — extracted from Shadow DOM styles */
 :host {
     display: block;
+
+    /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
+    --_textarea-bg: var(
+      --hx-textarea-bg,
+      var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
+    );
+    --_textarea-color: var(
+      --hx-textarea-color,
+      var(--hx-input-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_textarea-border-color: var(
+      --hx-textarea-border-color,
+      var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
+    );
+    --_textarea-border-color-focus: var(
+      --hx-textarea-border-color-focus,
+      var(
+        --hx-input-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      )
+    );
+    --_textarea-border-color-invalid: var(
+      --hx-textarea-border-color-invalid,
+      var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
+    );
+    --_textarea-border-radius: var(
+      --hx-textarea-border-radius,
+      var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
+    );
+    --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));
+    --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));
+    --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));
+    --_textarea-placeholder-color: var(
+      --hx-textarea-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
   }
 
   :host([disabled]) {
@@ -16,7 +52,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+    font-family: var(
+      --hx-textarea-font-family,
+      var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
+    );
   }
 
   /* --- Label --- */
@@ -31,12 +70,18 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(
+      --hx-textarea-label-color,
+      var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
+    );
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__required-marker {
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(
+      --hx-textarea-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -45,10 +90,9 @@
   .field__textarea-wrapper {
     display: flex;
     flex-direction: column;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
-    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid var(--_textarea-border-color);
+    border-radius: var(--_textarea-border-radius);
+    background-color: var(--_textarea-bg);
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -56,18 +100,11 @@
   }
 
   .field__textarea-wrapper:focus-within {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    border-color: var(--_textarea-border-color-focus);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -75,16 +112,15 @@
   /* --- Error State --- */
 
   .field--error .field__textarea-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_textarea-border-color-invalid);
   }
 
   .field--error .field__textarea-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_textarea-border-color-invalid);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -95,10 +131,10 @@
     border: none;
     outline: none;
     background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    padding: var(--_textarea-padding-y) var(--_textarea-padding-x);
     font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
+    font-size: var(--_textarea-font-size);
+    color: var(--_textarea-color);
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
     width: 100%;
@@ -106,7 +142,7 @@
   }
 
   .field__textarea::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--_textarea-placeholder-color);
   }
 
   .field__textarea:focus-visible {
@@ -144,7 +180,7 @@
 
   .field__counter {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
     text-align: end;
   }
@@ -167,13 +203,16 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(
+      --hx-textarea-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
     line-height: var(--hx-line-height-normal, 1.5);
   }
 

package/dist/css/hx-time-picker.css

@@ -22,11 +22,11 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
   .field__combobox {
@@ -34,9 +34,9 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -53,14 +53,14 @@
       );
   }
   .field--error .field__combobox {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
   }
   .field--error .field__combobox:focus-within {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-time-picker-error-color, var(--hx-color-error-500))
+        var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -73,14 +73,14 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
+    color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
     cursor: text;
   }
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
   .field__input:disabled {
     cursor: not-allowed;
@@ -92,13 +92,13 @@
     border: none;
     background: transparent;
     padding: 0 var(--hx-space-3, 0.75rem);
-    color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
     height: 100%;
     min-height: var(--hx-size-10, 2.5rem);
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
   }
   .field__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -112,9 +112,9 @@
     inset-inline-start: 0;
     inset-inline-end: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-time-picker-listbox-shadow,
@@ -147,23 +147,29 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-md, 1rem);
     font-family: inherit;
-    color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
+    color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__option:hover,
   .field__option--active {
-    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
-    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
+    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
+    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));
   }
   .field__option--selected {
-    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
-    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
+    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));
     font-weight: var(--hx-font-weight-medium, 500);
   }
   .field__option--selected.field__option--active {
-    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
   }
   @media (prefers-reduced-motion: reduce) {
     .field__combobox,
@@ -177,10 +183,10 @@
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted, #4a5362);
   }
   .field__error {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
   }
   @media (forced-colors: active) {
     .field__combobox {

package/dist/css/hx-toast.css

@@ -18,8 +18,8 @@
     gap: var(--hx-space-3, 0.75rem);
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0d1825));
+    color: var(--hx-toast-color, var(--hx-color-text-inverse, #ffffff));
     font-family: var(--hx-toast-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -44,23 +44,37 @@
 
   /* ─── Variant overrides ─── */
 
+  /*
+   * Toast variants paint on darker brand fills (primary-600/success-700/
+   * error-600) because the lighter -500 fills can't pass AA against white
+   * text in the precision-cool palette. The neutral-900 on-{role} tokens
+   * are tuned for the lighter -500 surfaces and would fail here (e.g.
+   * neutral-900 on primary-600 = 3.07:1), so we hold fg at neutral-0
+   * directly for primary/success/danger.
+   * - neutral-0 on primary-600 (#0F7078) = 5.39:1 — AA pass
+   * - neutral-0 on success-700 (#146831) = 6.88:1 — AA pass
+   *   (success-600 #0E8A4A on white = 4.41:1 — drifts under AA at 14px)
+   * - neutral-0 on error-600   (#C92A2A) = 5.92:1 — AA pass
+   * - neutral-900 on warning-500 (#C2711C) = 4.83:1 — AA pass
+   *   (warning stays on the lighter -500 surface so on-warning works)
+   */
   .toast--success {
-    --hx-toast-bg: var(--hx-color-success-600, #15803d);
+    --hx-toast-bg: var(--hx-color-success-700, #146831);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .toast--warning {
-    --hx-toast-bg: var(--hx-color-warning-500, #d97706);
-    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toast-bg: var(--hx-color-warning-500, #c2711c);
+    --hx-toast-color: var(--hx-color-text-on-warning, #0d1825);
   }
 
   .toast--danger {
-    --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
+    --hx-toast-bg: var(--hx-color-error-600, #c92a2a);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .toast--info {
-    --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
+    --hx-toast-bg: var(--hx-color-primary-600, #0f7078);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
 
@@ -154,6 +168,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .toast {

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

@@ -17,8 +17,8 @@
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
     border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -38,7 +38,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-toggle-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -77,49 +77,55 @@
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-toggle-button-border-color: transparent;
   }
 
+  /*
+   * secondary/ghost paint primary text on the surface (white). primary-500
+   * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to
+   * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500
+   * for the brand affordance (3:1 non-text contrast still met).
+   */
   .button--secondary {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
+    --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
   }
 
   .button--secondary:hover {
-    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);
   }
 
   .button--tertiary {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-toggle-button-border-color: transparent;
   }
 
   .button--tertiary:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   .button--ghost {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
     --hx-toggle-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   .button--outline {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);
   }
 
   .button--outline:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   /* ─── Pressed State ─── */
@@ -127,9 +133,16 @@
   /*
    * Primary: already uses solid primary bg; pressed deepens to primary-700
    * to give clear visual feedback without introducing a new color.
+   *
+   * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)
+   * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill
+   * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast
+   * precedent (commit 300e21ab0) and hx-button hover treatment.
+   * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —
+   * leave it alone.
    */
   .button--primary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-neutral-0, #ffffff)
@@ -142,44 +155,47 @@
    * so the state change is immediately legible.
    */
   .button--secondary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-0, #ffffff)
+      var(--hx-color-text-on-primary, #ffffff)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
   }
 
   /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
   .button--tertiary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1e40af)
+      var(--hx-color-primary-700, #0f6363)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
+    --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);
+    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);
   }
 
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
   .button--ghost.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1e40af)
+      var(--hx-color-primary-700, #0f6363)
     );
     --hx-toggle-button-border-color: transparent;
   }
 
   /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
   .button--outline.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
+    --hx-toggle-button-bg: var(
+      --hx-toggle-button-pressed-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-900, #0f172a)
+      var(--hx-color-text-primary, #0d1825)
     );
-    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
-    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
+    --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
+    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
   }
 
   /* ─── Disabled ─── */

package/dist/css/hx-tooltip.css

@@ -12,8 +12,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, #0d1825));
+    color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #ffffff));
     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);
@@ -39,7 +39,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, #0d1825));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -51,6 +51,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     [part='tooltip'] {

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

@@ -25,10 +25,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, #202b39));
     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, #d6dbd5));
     font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
@@ -62,18 +62,21 @@
     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, #202b39));
     cursor: pointer;
     line-height: 0;
   }
 
   .mobile-toggle:hover {
-    background: var(--hx-color-neutral-100, #f1f5f9);
+    background: var(--hx-top-nav-toggle-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
   }
 
   .mobile-toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(
+        --hx-top-nav-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -90,7 +93,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, #d6dbd5));
   }
 
   .nav__collapsible--open {
@@ -112,7 +115,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, #d6dbd5));
   }
 
   /* ─── Desktop breakpoint ─── */

package/dist/css/hx-tree-view.css

@@ -16,7 +16,7 @@
 
   .tree:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-04-23T23:22:59.629Z */
+/* index.css — generated 2026-04-25T17:19:12.155Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';