@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/css/hx-clinical-status.css

@@ -34,12 +34,12 @@
     gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));
     border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bedcfc));
     border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid
-      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0284c7));
+      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0c8beb));
     border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #f0f9ff));
-    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
+    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #eff6fe));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));
     font-family: var(--hx-clinical-status-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);
@@ -60,41 +60,41 @@
 
   :host([severity='info']) .clinical-status,
   :host(:not([severity])) .clinical-status {
-    --hx-clinical-status-bg: var(--hx-color-info-50, #f0f9ff);
-    --hx-clinical-status-border-color: var(--hx-color-info-200, #bae6fd);
-    --hx-clinical-status-accent-color: var(--hx-color-info-500, #0284c7);
-    --hx-clinical-status-color: var(--hx-color-info-800, #0c4a6e);
-    --hx-clinical-status-icon-color: var(--hx-color-info-500, #0284c7);
+    --hx-clinical-status-bg: var(--hx-color-info-50, #eff6fe);
+    --hx-clinical-status-border-color: var(--hx-color-info-200, #bedcfc);
+    --hx-clinical-status-accent-color: var(--hx-color-info-500, #0c8beb);
+    --hx-clinical-status-color: var(--hx-color-info-800, #064172);
+    --hx-clinical-status-icon-color: var(--hx-color-info-500, #0c8beb);
   }
 
   /* ─── Severity: warning ─── */
 
   :host([severity='warning']) .clinical-status {
-    --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #d97706);
-    --hx-clinical-status-color: var(--hx-color-warning-800, #78350f);
-    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #d97706);
+    --hx-clinical-status-bg: var(--hx-color-warning-50, #fff3ea);
+    --hx-clinical-status-border-color: var(--hx-color-warning-200, #facfae);
+    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #c2711c);
+    --hx-clinical-status-color: var(--hx-color-warning-800, #603301);
+    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #c2711c);
   }
 
   /* ─── Severity: critical ─── */
 
   :host([severity='critical']) .clinical-status {
-    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-clinical-status-accent-color: var(--hx-color-error-500, #dc2626);
-    --hx-clinical-status-color: var(--hx-color-error-800, #7f1d1d);
-    --hx-clinical-status-icon-color: var(--hx-color-error-500, #dc2626);
+    --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-clinical-status-border-color: var(--hx-color-error-200, #fccbc4);
+    --hx-clinical-status-accent-color: var(--hx-color-error-500, #e5493e);
+    --hx-clinical-status-color: var(--hx-color-error-800, #7a090a);
+    --hx-clinical-status-icon-color: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Severity: emergent ─── */
 
   :host([severity='emergent']) .clinical-status {
-    --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);
-    --hx-clinical-status-accent-color: var(--hx-color-error-700, #991b1b);
-    --hx-clinical-status-color: var(--hx-color-error-900, #651a1a);
-    --hx-clinical-status-icon-color: var(--hx-color-error-700, #991b1b);
+    --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-clinical-status-border-color: var(--hx-color-error-300, #fda79c);
+    --hx-clinical-status-accent-color: var(--hx-color-error-700, #a21312);
+    --hx-clinical-status-color: var(--hx-color-error-900, #530d0a);
+    --hx-clinical-status-icon-color: var(--hx-color-error-700, #a21312);
     border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);
     font-weight: var(--hx-font-weight-semibold, 600);
   }
@@ -105,7 +105,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0284c7));
+    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
   .clinical-status__icon svg {
@@ -168,7 +168,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -184,8 +184,7 @@
   }
 
   .clinical-status__dismiss-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -230,8 +229,7 @@
   }
 
   .clinical-status__acknowledge-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 

package/dist/css/hx-code-snippet.css

@@ -13,8 +13,8 @@
     display: inline;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
-    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0d1825));
     padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
       var(--hx-code-snippet-inline-padding-x, 0.375em);
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -24,7 +24,7 @@
 
   .code-snippet {
     position: relative;
-    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0d1825));
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
@@ -64,7 +64,7 @@
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-relaxed, 1.75);
-    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
 
@@ -78,10 +78,12 @@
     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-neutral-600, #475569);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-200, #e2e8f0);
+    /* 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);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -96,13 +98,13 @@
   }
 
   .code-snippet__copy-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    border-color: var(--hx-color-neutral-500, #64748b);
+    /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */
+    background-color: var(--hx-color-surface-inverse, #0d1825);
+    border-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .code-snippet__copy-button: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);
   }
 
@@ -121,25 +123,29 @@
     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-neutral-700, #334155);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-300, #cbd5e1);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
+    /* 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);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
     text-align: center;
     cursor: pointer;
-    transition: background-color var(--hx-transition-fast, 150ms ease);
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      filter var(--hx-transition-fast, 150ms ease);
   }
 
   .code-snippet__expand-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    /* Hover on inverse terminal surface — lift the top border to border-default and brighten the background; matches the copy-button hover affordance pattern. */
+    border-top-color: var(--hx-color-border-default, #e2e8f0);
+    filter: brightness(var(--hx-filter-brightness-hover, 1.15));
   }
 
   .code-snippet__expand-button: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);
   }
 
@@ -149,7 +155,7 @@
     display: inline-block;
     min-width: var(--hx-space-8, 2rem);
     padding-inline-end: var(--hx-space-3, 0.75rem);
-    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #4a5362));
     user-select: none;
     text-align: end;
   }

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

@@ -14,18 +14,21 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     padding: var(--hx-space-1, 0.25rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: var(--hx-color-neutral-0, #ffffff);
     cursor: pointer;
     transition: border-color var(--hx-transition-fast, 150ms ease);
   }
   .trigger:hover:not([disabled]) {
-    border-color: var(--hx-color-primary-500, #2563eb);
+    border-color: var(
+      --hx-color-picker-trigger-hover-border-color,
+      var(--hx-color-primary-500, #429797)
+    );
   }
   :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500));
+      var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .trigger-swatch {
@@ -40,7 +43,7 @@
   }
   .trigger-label {
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-neutral-700, #313e4b);
     font-family: var(--hx-font-family-mono, monospace);
     white-space: nowrap;
   }
@@ -50,7 +53,7 @@
     top: calc(100% + 4px);
     left: 0;
     background: var(--hx-color-neutral-0, #ffffff);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
     border-radius: var(--hx-border-radius-lg, 0.5rem);
     box-shadow: 0 8px 24px
       var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));
@@ -64,7 +67,7 @@
   :host([inline]) .panel {
     position: static;
     box-shadow: none;
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
     border-radius: var(--hx-border-radius-lg, 0.5rem);
   }
   .gradient-grid {
@@ -177,12 +180,12 @@
   .format-btn {
     flex-shrink: 0;
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    background: var(--hx-color-neutral-100, #f1f5f9);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    background: var(--hx-color-neutral-100, #ebeee9);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-neutral-600, #4a5362);
     text-transform: uppercase;
     font-weight: var(--hx-font-weight-semibold, 600);
     letter-spacing: 0.05em;
@@ -191,18 +194,22 @@
     flex: 1;
     min-width: 0;
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     font-family: var(--hx-font-family-mono, monospace);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #0f172a);
+    color: var(--hx-color-neutral-900, #0d1825);
     background: var(--hx-color-neutral-0, #ffffff);
     outline: none;
   }
   .color-input:focus-visible {
-    border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    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-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);
+      color-mix(
+        in srgb,
+        var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 20%,
+        transparent
+      );
   }
   .input-preview {
     width: 24px;

package/dist/css/hx-combobox.css

@@ -22,11 +22,11 @@
     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-combobox-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
-    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
   .field__input-wrapper {
@@ -34,38 +34,32 @@
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      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-neutral-0, #ffffff));
+    background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
   }
   .field__input-wrapper:focus-within {
-    border-color: var(
-      --hx-combobox-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    border-color: var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #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, #60a5fa))
-          )
+        var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
   .field--error .field__input-wrapper {
-    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
   }
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-combobox-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -75,7 +69,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-2, 0.5rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
     flex-shrink: 0;
   }
   .field__input {
@@ -88,11 +82,11 @@
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
   }
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
   .field__input--sm {
     min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -111,7 +105,7 @@
     justify-content: center;
     margin-inline-end: var(--hx-space-2, 0.5rem);
     flex-shrink: 0;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
   .field__clear-button {
     width: 1.25rem;
@@ -124,11 +118,11 @@
     transition: color var(--hx-transition-fast, 150ms ease);
   }
   .field__clear-button:hover {
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-text-strong, #202b39);
   }
   .field__clear-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .field__loading-indicator {
@@ -159,13 +153,13 @@
     left: 0;
     right: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    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-neutral-300, #cbd5e1));
+      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,
-      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 12%, transparent)
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 12%, transparent)
     );
     max-height: var(--hx-combobox-listbox-max-height, 16rem);
     overflow: hidden;
@@ -186,27 +180,27 @@
     gap: var(--hx-space-2, 0.5rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #202b39));
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     transition: background-color var(--hx-transition-fast, 150ms ease);
   }
   .field__option:hover {
-    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
   }
   .field__option--selected {
-    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
     font-weight: var(--hx-font-weight-medium, 500);
   }
   .field__option--focused {
-    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);
   }
   .field__option--focused.field__option--selected {
-    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbf0f0));
   }
   .field__option--disabled {
     opacity: var(--hx-opacity-disabled, 0.5);
@@ -222,7 +216,7 @@
   .field__no-options {
     padding: var(--hx-space-3, 0.75rem);
     text-align: center;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #66787b);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
   .field__sr-only {
@@ -242,10 +236,10 @@
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
   }
   .field__error {
-    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-combobox-error-color, var(--hx-color-error-text, #c92a2a));
   }
   @media (prefers-reduced-motion: reduce) {
     .field__input-wrapper,
@@ -350,8 +344,8 @@
     gap: var(--hx-space-1, 0.25rem);
     padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);
     height: 1.5rem;
-    background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));
-    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e3a8a));
+    background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbf0f0));
+    color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #07494a));
     border-radius: var(--hx-border-radius-full, 9999px);
     font-size: var(--hx-font-size-sm, 0.875rem);
     white-space: nowrap;
@@ -382,11 +376,11 @@
   }
   .field__chip-remove:hover {
     opacity: 1;
-    background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));
+    background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bce1e1));
   }
   .field__chip-remove:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }

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

@@ -16,7 +16,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),
@@ -72,10 +72,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 ─── */

package/dist/css/hx-counter.css

@@ -8,7 +8,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;
   }