zabi-components 5.0.22 → 7.0.0

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

@@ -1,235 +1,258 @@
 @theme {
+/*
+   * Custom base (gray) ramp — single physical scale for --color-base-*.
+   * 21 stops: 50 … 950 (lightest → darkest). Edit hex here; mirror the same block in .dark for standalone imports.
+   * Dark: semantic step S maps to physical (1000 − S), e.g. 50↔950, 75↔925; 500 stays fixed.
+   * Midpoints are frozen hex values (default mode: fixed).
+   */
+--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
 /* Typography - Nunito Sans font family */
-  --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
-
-  /* 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: theme(colors.neutral.50);
-  --color-base-100: theme(colors.neutral.100);
-  --color-base-200: theme(colors.neutral.200);
-  --color-base-300: theme(colors.neutral.300);
-  --color-base-400: theme(colors.neutral.400);
-  --color-base-500: theme(colors.neutral.500);
-  --color-base-600: theme(colors.neutral.600);
-  --color-base-700: theme(colors.neutral.700);
-  --color-base-800: theme(colors.neutral.800);
-  --color-base-900: theme(colors.neutral.900);
-  --color-base-950: theme(colors.neutral.950);
-
-
-  /* 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: theme(colors.white);
-  --color-card-hover: var(--color-base-100);
-  --color-card-active: var(--color-base-100);
-  --color-card-elevated: theme(colors.white);
-
-  /* Overlay Colors */
-  --color-overlay: rgba(0, 0, 0, 0.5);
-
-  /* Input Colors */
-  --color-input: var(--color-base-200);
-  --color-input-hover: var(--color-base-100);
-  --color-input-focus: var(--color-base-100);
-  --color-input-disabled: var(--color-base-100);
-
-  /* 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: theme(colors.brand.600);
-  --color-link-hover: theme(colors.brand.700);
-  --color-success-text: var(--color-success);
-  --color-warning-text: theme(colors.amber.700);
-  --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-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: 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);
-
-  /* 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);
-
-  /* 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);  
-
-  /* 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.500);
-  --color-energetic-weak: theme(colors.citron.600);
-  --color-energetic-medium: theme(colors.citron.400);
-  --color-energetic-strong: theme(colors.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);
-  /* Text alias */
-  --color-info-text: var(--color-info);
-
-  /* ========================================
+--font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif
+/* 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 — semantic tokens alias the physical ramp (light: 1:1) */
+--color-base-50: var(--zabi-base-50)
+--color-base-75: var(--zabi-base-75)
+--color-base-100: var(--zabi-base-100)
+--color-base-150: var(--zabi-base-150)
+--color-base-200: var(--zabi-base-200)
+--color-base-250: var(--zabi-base-250)
+--color-base-300: var(--zabi-base-300)
+--color-base-350: var(--zabi-base-350)
+--color-base-400: var(--zabi-base-400)
+--color-base-450: var(--zabi-base-450)
+--color-base-500: var(--zabi-base-500)
+--color-base-550: var(--zabi-base-550)
+--color-base-600: var(--zabi-base-600)
+--color-base-650: var(--zabi-base-650)
+--color-base-700: var(--zabi-base-700)
+--color-base-750: var(--zabi-base-750)
+--color-base-800: var(--zabi-base-800)
+--color-base-850: var(--zabi-base-850)
+--color-base-900: var(--zabi-base-900)
+--color-base-925: var(--zabi-base-925)
+--color-base-950: var(--zabi-base-950)
+/* 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: theme(colors.white)
+--color-card-hover: var(--color-base-100)
+--color-card-active: var(--color-base-100)
+--color-card-elevated: theme(colors.white)
+/* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
+--color-surface-1: theme(colors.white)
+--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 */
+--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-100)
+/* 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: theme(colors.brand.600)
+--color-link-hover: theme(colors.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)
+--color-nav-menu-item-active: var(--color-link)
+--color-nav-menu-hover: var(--color-base-100)
+--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-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-disabled: var(--color-base-400)
+/* Border Colors */
+--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)
+/* 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)
+/* 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)
+/* 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.500)
+--color-energetic-weak: theme(colors.citron.600)
+--color-energetic-medium: theme(colors.citron.400)
+--color-energetic-strong: theme(colors.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)
+/* Text alias */
+--color-info-text: var(--color-info)
+/* ========================================
      ACTION COLORS - For interactive elements (buttons, links, etc.)
      ======================================== */
-  
-  /* Primary Actions - Used by bg-action-primary utility class */
-  /* 🎯 TO CHANGE bg-action-primary COLOR: Edit the values below */
-  --color-action-primary: var(--color-brand-950);
-  --color-action-primary-hover: var(--color-brand-900);
-  --color-action-primary-active: var(--color-brand-400);
-  --color-action-primary-disabled: var(--color-brand-500);
-  --color-action-primary-subtle: var(--color-brand-100);
-  --color-action-primary-subtle-hover: var(--color-brand-200);
-  --color-action-primary-text: var(--color-brand-50);
-
-  /* Secondary Actions - Used by bg-action-secondary utility class */
-  --color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent);
-  --color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent);
-  --color-action-secondary-active: var(--color-brand-400);
-  --color-action-secondary-disabled: var(--color-brand-500);
-  --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);
-
-  /* Shadow Colors */
-  --shadow-color: 0 0 0;
-  --shadow-opacity: 0.1;
-  --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));
-
-  /* Spacing */
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-
-  /* Border Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-
-  /* Z-index */
-  --z-dropdown: 1000;
-  --z-sticky: 1020;
-  --z-fixed: 1030;
-  --z-modal-backdrop: 1040;
-  --z-modal: 1050;
-  --z-popover: 1060;
-  --z-tooltip: 1070;
-  --z-toast: 1080;
+/* Primary Actions - Used by bg-action-primary utility class */
+/* 🎯 TO CHANGE bg-action-primary COLOR: Edit the values below */
+--color-action-primary: var(--color-brand-950)
+--color-action-primary-hover: var(--color-brand-900)
+--color-action-primary-active: var(--color-brand-400)
+--color-action-primary-disabled: var(--color-brand-500)
+--color-action-primary-subtle: var(--color-brand-100)
+--color-action-primary-subtle-hover: var(--color-brand-200)
+--color-action-primary-text: var(--color-brand-50)
+/* Secondary Actions - Used by bg-action-secondary utility class */
+--color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent)
+--color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent)
+--color-action-secondary-active: var(--color-brand-400)
+--color-action-secondary-disabled: var(--color-brand-500)
+--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)
+/* Shadow Colors */
+--shadow-color: 0 0 0
+--shadow-opacity: 0.1
+--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))
+/* Spacing */
+--spacing-xs: 0.25rem
+--spacing-sm: 0.5rem
+--spacing-md: 1rem
+--spacing-lg: 1.5rem
+--spacing-xl: 2rem
+--spacing-2xl: 3rem
+/* Border Radius */
+--radius-sm: 0.25rem
+--radius-md: 0.375rem
+--radius-lg: 0.5rem
+--radius-xl: 0.75rem
+/* Z-index */
+--z-dropdown: 1000
+--z-sticky: 1020
+--z-fixed: 1030
+--z-modal-backdrop: 1040
+--z-modal: 1050
+--z-popover: 1060
+--z-tooltip: 1070
+--z-toast: 1080
 }