@helixui/library 3.1.0 → 3.2.0-next.74

package/dist/css/helix-overlay.css

@@ -26,10 +26,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));
@@ -62,7 +62,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);
   }
@@ -82,7 +85,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);
@@ -94,20 +100,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;
   }
 
@@ -129,7 +135,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:
@@ -142,15 +148,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);
   }
@@ -159,7 +165,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;
   }
@@ -170,10 +176,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;
   }
 
@@ -192,6 +198,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .dialog {
@@ -252,7 +259,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);
   }
@@ -273,9 +283,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 */
@@ -372,18 +382,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 {
@@ -406,22 +416,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);
   }
@@ -470,7 +480,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;
   }
 
@@ -513,8 +523,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,
@@ -565,12 +575,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, #0d1825));
     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, #d6dbd5));
     border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-popover-shadow,
@@ -591,7 +601,10 @@
 
   [part='body']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(
+        --hx-popover-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -599,8 +612,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, #d6dbd5));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -612,6 +625,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     [part='body'] {
@@ -679,8 +693,8 @@
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
     max-width: var(--hx-tooltip-max-width, 280px);
     padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
+    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));
+    color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #ffffff));
     font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
     line-height: var(--hx-line-height-normal, 1.5);
@@ -706,7 +720,7 @@
     position: absolute;
     width: var(--hx-tooltip-arrow-size, 8px);
     height: var(--hx-tooltip-arrow-size, 8px);
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -718,6 +732,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     [part='tooltip'] {

package/dist/css/helix-tokens.css

@@ -1,113 +1,116 @@
 :root {
-  --hx-color-primary-50: #EFF6FF;
-  --hx-color-primary-100: #DBEAFE;
-  --hx-color-primary-200: #BFDBFE;
-  --hx-color-primary-300: #93C5FD;
-  --hx-color-primary-400: #60A5FA;
-  --hx-color-primary-500: #2563EB;
-  --hx-color-primary-600: #1D4ED8;
-  --hx-color-primary-700: #1E40AF;
-  --hx-color-primary-800: #1E3A8A;
-  --hx-color-primary-900: #1E3050;
-  --hx-color-primary-950: #172554;
-  --hx-color-secondary-50: #ECFEFF;
-  --hx-color-secondary-100: #CFFAFE;
-  --hx-color-secondary-200: #A5F3FC;
-  --hx-color-secondary-300: #67E8F9;
-  --hx-color-secondary-400: #22D3EE;
-  --hx-color-secondary-500: #0891B2;
-  --hx-color-secondary-600: #0E7490;
-  --hx-color-secondary-700: #155E75;
-  --hx-color-secondary-800: #164E63;
-  --hx-color-secondary-900: #134152;
-  --hx-color-secondary-950: #083344;
-  --hx-color-accent-50: #F5F3FF;
-  --hx-color-accent-100: #EDE9FE;
-  --hx-color-accent-200: #DDD6FE;
-  --hx-color-accent-300: #C4B5FD;
-  --hx-color-accent-400: #A78BFA;
-  --hx-color-accent-500: #7C3AED;
-  --hx-color-accent-600: #6D28D9;
-  --hx-color-accent-700: #5B21B6;
-  --hx-color-accent-800: #4C1D95;
-  --hx-color-accent-900: #3B0764;
-  --hx-color-accent-950: #2E1065;
+  --hx-color-primary-50: #EBF8F8;
+  --hx-color-primary-100: #DBF0F0;
+  --hx-color-primary-200: #BCE1E1;
+  --hx-color-primary-300: #97CDCC;
+  --hx-color-primary-400: #6AB1B1;
+  --hx-color-primary-500: #429797;
+  --hx-color-primary-600: #0F7078;
+  --hx-color-primary-700: #0F6363;
+  --hx-color-primary-800: #07494A;
+  --hx-color-primary-900: #0B3232;
+  --hx-color-primary-950: #061B1B;
+  --hx-color-secondary-50: #EAF8FA;
+  --hx-color-secondary-100: #DAF0F3;
+  --hx-color-secondary-200: #BBE1E5;
+  --hx-color-secondary-300: #96CCD2;
+  --hx-color-secondary-400: #69B1B9;
+  --hx-color-secondary-500: #40969F;
+  --hx-color-secondary-600: #0F6B7E;
+  --hx-color-secondary-700: #0B626A;
+  --hx-color-secondary-800: #04494F;
+  --hx-color-secondary-900: #0A3135;
+  --hx-color-secondary-950: #061B1D;
+  --hx-color-accent-50: #F0F5FF;
+  --hx-color-accent-100: #E2EBFF;
+  --hx-color-accent-200: #C8D9FC;
+  --hx-color-accent-300: #A3C0FF;
+  --hx-color-accent-400: #769FFD;
+  --hx-color-accent-500: #4C7EFB;
+  --hx-color-accent-600: #3A4BC9;
+  --hx-color-accent-700: #254BB6;
+  --hx-color-accent-800: #19378A;
+  --hx-color-accent-900: #12265D;
+  --hx-color-accent-950: #081534;
   --hx-color-neutral-0: #FFFFFF;
-  --hx-color-neutral-50: #F8FAFC;
-  --hx-color-neutral-100: #F1F5F9;
-  --hx-color-neutral-200: #E2E8F0;
-  --hx-color-neutral-300: #CBD5E1;
-  --hx-color-neutral-400: #94A3B8;
-  --hx-color-neutral-500: #64748B;
-  --hx-color-neutral-600: #475569;
-  --hx-color-neutral-700: #334155;
-  --hx-color-neutral-800: #1E293B;
-  --hx-color-neutral-900: #0F172A;
-  --hx-color-neutral-950: #020617;
-  --hx-color-success-50: #F0FDF4;
-  --hx-color-success-100: #DCFCE7;
-  --hx-color-success-200: #BBF7D0;
-  --hx-color-success-300: #86EFAC;
-  --hx-color-success-400: #4ADE80;
-  --hx-color-success-500: #16A34A;
-  --hx-color-success-600: #15803D;
-  --hx-color-success-700: #166534;
-  --hx-color-success-800: #14532D;
-  --hx-color-success-900: #0D3B21;
-  --hx-color-success-950: #052E16;
-  --hx-color-warning-50: #FFFBEB;
-  --hx-color-warning-100: #FEF3C7;
-  --hx-color-warning-200: #FDE68A;
-  --hx-color-warning-300: #FCD34D;
-  --hx-color-warning-400: #FBBF24;
-  --hx-color-warning-500: #D97706;
-  --hx-color-warning-600: #B45309;
-  --hx-color-warning-700: #92400E;
-  --hx-color-warning-800: #78350F;
-  --hx-color-warning-900: #633112;
-  --hx-color-warning-950: #451A03;
-  --hx-color-error-50: #FEF2F2;
-  --hx-color-error-100: #FEE2E2;
-  --hx-color-error-200: #FECACA;
-  --hx-color-error-300: #FCA5A5;
-  --hx-color-error-400: #F87171;
-  --hx-color-error-500: #DC2626;
-  --hx-color-error-600: #B91C1C;
-  --hx-color-error-700: #991B1B;
-  --hx-color-error-800: #7F1D1D;
-  --hx-color-error-900: #651A1A;
-  --hx-color-error-950: #450A0A;
-  --hx-color-info-50: #F0F9FF;
-  --hx-color-info-100: #E0F2FE;
-  --hx-color-info-200: #BAE6FD;
-  --hx-color-info-300: #7DD3FC;
-  --hx-color-info-400: #38BDF8;
-  --hx-color-info-500: #0284C7;
-  --hx-color-info-600: #0369A1;
-  --hx-color-info-700: #075985;
-  --hx-color-info-800: #0C4A6E;
-  --hx-color-info-900: #0A3553;
-  --hx-color-info-950: #082F49;
+  --hx-color-neutral-50: #F5F8F3;
+  --hx-color-neutral-100: #EBEEE9;
+  --hx-color-neutral-200: #D6DBD5;
+  --hx-color-neutral-300: #B6BFB9;
+  --hx-color-neutral-400: #8E9C98;
+  --hx-color-neutral-500: #66787B;
+  --hx-color-neutral-600: #4A5362;
+  --hx-color-neutral-700: #313E4B;
+  --hx-color-neutral-800: #202B39;
+  --hx-color-neutral-900: #0D1825;
+  --hx-color-neutral-950: #010714;
+  --hx-color-success-50: #EAFAEC;
+  --hx-color-success-100: #DAF3DE;
+  --hx-color-success-200: #BAE6C2;
+  --hx-color-success-300: #94D3A1;
+  --hx-color-success-400: #66B879;
+  --hx-color-success-500: #3B9E58;
+  --hx-color-success-600: #0E8A4A;
+  --hx-color-success-700: #146831;
+  --hx-color-success-800: #0B4D23;
+  --hx-color-success-900: #073516;
+  --hx-color-success-950: #051D0B;
+  --hx-color-warning-50: #FFF3EA;
+  --hx-color-warning-100: #FEE6D4;
+  --hx-color-warning-200: #FACFAE;
+  --hx-color-warning-300: #EEB383;
+  --hx-color-warning-400: #DA904F;
+  --hx-color-warning-500: #C2711C;
+  --hx-color-warning-600: #B8650E;
+  --hx-color-warning-700: #804605;
+  --hx-color-warning-800: #603301;
+  --hx-color-warning-900: #422202;
+  --hx-color-warning-950: #261101;
+  --hx-color-error-50: #FFF2F0;
+  --hx-color-error-100: #FEE5E1;
+  --hx-color-error-200: #FCCBC4;
+  --hx-color-error-300: #FDA79C;
+  --hx-color-error-400: #FC7264;
+  --hx-color-error-500: #E5493E;
+  --hx-color-error-600: #C92A2A;
+  --hx-color-error-700: #A21312;
+  --hx-color-error-800: #7A090A;
+  --hx-color-error-900: #530D0A;
+  --hx-color-error-950: #2F0806;
+  --hx-color-info-50: #EFF6FE;
+  --hx-color-info-100: #DDEDFF;
+  --hx-color-info-200: #BEDCFC;
+  --hx-color-info-300: #93C6FA;
+  --hx-color-info-400: #4EA8FE;
+  --hx-color-info-500: #0C8BEB;
+  --hx-color-info-600: #1B6FD4;
+  --hx-color-info-700: #0E5997;
+  --hx-color-info-800: #064172;
+  --hx-color-info-900: #052D4F;
+  --hx-color-info-950: #001830;
   --hx-color-text-primary: var(--hx-color-neutral-900);
-  --hx-color-text-secondary: var(--hx-color-neutral-600);
-  --hx-color-text-muted: var(--hx-color-neutral-500);
+  --hx-color-text-strong: var(--hx-color-neutral-800);
+  --hx-color-text-secondary: var(--hx-color-neutral-700);
+  --hx-color-text-muted: var(--hx-color-neutral-600);
+  --hx-color-text-placeholder: var(--hx-color-neutral-500);
   --hx-color-text-disabled: var(--hx-color-neutral-400);
   --hx-color-text-inverse: var(--hx-color-neutral-0);
-  --hx-color-text-on-primary: var(--hx-color-neutral-0);
-  --hx-color-text-on-secondary: var(--hx-color-neutral-0);
-  --hx-color-text-on-error: var(--hx-color-neutral-0);
-  --hx-color-text-on-success: var(--hx-color-neutral-0);
+  --hx-color-text-on-primary: var(--hx-color-neutral-900);
+  --hx-color-text-on-secondary: var(--hx-color-neutral-900);
+  --hx-color-text-on-error: var(--hx-color-neutral-900);
+  --hx-color-text-on-success: var(--hx-color-neutral-900);
   --hx-color-text-on-warning: var(--hx-color-neutral-900);
-  --hx-color-text-on-info: var(--hx-color-neutral-0);
+  --hx-color-text-on-info: var(--hx-color-neutral-900);
   --hx-color-text-link: var(--hx-color-primary-600);
   --hx-color-text-link-hover: var(--hx-color-primary-700);
   --hx-color-text-link-visited: var(--hx-color-secondary-600);
   --hx-color-text-link-active: var(--hx-color-primary-800);
   --hx-color-error-text: var(--hx-color-error-600);
-  --hx-color-success-text: var(--hx-color-success-600);
+  --hx-color-success-text: var(--hx-color-success-700);
   --hx-color-surface-default: var(--hx-color-neutral-0);
   --hx-color-surface-raised: var(--hx-color-neutral-50);
   --hx-color-surface-sunken: var(--hx-color-neutral-100);
+  --hx-color-surface-inverse: var(--hx-color-neutral-900);
   --hx-color-surface-overlay: rgba(0, 0, 0, 0.75);
   --hx-color-border-default: var(--hx-color-neutral-200);
   --hx-color-border-subtle: var(--hx-color-neutral-100);
@@ -307,9 +310,9 @@
   --hx-overlay-white-40: rgba(255, 255, 255, 0.40);
   --hx-overlay-white-50: rgba(255, 255, 255, 0.50);
   --hx-overlay-white-70: rgba(255, 255, 255, 0.70);
-  --hx-overlay-primary-25: rgba(37, 99, 235, 0.25);
-  --hx-overlay-error-25: rgba(220, 53, 69, 0.25);
-  --hx-overlay-neutral-12: rgba(13, 17, 23, 0.12);
+  --hx-overlay-primary-25: rgba(66, 151, 151, 0.25);
+  --hx-overlay-error-25: rgba(229, 73, 62, 0.25);
+  --hx-overlay-neutral-12: rgba(13, 24, 37, 0.12);
   --hx-breakpoint-sm: 640px;
   --hx-breakpoint-md: 768px;
   --hx-breakpoint-lg: 1024px;
@@ -326,9 +329,11 @@
     --hx-color-error-text: var(--hx-color-error-400);
     --hx-color-success-text: var(--hx-color-success-400);
     --hx-color-text-primary: var(--hx-color-neutral-100);
+    --hx-color-text-strong: var(--hx-color-neutral-50);
     --hx-color-text-secondary: var(--hx-color-neutral-300);
     --hx-color-text-muted: var(--hx-color-neutral-400);
-    --hx-color-text-disabled: var(--hx-color-neutral-600);
+    --hx-color-text-placeholder: var(--hx-color-neutral-400);
+    --hx-color-text-disabled: var(--hx-color-neutral-500);
     --hx-color-text-inverse: var(--hx-color-neutral-900);
     --hx-color-text-link: var(--hx-color-primary-400);
     --hx-color-text-link-hover: var(--hx-color-primary-300);
@@ -337,6 +342,7 @@
     --hx-color-surface-default: var(--hx-color-neutral-900);
     --hx-color-surface-raised: var(--hx-color-neutral-800);
     --hx-color-surface-sunken: var(--hx-color-neutral-950);
+    --hx-color-surface-inverse: var(--hx-color-neutral-100);
     --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
     --hx-color-border-default: var(--hx-color-neutral-700);
     --hx-color-border-subtle: var(--hx-color-neutral-800);
@@ -359,9 +365,11 @@
   --hx-color-error-text: var(--hx-color-error-400);
   --hx-color-success-text: var(--hx-color-success-400);
   --hx-color-text-primary: var(--hx-color-neutral-100);
+  --hx-color-text-strong: var(--hx-color-neutral-50);
   --hx-color-text-secondary: var(--hx-color-neutral-300);
   --hx-color-text-muted: var(--hx-color-neutral-400);
-  --hx-color-text-disabled: var(--hx-color-neutral-600);
+  --hx-color-text-placeholder: var(--hx-color-neutral-400);
+  --hx-color-text-disabled: var(--hx-color-neutral-500);
   --hx-color-text-inverse: var(--hx-color-neutral-900);
   --hx-color-text-link: var(--hx-color-primary-400);
   --hx-color-text-link-hover: var(--hx-color-primary-300);
@@ -370,6 +378,7 @@
   --hx-color-surface-default: var(--hx-color-neutral-900);
   --hx-color-surface-raised: var(--hx-color-neutral-800);
   --hx-color-surface-sunken: var(--hx-color-neutral-950);
+  --hx-color-surface-inverse: var(--hx-color-neutral-100);
   --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
   --hx-color-border-default: var(--hx-color-neutral-700);
   --hx-color-border-subtle: var(--hx-color-neutral-800);
@@ -405,8 +414,10 @@
     --hx-color-info-500: #38BDF8;
     --hx-color-info-600: #7DD3FC;
     --hx-color-text-primary: #FFFFFF;
+    --hx-color-text-strong: #FFFFFF;
     --hx-color-text-secondary: #FFFFFF;
     --hx-color-text-muted: #E0E0E0;
+    --hx-color-text-placeholder: #B0B0B0;
     --hx-color-text-disabled: #767676;
     --hx-color-text-inverse: #000000;
     --hx-color-text-on-primary: #000000;
@@ -422,6 +433,7 @@
     --hx-color-surface-default: #000000;
     --hx-color-surface-raised: #1A1A1A;
     --hx-color-surface-sunken: #000000;
+    --hx-color-surface-inverse: #FFFFFF;
     --hx-color-surface-overlay: rgba(0, 0, 0, 0.95);
     --hx-color-border-default: #FFFFFF;
     --hx-color-border-subtle: #C0C0C0;