@helixui/library 3.0.0-next.65 → 3.1.0-next.66

package/dist/css/hx-button.css

@@ -85,7 +85,7 @@
 
   .button--primary {
     --hx-button-bg: var(--hx-color-primary-500);
-    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-color: var(--hx-color-text-on-primary);
     --hx-button-border-color: transparent;
   }
 
@@ -96,22 +96,22 @@
   }
 
   .button--secondary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   .button--tertiary {
-    --hx-button-bg: var(--hx-color-neutral-100);
-    --hx-button-color: var(--hx-color-neutral-900);
+    --hx-button-bg: var(--hx-color-surface-sunken, #f1f5f9);
+    --hx-button-color: var(--hx-color-text-primary, #0f172a);
     --hx-button-border-color: transparent;
   }
 
   .button--tertiary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   .button--danger {
     --hx-button-bg: var(--hx-color-error-500);
-    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-color: var(--hx-color-text-on-error);
     --hx-button-border-color: transparent;
   }
 
@@ -126,17 +126,17 @@
   }
 
   .button--ghost:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   .button--outline {
     --hx-button-bg: transparent;
-    --hx-button-color: var(--hx-color-neutral-900);
-    --hx-button-border-color: var(--hx-color-neutral-300);
+    --hx-button-color: var(--hx-color-text-primary, #0f172a);
+    --hx-button-border-color: var(--hx-color-border-strong, #94a3b8);
   }
 
   .button--outline:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   .button--primary:hover {

package/dist/css/hx-card.css

@@ -2,17 +2,17 @@
 :host {
     display: block;
     color: var(--hx-card-color, inherit);
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
   }
 
   .card {
     display: flex;
     flex-direction: column;
     gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-card-color, var(--hx-color-text-strong, #1e293b));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
     overflow: hidden;
     font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
@@ -138,7 +138,7 @@
     flex: 1;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-card-color, var(--hx-color-text-secondary, #475569));
   }
 
   .card__footer {
@@ -156,7 +156,7 @@
     padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
     margin-top: auto;
   }
 

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

@@ -32,7 +32,7 @@
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-checkbox-group-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     padding: 0;
     margin-bottom: var(--hx-space-1);
@@ -66,7 +66,7 @@
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-neutral-500));
+    color: var(--hx-checkbox-group-help-text-color, var(--hx-color-text-muted));
     line-height: var(--hx-line-height-normal);
   }
 

package/dist/css/hx-checkbox.css

@@ -58,9 +58,9 @@
     width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     border: var(--hx-border-width-medium, 2px) solid
-      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
       border-color var(--hx-transition-fast, 150ms ease),
@@ -130,7 +130,7 @@
     width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     fill: none;
-    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
+    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
@@ -149,7 +149,7 @@
   .checkbox__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     user-select: none;
     -webkit-user-select: none;
@@ -164,7 +164,7 @@
 
   .checkbox__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
     padding-inline-start: calc(
       var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)

package/dist/css/hx-combobox.css

@@ -22,7 +22,7 @@
     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, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
@@ -34,9 +34,9 @@
     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, #cbd5e1));
     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);
@@ -75,7 +75,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, #64748b);
     flex-shrink: 0;
   }
   .field__input {
@@ -88,11 +88,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, #1e293b));
     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, #94a3b8);
   }
   .field__input--sm {
     min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -111,7 +111,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, #94a3b8);
   }
   .field__clear-button {
     width: 1.25rem;
@@ -124,7 +124,7 @@
     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, #334155);
   }
   .field__clear-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -159,9 +159,9 @@
     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, #cbd5e1));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-combobox-listbox-shadow,
@@ -186,7 +186,7 @@
     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, #1e293b));
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
@@ -222,7 +222,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, #94a3b8);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
   .field__sr-only {
@@ -242,7 +242,7 @@
     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, #64748b);
   }
   .field__error {
     color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));

package/dist/css/hx-data-table.css

@@ -25,14 +25,14 @@
   /* ─── Head ─── */
 
   thead {
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   :host([sticky-header]) thead th {
     position: sticky;
     top: 0;
     z-index: 1;
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* ─── Cells ─── */
@@ -42,18 +42,18 @@
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     text-align: start;
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-data-table-border-color, var(--hx-color-border-default, #e2e8f0));
     vertical-align: middle;
   }
 
   th {
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #334155));
     white-space: nowrap;
   }
 
   td {
-    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0f172a));
   }
 
   /* ─── Checkbox Column ─── */
@@ -127,7 +127,7 @@
   }
 
   tbody tr:hover {
-    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   tbody tr[aria-selected='true'] {
@@ -149,6 +149,7 @@
     display: block;
     height: 1em;
     border-radius: var(--hx-border-radius-sm, 2px);
+    /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */
     background: linear-gradient(
       90deg,
       var(--hx-color-neutral-200, #e2e8f0) 25%,
@@ -202,7 +203,7 @@
 
   .empty-cell {
     text-align: center;
-    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #475569));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 

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

@@ -39,7 +39,7 @@
     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-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -56,9 +56,9 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -109,7 +109,7 @@
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-date-picker-color, var(--hx-color-text-strong, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
@@ -117,7 +117,7 @@
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
 
   .field__input:disabled {
@@ -135,9 +135,9 @@
     padding: 0 var(--hx-space-3, 0.75rem);
     border: none;
     border-left: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
     background: transparent;
-    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #64748b));
     cursor: pointer;
     flex-shrink: 0;
     transition: color var(--hx-transition-fast, 150ms ease);
@@ -161,7 +161,7 @@
   }
 
   .field__trigger:hover:not(:disabled) {
-    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #334155));
     background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
   }
 
@@ -179,9 +179,9 @@
     left: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
     min-width: var(--hx-date-picker-calendar-min-width, 18rem);
-    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
     box-shadow: var(
       --hx-date-picker-calendar-shadow,
@@ -240,14 +240,14 @@
   }
 
   .calendar__nav-btn {
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-text-secondary, #475569);
     font-size: var(--hx-font-size-lg, 1.125rem);
     line-height: 1;
   }
 
   .calendar__nav-btn:hover {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-900, #0f172a);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #0f172a);
   }
 
   :is(.calendar__nav-btn, .calendar__day):focus-visible {
@@ -268,7 +268,7 @@
   .calendar__month-label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #1e293b);
     flex: 1;
     text-align: center;
   }
@@ -293,7 +293,7 @@
     height: var(--hx-size-8, 2rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -303,20 +303,20 @@
      ============================================================ */
 
   .calendar__day {
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #1e293b);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     position: relative;
   }
 
   .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-900, #0f172a);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #0f172a);
   }
 
   .calendar__day--selected {
     background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
@@ -374,7 +374,7 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   .field__error {

package/dist/css/hx-dialog.css

@@ -24,8 +24,8 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));
-    color: var(--hx-dialog-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-dialog-bg, var(--hx-color-surface-default));
+    color: var(--hx-dialog-color, var(--hx-color-text-primary));
     border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
     box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
     width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
@@ -60,7 +60,7 @@
   /* ─── Native backdrop (modal mode) ─── */
 
   dialog::backdrop {
-    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
     opacity: 0;
     transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
   }
@@ -80,7 +80,7 @@
   .dialog-backdrop {
     position: fixed;
     inset: 0;
-    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
     opacity: var(--hx-dialog-backdrop-opacity, 0.5);
     /* D5 — backdrop z-index must be lower than the dialog element's z-index */
     z-index: var(--hx-z-index-modal, 1400);
@@ -94,7 +94,7 @@
     justify-content: space-between;
     padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));
+      var(--hx-dialog-header-border-color, var(--hx-color-border-default));
     gap: var(--hx-space-4);
     flex-shrink: 0;
   }
@@ -105,7 +105,7 @@
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
-    color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));
+    color: var(--hx-dialog-heading-color, var(--hx-color-text-primary));
     flex: 1 1 auto;
   }
 
@@ -127,7 +127,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     font-size: var(--hx-font-size-xl, 1.25rem);
     line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
     transition:
@@ -140,8 +140,8 @@
   }
 
   .dialog__close-btn:hover {
-    color: var(--hx-color-neutral-900);
-    background-color: var(--hx-color-neutral-100);
+    color: var(--hx-color-text-primary);
+    background-color: var(--hx-color-surface-sunken);
   }
 
   .dialog__close-btn:focus-visible {
@@ -171,7 +171,7 @@
     gap: var(--hx-space-3);
     padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
     border-top: var(--hx-border-width-thin) solid
-      var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));
+      var(--hx-dialog-footer-border-color, var(--hx-color-border-default));
     flex-shrink: 0;
   }
 

package/dist/css/hx-divider.css

@@ -1,9 +1,9 @@
 /* hx-divider — extracted from Shadow DOM styles */
 :host {
     display: block;
-    --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #e2e8f0));
     --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));
-    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));
+    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #64748b));
     --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
     --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
   }

package/dist/css/hx-drawer.css

@@ -39,7 +39,10 @@
   .drawer-backdrop {
     position: absolute;
     inset: 0;
-    background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));
+    background-color: var(
+      --hx-drawer-backdrop-color,
+      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
+    );
     opacity: 0;
     transition: opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
   }
@@ -60,8 +63,8 @@
     position: absolute;
     display: flex;
     flex-direction: column;
-    background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));
-    color: var(--hx-drawer-color, var(--hx-color-neutral-900));
+    background-color: var(--hx-drawer-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-drawer-color, var(--hx-color-text-primary, #0f172a));
     box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
     overflow: hidden;
     outline: none;
@@ -159,7 +162,7 @@
     gap: var(--hx-space-4, 1rem);
     padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));
+      var(--hx-drawer-header-border-color, var(--hx-color-border-default, #e2e8f0));
     flex-shrink: 0;
   }
 
@@ -170,7 +173,7 @@
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
-    color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));
+    color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0f172a));
   }
 
   .drawer-header-actions {
@@ -193,15 +196,15 @@
     border: none;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted, #64748b);
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
   }
 
   .drawer-close-button:hover {
-    background-color: var(--hx-color-neutral-100);
-    color: var(--hx-color-neutral-900);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #0f172a);
   }
 
   .drawer-close-button:focus-visible {
@@ -257,7 +260,7 @@
     gap: var(--hx-space-3, 0.75rem);
     padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
+      var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #e2e8f0));
     flex-shrink: 0;
   }
 

package/dist/css/hx-dropdown.css

@@ -17,8 +17,8 @@
     position: fixed;
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
-    background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-dropdown-panel-bg, var(--hx-color-surface-default, #ffffff));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-dropdown-panel-shadow,

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

@@ -9,7 +9,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
     font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
   }
@@ -22,7 +22,7 @@
   .optional-indicator {
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-normal, 400);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */

package/dist/css/hx-field.css

@@ -46,7 +46,7 @@
     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-field-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
   }
@@ -96,7 +96,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }