zabi-components 6.0.0 → 7.0.1

package/dist/util/ssr-safe.js

@@ -0,0 +1,48 @@
+/**
+ * Browser-only guards and id generation for components that run under SSR.
+ * `generateId()` is non-deterministic on the client (random) vs counter on the server —
+ * use stable ids for ARIA pairs (e.g. `menuId` on NavigationMenu), not for persisted keys.
+ */
+export function isBrowser() {
+    return typeof window !== 'undefined';
+}
+export function safeWindow() {
+    return isBrowser() ? window : undefined;
+}
+export function safeDocument() {
+    return isBrowser() ? document : undefined;
+}
+export function safeLocalStorage() {
+    return isBrowser() ? localStorage : undefined;
+}
+export function safeSessionStorage() {
+    return isBrowser() ? sessionStorage : undefined;
+}
+export function safeRequestAnimationFrame(callback) {
+    return isBrowser() ? requestAnimationFrame(callback) : undefined;
+}
+export function safeSetTimeout(callback, delay) {
+    return isBrowser() ? setTimeout(callback, delay) : undefined;
+}
+export function safeClearTimeout(id) {
+    if (isBrowser() && id) {
+        clearTimeout(id);
+    }
+}
+export function safeSetInterval(callback, delay) {
+    return isBrowser() ? setInterval(callback, delay) : undefined;
+}
+export function safeClearInterval(id) {
+    if (isBrowser() && id) {
+        clearInterval(id);
+    }
+}
+let idCounter = 0;
+export function generateId(prefix = 'id') {
+    if (isBrowser()) {
+        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    else {
+        return `${prefix}-ssr-${++idCounter}`;
+    }
+}

package/dist/zabi-components-colors.css

@@ -114,10 +114,15 @@
   --color-page: var(--color-base-100)
   --color-page-secondary: var(--color-base-200)
   /* Card Colors */
-  --color-card: theme(colors.white)
+  --color-card: #ffffff
   --color-card-hover: var(--color-base-100)
   --color-card-active: var(--color-base-100)
-  --color-card-elevated: theme(colors.white)
+  --color-card-elevated: #ffffff
+  /* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
+  --color-surface-1: #ffffff
+  --color-surface-2: var(--color-base-50)
+  --color-surface-3: var(--color-base-75)
+  --color-surface-4: var(--color-base-100)
   /* Overlay Colors */
   --color-overlay: rgba(0, 0, 0, 0.5)
   /* Input Colors */
@@ -133,8 +138,8 @@
   --color-caption: var(--color-base-500)
   --color-input-placeholder: var(--color-base-400)
   --color-label: var(--color-base-700)
-  --color-link: theme(colors.brand.600)
-  --color-link-hover: theme(colors.brand.700)
+  --color-link: var(--color-brand-600)
+  --color-link-hover: var(--color-brand-700)
   /* Navigation menu item — menubar triggers, menu links, inline/sidebar nav rows */
   --color-nav-menu-item: var(--color-body)
   --color-nav-menu-item-hover: var(--color-headline)
@@ -143,62 +148,65 @@
   --color-nav-menu-active: var(--color-action-primary-subtle)
   --color-nav-menu-focus: var(--color-brand-500)
   --color-success-text: var(--color-success)
-  --color-warning-text: theme(colors.amber.700)
+  --color-warning-text: #b45309
   --color-neutral-text: var(--color-base-700)
-  --color-energetic-text: theme(colors.citron.700)
-  --color-error-text: theme(colors.red.700)
-  --color-inverse: theme(colors.white)
+  --color-energetic-text: var(--color-citron-700)
+  --color-error-text: #b91c1c
+  --color-inverse: #ffffff
   --color-disabled: var(--color-base-400)
   /* Border Colors */
-  --color-border: var(--color-base-200)
+  --color-border: var(--color-base-300)
   --color-border-weak: var(--color-base-300)
   --color-border-medium: var(--color-base-400)
   --color-border-strong: var(--color-base-500)
   /* Focus Colors */
-  --color-focus: theme(colors.brand.500)
-  --color-focus-weak: theme(colors.brand.600)
-  --color-focus-medium: theme(colors.brand.700)
-  --color-focus-strong: theme(colors.brand.800)
+  --color-focus: var(--color-brand-500)
+  --color-focus-weak: var(--color-brand-600)
+  --color-focus-medium: var(--color-brand-700)
+  --color-focus-strong: var(--color-brand-800)
+  /* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
+  --color-focus-ring: var(--color-focus)
+  --color-focus-ring-offset: var(--color-card)
   /* Primary Colors */
-  --color-primary: theme(colors.brand.600)
-  --color-primary-weak: theme(colors.brand.700)
-  --color-primary-medium: theme(colors.brand.800)
-  --color-primary-strong: theme(colors.brand.900)
+  --color-primary: var(--color-brand-600)
+  --color-primary-weak: var(--color-brand-700)
+  --color-primary-medium: var(--color-brand-800)
+  --color-primary-strong: var(--color-brand-900)
   /* Secondary Colors */
   --color-secondary: var(--color-base-600)
   --color-secondary-weak: var(--color-base-700)
   --color-secondary-medium: var(--color-base-800)
   --color-secondary-strong: var(--color-base-900)
   /* Success Colors */
-  --color-success: theme(colors.pine.600)
-  --color-success-weak: theme(colors.pine.700)
-  --color-success-medium: theme(colors.pine.800)
-  --color-success-strong: theme(colors.pine.900)
+  --color-success: var(--color-pine-600)
+  --color-success-weak: var(--color-pine-700)
+  --color-success-medium: var(--color-pine-800)
+  --color-success-strong: var(--color-pine-900)
   /* Warning Colors */
-  --color-warning: theme(colors.amber.500)
-  --color-warning-weak: theme(colors.amber.600)
-  --color-warning-medium: theme(colors.amber.400)
-  --color-warning-strong: theme(colors.amber.300)
+  --color-warning: #f59e0b
+  --color-warning-weak: #d97706
+  --color-warning-medium: #fbbf24
+  --color-warning-strong: #fcd34d
   /* Error Colors */
-  --color-error: theme(colors.red.500)
-  --color-error-weak: theme(colors.red.600)
-  --color-error-medium: theme(colors.red.400)
-  --color-error-strong: theme(colors.red.300)
+  --color-error: #ef4444
+  --color-error-weak: #dc2626
+  --color-error-medium: #f87171
+  --color-error-strong: #fca5a5
   /* Energetic Colors (Citron) */
-  --color-energetic: theme(colors.citron.500)
-  --color-energetic-weak: theme(colors.citron.600)
-  --color-energetic-medium: theme(colors.citron.400)
-  --color-energetic-strong: theme(colors.citron.300)
+  --color-energetic: var(--color-citron-500)
+  --color-energetic-weak: var(--color-citron-600)
+  --color-energetic-medium: var(--color-citron-400)
+  --color-energetic-strong: var(--color-citron-300)
   /* Neutral Colors */
   --color-neutral: var(--color-base-600)
   --color-neutral-weak: var(--color-base-700)
   --color-neutral-medium: var(--color-base-800)
   --color-neutral-strong: var(--color-base-900)
   /* Info Colors */
-  --color-info: theme(colors.iris.600)
-  --color-info-weak: theme(colors.iris.700)
-  --color-info-medium: theme(colors.iris.800)
-  --color-info-strong: theme(colors.iris.900)
+  --color-info: var(--color-iris-600)
+  --color-info-weak: var(--color-iris-700)
+  --color-info-medium: var(--color-iris-800)
+  --color-info-strong: var(--color-iris-900)
   /* Text alias */
   --color-info-text: var(--color-info)
   /* ========================================
@@ -221,12 +229,12 @@
   --color-action-secondary-subtle: var(--color-brand-600)
   --color-action-secondary-subtle-hover: var(--color-brand-700)
   /* Danger Actions - Used by bg-action-danger utility class */
-  --color-action-danger: theme(colors.red.600)
-  --color-action-danger-hover: theme(colors.red.700)
-  --color-action-danger-active: theme(colors.red.800)
-  --color-action-danger-disabled: theme(colors.red.300)
-  --color-action-danger-subtle: theme(colors.red.50)
-  --color-action-danger-subtle-hover: theme(colors.red.100)
+  --color-action-danger: #dc2626
+  --color-action-danger-hover: #b91c1c
+  --color-action-danger-active: #991b1b
+  --color-action-danger-disabled: #fca5a5
+  --color-action-danger-subtle: #fef2f2
+  --color-action-danger-subtle-hover: #fee2e2
   /* Shadow Colors */
   --shadow-color: 0 0 0
   --shadow-opacity: 0.1
@@ -281,54 +289,54 @@
   --zabi-base-900: #18181b
   --zabi-base-925: #101013
   --zabi-base-950: #09090b
-  /* Brand Color Scale - Dark mode variants */
-  --color-brand-50: theme(colors.brand.950)
-  --color-brand-100: theme(colors.brand.900)
-  --color-brand-200: theme(colors.brand.800)
-  --color-brand-300: theme(colors.brand.700)
-  --color-brand-400: theme(colors.brand.600)
-  --color-brand-500: theme(colors.brand.500)
-  --color-brand-600: theme(colors.brand.400)
-  --color-brand-700: theme(colors.brand.300)
-  --color-brand-800: theme(colors.brand.200)
-  --color-brand-900: theme(colors.brand.100)
-  --color-brand-950: theme(colors.brand.50)
+  /* Brand Color Scale - Dark mode variants (mirrored from light physical hex; no theme() forward refs) */
+  --color-brand-50: #1f2866
+  --color-brand-100: #2f3c99
+  --color-brand-200: #3f4fc0
+  --color-brand-300: #5366e2
+  --color-brand-400: #6e84fa
+  --color-brand-500: #8fa8ff
+  --color-brand-600: #abc4ff
+  --color-brand-700: #ccdbfd
+  --color-brand-800: #dfe7fb
+  --color-brand-900: #edf2fb
+  --color-brand-950: #f7faff
   /* Citron Color Scale - Dark mode variants */
-  --color-citron-50: theme(colors.citron.950)
-  --color-citron-100: theme(colors.citron.900)
-  --color-citron-200: theme(colors.citron.800)
-  --color-citron-300: theme(colors.citron.700)
-  --color-citron-400: theme(colors.citron.600)
-  --color-citron-500: theme(colors.citron.500)
-  --color-citron-600: theme(colors.citron.400)
-  --color-citron-700: theme(colors.citron.300)
-  --color-citron-800: theme(colors.citron.200)
-  --color-citron-900: theme(colors.citron.100)
-  --color-citron-950: theme(colors.citron.50)
+  --color-citron-50: #323518
+  --color-citron-100: #4d5229
+  --color-citron-200: #666c35
+  --color-citron-300: #848a43
+  --color-citron-400: #a3a852
+  --color-citron-500: #bbbe64
+  --color-citron-600: #c7d460
+  --color-citron-700: #d5e184
+  --color-citron-800: #e4ecaa
+  --color-citron-900: #f1f5cf
+  --color-citron-950: #f9faeb
   /* Pine Color Scale - Dark mode variants */
-  --color-pine-50: theme(colors.pine.950)
-  --color-pine-100: theme(colors.pine.900)
-  --color-pine-200: theme(colors.pine.800)
-  --color-pine-300: theme(colors.pine.700)
-  --color-pine-400: theme(colors.pine.600)
-  --color-pine-500: theme(colors.pine.500)
-  --color-pine-600: theme(colors.pine.400)
-  --color-pine-700: theme(colors.pine.300)
-  --color-pine-800: theme(colors.pine.200)
-  --color-pine-900: theme(colors.pine.100)
-  --color-pine-950: theme(colors.pine.50)
+  --color-pine-50: #02160f
+  --color-pine-100: #04231a
+  --color-pine-200: #063a2a
+  --color-pine-300: #084532
+  --color-pine-400: #0a513a
+  --color-pine-500: #0c5d43
+  --color-pine-600: #49ad91
+  --color-pine-700: #78c4ad
+  --color-pine-800: #a7d9c9
+  --color-pine-900: #d2ece4
+  --color-pine-950: #e9f6f2
   /* Iris Color Scale - Dark mode variants */
-  --color-iris-50: theme(colors.iris.950)
-  --color-iris-100: theme(colors.iris.900)
-  --color-iris-200: theme(colors.iris.800)
-  --color-iris-300: theme(colors.iris.700)
-  --color-iris-400: theme(colors.iris.600)
-  --color-iris-500: theme(colors.iris.500)
-  --color-iris-600: theme(colors.iris.400)
-  --color-iris-700: theme(colors.iris.300)
-  --color-iris-800: theme(colors.iris.200)
-  --color-iris-900: theme(colors.iris.100)
-  --color-iris-950: theme(colors.iris.50)
+  --color-iris-50: #1b1b37
+  --color-iris-100: #2a2a56
+  --color-iris-200: #38386f
+  --color-iris-300: #474788
+  --color-iris-400: #58589e
+  --color-iris-500: #6969b3
+  --color-iris-600: #a3a3d8
+  --color-iris-700: #bdbde6
+  --color-iris-800: #d6d6f0
+  --color-iris-900: #e9e9f7
+  --color-iris-950: #f4f4fa
   /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
   --color-base-50: #09090b
   --color-base-75: #101013
@@ -358,6 +366,11 @@
   --color-card-hover: var(--color-base-300)
   --color-card-active: var(--color-base-400)
   --color-card-elevated: var(--color-base-200)
+  /* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
+  --color-surface-1: var(--color-base-250)
+  --color-surface-2: var(--color-base-300)
+  --color-surface-3: var(--color-base-350)
+  --color-surface-4: var(--color-base-400)
   /* Overlay Colors */
   --color-overlay: rgba(0, 0, 0, 0.7)
   /* Input Colors */
@@ -372,32 +385,32 @@
   /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
   /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
   /* Success Colors */
-  --color-success: theme(colors.pine.400)
-  --color-success-weak: theme(colors.pine.500)
-  --color-success-medium: theme(colors.pine.300)
-  --color-success-strong: theme(colors.pine.200)
+  --color-success: var(--color-pine-400)
+  --color-success-weak: var(--color-pine-500)
+  --color-success-medium: var(--color-pine-300)
+  --color-success-strong: var(--color-pine-200)
   /* Warning Colors */
-  --color-warning: theme(colors.amber.500)
-  --color-warning-weak: theme(colors.amber.600)
-  --color-warning-medium: theme(colors.amber.400)
-  --color-warning-strong: theme(colors.amber.300)
+  --color-warning: #f59e0b
+  --color-warning-weak: #d97706
+  --color-warning-medium: #fbbf24
+  --color-warning-strong: #fcd34d
   /* Error Colors */
-  --color-error: theme(colors.red.500)
-  --color-error-weak: theme(colors.red.600)
-  --color-error-medium: theme(colors.red.400)
-  --color-error-strong: theme(colors.red.300)
+  --color-error: #ef4444
+  --color-error-weak: #dc2626
+  --color-error-medium: #f87171
+  --color-error-strong: #fca5a5
   /* Energetic Colors (Citron) */
-  --color-energetic: theme(colors.citron.400)
-  --color-energetic-weak: theme(colors.citron.500)
-  --color-energetic-medium: theme(colors.citron.300)
-  --color-energetic-strong: theme(colors.citron.200)
+  --color-energetic: var(--color-citron-400)
+  --color-energetic-weak: var(--color-citron-500)
+  --color-energetic-medium: var(--color-citron-300)
+  --color-energetic-strong: var(--color-citron-200)
   /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
   /* Info Colors */
-  --color-info: theme(colors.iris.500)
-  --color-info-weak: theme(colors.iris.600)
-  --color-info-active: theme(colors.iris.400)
-  --color-info-medium: theme(colors.iris.400)
-  --color-info-strong: theme(colors.iris.300)
+  --color-info: var(--color-iris-500)
+  --color-info-weak: var(--color-iris-600)
+  --color-info-active: var(--color-iris-400)
+  --color-info-medium: var(--color-iris-400)
+  --color-info-strong: var(--color-iris-300)
   /* Text alias */
   --color-info-text: var(--color-info)
   /* ========================================
@@ -409,12 +422,12 @@
   --color-action-primary-text: var(--color-brand-50)
   /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
   /* Danger Actions */
-  --color-action-danger: theme(colors.red.500)
-  --color-action-danger-hover: theme(colors.red.600)
-  --color-action-danger-active: theme(colors.red.700)
-  --color-action-danger-disabled: theme(colors.red.700)
-  --color-action-danger-subtle: theme(colors.red.950)
-  --color-action-danger-subtle-hover: theme(colors.red.900)
+  --color-action-danger: #ef4444
+  --color-action-danger-hover: #dc2626
+  --color-action-danger-active: #b91c1c
+  --color-action-danger-disabled: #b91c1c
+  --color-action-danger-subtle: #450a0a
+  --color-action-danger-subtle-hover: #7f1d1d
   /* Shadow Colors */
   --shadow-opacity: 0.3
   --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))

package/dist/zabi-components-theme-dark-only.css

@@ -23,54 +23,54 @@
 --zabi-base-900: #18181b
 --zabi-base-925: #101013
 --zabi-base-950: #09090b
-/* Brand Color Scale - Dark mode variants */
---color-brand-50: theme(colors.brand.950)
---color-brand-100: theme(colors.brand.900)
---color-brand-200: theme(colors.brand.800)
---color-brand-300: theme(colors.brand.700)
---color-brand-400: theme(colors.brand.600)
---color-brand-500: theme(colors.brand.500)
---color-brand-600: theme(colors.brand.400)
---color-brand-700: theme(colors.brand.300)
---color-brand-800: theme(colors.brand.200)
---color-brand-900: theme(colors.brand.100)
---color-brand-950: theme(colors.brand.50)
+/* Brand Color Scale - Dark mode variants (mirrored from light physical hex; no theme() forward refs) */
+--color-brand-50: #1f2866
+--color-brand-100: #2f3c99
+--color-brand-200: #3f4fc0
+--color-brand-300: #5366e2
+--color-brand-400: #6e84fa
+--color-brand-500: #8fa8ff
+--color-brand-600: #abc4ff
+--color-brand-700: #ccdbfd
+--color-brand-800: #dfe7fb
+--color-brand-900: #edf2fb
+--color-brand-950: #f7faff
 /* Citron Color Scale - Dark mode variants */
