zabi-components 7.0.0 → 7.0.2

package/dist/zabi-components-theme.css

@@ -30,54 +30,144 @@
 --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
+/* Brand Color Scale — physical ramp + semantic aliases (same mirror pattern as pine / base) */
+--zabi-brand-50: #f7faff
+--zabi-brand-100: #edf2fb
+--zabi-brand-200: #dfe7fb
+--zabi-brand-300: #ccdbfd
+--zabi-brand-400: #abc4ff
+--zabi-brand-500: #8fa8ff
+--zabi-brand-600: #6e84fa
+--zabi-brand-700: #5366e2
+--zabi-brand-800: #3f4fc0
+--zabi-brand-900: #2f3c99
+--zabi-brand-950: #1f2866
+--color-brand-50: var(--zabi-brand-50)
+--color-brand-100: var(--zabi-brand-100)
+--color-brand-200: var(--zabi-brand-200)
+--color-brand-300: var(--zabi-brand-300)
+--color-brand-400: var(--zabi-brand-400)
+--color-brand-500: var(--zabi-brand-500)
+--color-brand-600: var(--zabi-brand-600)
+--color-brand-700: var(--zabi-brand-700)
+--color-brand-800: var(--zabi-brand-800)
+--color-brand-900: var(--zabi-brand-900)
+--color-brand-950: var(--zabi-brand-950)
+/* Citron Color Scale — physical ramp + semantic aliases (same mirror pattern as pine / base) */
+--zabi-citron-50: #f9faeb
+--zabi-citron-100: #f1f5cf
+--zabi-citron-200: #e4ecaa
+--zabi-citron-300: #d5e184
+--zabi-citron-400: #c7d460
+--zabi-citron-500: #bbbe64
+--zabi-citron-600: #a3a852
+--zabi-citron-700: #848a43
+--zabi-citron-800: #666c35
+--zabi-citron-900: #4d5229
+--zabi-citron-950: #323518
+--color-citron-50: var(--zabi-citron-50)
+--color-citron-100: var(--zabi-citron-100)
+--color-citron-200: var(--zabi-citron-200)
+--color-citron-300: var(--zabi-citron-300)
+--color-citron-400: var(--zabi-citron-400)
+--color-citron-500: var(--zabi-citron-500)
+--color-citron-600: var(--zabi-citron-600)
+--color-citron-700: var(--zabi-citron-700)
+--color-citron-800: var(--zabi-citron-800)
+--color-citron-900: var(--zabi-citron-900)
+--color-citron-950: var(--zabi-citron-950)
+/* Pine Color Scale — physical ramp + semantic aliases (mirror pattern matches --zabi-base-* / --color-base-*) */
+--zabi-pine-50: #e9f6f2
+--zabi-pine-100: #d2ece4
+--zabi-pine-200: #a7d9c9
+--zabi-pine-300: #78c4ad
+--zabi-pine-400: #49ad91
+--zabi-pine-500: #0c5d43
+--zabi-pine-600: #0a513a
+--zabi-pine-700: #084532
+--zabi-pine-800: #063a2a
+--zabi-pine-900: #04231a
+--zabi-pine-950: #02160f
+--color-pine-50: var(--zabi-pine-50)
+--color-pine-100: var(--zabi-pine-100)
+--color-pine-200: var(--zabi-pine-200)
+--color-pine-300: var(--zabi-pine-300)
+--color-pine-400: var(--zabi-pine-400)
+--color-pine-500: var(--zabi-pine-500)
+--color-pine-600: var(--zabi-pine-600)
+--color-pine-700: var(--zabi-pine-700)
+--color-pine-800: var(--zabi-pine-800)
+--color-pine-900: var(--zabi-pine-900)
+--color-pine-950: var(--zabi-pine-950)
+/* Iris Color Scale — physical ramp + semantic aliases (same mirror pattern as pine / base) */
+--zabi-iris-50: #f4f4fa
+--zabi-iris-100: #e9e9f7
+--zabi-iris-200: #d6d6f0
+--zabi-iris-300: #bdbde6
+--zabi-iris-400: #a3a3d8
+--zabi-iris-500: #6969b3
+--zabi-iris-600: #58589e
+--zabi-iris-700: #474788
+--zabi-iris-800: #38386f
+--zabi-iris-900: #2a2a56
+--zabi-iris-950: #1b1b37
+--color-iris-50: var(--zabi-iris-50)
+--color-iris-100: var(--zabi-iris-100)
+--color-iris-200: var(--zabi-iris-200)
+--color-iris-300: var(--zabi-iris-300)
+--color-iris-400: var(--zabi-iris-400)
+--color-iris-500: var(--zabi-iris-500)
+--color-iris-600: var(--zabi-iris-600)
+--color-iris-700: var(--zabi-iris-700)
+--color-iris-800: var(--zabi-iris-800)
+--color-iris-900: var(--zabi-iris-900)
+--color-iris-950: var(--zabi-iris-950)
+/* Warning Color Scale — physical ramp + semantic aliases (Tailwind amber) */
+--zabi-warning-50: #fffbeb
+--zabi-warning-100: #fef3c7
+--zabi-warning-200: #fde68a
+--zabi-warning-300: #fcd34d
+--zabi-warning-400: #fbbf24
+--zabi-warning-500: #f59e0b
+--zabi-warning-600: #d97706
+--zabi-warning-700: #b45309
+--zabi-warning-800: #92400e
+--zabi-warning-900: #78350f
+--zabi-warning-950: #451a03
+--color-warning-50: var(--zabi-warning-50)
+--color-warning-100: var(--zabi-warning-100)
+--color-warning-200: var(--zabi-warning-200)
+--color-warning-300: var(--zabi-warning-300)
+--color-warning-400: var(--zabi-warning-400)
+--color-warning-500: var(--zabi-warning-500)
+--color-warning-600: var(--zabi-warning-600)
+--color-warning-700: var(--zabi-warning-700)
+--color-warning-800: var(--zabi-warning-800)
+--color-warning-900: var(--zabi-warning-900)
+--color-warning-950: var(--zabi-warning-950)
+/* Error Color Scale — physical ramp + semantic aliases (Tailwind red) */
+--zabi-error-50: #fef2f2
+--zabi-error-100: #fee2e2
+--zabi-error-200: #fecaca
+--zabi-error-300: #fca5a5
+--zabi-error-400: #f87171
+--zabi-error-500: #ef4444
+--zabi-error-600: #dc2626
+--zabi-error-700: #b91c1c
+--zabi-error-800: #991b1b
+--zabi-error-900: #7f1d1d
+--zabi-error-950: #450a0a
+--color-error-50: var(--zabi-error-50)
+--color-error-100: var(--zabi-error-100)
+--color-error-200: var(--zabi-error-200)
+--color-error-300: var(--zabi-error-300)
+--color-error-400: var(--zabi-error-400)
+--color-error-500: var(--zabi-error-500)
+--color-error-600: var(--zabi-error-600)
+--color-error-700: var(--zabi-error-700)
+--color-error-800: var(--zabi-error-800)
+--color-error-900: var(--zabi-error-900)
+--color-error-950: var(--zabi-error-950)
 /* 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)
@@ -108,12 +198,12 @@
 --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: theme(colors.white)
+--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)
@@ -132,8 +222,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)
@@ -142,11 +232,11 @@
 --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: var(--color-warning-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-energetic-text: var(--color-citron-700)
+--color-error-text: var(--color-error-700)
+--color-inverse: var(--color-base-100)
 --color-disabled: var(--color-base-400)
 /* Border Colors */
 --color-border: var(--color-base-300)
@@ -154,53 +244,54 @@
 --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: var(--color-warning-500)
+--color-warning-weak: var(--color-warning-600)
+--color-warning-medium: var(--color-warning-400)
+--color-warning-strong: var(--color-warning-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)
+--color-error: var(--color-error-500)
+--color-error-weak: var(--color-error-600)
+--color-error-medium: var(--color-error-400)
+--color-error-strong: var(--color-error-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)
+--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)
+--color-info-active: var(--color-iris-400)
 /* Text alias */
 --color-info-text: var(--color-info)
 /* ========================================
@@ -223,12 +314,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
@@ -257,4 +348,7 @@
 --z-popover: 1060
 --z-tooltip: 1070
 --z-toast: 1080
+/* Tooltip — elevated hint surface (Tooltip.svelte); arrow uses --color-tooltip-bg */
+--color-tooltip-bg: var(--color-base-800)
+--color-tooltip-fg: var(--color-base-50)
 }