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

package/dist/css/helix-core.css

@@ -395,7 +395,7 @@
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));
+      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -509,7 +509,7 @@
   .button--outline {
     --hx-button-bg: transparent;
     --hx-button-color: var(--hx-color-text-primary, #0d1825);
-    --hx-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-button-border-color: var(--hx-color-border-strong, #66787b);
   }
 
   .button--outline:hover {
@@ -602,9 +602,56 @@
     );
   }
 
-  /* Primary inverted — slight transparent white overlay on hover */
-  :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1);
+  /* Primary inverted — resting bg routes through action.primary.bg-inverted-rest
+     so dark mode can flip the fill to primary-600. surface.inverse becomes light
+     (#EBEEE9) in dark mode; primary-500 on #EBEEE9 = 2.94:1 (sub-3:1 UI floor
+     fail for the inverted-button boundary). primary-600 on #EBEEE9 = 4.97:1
+     (AA pass). Light mode tracks action.primary.bg (primary-500, 5.20:1 on
+     dark surface.inverse). */
+  :host([inverted]) .button--primary {
+    --hx-button-bg: var(--hx-color-action-primary-bg-inverted-rest, #429797);
+  }
+
+  /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover
+     (primary-400, light teal). The base :host([inverted]) .button rule binds
+     color to text.inverse, which flips by mode (neutral-0 in light, neutral-900
+     in dark). On a permanent light-teal fill, white text drops to 2.4:1 in
+     light mode (AA fail). Pin color to text.on-primary (neutral-900, no
+     dark-mode flip) for both hover and active so the foreground is dark in
+     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).
+     Pressed === hover visually in inverted mode is acceptable UX (the
+     transient absence of pointer over the button signals release).
+     The fallback chain wraps --hx-button-active-bg (highest precedence) and
+     --hx-button-hover-bg so consumer overrides on either prop apply under
+     :host([inverted]) — the two share a paint here, so either knob is
+     honored, with active-bg winning when both are set. */
+  :host([inverted]) .button--primary:hover,
+  :host([inverted]) .button--primary:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))
+    );
+    color: var(
+      --hx-button-inverted-primary-interactive-color,
+      var(--hx-color-text-on-primary, #0d1825)
+    );
+  }
+
+  /* Danger inverted — sister to primary. Hover/pressed lift to
+     action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground
+     contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);
+     pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both
+     modes. Same active-bg → hover-bg → semantic fallback chain as primary. */
+  :host([inverted]) .button--danger:hover,
+  :host([inverted]) .button--danger:active {
+    --hx-button-bg: var(
+      --hx-button-active-bg,
+      var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))
+    );
+    color: var(
+      --hx-button-inverted-danger-interactive-color,
+      var(--hx-color-text-on-error, #0d1825)
+    );
   }
 
   /* Secondary inverted — white border and translucent hover fill */
@@ -913,10 +960,7 @@
 
   .card--interactive:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-card-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -1222,10 +1266,7 @@
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-icon-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -1295,7 +1336,7 @@
   .button--tertiary {
     --hx-icon-button-bg: transparent;
     --hx-icon-button-color: var(--hx-color-text-strong, #202b39);
-    --hx-icon-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-icon-button-border-color: var(--hx-color-border-strong, #66787b);
   }
 
   .button--tertiary:hover {
@@ -1470,7 +1511,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-link-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);
     border-radius: var(--hx-border-radius-sm, 0.25rem);

package/dist/css/helix-data.css

@@ -80,7 +80,7 @@
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #66787b);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
     background-color: var(--hx-color-surface-inverse, #0d1825);
@@ -106,7 +106,7 @@
 
   .code-snippet__copy-button: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);
   }
 
@@ -125,7 +125,7 @@
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     border: none;
-    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #8e9c98);
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-strong, #66787b);
     /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
     background-color: var(--hx-color-surface-inverse, #0d1825);
     color: var(--hx-color-text-inverse, #ffffff);
@@ -147,7 +147,7 @@
 
   .code-snippet__expand-button: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);
   }
 
@@ -301,10 +301,7 @@
 
   .sort-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-data-table-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-data-table-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -406,10 +403,7 @@
   [part~='td']:focus-visible,
   [part~='th']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-data-table-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-data-table-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, -2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -679,8 +673,7 @@ export const helixStructuredListRowStyles = css`
   /* ─── 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/helix-feedback.css

@@ -162,7 +162,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-alert-close-btn-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);
     opacity: 1;
@@ -338,7 +338,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-banner-action-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);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -382,7 +382,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-banner-close-btn-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);
     opacity: 1;
@@ -481,8 +481,7 @@
   }
 
   .meter: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/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
@@ -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,
@@ -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;
@@ -2554,7 +2544,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 +2553,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 +2595,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 +2663,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 */
@@ -3237,7 +3227,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 +3284,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 +3310,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 +3362,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 +3374,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 +3384,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 +3581,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 +3620,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(
@@ -3937,13 +3927,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 +4223,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 +4287,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 +4303,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 +4458,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 +4541,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 +4590,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);
   }