---color-citron-50: theme(colors.citron.950)
---color-citron-100: theme(colors.citron.900)
---color-citron-200: theme(colors.citron.800)
---color-citron-300: theme(colors.citron.700)
---color-citron-400: theme(colors.citron.600)
---color-citron-500: theme(colors.citron.500)
---color-citron-600: theme(colors.citron.400)
---color-citron-700: theme(colors.citron.300)
---color-citron-800: theme(colors.citron.200)
---color-citron-900: theme(colors.citron.100)
---color-citron-950: theme(colors.citron.50)
+--color-citron-50: #323518
+--color-citron-100: #4d5229
+--color-citron-200: #666c35
+--color-citron-300: #848a43
+--color-citron-400: #a3a852
+--color-citron-500: #bbbe64
+--color-citron-600: #c7d460
+--color-citron-700: #d5e184
+--color-citron-800: #e4ecaa
+--color-citron-900: #f1f5cf
+--color-citron-950: #f9faeb
 /* Pine Color Scale - Dark mode variants */
---color-pine-50: theme(colors.pine.950)
---color-pine-100: theme(colors.pine.900)
---color-pine-200: theme(colors.pine.800)
---color-pine-300: theme(colors.pine.700)
---color-pine-400: theme(colors.pine.600)
---color-pine-500: theme(colors.pine.500)
---color-pine-600: theme(colors.pine.400)
---color-pine-700: theme(colors.pine.300)
---color-pine-800: theme(colors.pine.200)
---color-pine-900: theme(colors.pine.100)
---color-pine-950: theme(colors.pine.50)
+--color-pine-50: #02160f
+--color-pine-100: #04231a
+--color-pine-200: #063a2a
+--color-pine-300: #084532
+--color-pine-400: #0a513a
+--color-pine-500: #0c5d43
+--color-pine-600: #49ad91
+--color-pine-700: #78c4ad
+--color-pine-800: #a7d9c9
+--color-pine-900: #d2ece4
+--color-pine-950: #e9f6f2
 /* Iris Color Scale - Dark mode variants */
---color-iris-50: theme(colors.iris.950)
---color-iris-100: theme(colors.iris.900)
---color-iris-200: theme(colors.iris.800)
---color-iris-300: theme(colors.iris.700)
---color-iris-400: theme(colors.iris.600)
---color-iris-500: theme(colors.iris.500)
---color-iris-600: theme(colors.iris.400)
---color-iris-700: theme(colors.iris.300)
---color-iris-800: theme(colors.iris.200)
---color-iris-900: theme(colors.iris.100)
---color-iris-950: theme(colors.iris.50)
+--color-iris-50: #1b1b37
+--color-iris-100: #2a2a56
+--color-iris-200: #38386f
+--color-iris-300: #474788
+--color-iris-400: #58589e
+--color-iris-500: #6969b3
+--color-iris-600: #a3a3d8
+--color-iris-700: #bdbde6
+--color-iris-800: #d6d6f0
+--color-iris-900: #e9e9f7
+--color-iris-950: #f4f4fa
 /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
 --color-base-50: #09090b
 --color-base-75: #101013
@@ -100,6 +100,11 @@
 --color-card-hover: var(--color-base-300)
 --color-card-active: var(--color-base-400)
 --color-card-elevated: var(--color-base-200)
+/* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
+--color-surface-1: var(--color-base-250)
+--color-surface-2: var(--color-base-300)
+--color-surface-3: var(--color-base-350)
+--color-surface-4: var(--color-base-400)
 /* Overlay Colors */
 --color-overlay: rgba(0, 0, 0, 0.7)
 /* Input Colors */
@@ -114,32 +119,32 @@
 /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
 /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
 /* Success Colors */
---color-success: theme(colors.pine.400)
---color-success-weak: theme(colors.pine.500)
---color-success-medium: theme(colors.pine.300)
---color-success-strong: theme(colors.pine.200)
+--color-success: var(--color-pine-400)
+--color-success-weak: var(--color-pine-500)
+--color-success-medium: var(--color-pine-300)
+--color-success-strong: var(--color-pine-200)
 /* Warning Colors */
---color-warning: theme(colors.amber.500)
---color-warning-weak: theme(colors.amber.600)
---color-warning-medium: theme(colors.amber.400)
---color-warning-strong: theme(colors.amber.300)
+--color-warning: #f59e0b
+--color-warning-weak: #d97706
+--color-warning-medium: #fbbf24
+--color-warning-strong: #fcd34d
 /* Error Colors */
---color-error: theme(colors.red.500)
---color-error-weak: theme(colors.red.600)
---color-error-medium: theme(colors.red.400)
---color-error-strong: theme(colors.red.300)
+--color-error: #ef4444
+--color-error-weak: #dc2626
+--color-error-medium: #f87171
+--color-error-strong: #fca5a5
 /* Energetic Colors (Citron) */
---color-energetic: theme(colors.citron.400)
---color-energetic-weak: theme(colors.citron.500)
---color-energetic-medium: theme(colors.citron.300)
---color-energetic-strong: theme(colors.citron.200)
+--color-energetic: var(--color-citron-400)
+--color-energetic-weak: var(--color-citron-500)
+--color-energetic-medium: var(--color-citron-300)
+--color-energetic-strong: var(--color-citron-200)
 /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
 /* Info Colors */
---color-info: theme(colors.iris.500)
---color-info-weak: theme(colors.iris.600)
---color-info-active: theme(colors.iris.400)
---color-info-medium: theme(colors.iris.400)
---color-info-strong: theme(colors.iris.300)
+--color-info: var(--color-iris-500)
+--color-info-weak: var(--color-iris-600)
+--color-info-active: var(--color-iris-400)
+--color-info-medium: var(--color-iris-400)
+--color-info-strong: var(--color-iris-300)
 /* Text alias */
 --color-info-text: var(--color-info)
 /* ========================================
@@ -151,12 +156,12 @@
 --color-action-primary-text: var(--color-brand-50)
 /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
 /* Danger Actions */
---color-action-danger: theme(colors.red.500)
---color-action-danger-hover: theme(colors.red.600)
---color-action-danger-active: theme(colors.red.700)
---color-action-danger-disabled: theme(colors.red.700)
---color-action-danger-subtle: theme(colors.red.950)
---color-action-danger-subtle-hover: theme(colors.red.900)
+--color-action-danger: #ef4444
+--color-action-danger-hover: #dc2626
+--color-action-danger-active: #b91c1c
+--color-action-danger-disabled: #b91c1c
+--color-action-danger-subtle: #450a0a
+--color-action-danger-subtle-hover: #7f1d1d
 /* Shadow Colors */
 --shadow-opacity: 0.3
 --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))