@helixui/library 3.2.0-next.91 → 3.2.0-next.94

package/dist/css/hx-rating.css

@@ -33,7 +33,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);
@@ -42,7 +42,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);
   }
@@ -84,7 +84,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%);
   }

package/dist/css/hx-select.css

@@ -15,13 +15,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 */

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

@@ -27,7 +27,7 @@
     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, #8e9c98));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
   }
 
   /* ─── Collapsed State ─── */
@@ -45,7 +45,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-border-strong, #8e9c98));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
     overflow: hidden;
   }
 
@@ -72,7 +72,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-border-strong, #8e9c98));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
     overflow: hidden;
   }
 
@@ -118,7 +118,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, #6ab1b1));
+      var(--hx-side-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/hx-slider.css

@@ -201,7 +201,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)));
   }
@@ -258,7 +258,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%);
   }
 
@@ -284,12 +284,12 @@
   /* ─── 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)
     );
   }

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

@@ -50,7 +50,7 @@
     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, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -78,7 +78,7 @@
     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, #6ab1b1));
+      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, #429797));
@@ -95,7 +95,7 @@
     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, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -172,7 +172,7 @@
     --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, #6ab1b1);
+    --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);
   }
 
   /* primary:hover — replace the universal brightness(0.9) filter (which would
@@ -259,7 +259,7 @@
   .split-button--outline .split-button__trigger {
     --hx-split-button-bg: transparent;
     --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
-    --hx-split-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #66787b);
     --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 

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

@@ -92,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, #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);
   }
@@ -157,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, #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/hx-switch.css

@@ -41,7 +41,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;
@@ -53,7 +53,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);
   }
@@ -63,7 +63,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 {

package/dist/css/hx-table.css

@@ -84,8 +84,7 @@
   /* ─── Focus ─── */
 
   ::slotted(:focus-visible) {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }
 

package/dist/css/hx-text-input.css

