@helixui/library 3.1.0 → 3.2.0

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, #f5f8f3));
   }
 
   :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, #f5f8f3));
   }
 
   /* ─── 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, #d6dbd5));
     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, #202b39));
     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, #0d1825));
   }
 
   /* ─── Checkbox Column ─── */
@@ -92,7 +92,10 @@
 
   .sort-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(
+        --hx-data-table-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -113,7 +116,7 @@
 
   .sort-icon--active {
     opacity: var(--hx-opacity-100, 1);
-    color: var(--hx-color-primary-500, #2563eb);
+    color: var(--hx-data-table-sort-icon-active-color, var(--hx-color-primary-500, #429797));
   }
 
   .sort-icon--desc {
@@ -127,11 +130,11 @@
   }
 
   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, #f5f8f3));
   }
 
   tbody tr[aria-selected='true'] {
-    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #ebf8f8));
   }
 
   /* ─── Checkbox Input ─── */
@@ -140,7 +143,7 @@
     width: var(--hx-size-4, 1rem);
     height: var(--hx-size-4, 1rem);
     cursor: pointer;
-    accent-color: var(--hx-color-primary-500, #2563eb);
+    accent-color: var(--hx-data-table-checkbox-accent-color, var(--hx-color-primary-500, #429797));
   }
 
   /* ─── Loading Skeleton ─── */
@@ -149,11 +152,12 @@
     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%,
-      var(--hx-color-neutral-100, #f1f5f9) 50%,
-      var(--hx-color-neutral-200, #e2e8f0) 75%
+      var(--hx-color-neutral-200, #d6dbd5) 25%,
+      var(--hx-color-neutral-100, #ebeee9) 50%,
+      var(--hx-color-neutral-200, #d6dbd5) 75%
     );
     background-size: 200% 100%;
     animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
@@ -193,7 +197,10 @@
   [part~='td']:focus-visible,
   [part~='th']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(
+        --hx-data-table-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, -2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -202,7 +209,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, #313e4b));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 

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

@@ -39,12 +39,12 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__required-marker {
-    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -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, #8e9c98));
     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);
@@ -68,14 +68,14 @@
   .field__input-wrapper:focus-within {
     border-color: var(
       --hx-date-picker-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))
     );
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
         var(
             --hx-date-picker-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))
           )
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
@@ -83,15 +83,15 @@
   }
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-date-picker-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-date-picker-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -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, #202b39));
     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, #66787b);
   }
 
   .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, #8e9c98));
     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, #4a5362));
     cursor: pointer;
     flex-shrink: 0;
     transition: color var(--hx-transition-fast, 150ms ease);
@@ -147,13 +147,13 @@
   .field__trigger:focus-visible {
     color: var(
       --hx-date-picker-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))
     );
     background-color: color-mix(
       in srgb,
       var(
           --hx-date-picker-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))
         )
         8%,
       transparent
@@ -161,8 +161,8 @@
   }
 
   .field__trigger:hover:not(:disabled) {
-    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
-    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #202b39));
+    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 4%, transparent);
   }
 
   .field__trigger:disabled {
@@ -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, #d6dbd5));
     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,21 +240,21 @@
   }
 
   .calendar__nav-btn {
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-text-secondary, #313e4b);
     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-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-color-text-primary, #0d1825);
   }
 
   :is(.calendar__nav-btn, .calendar__day):focus-visible {
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       var(
         --hx-date-picker-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))
       );
     z-index: 1;
   }
