zabi-components 5.0.21 → 6.0.0

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

@@ -3,158 +3,166 @@
 /* Dark Mode Theme - CSS Custom Properties */
 /* Import this file after the main theme to enable dark mode support */
 .dark {
+/* Mirror @theme --zabi-base-* ramp (same physical hex; required for standalone dark import) */
+--zabi-base-50: #fafafa
+--zabi-base-75: #f7f7f7
+--zabi-base-100: #f4f4f5
+--zabi-base-150: #ececee
+--zabi-base-200: #e4e4e7
+--zabi-base-250: #dcdcdf
+--zabi-base-300: #d4d4d8
+--zabi-base-350: #babac1
+--zabi-base-400: #a1a1aa
+--zabi-base-450: #898992
+--zabi-base-500: #71717a
+--zabi-base-550: #61616a
+--zabi-base-600: #52525b
+--zabi-base-650: #484850
+--zabi-base-700: #3f3f46
+--zabi-base-750: #333338
+--zabi-base-800: #27272a
+--zabi-base-850: #1f1f22
+--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);
-
-  /* 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);
-
-  /* Overlay Colors */
-  --color-overlay: rgba(0, 0, 0, 0.7);
-
-  /* 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);
-
-  /* ========================================
+--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 — semantic → physical mirror (1000 − step); 500 is fixed point */
+--color-base-50: #09090b
+--color-base-75: #101013
+--color-base-100: #18181b
+--color-base-150: #1f1f22
+--color-base-200: #27272a
+--color-base-250: #333338
+--color-base-300: #3f3f46
+--color-base-350: #484850
+--color-base-400: #52525b
+--color-base-450: #61616a
+--color-base-500: #71717a
+--color-base-550: #898992
+--color-base-600: #a1a1aa
+--color-base-650: #babac1
+--color-base-700: #d4d4d8
+--color-base-750: #dcdcdf
+--color-base-800: #e4e4e7
+--color-base-850: #ececee
+--color-base-900: #f4f4f5
+--color-base-925: #f7f7f7
+--color-base-950: #fafafa
+/* 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)
+/* Overlay Colors */
+--color-overlay: rgba(0, 0, 0, 0.7)
+/* Input Colors */
+--color-input: var(--color-base-250)
+--color-input-border: var(--color-base-350)
+--color-input-hover: var(--color-base-300)
+--color-input-focus: var(--color-base-300)
+--color-input-disabled: var(--color-base-300)
+/* 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 Overrides
      ======================================== */
-  
-  /* Primary Actions - Background adapts automatically via brand color inversion */
-  /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
-  /* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
-  --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);
-
-  /* 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));
+/* Primary Actions - Background adapts automatically via brand color inversion */
+/* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
+/* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
+--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)
+/* 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))
 }