@helixui/library 3.1.0 → 3.2.0

package/dist/css/helix-layout.css

@@ -132,8 +132,11 @@ 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-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;
   }
 
@@ -221,7 +224,7 @@ export const helixGridItemStyles = css`
     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-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);
@@ -260,8 +263,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%;
@@ -286,7 +289,7 @@ export const helixGridItemStyles = css`
     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-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }

package/dist/css/helix-media.css

@@ -40,10 +40,11 @@
     /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-carousel-nav-btn-border-color, var(--hx-color-neutral-200, #d6dbd5));
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-0, #ffffff);
-    color: var(--hx-color-neutral-700, #334155);
+    background: var(--hx-carousel-nav-btn-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-carousel-nav-btn-color, var(--hx-color-neutral-700, #313e4b));
     cursor: pointer;
     padding: 0;
     transition:
@@ -54,8 +55,11 @@
   }
 
   .nav-btn:hover:not([disabled]) {
-    background: var(--hx-color-neutral-50, #f8fafc);
-    border-color: var(--hx-color-neutral-400, #94a3b8);
+    background: var(--hx-carousel-nav-btn-hover-bg, var(--hx-color-neutral-50, #f5f8f3));
+    border-color: var(
+      --hx-carousel-nav-btn-hover-border-color,
+      var(--hx-color-neutral-400, #8e9c98)
+    );
   }
 
   .nav-btn:focus-visible {
@@ -88,7 +92,7 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-carousel-play-pause-color, var(--hx-color-neutral-500, #66787b));
     cursor: pointer;
     padding: 0;
     font-size: var(--hx-font-size-sm, 0.875rem);
@@ -97,7 +101,7 @@
   }
 
   .play-pause-btn:hover {
-    background: var(--hx-color-neutral-100, #f1f5f9);
+    background: var(--hx-carousel-play-pause-hover-bg, var(--hx-color-neutral-100, #ebeee9));
   }
 
   .play-pause-btn:focus-visible {
@@ -160,7 +164,7 @@
     width: var(--hx-carousel-pagination-dot-size, 0.5rem);
     height: var(--hx-carousel-pagination-dot-size, 0.5rem);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-300, #cbd5e1);
+    background: var(--hx-carousel-pagination-dot-bg, var(--hx-color-neutral-300, #b6bfb9));
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
       transform var(--hx-transition-fast, 150ms ease);
@@ -168,7 +172,7 @@
 
   .pagination-item[aria-current='true'] .pagination-dot,
   .pagination-item.is-active .pagination-dot {
-    background: var(--hx-color-primary-600, #1d4ed8);
+    background: var(--hx-carousel-pagination-dot-active-bg, var(--hx-color-primary-600, #0f7078));
     transform: scale(1.25);
   }
 

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, #d6dbd5));
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-shadow,
@@ -109,8 +109,8 @@
 
   [part='nav'] {
     position: relative;
-    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0d1825));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));
     padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
   }
 
@@ -124,19 +124,22 @@
     background: transparent;
     border: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms) ease;
     line-height: 0;
   }
 
   [part='toggle']:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));
   }
 
   [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)));
+      var(
+        --hx-nav-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -166,7 +169,7 @@
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #ebeee9));
     text-decoration: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
     border: none;
@@ -183,18 +186,21 @@
   }
 
   .nav__link:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));
     color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
   }
 
   .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)));
+      var(
+        --hx-nav-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .nav__link--active {
-    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #1d4ed8));
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #0f7078));
     color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -219,7 +225,7 @@
     list-style: none;
     margin: 0;
     padding: var(--hx-space-1, 0.25rem) 0;
-    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #202b39));
     border-radius: var(--hx-border-radius-md, 0.375rem);
     box-shadow: var(
       --hx-nav-shadow,
@@ -273,7 +279,7 @@
   :host([orientation='vertical']) .nav__submenu .nav__link {
     padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #b6bfb9));
   }
 
   /* ─── Mobile Responsive ─── */
@@ -371,7 +377,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, #313e4b));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -385,17 +391,23 @@
     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))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(
+      --hx-overflow-menu-trigger-hover-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
   }
 
   .trigger--open {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(
+      --hx-overflow-menu-trigger-open-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
   }
 
   /* ─── Size Variants ─── */
@@ -428,8 +440,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, #d6dbd5));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -454,7 +466,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-overflow-menu-item-color, var(--hx-color-text-primary, #0d1825));
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -463,7 +475,10 @@
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-neutral-50, #f8fafc);
+    background-color: var(
+      --hx-overflow-menu-item-hover-bg,
+      var(--hx-color-surface-raised, #f5f8f3)
+    );
   }
 
   ::slotted([role='menuitem']:focus-visible),
@@ -472,7 +487,7 @@
     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))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: 0;
   }
@@ -555,10 +570,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, #66787b));
     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, #0d1825));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -571,23 +586,26 @@
   }
 
   .button:hover:not(:disabled) {
-    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
-    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
+    background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #429797));
   }
 
   .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)));
+      var(
+        --hx-pagination-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .button[aria-current='page'] {
-    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb));
+    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797));
     border-color: var(
       --hx-pagination-active-border-color,
-      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
+      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797))
     );
-    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 +622,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, #4a5362));
     font-size: var(--hx-font-size-sm, 0.875rem);
     user-select: none;
   }
@@ -625,7 +643,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-pagination-page-size-label-color, var(--hx-color-text-muted, #4a5362));
     white-space: nowrap;
   }
 
@@ -633,10 +651,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, #66787b));
     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, #0d1825));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -644,7 +662,10 @@
 
   .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)));
+      var(
+        --hx-pagination-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -717,8 +738,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, #ebeee9));
   }
 
   * {
@@ -732,12 +753,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, #0d1825));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ebeee9));
     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, #313e4b));
   }
 
   /* ─── Collapsed State ─── */
@@ -755,7 +776,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, #313e4b));
     overflow: hidden;
   }
 
@@ -782,7 +803,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, #313e4b));
     overflow: hidden;
   }
 
@@ -805,7 +826,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, #b6bfb9));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -817,7 +838,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, #ebeee9);
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -828,7 +849,10 @@
 
   .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, var(--hx-color-primary-400, #6ab1b1))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -977,7 +1001,7 @@
     flex-wrap: nowrap;
     gap: 0;
     border-bottom: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));
     overflow-x: auto;
     scrollbar-width: none;
   }
@@ -994,7 +1018,7 @@
     --_tab-indicator-bottom-color: transparent;
     --_tab-indicator-end-color: var(
       --hx-tabs-indicator-color,
-      var(--hx-color-primary-500, #2563eb)
+      var(--hx-color-primary-500, #429797)
     );
   }
 
@@ -1002,7 +1026,7 @@
     flex-direction: column;
     border-bottom: none;
     border-inline-end: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));
     overflow-x: visible;
     overflow-y: auto;
     min-width: var(--hx-tabs-vertical-width, 12rem);
@@ -1062,10 +1086,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));
   }
 
@@ -1099,18 +1123,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);
   }
 
@@ -1127,7 +1154,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 {
@@ -1149,7 +1176,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 ─── */
@@ -1277,7 +1304,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);
   }