@helixui/library 3.1.0 → 3.2.0-next.76

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-neutral-300, #cbd5e1));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #8e9c98));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -53,13 +53,21 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-switch-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .switch--checked .switch__track {
-    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #429797));
+  }
+
+  .switch:not(.switch--checked) .switch__track:hover {
+    background-color: var(--hx-switch-track-hover-bg, var(--hx-color-border-strong, #8e9c98));
+  }
+
+  .switch--checked .switch__track:hover {
+    background-color: var(--hx-switch-track-checked-hover-bg, var(--hx-color-primary-600, #0f7078));
   }
 
   /* --- Thumb --- */
@@ -67,7 +75,7 @@
   .switch__thumb {
     position: absolute;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-switch-thumb-bg, var(--hx-color-surface-default, #ffffff));
     box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
     transition: transform var(--hx-transition-fast, 150ms ease);
   }
@@ -137,7 +145,7 @@
   .switch__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-switch-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
     user-select: none;
@@ -145,7 +153,7 @@
   }
 
   .switch__required-marker {
-    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -153,13 +161,13 @@
 
   .switch__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .switch__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 

package/dist/css/hx-table.css

@@ -31,7 +31,7 @@
     text-align: start;
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-table-header-color, var(--hx-color-text-strong, #202b39));
     font-size: var(--hx-font-size-md, 1rem);
   }
 
@@ -47,12 +47,12 @@
 
   /* Header background via CSS vars that cascade through display:contents */
   ::slotted(hx-thead) {
-    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
   :host([variant='striped']) ::slotted(hx-tbody) {
-    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Hover variant: set hover bg variable on direct slotted section elements */
@@ -62,7 +62,7 @@
   :host([variant='striped']) ::slotted(hx-thead),
   :host([variant='default']) ::slotted(hx-tbody),
   :host([variant='default']) ::slotted(hx-thead) {
-    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* Compact variant: reduced padding signal set on section elements that cascade to cells */
@@ -78,14 +78,14 @@
     --_hx-table-th-position: sticky;
     --_hx-table-th-top: 0;
     --_hx-table-th-z-index: 1;
-    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* ─── Focus ─── */
 
   ::slotted(:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }
 

package/dist/css/hx-tabs.css

@@ -28,7 +28,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;
   }
@@ -45,7 +45,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)
     );
   }
 
@@ -53,7 +53,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);

package/dist/css/hx-tag.css

@@ -14,15 +14,15 @@
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-tag-color, var(--hx-color-neutral-700, #334155));
+    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #ebeee9));
+    color: var(--hx-tag-color, var(--hx-color-neutral-700, #313e4b));
     font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
     line-height: var(--hx-line-height-tight, 1.25);
     white-space: nowrap;
     vertical-align: middle;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-tag-border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── Size Variants ─── */
@@ -48,33 +48,33 @@
   /* ─── Color Variants ─── */
 
   .tag--default {
-    --hx-tag-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-tag-color: var(--hx-color-neutral-700, #334155);
-    --hx-tag-border-color: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-tag-bg: var(--hx-tag-default-bg, var(--hx-color-neutral-100, #ebeee9));
+    --hx-tag-color: var(--hx-tag-default-color, var(--hx-color-neutral-700, #313e4b));
+    --hx-tag-border-color: var(--hx-tag-default-border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   .tag--primary {
-    --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
-    --hx-tag-color: var(--hx-color-primary-700, #1e40af);
-    --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
+    --hx-tag-bg: var(--hx-tag-primary-bg, var(--hx-color-primary-50, #ebf8f8));
+    --hx-tag-color: var(--hx-tag-primary-color, var(--hx-color-primary-700, #0f6363));
+    --hx-tag-border-color: var(--hx-tag-primary-border-color, var(--hx-color-primary-200, #bce1e1));
   }
 
   .tag--success {
-    --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-tag-color: var(--hx-color-success-700, #166534);
-    --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
+    --hx-tag-bg: var(--hx-tag-success-bg, var(--hx-color-success-50, #eafaec));
+    --hx-tag-color: var(--hx-tag-success-color, var(--hx-color-success-700, #146831));
+    --hx-tag-border-color: var(--hx-tag-success-border-color, var(--hx-color-success-200, #bae6c2));
   }
 
   .tag--warning {
-    --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-tag-color: var(--hx-color-warning-700, #92400e);
-    --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-tag-bg: var(--hx-tag-warning-bg, var(--hx-color-warning-50, #fff3ea));
+    --hx-tag-color: var(--hx-tag-warning-color, var(--hx-color-warning-700, #804605));
+    --hx-tag-border-color: var(--hx-tag-warning-border-color, var(--hx-color-warning-200, #facfae));
   }
 
   .tag--danger {
-    --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-tag-color: var(--hx-color-error-700, #991b1b);
-    --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-tag-bg: var(--hx-tag-danger-bg, var(--hx-color-error-50, #fff2f0));
+    --hx-tag-color: var(--hx-tag-danger-color, var(--hx-color-error-700, #a21312));
+    --hx-tag-border-color: var(--hx-tag-danger-border-color, var(--hx-color-error-200, #fccbc4));
   }
 
   /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */

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

@@ -1,6 +1,100 @@
 /* hx-text-input — extracted from Shadow DOM styles */
 :host {
     display: block;
+
+    /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
+
+    /* Surface */
+    --_text-input-bg: var(
+      --hx-text-input-bg,
+      var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
+    );
+    --_text-input-color: var(
+      --hx-text-input-color,
+      var(--hx-input-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_text-input-placeholder-color: var(
+      --hx-text-input-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
+
+    /* Border */
+    --_text-input-border-color: var(
+      --hx-text-input-border-color,
+      var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
+    );
+    --_text-input-border-color-hover: var(
+      --hx-text-input-border-color-hover,
+      var(--hx-color-border-strong, #8e9c98)
+    );
+    --_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))
+      )
+    );
+    --_text-input-border-color-invalid: var(
+      --hx-text-input-border-color-invalid,
+      var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
+    );
+    --_text-input-border-width: var(--hx-text-input-border-width, var(--hx-border-width-thin, 1px));
+    --_text-input-border-radius: var(
+      --hx-text-input-border-radius,
+      var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
+    );
+
+    /* Spacing */
+    --_text-input-padding-x: var(--hx-text-input-padding-x, var(--hx-space-3, 0.75rem));
+    --_text-input-padding-y: var(--hx-text-input-padding-y, var(--hx-space-2, 0.5rem));
+
+    /* Typography */
+    --_text-input-font-family: var(
+      --hx-text-input-font-family,
+      var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
+    );
+    --_text-input-font-size: var(--hx-text-input-font-size, var(--hx-font-size-md, 1rem));
+
+    /* Focus ring */
+    --_text-input-focus-ring-color: var(
+      --hx-text-input-focus-ring-color,
+      var(
+        --hx-input-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      )
+    );
+    --_text-input-focus-ring-width: var(
+      --hx-text-input-focus-ring-width,
+      var(--hx-focus-ring-width, 2px)
+    );
+    --_text-input-focus-ring-offset: var(
+      --hx-text-input-focus-ring-offset,
+      var(--hx-focus-ring-offset, 0px)
+    );
+
+    /* Disabled */
+    --_text-input-disabled-bg: var(
+      --hx-text-input-disabled-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
+    --_text-input-disabled-color: var(
+      --hx-text-input-disabled-color,
+      var(--hx-color-text-disabled, #8e9c98)
+    );
+
+    /* Label / help / error */
+    --_text-input-label-color: var(
+      --hx-text-input-label-color,
+      var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_text-input-help-text-color: var(
+      --hx-text-input-help-text-color,
+      var(--hx-color-text-muted, #4a5362)
+    );
+    --_text-input-error-color: var(
+      --hx-text-input-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
   }
 
   :host([disabled]) {
@@ -15,36 +109,13 @@
    * These complement the :focus-within rules on .field__input-wrapper and are
    * exposed as theming hooks for consumers who target the host element.
    */
-  :host([focused]) .field__input-wrapper {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      color-mix(
-        in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-
+  :host([focused]) .field__input-wrapper,
   :host([focused-visible]) .field__input-wrapper {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+    border-color: var(--_text-input-border-color-focus);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       color-mix(
         in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -57,7 +128,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+    font-family: var(--_text-input-font-family);
   }
 
   /* ─── Label ─── */
@@ -72,12 +143,12 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-input-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--_text-input-label-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__required-marker {
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--_text-input-error-color);
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -86,29 +157,25 @@
   .field__input-wrapper {
     display: flex;
     align-items: center;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
-    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--_text-input-border-width) solid var(--_text-input-border-color);
+    border-radius: var(--_text-input-border-radius);
+    background-color: var(--_text-input-bg);
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     overflow: hidden;
   }
 
+  .field__input-wrapper:hover {
+    border-color: var(--_text-input-border-color-hover);
+  }
+
   .field__input-wrapper:focus-within {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+    border-color: var(--_text-input-border-color-focus);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       color-mix(
         in srgb,
-        var(
-            --hx-input-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -116,16 +183,15 @@
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_text-input-border-color-invalid);
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+    border-color: var(--_text-input-border-color-invalid);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_text-input-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -136,17 +202,17 @@
   .field__suffix {
     display: flex;
     align-items: center;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
     flex-shrink: 0;
   }
 
   /* Only add padding when slot has content — avoids phantom space on empty slots */
   .field__prefix--filled {
-    padding: 0 var(--hx-space-3, 0.75rem);
+    padding: 0 var(--_text-input-padding-x);
   }
 
   .field__suffix--filled {
-    padding: 0 var(--hx-space-3, 0.75rem);
+    padding: 0 var(--_text-input-padding-x);
   }
 
   /* ─── Native Input ─── */
@@ -156,17 +222,17 @@
     border: none;
     outline: none;
     background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    padding: var(--_text-input-padding-y) var(--_text-input-padding-x);
     font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
+    font-size: var(--_text-input-font-size);
+    color: var(--_text-input-color);
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--_text-input-placeholder-color);
   }
 
   .field__input:focus-visible {
@@ -175,6 +241,12 @@
 
   .field__input:disabled {
     cursor: not-allowed;
+    background-color: var(--_text-input-disabled-bg);
+    color: var(--_text-input-disabled-color);
+  }
+
+  :host([disabled]) .field__input-wrapper {
+    background-color: var(--_text-input-disabled-bg);
   }
 
   /* ─── Size Variants ─── */
@@ -182,7 +254,7 @@
   .field--size-sm .field__input {
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     min-height: var(--hx-size-8, 2rem);
-    font-size: var(--hx-input-sm-font-size, 0.875rem);
+    font-size: var(--hx-text-input-sm-font-size, var(--hx-input-sm-font-size, 0.875rem));
   }
 
   .field--size-md .field__input {
@@ -192,20 +264,20 @@
   .field--size-lg .field__input {
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     min-height: var(--hx-size-12, 3rem);
-    font-size: var(--hx-input-lg-font-size, 1.125rem);
+    font-size: var(--hx-text-input-lg-font-size, var(--hx-input-lg-font-size, 1.125rem));
   }
 
   /* ─── Help Text & Error Messages ─── */
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--_text-input-help-text-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--_text-input-error-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -217,7 +289,13 @@
     }
   }
 
-  /* ─── High Contrast Mode (forced-colors) ─── */
+  /* ─── 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.
+   */
 
   @media (forced-colors: active) {
     .field__input-wrapper {

package/dist/css/hx-text.css

@@ -80,31 +80,33 @@
   /* ─── Colors ─── */
 
   .text--color-default {
-    --hx-text-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-text-color: var(--hx-text-default-color, var(--hx-color-neutral-900, #0d1825));
   }
 
   .text--color-subtle {
-    --hx-text-color: var(--hx-color-neutral-500, #64748b);
+    --hx-text-color: var(--hx-text-subtle-color, var(--hx-color-neutral-500, #66787b));
   }
 
   .text--color-disabled {
-    --hx-text-color: var(--hx-color-neutral-400, #94a3b8);
+    --hx-text-color: var(--hx-text-disabled-color, var(--hx-color-neutral-400, #8e9c98));
   }
 
   .text--color-inverse {
-    --hx-text-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-text-color: var(--hx-text-inverse-color, var(--hx-color-neutral-0, #ffffff));
   }
 
   .text--color-danger {
-    --hx-text-color: var(--hx-color-error-600, #b91c1c);
+    --hx-text-color: var(--hx-text-danger-color, var(--hx-color-error-600, #c92a2a));
   }
 
   .text--color-success {
-    --hx-text-color: var(--hx-color-success-600, #15803d);
+    --hx-text-color: var(--hx-text-success-color, var(--hx-color-success-700, #146831));
   }
 
   .text--color-warning {
-    --hx-text-color: var(--hx-color-warning-600, #b45309);
+    /* warning-600 (#B8650E) on white = 4.28:1 — fails AA body text in the
+       precision-cool palette. warning-700 (#804605) on white = 7.06:1 — AA pass. */
+    --hx-text-color: var(--hx-text-warning-color, var(--hx-color-warning-700, #804605));
   }
 
   /* ─── Weight Overrides ─── */