@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/css/helix-tokens.css

@@ -1,121 +1,148 @@
 :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-on-primary-strong: var(--hx-color-neutral-0);
+  --hx-color-text-on-success-strong: var(--hx-color-neutral-0);
+  --hx-color-text-on-error-strong: var(--hx-color-neutral-0);
   --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-surface-success-strong: var(--hx-color-success-700);
+  --hx-color-surface-warning-strong: var(--hx-color-warning-500);
+  --hx-color-surface-danger-strong: var(--hx-color-error-600);
+  --hx-color-surface-info-strong: var(--hx-color-primary-600);
+  --hx-color-surface-on-dark-overlay-default: var(--hx-overlay-white-30);
+  --hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-white-10);
   --hx-color-border-default: var(--hx-color-neutral-200);
   --hx-color-border-subtle: var(--hx-color-neutral-100);
-  --hx-color-border-strong: var(--hx-color-neutral-400);
+  --hx-color-border-strong: var(--hx-color-neutral-500);
   --hx-color-border-focus: var(--hx-color-primary-500);
-  --hx-color-focus-ring: var(--hx-color-primary-400);
+  --hx-color-border-on-dark-strong: var(--hx-overlay-white-70);
+  --hx-color-focus-ring: var(--hx-color-primary-600);
   --hx-color-selection-bg: var(--hx-color-primary-200);
   --hx-color-selection-color: var(--hx-color-neutral-900);
+  --hx-color-action-primary-bg: var(--hx-color-primary-500);
+  --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-500);
+  --hx-color-action-primary-bg-hover: var(--hx-color-primary-600);
+  --hx-color-action-primary-bg-active: var(--hx-color-primary-700);
+  --hx-color-action-primary-bg-inverted-hover: var(--hx-color-primary-400);
+  --hx-color-action-secondary-fg: var(--hx-color-primary-600);
+  --hx-color-action-secondary-border: var(--hx-color-primary-600);
+  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-50);
+  --hx-color-action-ghost-fg: var(--hx-color-primary-600);
+  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-50);
+  --hx-color-action-danger-bg: var(--hx-color-error-500);
+  --hx-color-action-danger-bg-hover: var(--hx-color-error-600);
+  --hx-color-action-danger-bg-active: var(--hx-color-error-700);
+  --hx-color-action-danger-bg-inverted-hover: var(--hx-color-error-400);
   --hx-body-bg: var(--hx-color-surface-default);
   --hx-body-color: var(--hx-color-text-primary);
   --hx-body-font-family: var(--hx-font-family-sans);
@@ -215,7 +242,7 @@
   --hx-transition-slow: 350ms ease;
   --hx-touch-target-min: 2.75rem;
   --hx-touch-target-size: 44px;
-  --hx-focus-ring-color: var(--hx-color-primary-400);
+  --hx-focus-ring-color: var(--hx-color-primary-600);
   --hx-focus-ring-width: 2px;
   --hx-focus-ring-offset: 2px;
   --hx-focus-ring-style: solid;
@@ -307,9 +334,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 +353,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,16 +366,27 @@
     --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-surface-on-dark-overlay-default: var(--hx-overlay-black-30);
+    --hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-black-10);
     --hx-color-border-default: var(--hx-color-neutral-700);
     --hx-color-border-subtle: var(--hx-color-neutral-800);
-    --hx-color-border-strong: var(--hx-color-neutral-500);
+    --hx-color-border-strong: var(--hx-color-neutral-400);
     --hx-color-border-focus: var(--hx-color-primary-400);
+    --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
     --hx-color-focus-ring: var(--hx-color-primary-400);
     --hx-color-selection-bg: var(--hx-color-primary-800);
     --hx-color-selection-color: var(--hx-color-neutral-100);
+    --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
+    --hx-color-action-secondary-fg: var(--hx-color-primary-400);
+    --hx-color-action-secondary-border: var(--hx-color-primary-400);
+    --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
+    --hx-color-action-ghost-fg: var(--hx-color-primary-400);
+    --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
     --hx-body-bg: var(--hx-color-surface-default);
     --hx-body-color: var(--hx-color-text-primary);
+    --hx-focus-ring-color: var(--hx-color-primary-400);
     --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
     --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
     --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -359,9 +399,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,16 +412,27 @@
   --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-surface-on-dark-overlay-default: var(--hx-overlay-black-30);
+  --hx-color-surface-on-dark-overlay-subtle: var(--hx-overlay-black-10);
   --hx-color-border-default: var(--hx-color-neutral-700);
   --hx-color-border-subtle: var(--hx-color-neutral-800);
-  --hx-color-border-strong: var(--hx-color-neutral-500);
+  --hx-color-border-strong: var(--hx-color-neutral-400);
   --hx-color-border-focus: var(--hx-color-primary-400);
+  --hx-color-border-on-dark-strong: var(--hx-overlay-black-50);
   --hx-color-focus-ring: var(--hx-color-primary-400);
   --hx-color-selection-bg: var(--hx-color-primary-800);
   --hx-color-selection-color: var(--hx-color-neutral-100);
+  --hx-color-action-primary-bg-inverted-rest: var(--hx-color-primary-600);
+  --hx-color-action-secondary-fg: var(--hx-color-primary-400);
+  --hx-color-action-secondary-border: var(--hx-color-primary-400);
+  --hx-color-action-secondary-bg-hover: var(--hx-color-primary-900);
+  --hx-color-action-ghost-fg: var(--hx-color-primary-400);
+  --hx-color-action-ghost-bg-hover: var(--hx-color-primary-900);
   --hx-body-bg: var(--hx-color-surface-default);
   --hx-body-color: var(--hx-color-text-primary);
+  --hx-focus-ring-color: var(--hx-color-primary-400);
   --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
   --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
   --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
@@ -405,8 +458,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;
@@ -415,6 +470,9 @@
     --hx-color-text-on-success: #000000;
     --hx-color-text-on-warning: #000000;
     --hx-color-text-on-info: #000000;
+    --hx-color-text-on-primary-strong: #000000;
+    --hx-color-text-on-error-strong: #000000;
+    --hx-color-text-on-success-strong: #000000;
     --hx-color-text-link: #FFFF00;
     --hx-color-text-link-hover: #FFFF99;
     --hx-color-text-link-visited: #FF80FF;
@@ -422,14 +480,23 @@
     --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-surface-success-strong: var(--hx-color-success-500);
+    --hx-color-surface-warning-strong: var(--hx-color-warning-500);
+    --hx-color-surface-danger-strong: var(--hx-color-error-500);
+    --hx-color-surface-info-strong: var(--hx-color-primary-500);
+    --hx-color-surface-on-dark-overlay-default: #FFFFFF;
+    --hx-color-surface-on-dark-overlay-subtle: #C0C0C0;
     --hx-color-border-default: #FFFFFF;
     --hx-color-border-subtle: #C0C0C0;
     --hx-color-border-strong: #FFFFFF;
     --hx-color-border-focus: #FFFF00;
+    --hx-color-border-on-dark-strong: #FFFFFF;
     --hx-color-focus-ring: #FFFF00;
     --hx-color-selection-bg: #1AEBFF;
     --hx-color-selection-color: #000000;
+    --hx-color-action-danger-bg-active: var(--hx-color-error-500);
     --hx-body-bg: #000000;
     --hx-body-color: #FFFFFF;
     --hx-focus-ring-color: #FFFF00;

package/dist/css/helix-utility.css

@@ -52,19 +52,19 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)
     );
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Size modifiers ─── */
@@ -149,7 +149,7 @@
     border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);
     border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));
     background-color: var(--hx-copy-button-bg, transparent);
-    color: var(--hx-copy-button-color, var(--hx-color-primary-500));
+    color: var(--hx-copy-button-color, var(--hx-color-primary-500, #429797));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast),
@@ -205,10 +205,13 @@
   /* ─── Copied / Success State ─── */
 
   .button--copied {
-    color: var(--hx-color-success-text, var(--hx-color-primary-500));
+    color: var(
+      --hx-copy-button-copied-color,
+      var(--hx-color-success-text, var(--hx-color-success-700, #146831))
+    );
     /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).
        A border provides visual differentiation for users with color blindness. */
-    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));
+    border-color: var(--hx-copy-button-copied-border-color, var(--hx-color-success-500, #3b9e58));
   }
 
   /* ─── Icon Container ─── */
@@ -290,7 +293,7 @@
     align-items: baseline;
     font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
-    color: var(--hx-counter-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-counter-color, var(--hx-color-neutral-900, #0d1825));
     line-height: var(--hx-line-height-tight, 1.25);
     font-variant-numeric: tabular-nums;
   }
@@ -392,8 +395,8 @@
     border-inline-end: none;
     border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -412,10 +415,7 @@
 
   .split-button__primary:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-      );
+      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
     position: relative;
@@ -442,11 +442,11 @@
     flex-shrink: 0;
     border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-split-button-divider-color, var(--hx-color-primary-900, #0b3232));
     border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
-    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -457,10 +457,7 @@
 
   .split-button__trigger:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-      );
+      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
     position: relative;
@@ -533,10 +530,20 @@
 
   .split-button--primary .split-button__primary,
   .split-button--primary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);
+    --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);
+  }
+
+  /* primary:hover — replace the universal brightness(0.9) filter (which would
+     drop primary-500 + on-primary contrast to ~4.4:1) with an explicit swap
+     to primary-600 and a neutral-0 foreground. Mirrors hx-button precedent. */
+  .split-button--primary .split-button__primary:hover,
+  .split-button--primary .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    filter: none;
   }
 
   /* ─── Variant: secondary ─── */
@@ -544,14 +551,14 @@
   .split-button--secondary .split-button__primary,
   .split-button--secondary .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-border-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-divider-color: var(--hx-color-primary-300, #97cdcc);
   }
 
   .split-button--secondary .split-button__primary:hover,
   .split-button--secondary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-split-button-bg: var(--hx-color-primary-50, #ebf8f8);
     filter: none;
   }
 
@@ -559,15 +566,15 @@
 
   .split-button--tertiary .split-button__primary,
   .split-button--tertiary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-split-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .split-button--tertiary .split-button__primary:hover,
   .split-button--tertiary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -575,15 +582,19 @@
 
   .split-button--danger .split-button__primary,
   .split-button--danger .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
+    --hx-split-button-divider-color: var(--hx-color-error-400, #fc7264);
   }
 
+  /* danger:hover — on-error tokens are tuned for error-500. error-600 drops
+     the pair to 2.25:1 (AA fail). Pin fg at neutral-0 to keep the darker
+     hover fill legible. Mirrors hx-toast precedent (commit 300e21ab0). */
   .split-button--danger .split-button__primary:hover,
   .split-button--danger .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);
+    --hx-split-button-bg: var(--hx-color-error-600, #c92a2a);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
     filter: none;
   }
 
@@ -592,14 +603,14 @@
   .split-button--ghost .split-button__primary,
   .split-button--ghost .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);
+    --hx-split-button-divider-color: var(--hx-color-primary-200, #bce1e1);
   }
 
   .split-button--ghost .split-button__primary:hover,
   .split-button--ghost .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -608,14 +619,14 @@
   .split-button--outline .split-button__primary,
   .split-button--outline .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #66787b);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .split-button--outline .split-button__primary:hover,
   .split-button--outline .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -640,9 +651,9 @@
     min-width: 100%;
     max-height: var(--hx-split-button-menu-max-height, 18rem);
     overflow-y: auto;
-    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-split-button-menu-shadow,

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

@@ -50,19 +50,19 @@
   /* ─── Variant: outlined ─── */
 
   .base--outlined {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)
     );
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f8fafc));
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Size modifiers ─── */