@helixui/library 3.1.0 → 3.2.0-next.102

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

@@ -31,12 +31,12 @@
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
   }
 
   .field__required-marker {
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -46,9 +46,9 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
     border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
     transition:
       border-color var(--hx-transition-fast),
       box-shadow var(--hx-transition-fast);
@@ -72,18 +72,18 @@
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     /* Fallback for Safari < 16.2 (no color-mix support) */
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
-      var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+      var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
       color-mix(
         in srgb,
-        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity) * 100%),
         transparent
       );
@@ -96,7 +96,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-3);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     flex-shrink: 0;
   }
 
@@ -108,7 +108,7 @@
     outline: none;
     background: transparent;
     font-family: inherit;
-    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    color: var(--hx-number-input-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     width: 100%;
     /* Size: md (default) */
@@ -118,7 +118,7 @@
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder);
   }
 
   .field__input:disabled {
@@ -157,7 +157,7 @@
     flex-direction: column;
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn {
@@ -167,7 +167,7 @@
     background: transparent;
     border: none;
     cursor: pointer;
-    color: var(--hx-color-neutral-600);
+    color: var(--hx-color-text-secondary);
     padding: 0;
     flex: 1;
     min-width: var(--hx-size-8);
@@ -179,12 +179,12 @@
 
   .field__stepper-btn:not(:last-child) {
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn:hover:not(:disabled) {
-    background-color: var(--hx-color-neutral-50);
-    color: var(--hx-color-neutral-800);
+    background-color: var(--hx-color-surface-raised);
+    color: var(--hx-color-text-strong);
   }
 
   /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -223,13 +223,13 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     line-height: var(--hx-line-height-normal);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal);
   }
 

package/dist/css/hx-overflow-menu.css

@@ -18,7 +18,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),
@@ -30,19 +30,22 @@
 
   .trigger:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     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 ─── */
@@ -75,8 +78,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)
@@ -101,7 +104,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;
@@ -110,17 +113,17 @@
   ::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),
   ::slotted([role='menuitemcheckbox']:focus-visible),
   ::slotted([role='menuitemradio']:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
-      );
+      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: 0;
   }
 

package/dist/css/hx-pagination.css

@@ -38,10 +38,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;
@@ -54,23 +54,23 @@
   }
 
   .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, #0f7078));
     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;
@@ -87,7 +87,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;
   }
@@ -108,7 +108,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;
   }
 
@@ -116,10 +116,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;
@@ -127,7 +127,7 @@
 
   .page-size-select:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/hx-patient-banner.css

@@ -4,20 +4,22 @@
     width: 100%;
 
     /* ─── Private token vars (3-tier cascade) ─── */
-    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f8fafc));
-    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f5f8f3));
+    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #d6dbd5));
     --_padding: var(
       --hx-patient-banner-padding,
       var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)
     );
     --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));
     --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));
-    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #64748b));
+    /* neutral-500 (#66787B) on neutral-50 (#F5F8F3) = 4.32:1 — fails AA body text.
+       text-muted resolves to neutral-600 (#4A5362) = 7.36:1 — AA pass everywhere. */
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-text-muted, #4a5362));
     --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));
-    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #0f172a));
+    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #0d1825));
     --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));
     --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));
-    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e2e8f0));
+    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   * {
@@ -96,10 +98,13 @@
   /* Visual indicator when Joint Commission two-identifier rule is not met. */
 
   :host([aria-invalid='true']) .banner {
-    border-bottom-color: var(--hx-color-error-400, #f87171);
-    background-color: var(--hx-color-error-50, #fef2f2);
+    border-bottom-color: var(
+      --hx-patient-banner-invalid-border-color,
+      var(--hx-color-error-400, #fc7264)
+    );
+    background-color: var(--hx-patient-banner-invalid-bg, var(--hx-color-error-50, #fff2f0));
     /* Darken label color to maintain 4.5:1 contrast on error-50 background. */
-    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #334155));
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #313e4b));
   }
 
   :host([aria-invalid='true']) .banner::before {
@@ -110,7 +115,10 @@
     top: 0;
     bottom: 0;
     width: var(--hx-border-width-thick, 4px);
-    background-color: var(--hx-color-error-500, #dc2626);
+    background-color: var(
+      --hx-patient-banner-invalid-accent-color,
+      var(--hx-color-error-500, #e5493e)
+    );
     border-radius: 0;
   }
 

package/dist/css/hx-phi-field.css

@@ -17,12 +17,12 @@
   .phi-field__value--masked {
     user-select: none;
     -webkit-user-select: none;
-    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-phi-field-masked-color, var(--hx-color-text-muted, #4a5362));
     letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
   }
 
   .phi-field__value--revealed {
-    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-phi-field-value-color, var(--hx-color-text-primary, #0d1825));
   }
 
   /* ─── Screen Reader Status ─── */
@@ -50,7 +50,7 @@
     padding: var(--hx-space-1, 0.25rem);
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #429797));
     cursor: pointer;
     line-height: 1;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -58,10 +58,7 @@
 
   .phi-field__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-phi-field-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb))
-      );
+      var(--hx-phi-field-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/hx-popover.css

@@ -14,12 +14,12 @@
     z-index: var(--hx-popover-z-index, 9999);
     max-width: var(--hx-popover-max-width, 320px);
     padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
-    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-popover-color, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-popover-color, var(--hx-color-text-primary, #0d1825));
     font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-normal, 1.5);
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-popover-shadow,
@@ -40,7 +40,7 @@
 
   [part='body']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -48,8 +48,8 @@
     position: absolute;
     width: var(--hx-popover-arrow-size, 10px);
     height: var(--hx-popover-arrow-size, 10px);
-    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #d6dbd5));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -61,6 +61,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     [part='body'] {

package/dist/css/hx-progress-bar.css

@@ -25,7 +25,7 @@
     font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-tight, 1.25);
   }
 
@@ -33,7 +33,7 @@
     position: relative;
     overflow: hidden;
     border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
-    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
+    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken, #ebeee9));
     width: 100%;
   }
 
@@ -55,7 +55,7 @@
     height: 100%;
     width: 100%;
     border-radius: inherit;
-    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));
+    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));
     transform-origin: left center;
     transform: scaleX(var(--_value-ratio, 0));
     transition: transform var(--hx-transition-fast, 150ms ease);
@@ -70,19 +70,19 @@
   /* ─── Variant Colors ─── */
 
   .progress-bar--default .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);
   }
 
   .progress-bar--success .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);
+    --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);
   }
 
   .progress-bar--warning .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);
   }
 
   .progress-bar--danger .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);
+    --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Indeterminate Animation ─── */

package/dist/css/hx-progress-ring.css

@@ -25,14 +25,14 @@
 
   .progress-ring__track {
     fill: none;
-    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── Indicator ─── */
 
   .progress-ring__indicator {
     fill: none;
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #429797));
     stroke-linecap: round;
     transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);
   }
@@ -40,15 +40,15 @@
   /* ─── Variant Colors ─── */
 
   :host([variant='success']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #3b9e58));
   }
 
   :host([variant='warning']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #c2711c));
   }
 
   :host([variant='danger']) .progress-ring__indicator {
-    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #e5493e));
   }
 
   /* ─── Indeterminate Animation ─── */
@@ -137,7 +137,7 @@
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-family: var(--hx-progress-ring-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0d1825));
     pointer-events: none;
   }
 

package/dist/css/hx-radio-group.css

@@ -32,14 +32,14 @@
     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-radio-group-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     padding: 0;
     margin-bottom: var(--hx-space-1, 0.25rem);
   }
 
   .fieldset__required-marker {
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -59,20 +59,20 @@
   /* ─── Error State ─── */
 
   .fieldset--error .fieldset__legend {
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   /* ─── Help Text & Error Messages ─── */
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #66787b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .fieldset__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 

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-neutral-300, #cbd5e1));
+    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);
@@ -41,15 +41,14 @@
   }
 
   .symbol:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   .symbol--full,
   .symbol--half {
-    color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));
+    color: var(--hx-rating-color, var(--hx-color-warning-400, #da904f));
   }
 
   .symbol--disabled {
@@ -58,7 +57,7 @@
 
   .base:not(.base--readonly) .symbol:hover {
     transform: scale(1.15);
-    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));
+    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #eeb383));
   }
 
   /* ─── Half-Star Layout ─── */
@@ -84,7 +83,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));
+    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%);
   }