@@ -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, #202b39);
     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, #4a5362);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -303,30 +303,30 @@
      ============================================================ */
 
   .calendar__day {
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #202b39);
     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-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-color-text-primary, #0d1825);
   }
 
   .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));
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
   .calendar__day--selected:hover {
-    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));
+    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));
   }
 
   .calendar__day--today:not(.calendar__day--selected) {
     font-weight: var(--hx-font-weight-bold, 700);
-    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
+    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #0f7078));
   }
 
   .calendar__day--today:not(.calendar__day--selected)::after {
@@ -374,11 +374,11 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
   }
 
   .field__error {
-    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   /* ============================================================

package/dist/css/hx-dialog.css

@@ -24,10 +24,10 @@
     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));
-    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
-    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
+    background-color: var(--hx-dialog-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-dialog-color, var(--hx-color-text-primary, #0d1825));
+    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));
     width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
     max-width: calc(100vw - var(--hx-space-8, 2rem));
     max-height: calc(100vh - var(--hx-space-8, 2rem));
@@ -60,7 +60,10 @@
   /* ─── 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, rgba(0, 0, 0, 0.75))
+    );
     opacity: 0;
     transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
   }
@@ -80,7 +83,10 @@
   .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, rgba(0, 0, 0, 0.75))
+    );
     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);
@@ -92,20 +98,20 @@
     display: flex;
     align-items: center;
     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));
-    gap: var(--hx-space-4);
+    padding: var(--hx-dialog-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-dialog-header-border-color, var(--hx-color-border-default, #d6dbd5));
+    gap: var(--hx-space-4, 1rem);
     flex-shrink: 0;
   }
 
   .dialog__heading {
     margin: 0;
-    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans));
-    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));
+    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: var(--hx-line-height-tight, 1.25);
+    color: var(--hx-dialog-heading-color, var(--hx-color-text-primary, #0d1825));
     flex: 1 1 auto;
   }
 
@@ -127,7 +133,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-dialog-close-btn-color, var(--hx-color-text-muted, #4a5362));
     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,15 +146,15 @@
   }
 
   .dialog__close-btn:hover {
-    color: var(--hx-color-neutral-900);
-    background-color: var(--hx-color-neutral-100);
+    color: var(--hx-dialog-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));
+    background-color: var(--hx-dialog-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
   }
 
   .dialog__close-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-dialog-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -157,7 +163,7 @@
 
   .dialog__body {
     flex: 1 1 auto;
-    padding: var(--hx-dialog-body-padding, var(--hx-space-6));
+    padding: var(--hx-dialog-body-padding, var(--hx-space-6, 1.5rem));
     overflow-y: auto;
     overscroll-behavior: contain;
   }
@@ -168,10 +174,10 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    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));
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-dialog-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-dialog-footer-border-color, var(--hx-color-border-default, #d6dbd5));
     flex-shrink: 0;
   }
 
@@ -190,6 +196,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .dialog {

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, #d6dbd5));
     --_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, #66787b));
     --_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,9 +63,9 @@
     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));
-    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
+    background-color: var(--hx-drawer-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-drawer-color, var(--hx-color-text-primary, #0d1825));
+    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));
     overflow: hidden;
     outline: none;
     z-index: 1; /* local stacking context: panel above backdrop within overlay container */
@@ -159,18 +162,18 @@
     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, #d6dbd5));
     flex-shrink: 0;
   }
 
   .drawer-title {
     margin: 0;
     flex: 1 1 auto;
-    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));
-    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));
+    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: var(--hx-line-height-tight, 1.25);
+    color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0d1825));
   }
 
   .drawer-header-actions {
@@ -193,22 +196,22 @@
     border: none;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-drawer-close-btn-color, var(--hx-color-text-muted, #4a5362));
     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-drawer-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-drawer-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));
   }
 
   .drawer-close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-drawer-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -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, #d6dbd5));
     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, #d6dbd5));
     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,20 +9,20 @@
     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, #313e4b));
     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));
   }
 
   .required-indicator {
-    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
   .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, #66787b);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */

package/dist/css/hx-field.css

@@ -46,13 +46,13 @@
     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, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
   }
 
   .field__required-marker {
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -96,24 +96,24 @@
 
   .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, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Error State ─── */
 
   .field--error .field__label {
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   .field--error .field__control {
-    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #dc2626));
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #e5493e));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }