@helixui/library 3.1.0-next.72 → 3.2.0-next.100

package/dist/css/helix-forms.css

@@ -60,7 +60,7 @@
     width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     border: var(--hx-border-width-medium, 2px) solid
-      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
     background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
@@ -76,7 +76,7 @@
     outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
       var(
         --hx-checkbox-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
   }
@@ -424,10 +424,7 @@
   }
   :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-color-picker-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .trigger-swatch {
@@ -602,18 +599,11 @@
     outline: none;
   }
   .color-input:focus-visible {
-    border-color: var(
-      --hx-color-picker-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-    );
+    border-color: var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     box-shadow: 0 0 0 2px
       color-mix(
         in srgb,
-        var(
-            --hx-color-picker-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-          )
-          20%,
+        var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 20%,
         transparent
       );
   }
@@ -724,7 +714,7 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
@@ -734,14 +724,14 @@
   .field__input-wrapper:focus-within {
     border-color: var(
       --hx-combobox-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
     );
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
         var(
             --hx-combobox-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+            var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
           )
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
@@ -818,7 +808,7 @@
   }
   .field__clear-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .field__loading-indicator {
@@ -851,7 +841,7 @@
     z-index: var(--hx-z-index-dropdown, 1000);
     background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-combobox-listbox-shadow,
@@ -892,7 +882,7 @@
   .field__option--focused {
     background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
   }
   .field__option--focused.field__option--selected {
@@ -1076,7 +1066,7 @@
   }
   .field__chip-remove:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -1138,7 +1128,7 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
@@ -1150,14 +1140,14 @@
   .field__input-wrapper:focus-within {
     border-color: var(
       --hx-date-picker-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
     );
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
         var(
             --hx-date-picker-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+            var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
           )
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
@@ -1217,7 +1207,7 @@
     padding: 0 var(--hx-space-3, 0.75rem);
     border: none;
     border-left: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));
     background: transparent;
     color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
@@ -1229,13 +1219,13 @@
   .field__trigger:focus-visible {
     color: var(
       --hx-date-picker-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
     );
     background-color: color-mix(
       in srgb,
       var(
           --hx-date-picker-focus-ring-color,
-          var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+          var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
         )
         8%,
       transparent
@@ -1336,7 +1326,7 @@
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       var(
         --hx-date-picker-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     z-index: 1;
   }
@@ -1771,7 +1761,7 @@
     min-height: var(--hx-space-32, 8rem);
     padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
     border: var(--hx-border-width-thin, 1px) dashed
-      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
     background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));
     cursor: pointer;
@@ -1787,15 +1777,9 @@
 
   .dropzone:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-file-upload-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-color: var(
-      --hx-file-upload-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-500))
-    );
+    border-color: var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
   }
 
   .dropzone--drag-over {
@@ -1910,10 +1894,7 @@
 
   .file-item__remove:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-file-upload-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -2554,7 +2535,7 @@
     justify-content: center;
     position: relative;
     cursor: pointer;
-    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #8e9c98));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #66787b));
     line-height: 1;
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
@@ -2563,7 +2544,7 @@
 
   .symbol:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -2605,7 +2586,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #8e9c98));
+    color: var(--hx-rating-empty-color, var(--hx-color-border-strong, #66787b));
     /* Clip to right 50% for the empty half */
     clip-path: inset(0 0 0 50%);
   }
@@ -2673,13 +2654,13 @@
     --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #202b39));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #8e9c98));
+    --_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, #6ab1b1))
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
     );
 
     /* Error */
@@ -2892,8 +2873,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);
   }
 
@@ -3237,7 +3217,7 @@
       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, #6ab1b1))
+          var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
         ),
       var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
   }
@@ -3294,7 +3274,7 @@
     top: 0;
     width: var(--hx-border-width-thin, 1px);
     height: 100%;
-    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #8e9c98));
+    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #66787b));
     transform: translateX(-50%);
   }
 
