zabi-components 7.0.1 → 7.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atoms/Tooltip.svelte +12 -38
- package/dist/zabi-components-colors.css +3 -437
- package/dist/zabi-components-theme-dark-only.css +151 -78
- package/dist/zabi-components-theme-dark.css +151 -78
- package/dist/zabi-components-theme-only.css +153 -59
- package/dist/zabi-components-theme.css +153 -59
- package/dist/zabi-components.css +268 -106
- package/package.json +2 -2
|
@@ -64,8 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
$effect(() => {
|
|
66
66
|
const root = triggerElement;
|
|
67
|
-
const describe =
|
|
68
|
-
isVisible && content && !disabled ? tooltipId : null;
|
|
67
|
+
const describe = isVisible && content && !disabled ? tooltipId : null;
|
|
69
68
|
if (!root) {
|
|
70
69
|
return;
|
|
71
70
|
}
|
|
@@ -162,7 +161,7 @@
|
|
|
162
161
|
{#if content && !disabled}
|
|
163
162
|
<div
|
|
164
163
|
id={tooltipId}
|
|
165
|
-
class="tooltip"
|
|
164
|
+
class="tooltip pointer-events-none invisible absolute z-tooltip whitespace-normal wrap-break-word rounded-lg bg-tooltip-bg px-3 py-2 text-sm leading-5 text-tooltip-fg opacity-0 transition-[opacity,visibility,transform] duration-200 ease-in-out"
|
|
166
165
|
role="tooltip"
|
|
167
166
|
aria-hidden={!isVisible}
|
|
168
167
|
data-visible={isVisible}
|
|
@@ -175,40 +174,17 @@
|
|
|
175
174
|
|
|
176
175
|
<style>
|
|
177
176
|
:root {
|
|
178
|
-
|
|
179
|
-
--tooltip-
|
|
180
|
-
--tooltip-padding: 0.5rem 0.75rem;
|
|
181
|
-
--tooltip-radius: 0.5rem;
|
|
182
|
-
--tooltip-font-size: 0.875rem;
|
|
183
|
-
--tooltip-line-height: 1.25rem;
|
|
184
|
-
--tooltip-max-width: 200px;
|
|
177
|
+
/* Cap only very long copy; width:max-content keeps typical sentences on one line until this limit */
|
|
178
|
+
--tooltip-max-width: min(24rem, calc(100vw - 2rem));
|
|
185
179
|
--tooltip-gap: 0.5rem;
|
|
186
180
|
--tooltip-arrow-size: 4px;
|
|
187
|
-
--tooltip-transition: opacity 0.2s ease-in-out,
|
|
188
|
-
visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.tooltip-container {
|
|
192
|
-
position: relative;
|
|
193
|
-
display: inline-block;
|
|
194
181
|
}
|
|
195
182
|
|
|
183
|
+
/* max-width: policy forbids max-w-* utilities on packaged atoms; variable used by sm: override */
|
|
196
184
|
.tooltip {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
background-color: var(--tooltip-bg);
|
|
201
|
-
color: var(--tooltip-color);
|
|
202
|
-
border-radius: var(--tooltip-radius);
|
|
203
|
-
font-size: var(--tooltip-font-size);
|
|
204
|
-
line-height: var(--tooltip-line-height);
|
|
205
|
-
max-width: var(--tooltip-max-width);
|
|
206
|
-
white-space: normal;
|
|
207
|
-
word-wrap: break-word;
|
|
208
|
-
opacity: 0;
|
|
209
|
-
visibility: hidden;
|
|
210
|
-
transition: var(--tooltip-transition);
|
|
211
|
-
pointer-events: none;
|
|
185
|
+
width: -moz-max-content;
|
|
186
|
+
width: max-content;
|
|
187
|
+
max-width: var(--tooltip-max-width, min(24rem, calc(100vw - 2rem)));
|
|
212
188
|
}
|
|
213
189
|
|
|
214
190
|
.tooltip-container[data-placement="top"] .tooltip {
|
|
@@ -268,7 +244,7 @@
|
|
|
268
244
|
position: absolute;
|
|
269
245
|
width: calc(var(--tooltip-arrow-size) * 2);
|
|
270
246
|
height: calc(var(--tooltip-arrow-size) * 2);
|
|
271
|
-
background-color: var(--tooltip-bg);
|
|
247
|
+
background-color: var(--color-tooltip-bg);
|
|
272
248
|
}
|
|
273
249
|
|
|
274
250
|
.tooltip-container[data-placement="top"] .tooltip::before {
|
|
@@ -322,10 +298,8 @@
|
|
|
322
298
|
}
|
|
323
299
|
|
|
324
300
|
@media (prefers-contrast: high) {
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
--tooltip-color: Canvas;
|
|
328
|
-
--tooltip-padding: 0.75rem 1rem;
|
|
301
|
+
.tooltip {
|
|
302
|
+
padding: 0.75rem 1rem;
|
|
329
303
|
}
|
|
330
304
|
}
|
|
331
305
|
|
|
@@ -354,6 +328,6 @@
|
|
|
354
328
|
box-shadow:
|
|
355
329
|
0 0 0 2px var(--color-focus-ring-offset),
|
|
356
330
|
0 0 0 4px var(--color-focus-ring);
|
|
357
|
-
border-radius:
|
|
331
|
+
border-radius: 0.5rem;
|
|
358
332
|
}
|
|
359
333
|
</style>
|
|
@@ -1,437 +1,3 @@
|
|
|
1
|
-
/*
|
|
2
|
-
ZABI COMPONENTS COLOR SYSTEM
|
|
3
|
-
|
|
4
|
-
Generated from src/app.css
|
|
5
|
-
⚠️ DO NOT EDIT - This file is auto-generated
|
|
6
|
-
Edit src/app.css instead
|
|
7
|
-
======================================== */
|
|
8
|
-
|
|
9
|
-
:root {
|
|
10
|
-
/*
|
|
11
|
-
* Custom base (gray) ramp — single physical scale for --color-base-*.
|
|
12
|
-
* 21 stops: 50 … 950 (lightest → darkest). Edit hex here; mirror the same block in .dark for standalone imports.
|
|
13
|
-
* Dark: semantic step S maps to physical (1000 − S), e.g. 50↔950, 75↔925; 500 stays fixed.
|
|
14
|
-
* Midpoints are frozen hex values (default mode: fixed).
|
|
15
|
-
*/
|
|
16
|
-
--zabi-base-50: #fafafa
|
|
17
|
-
--zabi-base-75: #f7f7f7
|
|
18
|
-
--zabi-base-100: #f4f4f5
|
|
19
|
-
--zabi-base-150: #ececee
|
|
20
|
-
--zabi-base-200: #e4e4e7
|
|
21
|
-
--zabi-base-250: #dcdcdf
|
|
22
|
-
--zabi-base-300: #d4d4d8
|
|
23
|
-
--zabi-base-350: #babac1
|
|
24
|
-
--zabi-base-400: #a1a1aa
|
|
25
|
-
--zabi-base-450: #898992
|
|
26
|
-
--zabi-base-500: #71717a
|
|
27
|
-
--zabi-base-550: #61616a
|
|
28
|
-
--zabi-base-600: #52525b
|
|
29
|
-
--zabi-base-650: #484850
|
|
30
|
-
--zabi-base-700: #3f3f46
|
|
31
|
-
--zabi-base-750: #333338
|
|
32
|
-
--zabi-base-800: #27272a
|
|
33
|
-
--zabi-base-850: #1f1f22
|
|
34
|
-
--zabi-base-900: #18181b
|
|
35
|
-
--zabi-base-925: #101013
|
|
36
|
-
--zabi-base-950: #09090b
|
|
37
|
-
/* Typography - Nunito Sans font family */
|
|
38
|
-
--font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif
|
|
39
|
-
/* Brand Color Scale */
|
|
40
|
-
--color-brand-50: #f7faff
|
|
41
|
-
--color-brand-100: #edf2fb
|
|
42
|
-
--color-brand-200: #dfe7fb
|
|
43
|
-
--color-brand-300: #ccdbfd
|
|
44
|
-
--color-brand-400: #abc4ff
|
|
45
|
-
--color-brand-500: #8fa8ff
|
|
46
|
-
--color-brand-600: #6e84fa
|
|
47
|
-
--color-brand-700: #5366e2
|
|
48
|
-
--color-brand-800: #3f4fc0
|
|
49
|
-
--color-brand-900: #2f3c99
|
|
50
|
-
--color-brand-950: #1f2866
|
|
51
|
-
/* Citron Color Scale */
|
|
52
|
-
--color-citron-50: #f9faeb
|
|
53
|
-
--color-citron-100: #f1f5cf
|
|
54
|
-
--color-citron-200: #e4ecaa
|
|
55
|
-
--color-citron-300: #d5e184
|
|
56
|
-
--color-citron-400: #c7d460
|
|
57
|
-
--color-citron-500: #bbbe64
|
|
58
|
-
--color-citron-600: #a3a852
|
|
59
|
-
--color-citron-700: #848a43
|
|
60
|
-
--color-citron-800: #666c35
|
|
61
|
-
--color-citron-900: #4d5229
|
|
62
|
-
--color-citron-950: #323518
|
|
63
|
-
/* Pine Color Scale */
|
|
64
|
-
--color-pine-50: #e9f6f2
|
|
65
|
-
--color-pine-100: #d2ece4
|
|
66
|
-
--color-pine-200: #a7d9c9
|
|
67
|
-
--color-pine-300: #78c4ad
|
|
68
|
-
--color-pine-400: #49ad91
|
|
69
|
-
--color-pine-500: #0C5D43
|
|
70
|
-
--color-pine-600: #0a513a
|
|
71
|
-
--color-pine-700: #084532
|
|
72
|
-
--color-pine-800: #063a2a
|
|
73
|
-
--color-pine-900: #04231a
|
|
74
|
-
--color-pine-950: #02160f
|
|
75
|
-
/* Iris Color Scale */
|
|
76
|
-
--color-iris-50: #f4f4fa
|
|
77
|
-
--color-iris-100: #e9e9f7
|
|
78
|
-
--color-iris-200: #d6d6f0
|
|
79
|
-
--color-iris-300: #bdbde6
|
|
80
|
-
--color-iris-400: #a3a3d8
|
|
81
|
-
--color-iris-500: #6969B3
|
|
82
|
-
--color-iris-600: #58589e
|
|
83
|
-
--color-iris-700: #474788
|
|
84
|
-
--color-iris-800: #38386f
|
|
85
|
-
--color-iris-900: #2a2a56
|
|
86
|
-
--color-iris-950: #1b1b37
|
|
87
|
-
/* Base Color Scale — semantic tokens alias the physical ramp (light: 1:1) */
|
|
88
|
-
--color-base-50: var(--zabi-base-50)
|
|
89
|
-
--color-base-75: var(--zabi-base-75)
|
|
90
|
-
--color-base-100: var(--zabi-base-100)
|
|
91
|
-
--color-base-150: var(--zabi-base-150)
|
|
92
|
-
--color-base-200: var(--zabi-base-200)
|
|
93
|
-
--color-base-250: var(--zabi-base-250)
|
|
94
|
-
--color-base-300: var(--zabi-base-300)
|
|
95
|
-
--color-base-350: var(--zabi-base-350)
|
|
96
|
-
--color-base-400: var(--zabi-base-400)
|
|
97
|
-
--color-base-450: var(--zabi-base-450)
|
|
98
|
-
--color-base-500: var(--zabi-base-500)
|
|
99
|
-
--color-base-550: var(--zabi-base-550)
|
|
100
|
-
--color-base-600: var(--zabi-base-600)
|
|
101
|
-
--color-base-650: var(--zabi-base-650)
|
|
102
|
-
--color-base-700: var(--zabi-base-700)
|
|
103
|
-
--color-base-750: var(--zabi-base-750)
|
|
104
|
-
--color-base-800: var(--zabi-base-800)
|
|
105
|
-
--color-base-850: var(--zabi-base-850)
|
|
106
|
-
--color-base-900: var(--zabi-base-900)
|
|
107
|
-
--color-base-925: var(--zabi-base-925)
|
|
108
|
-
--color-base-950: var(--zabi-base-950)
|
|
109
|
-
/* Background Colors */
|
|
110
|
-
--color-background: var(--color-base-100)
|
|
111
|
-
--color-background-secondary: var(--color-base-50)
|
|
112
|
-
--color-background-tertiary: var(--color-base-100)
|
|
113
|
-
/* Page Colors */
|
|
114
|
-
--color-page: var(--color-base-100)
|
|
115
|
-
--color-page-secondary: var(--color-base-200)
|
|
116
|
-
/* Card Colors */
|
|
117
|
-
--color-card: #ffffff
|
|
118
|
-
--color-card-hover: var(--color-base-100)
|
|
119
|
-
--color-card-active: var(--color-base-100)
|
|
120
|
-
--color-card-elevated: #ffffff
|
|
121
|
-
/* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
|
|
122
|
-
--color-surface-1: #ffffff
|
|
123
|
-
--color-surface-2: var(--color-base-50)
|
|
124
|
-
--color-surface-3: var(--color-base-75)
|
|
125
|
-
--color-surface-4: var(--color-base-100)
|
|
126
|
-
/* Overlay Colors */
|
|
127
|
-
--color-overlay: rgba(0, 0, 0, 0.5)
|
|
128
|
-
/* Input Colors */
|
|
129
|
-
--color-input: var(--color-base-250)
|
|
130
|
-
--color-input-border: var(--color-base-350)
|
|
131
|
-
--color-input-hover: var(--color-base-300)
|
|
132
|
-
--color-input-focus: var(--color-base-300)
|
|
133
|
-
--color-input-disabled: var(--color-base-100)
|
|
134
|
-
/* Text Colors */
|
|
135
|
-
--color-headline: var(--color-base-900)
|
|
136
|
-
--color-body: var(--color-base-800)
|
|
137
|
-
--color-description: var(--color-base-600)
|
|
138
|
-
--color-caption: var(--color-base-500)
|
|
139
|
-
--color-input-placeholder: var(--color-base-400)
|
|
140
|
-
--color-label: var(--color-base-700)
|
|
141
|
-
--color-link: var(--color-brand-600)
|
|
142
|
-
--color-link-hover: var(--color-brand-700)
|
|
143
|
-
/* Navigation menu item — menubar triggers, menu links, inline/sidebar nav rows */
|
|
144
|
-
--color-nav-menu-item: var(--color-body)
|
|
145
|
-
--color-nav-menu-item-hover: var(--color-headline)
|
|
146
|
-
--color-nav-menu-item-active: var(--color-link)
|
|
147
|
-
--color-nav-menu-hover: var(--color-base-100)
|
|
148
|
-
--color-nav-menu-active: var(--color-action-primary-subtle)
|
|
149
|
-
--color-nav-menu-focus: var(--color-brand-500)
|
|
150
|
-
--color-success-text: var(--color-success)
|
|
151
|
-
--color-warning-text: #b45309
|
|
152
|
-
--color-neutral-text: var(--color-base-700)
|
|
153
|
-
--color-energetic-text: var(--color-citron-700)
|
|
154
|
-
--color-error-text: #b91c1c
|
|
155
|
-
--color-inverse: #ffffff
|
|
156
|
-
--color-disabled: var(--color-base-400)
|
|
157
|
-
/* Border Colors */
|
|
158
|
-
--color-border: var(--color-base-300)
|
|
159
|
-
--color-border-weak: var(--color-base-300)
|
|
160
|
-
--color-border-medium: var(--color-base-400)
|
|
161
|
-
--color-border-strong: var(--color-base-500)
|
|
162
|
-
/* Focus Colors */
|
|
163
|
-
--color-focus: var(--color-brand-500)
|
|
164
|
-
--color-focus-weak: var(--color-brand-600)
|
|
165
|
-
--color-focus-medium: var(--color-brand-700)
|
|
166
|
-
--color-focus-strong: var(--color-brand-800)
|
|
167
|
-
/* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
|
|
168
|
-
--color-focus-ring: var(--color-focus)
|
|
169
|
-
--color-focus-ring-offset: var(--color-card)
|
|
170
|
-
/* Primary Colors */
|
|
171
|
-
--color-primary: var(--color-brand-600)
|
|
172
|
-
--color-primary-weak: var(--color-brand-700)
|
|
173
|
-
--color-primary-medium: var(--color-brand-800)
|
|
174
|
-
--color-primary-strong: var(--color-brand-900)
|
|
175
|
-
/* Secondary Colors */
|
|
176
|
-
--color-secondary: var(--color-base-600)
|
|
177
|
-
--color-secondary-weak: var(--color-base-700)
|
|
178
|
-
--color-secondary-medium: var(--color-base-800)
|
|
179
|
-
--color-secondary-strong: var(--color-base-900)
|
|
180
|
-
/* Success Colors */
|
|
181
|
-
--color-success: var(--color-pine-600)
|
|
182
|
-
--color-success-weak: var(--color-pine-700)
|
|
183
|
-
--color-success-medium: var(--color-pine-800)
|
|
184
|
-
--color-success-strong: var(--color-pine-900)
|
|
185
|
-
/* Warning Colors */
|
|
186
|
-
--color-warning: #f59e0b
|
|
187
|
-
--color-warning-weak: #d97706
|
|
188
|
-
--color-warning-medium: #fbbf24
|
|
189
|
-
--color-warning-strong: #fcd34d
|
|
190
|
-
/* Error Colors */
|
|
191
|
-
--color-error: #ef4444
|
|
192
|
-
--color-error-weak: #dc2626
|
|
193
|
-
--color-error-medium: #f87171
|
|
194
|
-
--color-error-strong: #fca5a5
|
|
195
|
-
/* Energetic Colors (Citron) */
|
|
196
|
-
--color-energetic: var(--color-citron-500)
|
|
197
|
-
--color-energetic-weak: var(--color-citron-600)
|
|
198
|
-
--color-energetic-medium: var(--color-citron-400)
|
|
199
|
-
--color-energetic-strong: var(--color-citron-300)
|
|
200
|
-
/* Neutral Colors */
|
|
201
|
-
--color-neutral: var(--color-base-600)
|
|
202
|
-
--color-neutral-weak: var(--color-base-700)
|
|
203
|
-
--color-neutral-medium: var(--color-base-800)
|
|
204
|
-
--color-neutral-strong: var(--color-base-900)
|
|
205
|
-
/* Info Colors */
|
|
206
|
-
--color-info: var(--color-iris-600)
|
|
207
|
-
--color-info-weak: var(--color-iris-700)
|
|
208
|
-
--color-info-medium: var(--color-iris-800)
|
|
209
|
-
--color-info-strong: var(--color-iris-900)
|
|
210
|
-
/* Text alias */
|
|
211
|
-
--color-info-text: var(--color-info)
|
|
212
|
-
/* ========================================
|
|
213
|
-
ACTION COLORS - For interactive elements (buttons, links, etc.)
|
|
214
|
-
======================================== */
|
|
215
|
-
/* Primary Actions - Used by bg-action-primary utility class */
|
|
216
|
-
/* 🎯 TO CHANGE bg-action-primary COLOR: Edit the values below */
|
|
217
|
-
--color-action-primary: var(--color-brand-950)
|
|
218
|
-
--color-action-primary-hover: var(--color-brand-900)
|
|
219
|
-
--color-action-primary-active: var(--color-brand-400)
|
|
220
|
-
--color-action-primary-disabled: var(--color-brand-500)
|
|
221
|
-
--color-action-primary-subtle: var(--color-brand-100)
|
|
222
|
-
--color-action-primary-subtle-hover: var(--color-brand-200)
|
|
223
|
-
--color-action-primary-text: var(--color-brand-50)
|
|
224
|
-
/* Secondary Actions - Used by bg-action-secondary utility class */
|
|
225
|
-
--color-action-secondary: color-mix(in srgb, var(--color-brand-800) 10%, transparent)
|
|
226
|
-
--color-action-secondary-hover: color-mix(in srgb, var(--color-brand-800) 20%, transparent)
|
|
227
|
-
--color-action-secondary-active: var(--color-brand-400)
|
|
228
|
-
--color-action-secondary-disabled: var(--color-brand-500)
|
|
229
|
-
--color-action-secondary-subtle: var(--color-brand-600)
|
|
230
|
-
--color-action-secondary-subtle-hover: var(--color-brand-700)
|
|
231
|
-
/* Danger Actions - Used by bg-action-danger utility class */
|
|
232
|
-
--color-action-danger: #dc2626
|
|
233
|
-
--color-action-danger-hover: #b91c1c
|
|
234
|
-
--color-action-danger-active: #991b1b
|
|
235
|
-
--color-action-danger-disabled: #fca5a5
|
|
236
|
-
--color-action-danger-subtle: #fef2f2
|
|
237
|
-
--color-action-danger-subtle-hover: #fee2e2
|
|
238
|
-
/* Shadow Colors */
|
|
239
|
-
--shadow-color: 0 0 0
|
|
240
|
-
--shadow-opacity: 0.1
|
|
241
|
-
--shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
242
|
-
--shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
243
|
-
--shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
244
|
-
--shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
245
|
-
/* Spacing */
|
|
246
|
-
--spacing-xs: 0.25rem
|
|
247
|
-
--spacing-sm: 0.5rem
|
|
248
|
-
--spacing-md: 1rem
|
|
249
|
-
--spacing-lg: 1.5rem
|
|
250
|
-
--spacing-xl: 2rem
|
|
251
|
-
--spacing-2xl: 3rem
|
|
252
|
-
/* Border Radius */
|
|
253
|
-
--radius-sm: 0.25rem
|
|
254
|
-
--radius-md: 0.375rem
|
|
255
|
-
--radius-lg: 0.5rem
|
|
256
|
-
--radius-xl: 0.75rem
|
|
257
|
-
/* Z-index */
|
|
258
|
-
--z-dropdown: 1000
|
|
259
|
-
--z-sticky: 1020
|
|
260
|
-
--z-fixed: 1030
|
|
261
|
-
--z-modal-backdrop: 1040
|
|
262
|
-
--z-modal: 1050
|
|
263
|
-
--z-popover: 1060
|
|
264
|
-
--z-tooltip: 1070
|
|
265
|
-
--z-toast: 1080
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
/* Dark Mode */
|
|
269
|
-
.dark {
|
|
270
|
-
/* Mirror @theme --zabi-base-* ramp (same physical hex; required for standalone dark import) */
|
|
271
|
-
--zabi-base-50: #fafafa
|
|
272
|
-
--zabi-base-75: #f7f7f7
|
|
273
|
-
--zabi-base-100: #f4f4f5
|
|
274
|
-
--zabi-base-150: #ececee
|
|
275
|
-
--zabi-base-200: #e4e4e7
|
|
276
|
-
--zabi-base-250: #dcdcdf
|
|
277
|
-
--zabi-base-300: #d4d4d8
|
|
278
|
-
--zabi-base-350: #babac1
|
|
279
|
-
--zabi-base-400: #a1a1aa
|
|
280
|
-
--zabi-base-450: #898992
|
|
281
|
-
--zabi-base-500: #71717a
|
|
282
|
-
--zabi-base-550: #61616a
|
|
283
|
-
--zabi-base-600: #52525b
|
|
284
|
-
--zabi-base-650: #484850
|
|
285
|
-
--zabi-base-700: #3f3f46
|
|
286
|
-
--zabi-base-750: #333338
|
|
287
|
-
--zabi-base-800: #27272a
|
|
288
|
-
--zabi-base-850: #1f1f22
|
|
289
|
-
--zabi-base-900: #18181b
|
|
290
|
-
--zabi-base-925: #101013
|
|
291
|
-
--zabi-base-950: #09090b
|
|
292
|
-
/* Brand Color Scale - Dark mode variants (mirrored from light physical hex; no theme() forward refs) */
|
|
293
|
-
--color-brand-50: #1f2866
|
|
294
|
-
--color-brand-100: #2f3c99
|
|
295
|
-
--color-brand-200: #3f4fc0
|
|
296
|
-
--color-brand-300: #5366e2
|
|
297
|
-
--color-brand-400: #6e84fa
|
|
298
|
-
--color-brand-500: #8fa8ff
|
|
299
|
-
--color-brand-600: #abc4ff
|
|
300
|
-
--color-brand-700: #ccdbfd
|
|
301
|
-
--color-brand-800: #dfe7fb
|
|
302
|
-
--color-brand-900: #edf2fb
|
|
303
|
-
--color-brand-950: #f7faff
|
|
304
|
-
/* Citron Color Scale - Dark mode variants */
|
|
305
|
-
--color-citron-50: #323518
|
|
306
|
-
--color-citron-100: #4d5229
|
|
307
|
-
--color-citron-200: #666c35
|
|
308
|
-
--color-citron-300: #848a43
|
|
309
|
-
--color-citron-400: #a3a852
|
|
310
|
-
--color-citron-500: #bbbe64
|
|
311
|
-
--color-citron-600: #c7d460
|
|
312
|
-
--color-citron-700: #d5e184
|
|
313
|
-
--color-citron-800: #e4ecaa
|
|
314
|
-
--color-citron-900: #f1f5cf
|
|
315
|
-
--color-citron-950: #f9faeb
|
|
316
|
-
/* Pine Color Scale - Dark mode variants */
|
|
317
|
-
--color-pine-50: #02160f
|
|
318
|
-
--color-pine-100: #04231a
|
|
319
|
-
--color-pine-200: #063a2a
|
|
320
|
-
--color-pine-300: #084532
|
|
321
|
-
--color-pine-400: #0a513a
|
|
322
|
-
--color-pine-500: #0c5d43
|
|
323
|
-
--color-pine-600: #49ad91
|
|
324
|
-
--color-pine-700: #78c4ad
|
|
325
|
-
--color-pine-800: #a7d9c9
|
|
326
|
-
--color-pine-900: #d2ece4
|
|
327
|
-
--color-pine-950: #e9f6f2
|
|
328
|
-
/* Iris Color Scale - Dark mode variants */
|
|
329
|
-
--color-iris-50: #1b1b37
|
|
330
|
-
--color-iris-100: #2a2a56
|
|
331
|
-
--color-iris-200: #38386f
|
|
332
|
-
--color-iris-300: #474788
|
|
333
|
-
--color-iris-400: #58589e
|
|
334
|
-
--color-iris-500: #6969b3
|
|
335
|
-
--color-iris-600: #a3a3d8
|
|
336
|
-
--color-iris-700: #bdbde6
|
|
337
|
-
--color-iris-800: #d6d6f0
|
|
338
|
-
--color-iris-900: #e9e9f7
|
|
339
|
-
--color-iris-950: #f4f4fa
|
|
340
|
-
/* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
|
|
341
|
-
--color-base-50: #09090b
|
|
342
|
-
--color-base-75: #101013
|
|
343
|
-
--color-base-100: #18181b
|
|
344
|
-
--color-base-150: #1f1f22
|
|
345
|
-
--color-base-200: #27272a
|
|
346
|
-
--color-base-250: #333338
|
|
347
|
-
--color-base-300: #3f3f46
|
|
348
|
-
--color-base-350: #484850
|
|
349
|
-
--color-base-400: #52525b
|
|
350
|
-
--color-base-450: #61616a
|
|
351
|
-
--color-base-500: #71717a
|
|
352
|
-
--color-base-550: #898992
|
|
353
|
-
--color-base-600: #a1a1aa
|
|
354
|
-
--color-base-650: #babac1
|
|
355
|
-
--color-base-700: #d4d4d8
|
|
356
|
-
--color-base-750: #dcdcdf
|
|
357
|
-
--color-base-800: #e4e4e7
|
|
358
|
-
--color-base-850: #ececee
|
|
359
|
-
--color-base-900: #f4f4f5
|
|
360
|
-
--color-base-925: #f7f7f7
|
|
361
|
-
--color-base-950: #fafafa
|
|
362
|
-
/* Background Colors - No dark mode overrides needed, base colors are already inverted */
|
|
363
|
-
/* Page Colors - No dark mode overrides needed, base colors are already inverted */
|
|
364
|
-
/* Card Colors */
|
|
365
|
-
--color-card: var(--color-base-200)
|
|
366
|
-
--color-card-hover: var(--color-base-300)
|
|
367
|
-
--color-card-active: var(--color-base-400)
|
|
368
|
-
--color-card-elevated: var(--color-base-200)
|
|
369
|
-
/* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
|
|
370
|
-
--color-surface-1: var(--color-base-250)
|
|
371
|
-
--color-surface-2: var(--color-base-300)
|
|
372
|
-
--color-surface-3: var(--color-base-350)
|
|
373
|
-
--color-surface-4: var(--color-base-400)
|
|
374
|
-
/* Overlay Colors */
|
|
375
|
-
--color-overlay: rgba(0, 0, 0, 0.7)
|
|
376
|
-
/* Input Colors */
|
|
377
|
-
--color-input: var(--color-base-250)
|
|
378
|
-
--color-input-border: var(--color-base-350)
|
|
379
|
-
--color-input-hover: var(--color-base-300)
|
|
380
|
-
--color-input-focus: var(--color-base-300)
|
|
381
|
-
--color-input-disabled: var(--color-base-300)
|
|
382
|
-
/* Text Colors - No dark mode overrides needed, base colors are already inverted */
|
|
383
|
-
/* Border Colors - No dark mode overrides needed, base colors are already inverted */
|
|
384
|
-
/* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
|
|
385
|
-
/* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
|
|
386
|
-
/* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
|
|
387
|
-
/* Success Colors */
|
|
388
|
-
--color-success: var(--color-pine-400)
|
|
389
|
-
--color-success-weak: var(--color-pine-500)
|
|
390
|
-
--color-success-medium: var(--color-pine-300)
|
|
391
|
-
--color-success-strong: var(--color-pine-200)
|
|
392
|
-
/* Warning Colors */
|
|
393
|
-
--color-warning: #f59e0b
|
|
394
|
-
--color-warning-weak: #d97706
|
|
395
|
-
--color-warning-medium: #fbbf24
|
|
396
|
-
--color-warning-strong: #fcd34d
|
|
397
|
-
/* Error Colors */
|
|
398
|
-
--color-error: #ef4444
|
|
399
|
-
--color-error-weak: #dc2626
|
|
400
|
-
--color-error-medium: #f87171
|
|
401
|
-
--color-error-strong: #fca5a5
|
|
402
|
-
/* Energetic Colors (Citron) */
|
|
403
|
-
--color-energetic: var(--color-citron-400)
|
|
404
|
-
--color-energetic-weak: var(--color-citron-500)
|
|
405
|
-
--color-energetic-medium: var(--color-citron-300)
|
|
406
|
-
--color-energetic-strong: var(--color-citron-200)
|
|
407
|
-
/* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
|
|
408
|
-
/* Info Colors */
|
|
409
|
-
--color-info: var(--color-iris-500)
|
|
410
|
-
--color-info-weak: var(--color-iris-600)
|
|
411
|
-
--color-info-active: var(--color-iris-400)
|
|
412
|
-
--color-info-medium: var(--color-iris-400)
|
|
413
|
-
--color-info-strong: var(--color-iris-300)
|
|
414
|
-
/* Text alias */
|
|
415
|
-
--color-info-text: var(--color-info)
|
|
416
|
-
/* ========================================
|
|
417
|
-
ACTION COLORS - Dark Mode Overrides
|
|
418
|
-
======================================== */
|
|
419
|
-
/* Primary Actions - Background adapts automatically via brand color inversion */
|
|
420
|
-
/* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
|
|
421
|
-
/* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
|
|
422
|
-
--color-action-primary-text: var(--color-brand-50)
|
|
423
|
-
/* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
|
|
424
|
-
/* Danger Actions */
|
|
425
|
-
--color-action-danger: #ef4444
|
|
426
|
-
--color-action-danger-hover: #dc2626
|
|
427
|
-
--color-action-danger-active: #b91c1c
|
|
428
|
-
--color-action-danger-disabled: #b91c1c
|
|
429
|
-
--color-action-danger-subtle: #450a0a
|
|
430
|
-
--color-action-danger-subtle-hover: #7f1d1d
|
|
431
|
-
/* Shadow Colors */
|
|
432
|
-
--shadow-opacity: 0.3
|
|
433
|
-
--shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
434
|
-
--shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
435
|
-
--shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
436
|
-
--shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity))
|
|
437
|
-
}
|
|
1
|
+
/* zabi-components-colors — generated from src/app.css; edit app.css */
|
|
2
|
+
:root{--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;--font-family-sans:'Nunito Sans', ui-sans-serif, system-ui, sans-serif;--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);--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);--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);--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);--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);--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);--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);--color-background:var(--color-base-100);--color-background-secondary:var(--color-base-50);--color-background-tertiary:var(--color-base-100);--color-page:var(--color-base-100);--color-page-secondary:var(--color-base-200);--color-card:#ffffff;--color-card-hover:var(--color-base-100);--color-card-active:var(--color-base-100);--color-card-elevated:#ffffff;--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);--color-overlay:rgba(0, 0, 0, 0.5);--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);--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-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:var(--color-warning-700);--color-neutral-text:var(--color-base-700);--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);--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);--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);--color-focus-ring:var(--color-focus);--color-focus-ring-offset:var(--color-card);--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);--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);--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);--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);--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);--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);--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);--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);--color-info-text:var(--color-info);--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);--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);--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-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-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--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;--color-tooltip-bg:var(--color-base-800);--color-tooltip-fg:var(--color-base-50);}
|
|
3
|
+
.dark{--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;--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-950);--color-brand-100:var(--zabi-brand-900);--color-brand-200:var(--zabi-brand-800);--color-brand-300:var(--zabi-brand-700);--color-brand-400:var(--zabi-brand-600);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-400);--color-brand-700:var(--zabi-brand-300);--color-brand-800:var(--zabi-brand-200);--color-brand-900:var(--zabi-brand-100);--color-brand-950:var(--zabi-brand-50);--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-950);--color-citron-100:var(--zabi-citron-900);--color-citron-200:var(--zabi-citron-800);--color-citron-300:var(--zabi-citron-700);--color-citron-400:var(--zabi-citron-600);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-400);--color-citron-700:var(--zabi-citron-300);--color-citron-800:var(--zabi-citron-200);--color-citron-900:var(--zabi-citron-100);--color-citron-950:var(--zabi-citron-50);--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-950);--color-pine-100:var(--zabi-pine-900);--color-pine-200:var(--zabi-pine-800);--color-pine-300:var(--zabi-pine-700);--color-pine-400:var(--zabi-pine-600);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-400);--color-pine-700:var(--zabi-pine-300);--color-pine-800:var(--zabi-pine-200);--color-pine-900:var(--zabi-pine-100);--color-pine-950:var(--zabi-pine-50);--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-950);--color-iris-100:var(--zabi-iris-900);--color-iris-200:var(--zabi-iris-800);--color-iris-300:var(--zabi-iris-700);--color-iris-400:var(--zabi-iris-600);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-400);--color-iris-700:var(--zabi-iris-300);--color-iris-800:var(--zabi-iris-200);--color-iris-900:var(--zabi-iris-100);--color-iris-950:var(--zabi-iris-50);--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-950);--color-warning-100:var(--zabi-warning-900);--color-warning-200:var(--zabi-warning-800);--color-warning-300:var(--zabi-warning-700);--color-warning-400:var(--zabi-warning-600);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-400);--color-warning-700:var(--zabi-warning-300);--color-warning-800:var(--zabi-warning-200);--color-warning-900:var(--zabi-warning-100);--color-warning-950:var(--zabi-warning-50);--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-950);--color-error-100:var(--zabi-error-900);--color-error-200:var(--zabi-error-800);--color-error-300:var(--zabi-error-700);--color-error-400:var(--zabi-error-600);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-400);--color-error-700:var(--zabi-error-300);--color-error-800:var(--zabi-error-200);--color-error-900:var(--zabi-error-100);--color-error-950:var(--zabi-error-50);--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;--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);--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);--color-overlay:rgba(0, 0, 0, 0.7);--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);--color-action-primary-text:var(--color-brand-50);--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-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));}
|