zabi-components 5.0.15 → 5.0.17

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.
Files changed (33) hide show
  1. package/README.md +51 -0
  2. package/dist/atoms/Badge.svelte +14 -14
  3. package/dist/atoms/Button.svelte +8 -8
  4. package/dist/atoms/Card.svelte +2 -2
  5. package/dist/atoms/Checkbox.svelte +19 -16
  6. package/dist/atoms/CodeBlock.svelte +4 -4
  7. package/dist/atoms/ColorPicker.svelte +4 -4
  8. package/dist/atoms/FeatureCard.svelte +2 -2
  9. package/dist/atoms/Input.svelte +5 -5
  10. package/dist/atoms/Progress.svelte +1 -1
  11. package/dist/atoms/Select.svelte +37 -14
  12. package/dist/atoms/Skeleton.svelte +1 -1
  13. package/dist/atoms/Textarea.svelte +2 -2
  14. package/dist/atoms/ThemeToggle.svelte +5 -5
  15. package/dist/atoms/Toast.svelte +1 -1
  16. package/dist/atoms/Toggle.svelte +2 -4
  17. package/dist/atoms/Tooltip.svelte +128 -19
  18. package/dist/molecules/Alert.svelte +13 -7
  19. package/dist/molecules/ComponentDemo.svelte +57 -64
  20. package/dist/molecules/Dropdown.svelte +4 -2
  21. package/dist/molecules/ImageUpload.svelte +2 -2
  22. package/dist/molecules/Modal.svelte +2 -2
  23. package/dist/molecules/SlideUp.svelte +2 -2
  24. package/dist/molecules/Tabs.svelte +2 -2
  25. package/dist/organisms/Navbar.svelte +1 -1
  26. package/dist/routes/lib/variant-utils.ts +4 -4
  27. package/dist/zabi-components-colors.css +185 -177
  28. package/dist/zabi-components-theme-dark-only.css +149 -0
  29. package/dist/zabi-components-theme-dark.css +151 -0
  30. package/dist/zabi-components-theme-only.css +227 -0
  31. package/dist/zabi-components-theme.css +229 -0
  32. package/dist/zabi-components.css +370 -331
  33. package/package.json +15 -5
package/dist/zabi-components-colors.css CHANGED
@@ -57,82 +57,81 @@
57
57
  --color-iris-900: #2a2a56;
58
58
  --color-iris-950: #1b1b37;
59
59
 
60
- /* Surface Colors - Tailwind stone palette */
61
- --color-surface-level-0: #fafaf9;
62
- --color-surface-level-0-hover: #f5f5f4;
63
- --color-surface-level-1: #f5f5f4;
64
- --color-surface-level-1-hover: #e7e5e4;
65
- --color-surface-level-2: #e7e5e4;
66
- --color-surface-level-2-hover: #d6d3d1;
67
- --color-surface-elevated: #ffffff;
68
- --color-surface-elevated-hover: #fafaf9;
69
- --color-surface-hover: #f5f5f4;
70
- --color-surface-active: #e7e5e4;
71
- --color-surface-inverse: #1c1917;
72
- --color-surface-disabled: #e7e5e4;
73
- --color-surface-container-high: #ece6f0;
60
+ /* Base Color Scale - Maps to neutral palette */
61
+ --color-base-50: #fafaf9;
62
+ --color-base-100: #f5f5f4;
63
+ --color-base-200: #e7e5e4;
64
+ --color-base-300: #d6d3d1;
65
+ --color-base-400: #a8a29e;
66
+ --color-base-500: #78716c;
67
+ --color-base-600: #57534e;
68
+ --color-base-700: #44403c;
69
+ --color-base-800: #292524;
70
+ --color-base-900: #1c1917;
71
+ --color-base-950: #0c0a09;
72
+
74
73
 
75
74
  /* Background Colors */
76
- --color-background: #ffffff;
77
- --color-background-secondary: #fafaf9;
78
- --color-background-tertiary: #f5f5f4;
75
+ --color-background: var(--color-base-100);
76
+ --color-background-secondary: var(--color-base-50);
77
+ --color-background-tertiary: var(--color-base-100);
79
78
 
80
79
  /* Page Colors */
81
- --color-page: #f5f5f4;
82
- --color-page-secondary: #e7e5e4;
80
+ --color-page: var(--color-base-100);
81
+ --color-page-secondary: var(--color-base-200);
83
82
 
84
83
  /* Card Colors */
85
84
  --color-card: #ffffff;
86
- --color-card-hover: #f5f5f4;
87
- --color-card-active: #f5f5f4;
85
+ --color-card-hover: var(--color-base-100);
86
+ --color-card-active: var(--color-base-100);
88
87
  --color-card-elevated: #ffffff;
89
88
 
90
89
  /* Text Colors */
91
- --color-headline: #1c1917;
92
- --color-body: #292524;
93
- --color-description: #57534e;
94
- --color-caption: #78716c;
95
- --color-input-placeholder: #a8a29e;
96
- --color-label: #44403c;
97
- --color-link: #6e84fa;
98
- --color-link-hover: #5366e2;
99
- --color-success-text: #084532;
90
+ --color-headline: var(--color-base-900);
91
+ --color-body: var(--color-base-800);
92
+ --color-description: var(--color-base-600);
93
+ --color-caption: var(--color-base-500);
94
+ --color-input-placeholder: var(--color-base-400);
95
+ --color-label: var(--color-base-700);
96
+ --color-link: var(--color-brand-600);
97
+ --color-link-hover: var(--color-brand-700);
98
+ --color-success-text: var(--color-pine-700);
100
99
  --color-warning-text: #b45309;
101
- --color-neutral-text: #44403c;
102
- --color-energetic-text: #848a43;
100
+ --color-neutral-text: var(--color-base-700);
101
+ --color-energetic-text: var(--color-citron-700);
103
102
  --color-error-text: #b91c1c;
104
103
  --color-inverse: #ffffff;
105
- --color-disabled: #a8a29e;
104
+ --color-disabled: var(--color-base-400);
106
105
 
107
106
  /* Border Colors */
108
- --color-border: #e7e5e4;
109
- --color-border-weak: #d6d3d1;
110
- --color-border-medium: #a8a29e;
111
- --color-border-strong: #78716c;
107
+ --color-border: var(--color-base-200);
108
+ --color-border-weak: var(--color-base-300);
109
+ --color-border-medium: var(--color-base-400);
110
+ --color-border-strong: var(--color-base-500);
112
111
 
113
112
  /* Focus Colors */
114
- --color-focus: #8fa8ff;
115
- --color-focus-weak: #6e84fa;
116
- --color-focus-medium: #5366e2;
117
- --color-focus-strong: #3f4fc0;
113
+ --color-focus: var(--color-brand-500);
114
+ --color-focus-weak: var(--color-brand-600);
115
+ --color-focus-medium: var(--color-brand-700);
116
+ --color-focus-strong: var(--color-brand-800);
118
117
 
119
118
  /* Primary Colors */
120
- --color-primary: #6e84fa;
121
- --color-primary-weak: #5366e2;
122
- --color-primary-medium: #3f4fc0;
123
- --color-primary-strong: #2f3c99;
119
+ --color-primary: var(--color-brand-600);
120
+ --color-primary-weak: var(--color-brand-700);
121
+ --color-primary-medium: var(--color-brand-800);
122
+ --color-primary-strong: var(--color-brand-900);
124
123
 
125
124
  /* Secondary Colors */
126
- --color-secondary: #57534e;
127
- --color-secondary-weak: #44403c;
128
- --color-secondary-medium: #292524;
129
- --color-secondary-strong: #1c1917;
125
+ --color-secondary: var(--color-base-600);
126
+ --color-secondary-weak: var(--color-base-700);
127
+ --color-secondary-medium: var(--color-base-800);
128
+ --color-secondary-strong: var(--color-base-900);
130
129
 
131
130
  /* Success Colors */
132
- --color-success: #0a513a;
133
- --color-success-weak: #084532;
134
- --color-success-medium: #063a2a;
135
- --color-success-strong: #04231a;
131
+ --color-success: var(--color-pine-600);
132
+ --color-success-weak: var(--color-pine-700);
133
+ --color-success-medium: var(--color-pine-800);
134
+ --color-success-strong: var(--color-pine-900);
136
135
 
137
136
  /* Warning Colors */
138
137
  --color-warning: #f59e0b;
@@ -147,38 +146,38 @@
147
146
  --color-error-strong: #fca5a5;
148
147
 
149
148
  /* Energetic Colors (Citron) */
150
- --color-energetic: #bbbe64;
151
- --color-energetic-weak: #a3a852;
152
- --color-energetic-medium: #c7d460;
153
- --color-energetic-strong: #d5e184;
149
+ --color-energetic: var(--color-citron-500);
150
+ --color-energetic-weak: var(--color-citron-600);
151
+ --color-energetic-medium: var(--color-citron-400);
152
+ --color-energetic-strong: var(--color-citron-300);
154
153
 
155
154
  /* Neutral Colors */
156
- --color-neutral: #57534e;
157
- --color-neutral-weak: #44403c;
158
- --color-neutral-medium: #292524;
159
- --color-neutral-strong: #1c1917;
155
+ --color-neutral: var(--color-base-600);
156
+ --color-neutral-weak: var(--color-base-700);
157
+ --color-neutral-medium: var(--color-base-800);
158
+ --color-neutral-strong: var(--color-base-900);
160
159
 
161
160
  /* Info Colors */
162
- --color-info: #58589e;
163
- --color-info-weak: #474788;
164
- --color-info-medium: #38386f;
165
- --color-info-strong: #2a2a56;
161
+ --color-info: var(--color-iris-600);
162
+ --color-info-weak: var(--color-iris-700);
163
+ --color-info-medium: var(--color-iris-800);
164
+ --color-info-strong: var(--color-iris-900);
166
165
  --color-info-text: var(--color-info);
167
166
 
168
167
  /* Action Colors */
169
- --color-action-primary: #6e84fa;
170
- --color-action-primary-hover: #5366e2;
171
- --color-action-primary-active: #3f4fc0;
172
- --color-action-primary-disabled: #ccdbfd;
173
- --color-action-primary-subtle: #f7faff;
174
- --color-action-primary-subtle-hover: #edf2fb;
175
-
176
- --color-action-secondary: #57534e;
177
- --color-action-secondary-hover: #44403c;
178
- --color-action-secondary-active: #292524;
179
- --color-action-secondary-disabled: #d6d3d1;
180
- --color-action-secondary-subtle: #f5f5f4;
181
- --color-action-secondary-subtle-hover: #e7e5e4;
168
+ --color-action-primary: var(--color-brand-300);
169
+ --color-action-primary-hover: var(--color-brand-400);
170
+ --color-action-primary-active: var(--color-brand-800);
171
+ --color-action-primary-disabled: var(--color-brand-300);
172
+ --color-action-primary-subtle: var(--color-brand-50);
173
+ --color-action-primary-subtle-hover: var(--color-brand-100);
174
+
175
+ --color-action-secondary: var(--color-base-600);
176
+ --color-action-secondary-hover: var(--color-base-700);
177
+ --color-action-secondary-active: var(--color-base-800);
178
+ --color-action-secondary-disabled: var(--color-base-300);
179
+ --color-action-secondary-subtle: var(--color-base-100);
180
+ --color-action-secondary-subtle-hover: var(--color-base-200);
182
181
 
183
182
  --color-action-danger: #dc2626;
184
183
  --color-action-danger-hover: #b91c1c;
@@ -190,130 +189,139 @@
190
189
 
191
190
  /* Dark Mode */
192
191
  .dark {
193
- /* Surface Colors - Dark mode variants */
194
- --color-surface-level-0: #292524;
195
- --color-surface-level-0-hover: #44403c;
196
- --color-surface-level-1: #44403c;
197
- --color-surface-level-1-hover: #57534e;
198
- --color-surface-level-2: #57534e;
199
- --color-surface-level-2-hover: #78716c;
200
- --color-surface-elevated: #292524;
201
- --color-surface-elevated-hover: #44403c;
202
- --color-surface-hover: #44403c;
203
- --color-surface-active: #57534e;
204
- --color-surface-inverse: #f5f5f4;
205
- --color-surface-disabled: #44403c;
206
- --color-surface-container-high: #44403c;
192
+
193
+ /* Brand Color Scale - Dark mode variants */
194
+ --color-brand-50: #1f2866;
195
+ --color-brand-100: #2f3c99;
196
+ --color-brand-200: #3f4fc0;
197
+ --color-brand-300: #5366e2;
198
+ --color-brand-400: #6e84fa;
199
+ --color-brand-500: #8fa8ff;
200
+ --color-brand-600: #abc4ff;
201
+ --color-brand-700: #ccdbfd;
202
+ --color-brand-800: #dfe7fb;
203
+ --color-brand-900: #edf2fb;
204
+ --color-brand-950: #f7faff;
205
+
206
+ /* Citron Color Scale - Dark mode variants */
207
+ --color-citron-50: #323518;
208
+ --color-citron-100: #4d5229;
209
+ --color-citron-200: #666c35;
210
+ --color-citron-300: #848a43;
211
+ --color-citron-400: #a3a852;
212
+ --color-citron-500: #bbbe64;
213
+ --color-citron-600: #c7d460;
214
+ --color-citron-700: #d5e184;
215
+ --color-citron-800: #e4ecaa;
216
+ --color-citron-900: #f1f5cf;
217
+ --color-citron-950: #f9faeb;
218
+
219
+ /* Pine Color Scale - Dark mode variants */
220
+ --color-pine-50: #02160f;
221
+ --color-pine-100: #04231a;
222
+ --color-pine-200: #063a2a;
223
+ --color-pine-300: #084532;
224
+ --color-pine-400: #0a513a;
225
+ --color-pine-500: #0C5D43;
226
+ --color-pine-600: #49ad91;
227
+ --color-pine-700: #78c4ad;
228
+ --color-pine-800: #a7d9c9;
229
+ --color-pine-900: #d2ece4;
230
+ --color-pine-950: #e9f6f2;
231
+
232
+ /* Iris Color Scale - Dark mode variants */
233
+ --color-iris-50: #1b1b37;
234
+ --color-iris-100: #2a2a56;
235
+ --color-iris-200: #38386f;
236
+ --color-iris-300: #474788;
237
+ --color-iris-400: #58589e;
238
+ --color-iris-500: #6969B3;
239
+ --color-iris-600: #a3a3d8;
240
+ --color-iris-700: #bdbde6;
241
+ --color-iris-800: #d6d6f0;
242
+ --color-iris-900: #e9e9f7;
243
+ --color-iris-950: #f4f4fa;
244
+
245
+ /* Base Color Scale - Dark mode variants (inverted neutral palette) */
246
+ --color-base-50: #0c0a09;
247
+ --color-base-100: #1c1917;
248
+ --color-base-200: #292524;
249
+ --color-base-300: #44403c;
250
+ --color-base-400: #57534e;
251
+ --color-base-500: #78716c;
252
+ --color-base-600: #a8a29e;
253
+ --color-base-700: #d6d3d1;
254
+ --color-base-800: #e7e5e4;
255
+ --color-base-900: #f5f5f4;
256
+ --color-base-950: #fafaf9;
207
257
 
208
258
  /* Background Colors */
209
- --color-background: #1c1917;
210
- --color-background-secondary: #292524;
211
- --color-background-tertiary: #44403c;
259
+ --color-background: var(--color-base-100);
260
+ --color-background-secondary: var(--color-base-200);
261
+ --color-background-tertiary: var(--color-base-300);
212
262
 
213
263
  /* Page Colors */
214
- --color-page: #292524;
215
- --color-page-secondary: #292524;
264
+ --color-page: var(--color-base-200);
265
+ --color-page-secondary: var(--color-base-200);
216
266
 
217
267
  /* Card Colors */
218
- --color-card: #292524;
219
- --color-card-hover: #44403c;
220
- --color-card-active: #57534e;
221
- --color-card-elevated: #292524;
268
+ --color-card: var(--color-base-200);
269
+ --color-card-hover: var(--color-base-300);
270
+ --color-card-active: var(--color-base-400);
271
+ --color-card-elevated: var(--color-base-200);
222
272
 
223
273
  /* Text Colors */
224
- --color-headline: #f5f5f4;
225
- --color-body: #e7e5e4;
226
- --color-description: #d6d3d1;
227
- --color-caption: #a8a29e;
228
- --color-input-placeholder: #78716c;
229
- --color-label: #e7e5e4;
230
- --color-link: #abc4ff;
231
- --color-link-hover: #ccdbfd;
232
- --color-success-text: #49ad91;
274
+ --color-headline: var(--color-base-900);
275
+ --color-body: var(--color-base-800);
276
+ --color-description: var(--color-base-700);
277
+ --color-caption: var(--color-base-600);
278
+ --color-input-placeholder: var(--color-base-500);
279
+ --color-label: var(--color-base-800);
280
+ /* Link Colors - No dark mode overrides needed, brand colors are already inverted */
281
+ /* Success Text - No dark mode overrides needed, pine colors are already inverted */
233
282
  --color-warning-text: #fbbf24;
234
- --color-neutral-text: #a8a29e;
235
- --color-energetic-text: #c7d460;
283
+ /* Neutral Text - No dark mode overrides needed, base colors are already inverted */
284
+ /* Energetic Text - No dark mode overrides needed, citron colors are already inverted */
236
285
  --color-error-text: #f87171;
237
- --color-inverse: #1c1917;
238
- --color-disabled: #78716c;
286
+ --color-inverse: var(--color-base-100);
287
+ --color-disabled: var(--color-base-500);
239
288
 
240
289
  /* Border Colors */
241
- --color-border: #57534e;
242
- --color-border-weak: #78716c;
243
- --color-border-medium: #a8a29e;
244
- --color-border-strong: #d6d3d1;
290
+ --color-border: var(--color-base-400);
291
+ --color-border-weak: var(--color-base-500);
292
+ --color-border-medium: var(--color-base-600);
293
+ --color-border-strong: var(--color-base-700);
245
294
 
246
- /* Focus Colors */
247
- --color-focus: #abc4ff;
248
- --color-focus-weak: #8fa8ff;
249
- --color-focus-medium: #6e84fa;
250
- --color-focus-strong: #5366e2;
251
- --color-focus-disabled: #6e84fa;
295
+ /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
252
296
 
253
- /* Primary Colors */
254
- --color-primary: #6e84fa;
255
- --color-primary-weak: #5366e2;
256
- --color-primary-medium: #3f4fc0;
257
- --color-primary-strong: #2f3c99;
297
+ /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
258
298
 
259
- /* Secondary Colors */
260
- --color-secondary: #57534e;
261
- --color-secondary-weak: #44403c;
262
- --color-secondary-medium: #292524;
263
- --color-secondary-strong: #1c1917;
299
+ /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
264
300
 
265
- /* Success Colors */
266
- --color-success: #0C5D43;
267
- --color-success-weak: #0a513a;
268
- --color-success-medium: #49ad91;
269
- --color-success-strong: #78c4ad;
301
+ /* Success Colors - No dark mode overrides needed, pine colors are already inverted */
270
302
 
271
303
  /* Warning Colors */
272
- --color-warning: #d97706;
273
- --color-warning-weak: #b45309;
274
- --color-warning-medium: #92400e;
275
- --color-warning-strong: #78350f;
304
+ --color-warning: #f59e0b;
305
+ --color-warning-weak: #d97706;
306
+ --color-warning-medium: #fbbf24;
307
+ --color-warning-strong: #fcd34d;
276
308
 
277
309
  /* Error Colors */
278
- --color-error: #dc2626;
279
- --color-error-weak: #b91c1c;
280
- --color-error-medium: #991b1b;
281
- --color-error-strong: #7f1d1d;
310
+ --color-error: #ef4444;
311
+ --color-error-weak: #dc2626;
312
+ --color-error-medium: #f87171;
313
+ --color-error-strong: #fca5a5;
282
314
 
283
- /* Energetic Colors (Citron) */
284
- --color-energetic: #a3a852;
285
- --color-energetic-weak: #848a43;
286
- --color-energetic-medium: #666c35;
287
- --color-energetic-strong: #4d5229;
315
+ /* Energetic Colors (Citron) - No dark mode overrides needed, citron colors are already inverted */
288
316
 
289
- /* Neutral Colors */
290
- --color-neutral: #57534e;
291
- --color-neutral-weak: #78716c;
292
- --color-neutral-medium: #a8a29e;
293
- --color-neutral-strong: #d6d3d1;
317
+ /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
294
318
 
295
- /* Info Colors */
296
- --color-info: #6969B3;
297
- --color-info-weak: #58589e;
298
- --color-info-active: #a3a3d8;
299
- --color-info-medium: #a3a3d8;
300
- --color-info-strong: #bdbde6;
301
- --color-info-text: var(--color-info);
319
+ /* Info Colors - No dark mode overrides needed, iris colors are already inverted */
302
320
 
303
321
  /* Action Colors - Dark mode variants */
304
- --color-action-primary: #8fa8ff;
305
- --color-action-primary-hover: #6e84fa;
306
- --color-action-primary-active: #5366e2;
307
- --color-action-primary-disabled: #5366e2;
308
- --color-action-primary-subtle: #1f2866;
309
- --color-action-primary-subtle-hover: #2f3c99;
310
-
311
- --color-action-secondary: #78716c;
312
- --color-action-secondary-hover: #57534e;
313
- --color-action-secondary-active: #44403c;
314
- --color-action-secondary-disabled: #44403c;
315
- --color-action-secondary-subtle: #292524;
316
- --color-action-secondary-subtle-hover: #44403c;
322
+ /* Primary Actions - No dark mode overrides needed, brand colors are already inverted */
323
+
324
+ /* Action Secondary - No dark mode overrides needed, base colors are already inverted */
317
325
 
318
326
  --color-action-danger: #ef4444;
319
327
  --color-action-danger-hover: #dc2626;
package/dist/zabi-components-theme-dark-only.css ADDED
@@ -0,0 +1,149 @@
1
+ /* Dark Mode Theme - CSS Custom Properties */
2
+ /* Import this file after the main theme to enable dark mode support */
3
+ .dark {
4
+ /* Brand Color Scale - Dark mode variants */
5
+ --color-brand-50: theme(colors.brand.950);
6
+ --color-brand-100: theme(colors.brand.900);
7
+ --color-brand-200: theme(colors.brand.800);
8
+ --color-brand-300: theme(colors.brand.700);
9
+ --color-brand-400: theme(colors.brand.600);
10
+ --color-brand-500: theme(colors.brand.500);
11
+ --color-brand-600: theme(colors.brand.400);
12
+ --color-brand-700: theme(colors.brand.300);
13
+ --color-brand-800: theme(colors.brand.200);
14
+ --color-brand-900: theme(colors.brand.100);
15
+ --color-brand-950: theme(colors.brand.50);
16
+
17
+ /* Citron Color Scale - Dark mode variants */
18
+ --color-citron-50: theme(colors.citron.950);
19
+ --color-citron-100: theme(colors.citron.900);
20
+ --color-citron-200: theme(colors.citron.800);
21
+ --color-citron-300: theme(colors.citron.700);
22
+ --color-citron-400: theme(colors.citron.600);
23
+ --color-citron-500: theme(colors.citron.500);
24
+ --color-citron-600: theme(colors.citron.400);
25
+ --color-citron-700: theme(colors.citron.300);
26
+ --color-citron-800: theme(colors.citron.200);
27
+ --color-citron-900: theme(colors.citron.100);
28
+ --color-citron-950: theme(colors.citron.50);
29
+
30
+ /* Pine Color Scale - Dark mode variants */
31
+ --color-pine-50: theme(colors.pine.950);
32
+ --color-pine-100: theme(colors.pine.900);
33
+ --color-pine-200: theme(colors.pine.800);
34
+ --color-pine-300: theme(colors.pine.700);
35
+ --color-pine-400: theme(colors.pine.600);
36
+ --color-pine-500: theme(colors.pine.500);
37
+ --color-pine-600: theme(colors.pine.400);
38
+ --color-pine-700: theme(colors.pine.300);
39
+ --color-pine-800: theme(colors.pine.200);
40
+ --color-pine-900: theme(colors.pine.100);
41
+ --color-pine-950: theme(colors.pine.50);
42
+
43
+ /* Iris Color Scale - Dark mode variants */
44
+ --color-iris-50: theme(colors.iris.950);
45
+ --color-iris-100: theme(colors.iris.900);
46
+ --color-iris-200: theme(colors.iris.800);
47
+ --color-iris-300: theme(colors.iris.700);
48
+ --color-iris-400: theme(colors.iris.600);
49
+ --color-iris-500: theme(colors.iris.500);
50
+ --color-iris-600: theme(colors.iris.400);
51
+ --color-iris-700: theme(colors.iris.300);
52
+ --color-iris-800: theme(colors.iris.200);
53
+ --color-iris-900: theme(colors.iris.100);
54
+ --color-iris-950: theme(colors.iris.50);
55
+
56
+ /* Base Color Scale - Dark mode variants (inverted neutral palette) */
57
+ --color-base-50: theme(colors.neutral.950);
58
+ --color-base-100: theme(colors.neutral.900);
59
+ --color-base-200: theme(colors.neutral.800);
60
+ --color-base-300: theme(colors.neutral.700);
61
+ --color-base-400: theme(colors.neutral.600);
62
+ --color-base-500: theme(colors.neutral.500);
63
+ --color-base-600: theme(colors.neutral.400);
64
+ --color-base-700: theme(colors.neutral.300);
65
+ --color-base-800: theme(colors.neutral.200);
66
+ --color-base-900: theme(colors.neutral.100);
67
+ --color-base-950: theme(colors.neutral.50);
68
+
69
+ /* Background Colors - No dark mode overrides needed, base colors are already inverted */
70
+
71
+ /* Page Colors - No dark mode overrides needed, base colors are already inverted */
72
+
73
+ /* Card Colors */
74
+ --color-card: var(--color-base-200);
75
+ --color-card-hover: var(--color-base-300);
76
+ --color-card-active: var(--color-base-400);
77
+ --color-card-elevated: var(--color-base-200);
78
+
79
+ /* Input Colors */
80
+ --color-input: var(--color-base-300);
81
+ --color-input-hover: var(--color-base-400);
82
+ --color-input-focus: var(--color-base-300);
83
+ --color-input-disabled: var(--color-base-400);
84
+
85
+ /* Text Colors - No dark mode overrides needed, base colors are already inverted */
86
+
87
+ /* Border Colors - No dark mode overrides needed, base colors are already inverted */
88
+
89
+ /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
90
+
91
+ /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
92
+
93
+ /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
94
+
95
+ /* Success Colors */
96
+ --color-success: theme(colors.pine.400);
97
+ --color-success-weak: theme(colors.pine.500);
98
+ --color-success-medium: theme(colors.pine.300);
99
+ --color-success-strong: theme(colors.pine.200);
100
+
101
+ /* Warning Colors */
102
+ --color-warning: theme(colors.amber.500);
103
+ --color-warning-weak: theme(colors.amber.600);
104
+ --color-warning-medium: theme(colors.amber.400);
105
+ --color-warning-strong: theme(colors.amber.300);
106
+
107
+ /* Error Colors */
108
+ --color-error: theme(colors.red.500);
109
+ --color-error-weak: theme(colors.red.600);
110
+ --color-error-medium: theme(colors.red.400);
111
+ --color-error-strong: theme(colors.red.300);
112
+
113
+ /* Energetic Colors (Citron) */
114
+ --color-energetic: theme(colors.citron.400);
115
+ --color-energetic-weak: theme(colors.citron.500);
116
+ --color-energetic-medium: theme(colors.citron.300);
117
+ --color-energetic-strong: theme(colors.citron.200);
118
+
119
+ /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
120
+
121
+ /* Info Colors */
122
+ --color-info: theme(colors.iris.500);
123
+ --color-info-weak: theme(colors.iris.600);
124
+ --color-info-active: theme(colors.iris.400);
125
+ --color-info-medium: theme(colors.iris.400);
126
+ --color-info-strong: theme(colors.iris.300);
127
+ /* Text alias */
128
+ --color-info-text: var(--color-info);
129
+
130
+ /* Action Colors - Dark mode variants */
131
+ /* Primary Actions - No dark mode overrides needed, brand colors are already inverted */
132
+
133
+ /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
134
+
135
+ /* Danger Actions */
136
+ --color-action-danger: theme(colors.red.500);
137
+ --color-action-danger-hover: theme(colors.red.600);
138
+ --color-action-danger-active: theme(colors.red.700);
139
+ --color-action-danger-disabled: theme(colors.red.700);
140
+ --color-action-danger-subtle: theme(colors.red.950);
141
+ --color-action-danger-subtle-hover: theme(colors.red.900);
142
+
143
+ /* Shadow Colors */
144
+ --shadow-opacity: 0.3;
145
+ --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
146
+ --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
147
+ --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
148
+ --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
149
+ }