zabi-components 5.0.14 → 5.0.17

package/dist/zabi-components-colors.css

@@ -0,0 +1,333 @@
+/* ========================================
+   ZABI COMPONENTS COLOR SYSTEM
+   Standalone CSS Custom Properties
+   Works without Tailwind CSS processing
+   ======================================== */
+
+:root {
+  /* Brand Color Scale */
+  --color-brand-50: #f7faff;
+  --color-brand-100: #edf2fb;
+  --color-brand-200: #dfe7fb;
+  --color-brand-300: #ccdbfd;
+  --color-brand-400: #abc4ff;
+  --color-brand-500: #8fa8ff;
+  --color-brand-600: #6e84fa;
+  --color-brand-700: #5366e2;
+  --color-brand-800: #3f4fc0;
+  --color-brand-900: #2f3c99;
+  --color-brand-950: #1f2866;
+
+  /* Citron Color Scale */
+  --color-citron-50: #f9faeb;
+  --color-citron-100: #f1f5cf;
+  --color-citron-200: #e4ecaa;
+  --color-citron-300: #d5e184;
+  --color-citron-400: #c7d460;
+  --color-citron-500: #bbbe64;
+  --color-citron-600: #a3a852;
+  --color-citron-700: #848a43;
+  --color-citron-800: #666c35;
+  --color-citron-900: #4d5229;
+  --color-citron-950: #323518;
+
+  /* Pine Color Scale */
+  --color-pine-50: #e9f6f2;
+  --color-pine-100: #d2ece4;
+  --color-pine-200: #a7d9c9;
+  --color-pine-300: #78c4ad;
+  --color-pine-400: #49ad91;
+  --color-pine-500: #0C5D43;
+  --color-pine-600: #0a513a;
+  --color-pine-700: #084532;
+  --color-pine-800: #063a2a;
+  --color-pine-900: #04231a;
+  --color-pine-950: #02160f;
+
+  /* Iris Color Scale */
+  --color-iris-50: #f4f4fa;
+  --color-iris-100: #e9e9f7;
+  --color-iris-200: #d6d6f0;
+  --color-iris-300: #bdbde6;
+  --color-iris-400: #a3a3d8;
+  --color-iris-500: #6969B3;
+  --color-iris-600: #58589e;
+  --color-iris-700: #474788;
+  --color-iris-800: #38386f;
+  --color-iris-900: #2a2a56;
+  --color-iris-950: #1b1b37;
+
+  /* Base Color Scale - Maps to neutral palette */
+  --color-base-50: #fafaf9;
+  --color-base-100: #f5f5f4;
+  --color-base-200: #e7e5e4;
+  --color-base-300: #d6d3d1;
+  --color-base-400: #a8a29e;
+  --color-base-500: #78716c;
+  --color-base-600: #57534e;
+  --color-base-700: #44403c;
+  --color-base-800: #292524;
+  --color-base-900: #1c1917;
+  --color-base-950: #0c0a09;
+
+
+  /* Background Colors */
+  --color-background: var(--color-base-100);
+  --color-background-secondary: var(--color-base-50);
+  --color-background-tertiary: var(--color-base-100);
+
+  /* Page Colors */
+  --color-page: var(--color-base-100);
+  --color-page-secondary: var(--color-base-200);
+
+  /* Card Colors */
+  --color-card: #ffffff;
+  --color-card-hover: var(--color-base-100);
+  --color-card-active: var(--color-base-100);
+  --color-card-elevated: #ffffff;
+
+  /* Text Colors */
+  --color-headline: var(--color-base-900);
+  --color-body: var(--color-base-800);
+  --color-description: var(--color-base-600);
+  --color-caption: var(--color-base-500);
+  --color-input-placeholder: var(--color-base-400);
+  --color-label: var(--color-base-700);
+  --color-link: var(--color-brand-600);
+  --color-link-hover: var(--color-brand-700);
+  --color-success-text: var(--color-pine-700);
+  --color-warning-text: #b45309;
+  --color-neutral-text: var(--color-base-700);
+  --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-weak: var(--color-base-300);
+  --color-border-medium: var(--color-base-400);
+  --color-border-strong: var(--color-base-500);
+
+  /* Focus Colors */
+  --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);
+
+  /* Primary Colors */
+  --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: 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: #f59e0b;
+  --color-warning-weak: #d97706;
+  --color-warning-medium: #fbbf24;
+  --color-warning-strong: #fcd34d;
+
+  /* Error Colors */
+  --color-error: #ef4444;
+  --color-error-weak: #dc2626;
+  --color-error-medium: #f87171;
+  --color-error-strong: #fca5a5;
+
+  /* Energetic Colors (Citron) */
+  --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: 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);
+  --color-info-text: var(--color-info);
+
+  /* Action Colors */
+  --color-action-primary: var(--color-brand-300);
+  --color-action-primary-hover: var(--color-brand-400);
+  --color-action-primary-active: var(--color-brand-800);
+  --color-action-primary-disabled: var(--color-brand-300);
+  --color-action-primary-subtle: var(--color-brand-50);
+  --color-action-primary-subtle-hover: var(--color-brand-100);
+
+  --color-action-secondary: var(--color-base-600);
+  --color-action-secondary-hover: var(--color-base-700);
+  --color-action-secondary-active: var(--color-base-800);
+  --color-action-secondary-disabled: var(--color-base-300);
+  --color-action-secondary-subtle: var(--color-base-100);
+  --color-action-secondary-subtle-hover: var(--color-base-200);
+
+  --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;
+}
+
+/* Dark Mode */
+.dark {
+
+  /* Brand Color Scale - Dark mode variants */
+  --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: #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: #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: #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 - Dark mode variants (inverted neutral palette) */
+  --color-base-50: #0c0a09;
+  --color-base-100: #1c1917;
+  --color-base-200: #292524;
+  --color-base-300: #44403c;
+  --color-base-400: #57534e;
+  --color-base-500: #78716c;
+  --color-base-600: #a8a29e;
+  --color-base-700: #d6d3d1;
+  --color-base-800: #e7e5e4;
+  --color-base-900: #f5f5f4;
+  --color-base-950: #fafaf9;
+
+  /* Background Colors */
+  --color-background: var(--color-base-100);
+  --color-background-secondary: var(--color-base-200);
+  --color-background-tertiary: var(--color-base-300);
+
+  /* Page Colors */
+  --color-page: var(--color-base-200);
+  --color-page-secondary: var(--color-base-200);
+
+  /* Card Colors */
+  --color-card: var(--color-base-200);
+  --color-card-hover: var(--color-base-300);
+  --color-card-active: var(--color-base-400);
+  --color-card-elevated: var(--color-base-200);
+
+  /* Text Colors */
+  --color-headline: var(--color-base-900);
+  --color-body: var(--color-base-800);
+  --color-description: var(--color-base-700);
+  --color-caption: var(--color-base-600);
+  --color-input-placeholder: var(--color-base-500);
+  --color-label: var(--color-base-800);
+  /* Link Colors - No dark mode overrides needed, brand colors are already inverted */
+  /* Success Text - No dark mode overrides needed, pine colors are already inverted */
+  --color-warning-text: #fbbf24;
+  /* Neutral Text - No dark mode overrides needed, base colors are already inverted */
+  /* Energetic Text - No dark mode overrides needed, citron colors are already inverted */
+  --color-error-text: #f87171;
+  --color-inverse: var(--color-base-100);
+  --color-disabled: var(--color-base-500);
+
+  /* Border Colors */
+  --color-border: var(--color-base-400);
+  --color-border-weak: var(--color-base-500);
+  --color-border-medium: var(--color-base-600);
+  --color-border-strong: var(--color-base-700);
+
+  /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
+
+  /* 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 - No dark mode overrides needed, pine colors are already inverted */
+
+  /* Warning Colors */
+  --color-warning: #f59e0b;
+  --color-warning-weak: #d97706;
+  --color-warning-medium: #fbbf24;
+  --color-warning-strong: #fcd34d;
+
+  /* Error Colors */
+  --color-error: #ef4444;
+  --color-error-weak: #dc2626;
+  --color-error-medium: #f87171;
+  --color-error-strong: #fca5a5;
+
+  /* Energetic Colors (Citron) - No dark mode overrides needed, citron colors are already inverted */
+
+  /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Info Colors - No dark mode overrides needed, iris colors are already inverted */
+
+  /* Action Colors - Dark mode variants */
+  /* Primary Actions - No dark mode overrides needed, brand colors are already inverted */
+
+  /* Action Secondary - No dark mode overrides needed, base colors are already inverted */
+
+  --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;
+}
+

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

@@ -0,0 +1,149 @@
+/* Dark Mode Theme - CSS Custom Properties */
+/* Import this file after the main theme to enable dark mode support */
+.dark {
+/* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* Base Color Scale - Dark mode variants (inverted neutral palette) */
+  --color-base-50: theme(colors.neutral.950);
+  --color-base-100: theme(colors.neutral.900);
+  --color-base-200: theme(colors.neutral.800);
+  --color-base-300: theme(colors.neutral.700);
+  --color-base-400: theme(colors.neutral.600);
+  --color-base-500: theme(colors.neutral.500);
+  --color-base-600: theme(colors.neutral.400);
+  --color-base-700: theme(colors.neutral.300);
+  --color-base-800: theme(colors.neutral.200);
+  --color-base-900: theme(colors.neutral.100);
+  --color-base-950: theme(colors.neutral.50);
+
+  /* Background Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Page Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Card Colors */
+  --color-card: var(--color-base-200);
+  --color-card-hover: var(--color-base-300);
+  --color-card-active: var(--color-base-400);
+  --color-card-elevated: var(--color-base-200);
+
+  /* Input Colors */
+  --color-input: var(--color-base-300);
+  --color-input-hover: var(--color-base-400);
+  --color-input-focus: var(--color-base-300);
+  --color-input-disabled: var(--color-base-400);
+
+  /* Text Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Border Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+  /* Text alias */
+  --color-info-text: var(--color-info);
+
+  /* Action Colors - Dark mode variants */
+  /* Primary Actions - No dark mode overrides needed, brand colors are already inverted */
+
+  /* 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);
+
+  /* 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));
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+}

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

@@ -0,0 +1,151 @@
+@import "tailwindcss";
+
+/* Dark Mode Theme - CSS Custom Properties */
+/* Import this file after the main theme to enable dark mode support */
+.dark {
+/* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* Base Color Scale - Dark mode variants (inverted neutral palette) */
+  --color-base-50: theme(colors.neutral.950);
+  --color-base-100: theme(colors.neutral.900);
+  --color-base-200: theme(colors.neutral.800);
+  --color-base-300: theme(colors.neutral.700);
+  --color-base-400: theme(colors.neutral.600);
+  --color-base-500: theme(colors.neutral.500);
+  --color-base-600: theme(colors.neutral.400);
+  --color-base-700: theme(colors.neutral.300);
+  --color-base-800: theme(colors.neutral.200);
+  --color-base-900: theme(colors.neutral.100);
+  --color-base-950: theme(colors.neutral.50);
+
+  /* Background Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Page Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Card Colors */
+  --color-card: var(--color-base-200);
+  --color-card-hover: var(--color-base-300);
+  --color-card-active: var(--color-base-400);
+  --color-card-elevated: var(--color-base-200);
+
+  /* Input Colors */
+  --color-input: var(--color-base-300);
+  --color-input-hover: var(--color-base-400);
+  --color-input-focus: var(--color-base-300);
+  --color-input-disabled: var(--color-base-400);
+
+  /* Text Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Border Colors - No dark mode overrides needed, base colors are already inverted */
+
+  /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+  /* Text alias */
+  --color-info-text: var(--color-info);
+
+  /* Action Colors - Dark mode variants */
+  /* Primary Actions - No dark mode overrides needed, brand colors are already inverted */
+
+  /* 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);
+
+  /* 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));
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+}