@@ -21,17 +21,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(
@@ -60,7 +60,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(

package/dist/css/hx-textarea.css

@@ -13,13 +13,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(

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

@@ -34,7 +34,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:
@@ -98,7 +98,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
@@ -114,7 +114,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,

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

@@ -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, #6ab1b1))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -121,7 +121,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 {
@@ -170,8 +170,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/hx-top-nav.css

@@ -73,10 +73,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);
   }
 

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, #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);
   }

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-04-26T02:36:59.940Z */
+/* index.css — generated 2026-04-26T08:10:08.629Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';

package/dist/css/manifest.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-04-26T02:36:59.939Z",
+  "generated": "2026-04-26T08:10:08.628Z",
   "components": [
     {
       "name": "hx-accordion",
@@ -62,7 +62,7 @@
         "--hx-color-info-50",
         "--hx-color-info-500",
         "--hx-color-info-800",
-        "--hx-color-primary-400",
+        "--hx-color-primary-600",
         "--hx-color-success-200",
         "--hx-color-success-50",
         "--hx-color-success-500",
@@ -209,7 +209,7 @@
         "--hx-color-info-50",
         "--hx-color-info-500",
         "--hx-color-info-800",
-        "--hx-color-primary-400",
+        "--hx-color-primary-600",
         "--hx-color-success-200",
         "--hx-color-success-50",
         "--hx-color-success-500",
@@ -271,6 +271,7 @@
         "--hx-color-action-primary-bg-active",
         "--hx-color-action-primary-bg-hover",
         "--hx-color-action-primary-bg-inverted-hover",
+        "--hx-color-action-primary-bg-inverted-rest",
         "--hx-color-action-secondary-bg-hover",
         "--hx-color-action-secondary-border",
         "--hx-color-action-secondary-fg",
@@ -339,6 +340,7 @@
         "--hx-card-color",
         "--hx-card-featured-border-color",
         "--hx-card-featured-border-width",
+        "--hx-card-focus-ring-color",
         "--hx-card-font-family",
         "--hx-card-gap",
         "--hx-card-image-aspect-ratio",
@@ -433,8 +435,8 @@
         "--hx-color-border-strong",
         "--hx-color-error-500",
         "--hx-color-error-text",
-        "--hx-color-primary-400",
         "--hx-color-primary-500",
+        "--hx-color-primary-600",
         "--hx-color-surface-default",
         "--hx-color-text-muted",
         "--hx-color-text-on-primary",
@@ -511,7 +513,6 @@
         "--hx-color-error-700",
         "--hx-color-error-800",
         "--hx-color-error-900",
-        "--hx-color-focus",
         "--hx-color-info-200",
         "--hx-color-info-50",
         "--hx-color-info-500",
@@ -561,7 +562,7 @@
         "--hx-code-snippet-tab-size",
         "--hx-color-border-default",
         "--hx-color-border-strong",
-        "--hx-color-primary-400",
+        "--hx-color-primary-600",
         "--hx-color-surface-inverse",
         "--hx-color-surface-sunken",
         "--hx-color-text-inverse",
@@ -602,6 +603,7 @@
         "--hx-color-neutral-600",
         "--hx-color-neutral-700",
         "--hx-color-neutral-900",
+        "--hx-color-picker-focus-ring-color",
         "--hx-color-picker-grid-height",
         "--hx-color-picker-panel-shadow",
         "--hx-color-picker-swatch-border",
@@ -642,9 +644,9 @@
         "--hx-color-neutral-900",
         "--hx-color-primary-100",
         "--hx-color-primary-200",
-        "--hx-color-primary-400",
         "--hx-color-primary-50",
         "--hx-color-primary-500",
+        "--hx-color-primary-600",
         "--hx-color-primary-800",
         "--hx-color-surface-default",
         "--hx-color-text-muted",
@@ -788,6 +790,7 @@
         "--hx-data-table-cell-color",
         "--hx-data-table-checkbox-accent-color",
         "--hx-data-table-empty-color",
+        "--hx-data-table-focus-ring-color",
         "--hx-data-table-font-family",
         "--hx-data-table-header-bg",
         "--hx-data-table-header-color",
@@ -827,7 +830,6 @@
         "--hx-color-error-500",
         "--hx-color-error-text",
         "--hx-color-neutral-900",
-        "--hx-color-primary-400",
         "--hx-color-primary-500",
         "--hx-color-primary-600",
         "--hx-color-surface-default",
@@ -888,7 +890,6 @@
         "--hx-border-radius-sm",
         "--hx-border-width-thin",
         "--hx-color-border-default",
-        "--hx-color-primary-500",
         "--hx-color-surface-default",
         "--hx-color-surface-overlay",
         "--hx-color-surface-sunken",
@@ -900,6 +901,7 @@
         "--hx-dialog-body-padding",
         "--hx-dialog-border-radius",
         "--hx-dialog-close-btn-color",
+        "--hx-dialog-close-btn-focus-ring-color",
         "--hx-dialog-close-btn-hover-bg",
         "--hx-dialog-close-btn-hover-color",
         "--hx-dialog-color",
@@ -959,7 +961,6 @@
         "--hx-border-radius-md",
         "--hx-border-width-thin",
         "--hx-color-border-default",
-        "--hx-color-primary-500",
         "--hx-color-surface-default",
         "--hx-color-surface-overlay",
         "--hx-color-surface-sunken",
@@ -969,6 +970,7 @@
         "--hx-drawer-bg",
         "--hx-drawer-body-padding",
         "--hx-drawer-close-btn-color",
+        "--hx-drawer-close-btn-focus-ring-color",
         "--hx-drawer-close-btn-hover-bg",
         "--hx-drawer-close-btn-hover-color",
         "--hx-drawer-color",
@@ -1188,6 +1190,7 @@
         "--hx-icon-button-border-color",
         "--hx-icon-button-border-radius",
         "--hx-icon-button-color",
+        "--hx-icon-button-focus-ring-color",
         "--hx-icon-button-size",
         "--hx-opacity-disabled",
         "--hx-size-10",
@@ -1225,7 +1228,6 @@
         "--hx-border-radius-sm",
         "--hx-color-error-700",
         "--hx-color-error-text",
-        "--hx-color-primary-400",
         "--hx-color-primary-600",
         "--hx-color-primary-700",
         "--hx-color-primary-800",
@@ -1327,7 +1329,6 @@
         "--hx-color-neutral-700",
         "--hx-color-neutral-800",
         "--hx-color-neutral-900",
-        "--hx-color-primary-500",
         "--hx-color-primary-600",
         "--hx-focus-ring-color",
         "--hx-focus-ring-offset",
@@ -1340,6 +1341,7 @@
         "--hx-nav-bg",
         "--hx-nav-border-radius",
         "--hx-nav-color",
+        "--hx-nav-focus-ring-color",
         "--hx-nav-font-family",
         "--hx-nav-font-size",
         "--hx-nav-item-padding",
@@ -1416,7 +1418,6 @@
         "--hx-border-radius-md",
         "--hx-border-width-thin",
         "--hx-color-border-default",
-        "--hx-color-primary-500",
         "--hx-color-surface-default",
         "--hx-color-surface-raised",
         "--hx-color-surface-sunken",
@@ -1430,6 +1431,7 @@
         "--hx-font-size-sm",
         "--hx-opacity-disabled",
         "--hx-overflow-menu-button-color",
+        "--hx-overflow-menu-focus-ring-color",
         "--hx-overflow-menu-item-color",
         "--hx-overflow-menu-panel-bg",
         "--hx-overflow-menu-panel-border",
@@ -1474,6 +1476,7 @@
         "--hx-pagination-button-size",
         "--hx-pagination-color",
         "--hx-pagination-ellipsis-color",
+        "--hx-pagination-focus-ring-color",
         "--hx-pagination-font-family",
         "--hx-pagination-gap",
         "--hx-pagination-hover-bg",
@@ -1541,6 +1544,7 @@
         "--hx-opacity-50",
         "--hx-opacity-90",
         "--hx-phi-field-disabled-opacity",
+        "--hx-phi-field-focus-ring-color",
         "--hx-phi-field-font-family",
         "--hx-phi-field-letter-spacing",
         "--hx-phi-field-masked-color",
@@ -1557,7 +1561,6 @@
       "tokens": [
         "--hx-border-radius-md",
         "--hx-color-border-default",
-        "--hx-color-primary-500",
         "--hx-color-surface-default",
         "--hx-color-text-primary",
         "--hx-focus-ring-color",
@@ -1572,6 +1575,7 @@
         "--hx-popover-border-color",
         "--hx-popover-border-radius",
         "--hx-popover-color",
+        "--hx-popover-focus-ring-color",
         "--hx-popover-font-family",
         "--hx-popover-font-size",
         "--hx-popover-max-width",
@@ -1685,7 +1689,7 @@
       "tokens": [
         "--hx-border-radius-sm",
         "--hx-color-border-strong",
-        "--hx-color-primary-400",
+        "--hx-color-primary-600",
         "--hx-color-warning-300",
         "--hx-color-warning-400",
         "--hx-focus-ring-color",
@@ -1713,9 +1717,9 @@
         "--hx-color-error-500",
         "--hx-color-error-text",
         "--hx-color-primary-100",
-        "--hx-color-primary-400",
         "--hx-color-primary-50",
         "--hx-color-primary-500",
+        "--hx-color-primary-600",
         "--hx-color-surface-default",
         "--hx-color-text-muted",
         "--hx-color-text-placeholder",
@@ -1820,8 +1824,8 @@
         "--hx-border-width-thin",
         "--hx-color-border-default",
         "--hx-color-border-strong",
-        "--hx-color-primary-400",
         "--hx-color-primary-500",
+        "--hx-color-primary-600",
         "--hx-color-surface-default",
         "--hx-color-text-muted",
         "--hx-color-text-secondary",
@@ -1901,10 +1905,10 @@
         "--hx-color-neutral-0",
         "--hx-color-primary-200",
         "--hx-color-primary-300",
-        "--hx-color-primary-400",
         "--hx-color-primary-50",
         "--hx-color-primary-500",
         "--hx-color-primary-600",
+        "--hx-color-primary-900",
         "--hx-color-surface-default",
         "--hx-color-surface-raised",
         "--hx-color-surface-sunken",
@@ -1962,6 +1966,7 @@
         "--hx-split-panel-btn-icon-size",
         "--hx-split-panel-divider-color",
         "--hx-split-panel-divider-size",
+        "--hx-split-panel-focus-ring-color",
         "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
@@ -2108,7 +2113,6 @@
         "--hx-border-radius-full",
         "--hx-color-border-strong",
         "--hx-color-error-text",
-        "--hx-color-primary-400",
         "--hx-color-primary-500",
         "--hx-color-primary-600",
         "--hx-color-surface-default",
@@ -2163,7 +2167,6 @@
       "name": "hx-table",
       "file": "hx-table.css",
       "tokens": [
-        "--hx-color-primary-500",
         "--hx-color-surface-raised",
         "--hx-color-text-strong",
         "--hx-focus-ring-color",
@@ -2314,7 +2317,7 @@
         "--hx-color-border-strong",
         "--hx-color-error-600",
         "--hx-color-error-text",
-        "--hx-color-primary-400",
+        "--hx-color-primary-600",
         "--hx-color-surface-default",
         "--hx-color-surface-sunken",
         "--hx-color-text-disabled",
@@ -2367,7 +2370,7 @@
         "--hx-color-border-strong",
         "--hx-color-error-600",
         "--hx-color-error-text",
-        "--hx-color-primary-400",
+        "--hx-color-primary-600",
         "--hx-color-surface-default",
         "--hx-color-text-muted",
         "--hx-color-text-placeholder",
@@ -2509,7 +2512,6 @@
         "--hx-color-neutral-0",
         "--hx-color-neutral-500",
         "--hx-color-primary-100",
-        "--hx-color-primary-400",
         "--hx-color-primary-50",
         "--hx-color-primary-500",
         "--hx-color-primary-600",
@@ -2584,7 +2586,6 @@
         "--hx-border-radius-sm",
         "--hx-border-width-thin",
         "--hx-color-border-default",
-        "--hx-color-primary-500",
         "--hx-color-surface-default",
         "--hx-color-surface-sunken",
         "--hx-color-text-strong",
@@ -2602,6 +2603,7 @@
         "--hx-top-nav-bg",
         "--hx-top-nav-border-color",
         "--hx-top-nav-color",
+        "--hx-top-nav-focus-ring-color",
         "--hx-top-nav-font-family",
         "--hx-top-nav-height",
         "--hx-top-nav-padding-x",
@@ -2616,7 +2618,7 @@
       "file": "hx-tree-view.css",
       "tokens": [
         "--hx-border-radius-sm",
-        "--hx-color-primary-400",
+        "--hx-color-primary-600",
         "--hx-focus-ring-color",
         "--hx-focus-ring-offset",
         "--hx-focus-ring-width",