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

package/dist/css/hx-file-upload.css

@@ -27,7 +27,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-color-neutral-700, #334155);
+    color: var(--hx-color-text-strong, #334155);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -42,9 +42,9 @@
     min-height: var(--hx-space-32, 8rem);
     padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
     border: var(--hx-border-width-thin, 1px) dashed
-      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
-    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f8fafc));
     cursor: pointer;
     text-align: center;
     transition:
@@ -52,7 +52,7 @@
       background-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     user-select: none;
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-text-secondary, #475569);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -76,7 +76,7 @@
       color-mix(
         in srgb,
         var(--hx-color-primary-500, #2563eb) 8%,
-        var(--hx-color-neutral-0, #ffffff)
+        var(--hx-color-surface-default, #ffffff)
       )
     );
     border-style: solid;
@@ -128,9 +128,9 @@
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    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-border-default, #e2e8f0);
     border-radius: var(--hx-border-radius-md, 0.375rem);
-    background-color: var(--hx-color-neutral-0, #ffffff);
+    background-color: var(--hx-color-surface-default, #ffffff);
   }
 
   .file-item__row {
@@ -143,7 +143,7 @@
     flex: 1;
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #1e293b);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -152,7 +152,7 @@
   .file-item__size {
     flex-shrink: 0;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   .file-item__remove {
@@ -166,7 +166,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     cursor: pointer;
     line-height: 1;
     transition:
@@ -199,7 +199,7 @@
   .progress-track {
     width: 100%;
     height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
-    background-color: var(--hx-color-neutral-200, #e2e8f0);
+    background-color: var(--hx-color-border-default, #e2e8f0);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
   }

package/dist/css/hx-help-text.css

@@ -11,7 +11,7 @@
     font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
     line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
-    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-help-text-color, var(--hx-color-text-muted, #64748b));
     margin: 0;
   }
 
@@ -28,7 +28,7 @@
   /* ─── Variant: default ─── */
 
   .help-text--default {
-    --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
+    --hx-help-text-color: var(--hx-color-text-muted, #64748b);
   }
 
   /* ─── Variant: error ─── */

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

@@ -75,7 +75,7 @@
 
   .button--primary {
     --hx-icon-button-bg: var(--hx-color-primary-500);
-    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-color: var(--hx-color-text-on-primary);
     --hx-icon-button-border-color: transparent;
   }
 
@@ -95,17 +95,17 @@
 
   .button--tertiary {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-neutral-700);
-    --hx-icon-button-border-color: var(--hx-color-neutral-300);
+    --hx-icon-button-color: var(--hx-color-text-strong);
+    --hx-icon-button-border-color: var(--hx-color-border-strong);
   }
 
   .button--tertiary:hover {
-    --hx-icon-button-bg: var(--hx-color-neutral-100);
+    --hx-icon-button-bg: var(--hx-color-surface-sunken);
   }
 
   .button--danger {
     --hx-icon-button-bg: var(--hx-color-error-500);
-    --hx-icon-button-color: var(--hx-color-neutral-0);
+    --hx-icon-button-color: var(--hx-color-text-on-error);
     --hx-icon-button-border-color: transparent;
   }
 
@@ -120,7 +120,7 @@
   }
 
   .button--ghost:hover {
-    --hx-icon-button-bg: var(--hx-color-neutral-100);
+    --hx-icon-button-bg: var(--hx-color-surface-raised);
   }
 
   /* ─── Icon Container ─── */

package/dist/css/hx-link.css

@@ -48,7 +48,7 @@
   /* --- Variant: subtle --- */
 
   .link--subtle {
-    color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #475569));
     text-decoration: none;
   }
 
@@ -70,7 +70,7 @@
   /* --- Disabled --- */
 
   .link--disabled {
-    color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
+    color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #94a3b8));
     text-decoration: none;
     cursor: not-allowed;
   }

package/dist/css/hx-menu.css

@@ -7,9 +7,9 @@
     display: flex;
     flex-direction: column;
     padding: var(--hx-space-1, 0.25rem);
-    background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-menu-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-shadow,

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

@@ -31,7 +31,7 @@
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -46,9 +46,9 @@
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
     border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
     transition:
       border-color var(--hx-transition-fast),
       box-shadow var(--hx-transition-fast);
@@ -96,7 +96,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-3);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     flex-shrink: 0;
   }
 
@@ -108,7 +108,7 @@
     outline: none;
     background: transparent;
     font-family: inherit;
-    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    color: var(--hx-number-input-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     width: 100%;
     /* Size: md (default) */
@@ -118,7 +118,7 @@
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder);
   }
 
   .field__input:disabled {
@@ -157,7 +157,7 @@
     flex-direction: column;
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn {
@@ -167,7 +167,7 @@
     background: transparent;
     border: none;
     cursor: pointer;
-    color: var(--hx-color-neutral-600);
+    color: var(--hx-color-text-secondary);
     padding: 0;
     flex: 1;
     min-width: var(--hx-size-8);
@@ -179,12 +179,12 @@
 
   .field__stepper-btn:not(:last-child) {
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn:hover:not(:disabled) {
-    background-color: var(--hx-color-neutral-50);
-    color: var(--hx-color-neutral-800);
+    background-color: var(--hx-color-surface-raised);
+    color: var(--hx-color-text-strong);
   }
 
   /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -223,7 +223,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     line-height: var(--hx-line-height-normal);
   }
 

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

@@ -18,7 +18,7 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: transparent;
-    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #475569));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -38,11 +38,11 @@
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
   }
 
   .trigger--open {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
   }
 
   /* ─── Size Variants ─── */
@@ -75,8 +75,8 @@
     position: fixed;
     z-index: var(--hx-overflow-menu-panel-z-index, 1000);
     min-width: var(--hx-overflow-menu-panel-min-width, 160px);
-    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #e2e8f0));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -101,7 +101,7 @@
     border: none;
     text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #0f172a);
+    color: var(--hx-color-text-primary, #0f172a);
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -110,7 +110,7 @@
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-neutral-50, #f8fafc);
+    background-color: var(--hx-color-surface-raised, #f8fafc);
   }
 
   ::slotted([role='menuitem']:focus-visible),

package/dist/css/hx-pagination.css

@@ -38,10 +38,10 @@
     min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -54,7 +54,7 @@
   }
 
   .button:hover:not(:disabled) {
-    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
+    background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #f1f5f9));
     border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
   }
 
@@ -70,7 +70,7 @@
       --hx-pagination-active-border-color,
       var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
     );
-    color: var(--hx-pagination-active-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
     cursor: default;
     pointer-events: none;
@@ -87,7 +87,7 @@
     justify-content: center;
     min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
-    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #64748b));
     font-size: var(--hx-font-size-sm, 0.875rem);
     user-select: none;
   }
@@ -108,7 +108,7 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     white-space: nowrap;
   }
 
@@ -116,10 +116,10 @@
     min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-pagination-border-color, var(--hx-color-border-strong, #94a3b8));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;

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

@@ -17,12 +17,12 @@
   .phi-field__value--masked {
     user-select: none;
     -webkit-user-select: none;
-    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-phi-field-masked-color, var(--hx-color-text-muted, #64748b));
     letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
   }
 
   .phi-field__value--revealed {
-    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-phi-field-value-color, var(--hx-color-text-primary, #0f172a));
   }
 
   /* ─── Screen Reader Status ─── */

package/dist/css/hx-popover.css

@@ -14,12 +14,12 @@
     z-index: var(--hx-popover-z-index, 9999);
     max-width: var(--hx-popover-max-width, 320px);
     padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
-    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-popover-color, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-popover-color, var(--hx-color-text-primary, #0f172a));
     font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-normal, 1.5);
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-popover-shadow,
@@ -48,8 +48,8 @@
     position: absolute;
     width: var(--hx-popover-arrow-size, 10px);
     height: var(--hx-popover-arrow-size, 10px);
-    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-popover-bg, var(--hx-color-surface-default, #ffffff));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-border-default, #e2e8f0));
     transform: rotate(45deg);
     pointer-events: none;
   }

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

@@ -25,7 +25,7 @@
     font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-tight, 1.25);
   }
 
@@ -33,7 +33,7 @@
     position: relative;
     overflow: hidden;
     border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
-    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
+    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken));
     width: 100%;
   }
 

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

@@ -32,7 +32,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-radio-group-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-radio-group-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     padding: 0;
     margin-bottom: var(--hx-space-1, 0.25rem);
@@ -66,7 +66,7 @@
 
   .fieldset__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-radio-group-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 

package/dist/css/hx-select.css

@@ -4,15 +4,18 @@
     display: block;
 
     /* Background & foreground */
-    --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #1e293b));
-    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #94a3b8));
+    --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
+    --_color: var(--hx-select-color, var(--hx-color-text-strong, #1e293b));
+    --_placeholder-color: var(
+      --hx-select-placeholder-color,
+      var(--hx-color-text-placeholder, #64748b)
+    );
 
     /* Label */
-    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #334155));
+    --_label-color: var(--hx-select-label-color, var(--hx-color-text-strong, #1e293b));
 
     /* Border */
-    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    --_border-color: var(--hx-select-border-color, var(--hx-color-border-strong, #94a3b8));
     --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
 
     /* Focus ring */
@@ -25,11 +28,11 @@
     --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc2626));
 
     /* Chevron */
-    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #64748b));
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-text-muted, #64748b));
     --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
 
     /* Listbox */
-    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-surface-default, #ffffff));
     --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
     --_option-selected-bg: var(
       --hx-select-option-selected-bg,
@@ -277,7 +280,7 @@
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   .field__error {

package/dist/css/hx-side-nav.css

@@ -7,8 +7,8 @@
        Without this, axe-core cannot resolve the background for slotted nodes
        and evaluates their text against the page white background, producing
        false-positive color-contrast violations (WCAG 2.1 AA). */
-    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
   }
 
   * {
@@ -22,12 +22,12 @@
     flex-direction: column;
     height: 100%;
     width: var(--hx-side-nav-width, 16rem);
-    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #f1f5f9));
     transition: width var(--hx-transition-normal, 300ms) ease;
     overflow: hidden;
     border-inline-end: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
   }
 
   /* ─── Collapsed State ─── */
@@ -45,7 +45,7 @@
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
     overflow: hidden;
   }
 
@@ -72,7 +72,7 @@
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
+      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #334155));
     overflow: hidden;
   }
 
@@ -95,7 +95,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #94a3b8));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -107,7 +107,7 @@
       --hx-overlay-white-10,
       rgba(255, 255, 255, 0.1)
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-text-inverse, #f1f5f9);
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {

package/dist/css/hx-slider.css

@@ -33,14 +33,14 @@
   .slider__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-slider-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .slider__value-display {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-slider-value-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #475569));
     line-height: var(--hx-line-height-normal, 1.5);
     font-variant-numeric: tabular-nums;
     min-width: var(--hx-size-8, 2rem);
@@ -58,7 +58,7 @@
     position: relative;
     width: 100%;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-track-bg, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #e2e8f0));
     overflow: visible;
   }
 
@@ -180,7 +180,7 @@
     left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));
     transform: translate(-50%, -50%);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-slider-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-slider-thumb-border-width, 2px) solid
       var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #2563eb));
     box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
@@ -258,7 +258,7 @@
     top: 0;
     width: var(--hx-border-width-thin, 1px);
     height: 100%;
-    background-color: var(--hx-slider-tick-color, var(--hx-color-neutral-400, #94a3b8));
+    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #94a3b8));
     transform: translateX(-50%);
   }
 
@@ -268,7 +268,7 @@
     display: flex;
     justify-content: space-between;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-range-label-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
     margin-top: var(--hx-space-0-5, 0.125rem);
   }
@@ -277,16 +277,16 @@
 
   .slider__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-slider-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Disabled state ─── */
 
   .slider--disabled .slider__fill {
-    background-color: var(--hx-color-neutral-400, #94a3b8);
+    background-color: var(--hx-color-border-strong, #94a3b8);
   }
 
   .slider--disabled .slider__thumb-visual {
-    border-color: var(--hx-color-neutral-400, #94a3b8);
+    border-color: var(--hx-color-border-strong, #94a3b8);
   }