@helixui/library 3.1.0 → 3.2.0

package/dist/css/helix-utility.css

@@ -52,19 +52,19 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)
     );
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Size modifiers ─── */
@@ -149,7 +149,7 @@
     border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);
     border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));
     background-color: var(--hx-copy-button-bg, transparent);
-    color: var(--hx-copy-button-color, var(--hx-color-primary-500));
+    color: var(--hx-copy-button-color, var(--hx-color-primary-500, #429797));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast),
@@ -205,10 +205,13 @@
   /* ─── Copied / Success State ─── */
 
   .button--copied {
-    color: var(--hx-color-success-text, var(--hx-color-primary-500));
+    color: var(
+      --hx-copy-button-copied-color,
+      var(--hx-color-success-text, var(--hx-color-success-700, #146831))
+    );
     /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).
        A border provides visual differentiation for users with color blindness. */
-    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));
+    border-color: var(--hx-copy-button-copied-border-color, var(--hx-color-success-500, #3b9e58));
   }
 
   /* ─── Icon Container ─── */
@@ -290,7 +293,7 @@
     align-items: baseline;
     font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
-    color: var(--hx-counter-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-counter-color, var(--hx-color-neutral-900, #0d1825));
     line-height: var(--hx-line-height-tight, 1.25);
     font-variant-numeric: tabular-nums;
   }
@@ -392,8 +395,8 @@
     border-inline-end: none;
     border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -414,7 +417,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, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -442,11 +445,11 @@
     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, #60a5fa));
+      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #6ab1b1));
     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, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -459,7 +462,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, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -533,10 +536,20 @@
 
   .split-button--primary .split-button__primary,
   .split-button--primary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --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, #60a5fa);
+    --hx-split-button-divider-color: var(--hx-color-primary-400, #6ab1b1);
+  }
+
+  /* primary:hover — replace the universal brightness(0.9) filter (which would
+     drop primary-500 + on-primary contrast to ~4.4:1) with an explicit swap
+     to primary-600 and a neutral-0 foreground. Mirrors hx-button precedent. */
+  .split-button--primary .split-button__primary:hover,
+  .split-button--primary .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    filter: none;
   }
 
   /* ─── Variant: secondary ─── */
@@ -544,14 +557,14 @@
   .split-button--secondary .split-button__primary,
   .split-button--secondary .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-border-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-divider-color: var(--hx-color-primary-300, #97cdcc);
   }
 
   .split-button--secondary .split-button__primary:hover,
   .split-button--secondary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-split-button-bg: var(--hx-color-primary-50, #ebf8f8);
     filter: none;
   }
 
@@ -559,15 +572,15 @@
 
   .split-button--tertiary .split-button__primary,
   .split-button--tertiary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-split-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .split-button--tertiary .split-button__primary:hover,
   .split-button--tertiary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -575,15 +588,19 @@
 
   .split-button--danger .split-button__primary,
   .split-button--danger .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
+    --hx-split-button-divider-color: var(--hx-color-error-400, #fc7264);
   }
 
+  /* danger:hover — on-error tokens are tuned for error-500. error-600 drops
+     the pair to 2.25:1 (AA fail). Pin fg at neutral-0 to keep the darker
+     hover fill legible. Mirrors hx-toast precedent (commit 300e21ab0). */
   .split-button--danger .split-button__primary:hover,
   .split-button--danger .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);
+    --hx-split-button-bg: var(--hx-color-error-600, #c92a2a);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
     filter: none;
   }
 
@@ -592,14 +609,14 @@
   .split-button--ghost .split-button__primary,
   .split-button--ghost .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);
+    --hx-split-button-divider-color: var(--hx-color-primary-200, #bce1e1);
   }
 
   .split-button--ghost .split-button__primary:hover,
   .split-button--ghost .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -608,14 +625,14 @@
   .split-button--outline .split-button__primary,
   .split-button--outline .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .split-button--outline .split-button__primary:hover,
   .split-button--outline .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -640,9 +657,9 @@
     min-width: 100%;
     max-height: var(--hx-split-button-menu-max-height, 18rem);
     overflow-y: auto;
-    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-split-button-menu-shadow,

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

@@ -50,19 +50,19 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)
     );
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Size modifiers ─── */

package/dist/css/hx-alert.css

@@ -36,10 +36,10 @@
     gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));
     border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
     border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #f0f9ff));
-    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
+    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #eff6fe));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
     font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -52,7 +52,7 @@
   .alert--accent {
     border-width: 0;
     border-inline-start: var(--hx-alert-accent-width, 4px) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
     border-radius: 0;
   }
 
@@ -79,7 +79,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0284c7));
+    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
   .alert__icon svg {
@@ -139,7 +139,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -158,7 +158,10 @@
 
   .alert__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(
+        --hx-alert-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -179,40 +182,41 @@
 
   :host([variant='info']) .alert,
   :host(:not([variant])) .alert {
-    --hx-alert-bg: var(--hx-color-info-50, #f0f9ff);
-    --hx-alert-border-color: var(--hx-color-info-200, #bae6fd);
-    --hx-alert-color: var(--hx-color-info-800, #0c4a6e);
-    --hx-alert-icon-color: var(--hx-color-info-500, #0284c7);
+    --hx-alert-bg: var(--hx-color-info-50, #eff6fe);
+    --hx-alert-border-color: var(--hx-color-info-200, #bedcfc);
+    --hx-alert-color: var(--hx-color-info-800, #064172);
+    --hx-alert-icon-color: var(--hx-color-info-500, #0c8beb);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .alert {
-    --hx-alert-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-alert-border-color: var(--hx-color-success-200, #bbf7d0);
-    --hx-alert-color: var(--hx-color-success-800, #14532d);
-    --hx-alert-icon-color: var(--hx-color-success-500, #16a34a);
+    --hx-alert-bg: var(--hx-color-success-50, #eafaec);
+    --hx-alert-border-color: var(--hx-color-success-200, #bae6c2);
+    --hx-alert-color: var(--hx-color-success-800, #0b4d23);
+    --hx-alert-icon-color: var(--hx-color-success-500, #3b9e58);
   }
 
   /* ─── Variant: warning ─── */
 
   :host([variant='warning']) .alert {
-    --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-alert-color: var(--hx-color-warning-800, #78350f);
-    --hx-alert-icon-color: var(--hx-color-warning-500, #d97706);
+    --hx-alert-bg: var(--hx-color-warning-50, #fff3ea);
+    --hx-alert-border-color: var(--hx-color-warning-200, #facfae);
+    --hx-alert-color: var(--hx-color-warning-800, #603301);
+    --hx-alert-icon-color: var(--hx-color-warning-500, #c2711c);
   }
 
   /* ─── Variant: error ─── */
 
   :host([variant='error']) .alert {
-    --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-alert-color: var(--hx-color-error-800, #7f1d1d);
-    --hx-alert-icon-color: var(--hx-color-error-500, #dc2626);
+    --hx-alert-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-alert-border-color: var(--hx-color-error-200, #fccbc4);
+    --hx-alert-color: var(--hx-color-error-800, #7a090a);
+    --hx-alert-icon-color: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .alert {

package/dist/css/hx-avatar.css

@@ -21,8 +21,8 @@
     overflow: hidden;
     width: var(--hx-avatar-size);
     height: var(--hx-avatar-size);
-    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));
-    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100, #dbf0f0));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
     border-radius: var(--hx-avatar-border-radius);
     flex-shrink: 0;
   }
@@ -90,7 +90,7 @@
   .avatar__fallback-icon {
     width: 60%;
     height: 60%;
-    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
   }
 
   /* ─── Badge Slot ─── */

package/dist/css/hx-badge.css

@@ -9,8 +9,8 @@
     justify-content: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));
     font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -42,65 +42,65 @@
   /* ─── Style Variants ─── */
 
   .badge--primary {
-    --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));
+    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-primary-500, #2563eb)
+      var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))
     );
   }
 
   .badge--secondary {
-    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9));
-    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #334155));
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #313e4b));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9))
+      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9))
     );
   }
 
   .badge--success {
-    --hx-badge-bg: var(--hx-color-success-700, #166534);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-success-bg, var(--hx-color-success-700, #146831));
+    --hx-badge-color: var(--hx-badge-success-color, var(--hx-color-neutral-0, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-success-700, #166534)
+      var(--hx-badge-success-bg, var(--hx-color-success-700, #146831))
     );
   }
 
   .badge--warning {
-    --hx-badge-bg: var(--hx-color-warning-500, #d97706);
-    --hx-badge-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-badge-bg: var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c));
+    --hx-badge-color: var(--hx-badge-warning-color, var(--hx-color-neutral-900, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-warning-500, #d97706)
+      var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c))
     );
   }
 
   .badge--error {
-    --hx-badge-bg: var(--hx-color-error-500, #dc2626);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e));
+    --hx-badge-color: var(--hx-badge-error-color, var(--hx-color-text-on-error, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-error-500, #dc2626)
+      var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e))
     );
   }
 
   .badge--neutral {
-    --hx-badge-bg: var(--hx-color-neutral-200, #e2e8f0);
-    --hx-badge-color: var(--hx-color-neutral-700, #334155);
+    --hx-badge-bg: var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5));
+    --hx-badge-color: var(--hx-badge-neutral-color, var(--hx-color-neutral-700, #313e4b));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5))
     );
   }
 
   .badge--info {
-    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #075985));
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997));
     --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
+      var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997))
     );
   }
 

package/dist/css/hx-banner.css

@@ -40,10 +40,10 @@
     align-items: center;
     gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
-    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #f0f9ff));
-    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
+    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
     border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-banner-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));
     font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -56,7 +56,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0284c7));
+    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
   .banner__icon svg {
@@ -78,7 +78,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e)));
+    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));
     font-weight: var(--hx-font-weight-semibold, 600);
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -96,7 +96,10 @@
 
   .banner__action:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(
+        --hx-banner-action-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -118,7 +121,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -137,7 +140,10 @@
 
   .banner__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(
+        --hx-banner-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -152,37 +158,37 @@
 
   :host([variant='info']) .banner,
   :host(:not([variant])) .banner {
-    --hx-banner-bg: var(--hx-color-info-50, #f0f9ff);
-    --hx-banner-border-color: var(--hx-color-info-200, #bae6fd);
-    --hx-banner-color: var(--hx-color-info-800, #0c4a6e);
-    --hx-banner-icon-color: var(--hx-color-info-500, #0284c7);
+    --hx-banner-bg: var(--hx-color-info-50, #eff6fe);
+    --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);
+    --hx-banner-color: var(--hx-color-info-800, #064172);
+    --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .banner {
-    --hx-banner-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-banner-border-color: var(--hx-color-success-200, #bbf7d0);
-    --hx-banner-color: var(--hx-color-success-800, #14532d);
-    --hx-banner-icon-color: var(--hx-color-success-500, #16a34a);
+    --hx-banner-bg: var(--hx-color-success-50, #eafaec);
+    --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);
+    --hx-banner-color: var(--hx-color-success-800, #0b4d23);
+    --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);
   }
 
   /* ─── Variant: warning ─── */
 
   :host([variant='warning']) .banner {
-    --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-banner-color: var(--hx-color-warning-800, #78350f);
-    --hx-banner-icon-color: var(--hx-color-warning-500, #d97706);
+    --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);
+    --hx-banner-border-color: var(--hx-color-warning-200, #facfae);
+    --hx-banner-color: var(--hx-color-warning-800, #603301);
+    --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);
   }
 
   /* ─── Variant: error ─── */
 
   :host([variant='error']) .banner {
-    --hx-banner-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-banner-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-banner-color: var(--hx-color-error-800, #7f1d1d);
-    --hx-banner-icon-color: var(--hx-color-error-500, #dc2626);
+    --hx-banner-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);
+    --hx-banner-color: var(--hx-color-error-800, #7a090a);
+    --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Position: fixed ─── */
@@ -203,6 +209,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .banner {