@@ -3320,13 +3300,13 @@
   /* ─── Disabled state ─── */
 
   .slider--disabled .slider__fill {
-    background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #8e9c98));
+    background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #66787b));
   }
 
   .slider--disabled .slider__thumb-visual {
     border-color: var(
       --hx-slider-disabled-thumb-border-color,
-      var(--hx-color-border-strong, #8e9c98)
+      var(--hx-color-border-strong, #66787b)
     );
   }
 /* ── hx-switch ── */
@@ -3372,7 +3352,7 @@
     border: none;
     padding: 0;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #8e9c98));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #66787b));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -3384,7 +3364,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-switch-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -3394,7 +3374,7 @@
   }
 
   .switch:not(.switch--checked) .switch__track:hover {
-    background-color: var(--hx-switch-track-hover-bg, var(--hx-color-border-strong, #8e9c98));
+    background-color: var(--hx-switch-track-hover-bg, var(--hx-color-border-strong, #66787b));
   }
 
   .switch--checked .switch__track:hover {
@@ -3591,17 +3571,17 @@
     /* Border */
     --_text-input-border-color: var(
       --hx-text-input-border-color,
-      var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
+      var(--hx-input-border-color, var(--hx-color-border-strong, #66787b))
     );
     --_text-input-border-color-hover: var(
       --hx-text-input-border-color-hover,
-      var(--hx-color-border-strong, #8e9c98)
+      var(--hx-color-border-strong, #66787b)
     );
     --_text-input-border-color-focus: var(
       --hx-text-input-border-color-focus,
       var(
         --hx-input-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       )
     );
     --_text-input-border-color-invalid: var(
@@ -3630,7 +3610,7 @@
       --hx-text-input-focus-ring-color,
       var(
         --hx-input-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       )
     );
     --_text-input-focus-ring-width: var(
@@ -3861,10 +3841,10 @@
 
   /* ─── High Contrast Mode (forced-colors) ───
    *
-   * Component-specific overrides that complement the shared forcedColorsField
-   * mixin (composed in static styles). The mixin handles the input/wrapper
-   * core; the rules below extend it to the label / error / help-text /
-   * disabled-host surfaces unique to hx-text-input.
+   * Bespoke block — sole owner of forced-colors deference for hx-text-input.
+   * Covers wrapper/input/placeholder/focus/disabled/error/label/help-text;
+   * strictly more than forcedColorsField. The mixin is intentionally NOT
+   * composed (XOR rule — see styles/forced-colors.ts COMPOSITION RULES).
    */
 
   @media (forced-colors: active) {
@@ -3937,13 +3917,13 @@
     );
     --_textarea-border-color: var(
       --hx-textarea-border-color,
-      var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
+      var(--hx-input-border-color, var(--hx-color-border-strong, #66787b))
     );
     --_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))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       )
     );
     --_textarea-border-color-invalid: var(
@@ -4233,7 +4213,7 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
     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-surface-default, #ffffff));
     transition:
@@ -4297,7 +4277,7 @@
     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-border-strong, #8e9c98));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
   }
   .field__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -4313,7 +4293,7 @@
     z-index: var(--hx-z-index-dropdown, 1000);
     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-border-strong, #8e9c98));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-time-picker-listbox-shadow,
@@ -4468,7 +4448,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, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -4551,7 +4531,7 @@
   .button--outline {
     --hx-toggle-button-bg: transparent;
     --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
-    --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-toggle-button-border-color: var(--hx-color-border-strong, #66787b);
   }
 
   .button--outline:hover {
@@ -4600,8 +4580,8 @@
       --hx-toggle-button-pressed-color,
       var(--hx-color-primary-700, #0f6363)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);
+    --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
+    box-shadow: inset 0 0 0 1px var(--hx-color-primary-600, #0f7078);
   }
 
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */

package/dist/css/helix-layout.css

@@ -222,10 +222,7 @@ export const helixGridItemStyles = css`
 
   .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, #429797))
-      );
+      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);
   }
@@ -287,10 +284,7 @@ export const helixGridItemStyles = css`
 
   .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, #429797))
-      );
+      var(--hx-split-panel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/helix-media.css

@@ -64,7 +64,7 @@
 
   .nav-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -106,7 +106,7 @@
 
   .play-pause-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -178,7 +178,7 @@
 
   .pagination-item:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-full, 9999px);
   }

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,
@@ -835,10 +826,10 @@
 
   .side-nav__toggle:hover {
     background-color: var(
-      --hx-overlay-white-10,
+      --hx-color-border-on-dark-subtle,
       rgba(255, 255, 255, 0.1)
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-text-inverse, #ebeee9);
+    color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -849,10 +840,7 @@
 
   .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 +886,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 +1130,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);
   }
 
@@ -1304,7 +1297,7 @@
 
   .tree:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }