zabi-components 7.0.0 → 7.0.1

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 (15) hide show
  1. package/dist/atoms/Button.svelte +3 -5
  2. package/dist/atoms/Button.svelte.d.ts +3 -5
  3. package/dist/atoms/IconButton.svelte +3 -5
  4. package/dist/atoms/IconButton.svelte.d.ts +3 -5
  5. package/dist/atoms/Tooltip.svelte +7 -3
  6. package/dist/atoms/Tooltip.svelte.d.ts +6 -5
  7. package/dist/zabi-components-colors.css +115 -115
  8. package/dist/zabi-components-theme-dark-only.css +72 -72
  9. package/dist/zabi-components-theme-dark.css +72 -72
  10. package/dist/zabi-components-theme-only.css +43 -43
  11. package/dist/zabi-components-theme.css +43 -43
  12. package/dist/zabi-components.css +76 -58
  13. package/docs/lucide-icons.md +24 -0
  14. package/package.json +4 -3
  15. package/scripts/fix-lucide-svelte-icon-dts.js +35 -0
package/dist/atoms/Button.svelte CHANGED
@@ -1,19 +1,17 @@
1
1
  <script lang="ts">
2
2
  import type { Snippet } from "svelte";
3
+ import type { HTMLButtonAttributes } from "svelte/elements";
3
4
  import type { ButtonVariant, SizeVariant } from "../types/variants.js";
4
5
 
5
- interface Props {
6
+ type Props = Omit<HTMLButtonAttributes, "class"> & {
6
7
  variant?: ButtonVariant;
7
8
  size?: SizeVariant;
8
- disabled?: boolean;
9
9
  loading?: boolean;
10
- type?: "button" | "submit" | "reset";
11
10
  text?: string;
12
11
  isFullWidth?: boolean;
13
12
  class?: string;
14
- onclick?: (event: MouseEvent) => void;
15
13
  children?: Snippet;
16
- }
14
+ };
17
15
 
18
16
  let {
19
17
  variant = "primary",
package/dist/atoms/Button.svelte.d.ts CHANGED
@@ -1,17 +1,15 @@
1
1
  import type { Snippet } from "svelte";
2
+ import type { HTMLButtonAttributes } from "svelte/elements";
2
3
  import type { ButtonVariant, SizeVariant } from "../types/variants.js";
3
- interface Props {
4
+ type Props = Omit<HTMLButtonAttributes, "class"> & {
4
5
  variant?: ButtonVariant;
5
6
  size?: SizeVariant;
6
- disabled?: boolean;
7
7
  loading?: boolean;
8
- type?: "button" | "submit" | "reset";
9
8
  text?: string;
10
9
  isFullWidth?: boolean;
11
10
  class?: string;
12
- onclick?: (event: MouseEvent) => void;
13
11
  children?: Snippet;
14
- }
12
+ };
15
13
  declare const Button: import("svelte").Component<Props, {}, "">;
16
14
  type Button = ReturnType<typeof Button>;
17
15
  export default Button;
package/dist/atoms/IconButton.svelte CHANGED
@@ -1,19 +1,17 @@
1
1
  <script lang="ts">
2
2
  import type { Snippet } from "svelte";
3
+ import type { HTMLButtonAttributes } from "svelte/elements";
3
4
  import type { ButtonVariant, SizeVariant } from "../types/variants.js";
4
5
 
5
- interface Props {
6
+ type Props = Omit<HTMLButtonAttributes, "class"> & {
6
7
  variant?: ButtonVariant;
7
8
  size?: SizeVariant;
8
- disabled?: boolean;
9
9
  loading?: boolean;
10
- type?: "button" | "submit" | "reset";
11
10
  /** Required for icon-only usage (no visible text). */
12
11
  label?: string;
13
12
  class?: string;
14
- onclick?: (event: MouseEvent) => void;
15
13
  children?: Snippet;
16
- }
14
+ };
17
15
 
18
16
  let {
19
17
  variant = "primary",
package/dist/atoms/IconButton.svelte.d.ts CHANGED
@@ -1,17 +1,15 @@
1
1
  import type { Snippet } from "svelte";
2
+ import type { HTMLButtonAttributes } from "svelte/elements";
2
3
  import type { ButtonVariant, SizeVariant } from "../types/variants.js";
3
- interface Props {
4
+ type Props = Omit<HTMLButtonAttributes, "class"> & {
4
5
  variant?: ButtonVariant;
5
6
  size?: SizeVariant;
6
- disabled?: boolean;
7
7
  loading?: boolean;
8
- type?: "button" | "submit" | "reset";
9
8
  /** Required for icon-only usage (no visible text). */
10
9
  label?: string;
11
10
  class?: string;
12
- onclick?: (event: MouseEvent) => void;
13
11
  children?: Snippet;
14
- }
12
+ };
15
13
  declare const IconButton: import("svelte").Component<Props, {}, "">;
16
14
  type IconButton = ReturnType<typeof IconButton>;
17
15
  export default IconButton;
package/dist/atoms/Tooltip.svelte CHANGED
@@ -1,13 +1,17 @@
1
1
  <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import type { HTMLAttributes } from "svelte/elements";
2
4
  import { onDestroy } from "svelte";
3
5
  import { generateId } from "../util/ssr-safe.js";
4
6
 
5
- interface Props {
7
+ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
6
8
  content?: string;
7
9
  placement?: "top" | "bottom" | "left" | "right";
8
10
  delay?: number;
9
11
  disabled?: boolean;
10
- }
12
+ class?: string;
13
+ children?: Snippet;
14
+ };
11
15
 
12
16
  /** First matching focusable inside the slot receives `aria-describedby` (wrapper div is skipped). */
13
17
  const FOCUSABLE_SELECTOR =
@@ -20,7 +24,7 @@
20
24
  disabled = false,
21
25
  children,
22
26
  ...restProps
23
- }: Props & { children?: any } = $props();
27
+ }: Props = $props();
24
28
 
25
29
  const triggerId = generateId("tooltip-trigger");
26
30
  const tooltipId = generateId("tooltip");
package/dist/atoms/Tooltip.svelte.d.ts CHANGED
@@ -1,12 +1,13 @@
1
- interface Props {
1
+ import type { Snippet } from "svelte";
2
+ import type { HTMLAttributes } from "svelte/elements";
3
+ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
2
4
  content?: string;
3
5
  placement?: "top" | "bottom" | "left" | "right";
4
6
  delay?: number;
5
7
  disabled?: boolean;
6
- }
7
- type $$ComponentProps = Props & {
8
- children?: any;
8
+ class?: string;
9
+ children?: Snippet;
9
10
  };
10
- declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
11
+ declare const Tooltip: import("svelte").Component<Props, {}, "">;
11
12
  type Tooltip = ReturnType<typeof Tooltip>;
12
13
  export default Tooltip;
package/dist/zabi-components-colors.css CHANGED
@@ -114,12 +114,12 @@
114
114
  --color-page: var(--color-base-100)
115
115
  --color-page-secondary: var(--color-base-200)
116
116
  /* Card Colors */
117
- --color-card: theme(colors.white)
117
+ --color-card: #ffffff
118
118
  --color-card-hover: var(--color-base-100)
119
119
  --color-card-active: var(--color-base-100)
120
- --color-card-elevated: theme(colors.white)
120
+ --color-card-elevated: #ffffff
121
121
  /* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
122
- --color-surface-1: theme(colors.white)
122
+ --color-surface-1: #ffffff
123
123
  --color-surface-2: var(--color-base-50)
124
124
  --color-surface-3: var(--color-base-75)
125
125
  --color-surface-4: var(--color-base-100)
@@ -138,8 +138,8 @@
138
138
  --color-caption: var(--color-base-500)
139
139
  --color-input-placeholder: var(--color-base-400)
140
140
  --color-label: var(--color-base-700)
141
- --color-link: theme(colors.brand.600)
142
- --color-link-hover: theme(colors.brand.700)
141
+ --color-link: var(--color-brand-600)
142
+ --color-link-hover: var(--color-brand-700)
143
143
  /* Navigation menu item — menubar triggers, menu links, inline/sidebar nav rows */
144
144
  --color-nav-menu-item: var(--color-body)
145
145
  --color-nav-menu-item-hover: var(--color-headline)
@@ -148,11 +148,11 @@
148
148
  --color-nav-menu-active: var(--color-action-primary-subtle)
149
149
  --color-nav-menu-focus: var(--color-brand-500)
150
150
  --color-success-text: var(--color-success)
151
- --color-warning-text: theme(colors.amber.700)
151
+ --color-warning-text: #b45309
152
152
  --color-neutral-text: var(--color-base-700)
153
- --color-energetic-text: theme(colors.citron.700)
154
- --color-error-text: theme(colors.red.700)
155
- --color-inverse: theme(colors.white)
153
+ --color-energetic-text: var(--color-citron-700)
154
+ --color-error-text: #b91c1c
155
+ --color-inverse: #ffffff
156
156
  --color-disabled: var(--color-base-400)
157
157
  /* Border Colors */
158
158
  --color-border: var(--color-base-300)
@@ -160,53 +160,53 @@
160
160
  --color-border-medium: var(--color-base-400)
161
161
  --color-border-strong: var(--color-base-500)
162
162
  /* Focus Colors */
163
- --color-focus: theme(colors.brand.500)
164
- --color-focus-weak: theme(colors.brand.600)
165
- --color-focus-medium: theme(colors.brand.700)
166
- --color-focus-strong: theme(colors.brand.800)
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
167
  /* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
168
168
  --color-focus-ring: var(--color-focus)
169
169
  --color-focus-ring-offset: var(--color-card)
170
170
  /* Primary Colors */
171
- --color-primary: theme(colors.brand.600)
172
- --color-primary-weak: theme(colors.brand.700)
173
- --color-primary-medium: theme(colors.brand.800)
174
- --color-primary-strong: theme(colors.brand.900)
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
175
  /* Secondary Colors */
176
176
  --color-secondary: var(--color-base-600)
177
177
  --color-secondary-weak: var(--color-base-700)
178
178
  --color-secondary-medium: var(--color-base-800)
179
179
  --color-secondary-strong: var(--color-base-900)
180
180
  /* Success Colors */
181
- --color-success: theme(colors.pine.600)
182
- --color-success-weak: theme(colors.pine.700)
183
- --color-success-medium: theme(colors.pine.800)
184
- --color-success-strong: theme(colors.pine.900)
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
185
  /* Warning Colors */
186
- --color-warning: theme(colors.amber.500)
187
- --color-warning-weak: theme(colors.amber.600)
188
- --color-warning-medium: theme(colors.amber.400)
189
- --color-warning-strong: theme(colors.amber.300)
186
+ --color-warning: #f59e0b
187
+ --color-warning-weak: #d97706
188
+ --color-warning-medium: #fbbf24
189
+ --color-warning-strong: #fcd34d
190
190
  /* Error Colors */
191
- --color-error: theme(colors.red.500)
192
- --color-error-weak: theme(colors.red.600)
193
- --color-error-medium: theme(colors.red.400)
194
- --color-error-strong: theme(colors.red.300)
191
+ --color-error: #ef4444
192
+ --color-error-weak: #dc2626
193
+ --color-error-medium: #f87171
194
+ --color-error-strong: #fca5a5
195
195
  /* Energetic Colors (Citron) */
196
- --color-energetic: theme(colors.citron.500)
197
- --color-energetic-weak: theme(colors.citron.600)
198
- --color-energetic-medium: theme(colors.citron.400)
199
- --color-energetic-strong: theme(colors.citron.300)
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
200
  /* Neutral Colors */
201
201
  --color-neutral: var(--color-base-600)
202
202
  --color-neutral-weak: var(--color-base-700)
203
203
  --color-neutral-medium: var(--color-base-800)
204
204
  --color-neutral-strong: var(--color-base-900)
205
205
  /* Info Colors */
206
- --color-info: theme(colors.iris.600)
207
- --color-info-weak: theme(colors.iris.700)
208
- --color-info-medium: theme(colors.iris.800)
209
- --color-info-strong: theme(colors.iris.900)
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
210
  /* Text alias */
211
211
  --color-info-text: var(--color-info)
212
212
  /* ========================================
@@ -229,12 +229,12 @@
229
229
  --color-action-secondary-subtle: var(--color-brand-600)
230
230
  --color-action-secondary-subtle-hover: var(--color-brand-700)
231
231
  /* Danger Actions - Used by bg-action-danger utility class */
232
- --color-action-danger: theme(colors.red.600)
233
- --color-action-danger-hover: theme(colors.red.700)
234
- --color-action-danger-active: theme(colors.red.800)
235
- --color-action-danger-disabled: theme(colors.red.300)
236
- --color-action-danger-subtle: theme(colors.red.50)
237
- --color-action-danger-subtle-hover: theme(colors.red.100)
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
238
  /* Shadow Colors */
239
239
  --shadow-color: 0 0 0
240
240
  --shadow-opacity: 0.1
@@ -289,54 +289,54 @@
289
289
  --zabi-base-900: #18181b
290
290
  --zabi-base-925: #101013
291
291
  --zabi-base-950: #09090b
292
- /* Brand Color Scale - Dark mode variants */
293
- --color-brand-50: theme(colors.brand.950)
294
- --color-brand-100: theme(colors.brand.900)
295
- --color-brand-200: theme(colors.brand.800)
296
- --color-brand-300: theme(colors.brand.700)
297
- --color-brand-400: theme(colors.brand.600)
298
- --color-brand-500: theme(colors.brand.500)
299
- --color-brand-600: theme(colors.brand.400)
300
- --color-brand-700: theme(colors.brand.300)
301
- --color-brand-800: theme(colors.brand.200)
302
- --color-brand-900: theme(colors.brand.100)
303
- --color-brand-950: theme(colors.brand.50)
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
304
  /* Citron Color Scale - Dark mode variants */
305
- --color-citron-50: theme(colors.citron.950)
306
- --color-citron-100: theme(colors.citron.900)
307
- --color-citron-200: theme(colors.citron.800)
308
- --color-citron-300: theme(colors.citron.700)
309
- --color-citron-400: theme(colors.citron.600)
310
- --color-citron-500: theme(colors.citron.500)
311
- --color-citron-600: theme(colors.citron.400)
312
- --color-citron-700: theme(colors.citron.300)
313
- --color-citron-800: theme(colors.citron.200)
314
- --color-citron-900: theme(colors.citron.100)
315
- --color-citron-950: theme(colors.citron.50)
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
316
  /* Pine Color Scale - Dark mode variants */
317
- --color-pine-50: theme(colors.pine.950)
318
- --color-pine-100: theme(colors.pine.900)
319
- --color-pine-200: theme(colors.pine.800)
320
- --color-pine-300: theme(colors.pine.700)
321
- --color-pine-400: theme(colors.pine.600)
322
- --color-pine-500: theme(colors.pine.500)
323
- --color-pine-600: theme(colors.pine.400)
324
- --color-pine-700: theme(colors.pine.300)
325
- --color-pine-800: theme(colors.pine.200)
326
- --color-pine-900: theme(colors.pine.100)
327
- --color-pine-950: theme(colors.pine.50)
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
328
  /* Iris Color Scale - Dark mode variants */
329
- --color-iris-50: theme(colors.iris.950)
330
- --color-iris-100: theme(colors.iris.900)
331
- --color-iris-200: theme(colors.iris.800)
332
- --color-iris-300: theme(colors.iris.700)
333
- --color-iris-400: theme(colors.iris.600)
334
- --color-iris-500: theme(colors.iris.500)
335
- --color-iris-600: theme(colors.iris.400)
336
- --color-iris-700: theme(colors.iris.300)
337
- --color-iris-800: theme(colors.iris.200)
338
- --color-iris-900: theme(colors.iris.100)
339
- --color-iris-950: theme(colors.iris.50)
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
340
  /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
341
341
  --color-base-50: #09090b
342
342
  --color-base-75: #101013
@@ -385,32 +385,32 @@
385
385
  /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
386
386
  /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
387
387
  /* Success Colors */
388
- --color-success: theme(colors.pine.400)
389
- --color-success-weak: theme(colors.pine.500)
390
- --color-success-medium: theme(colors.pine.300)
391
- --color-success-strong: theme(colors.pine.200)
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
392
  /* Warning Colors */
393
- --color-warning: theme(colors.amber.500)
394
- --color-warning-weak: theme(colors.amber.600)
395
- --color-warning-medium: theme(colors.amber.400)
396
- --color-warning-strong: theme(colors.amber.300)
393
+ --color-warning: #f59e0b
394
+ --color-warning-weak: #d97706
395
+ --color-warning-medium: #fbbf24
396
+ --color-warning-strong: #fcd34d
397
397
  /* Error Colors */
398
- --color-error: theme(colors.red.500)
399
- --color-error-weak: theme(colors.red.600)
400
- --color-error-medium: theme(colors.red.400)
401
- --color-error-strong: theme(colors.red.300)
398
+ --color-error: #ef4444
399
+ --color-error-weak: #dc2626
400
+ --color-error-medium: #f87171
401
+ --color-error-strong: #fca5a5
402
402
  /* Energetic Colors (Citron) */
403
- --color-energetic: theme(colors.citron.400)
404
- --color-energetic-weak: theme(colors.citron.500)
405
- --color-energetic-medium: theme(colors.citron.300)
406
- --color-energetic-strong: theme(colors.citron.200)
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
407
  /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
408
408
  /* Info Colors */
409
- --color-info: theme(colors.iris.500)
410
- --color-info-weak: theme(colors.iris.600)
411
- --color-info-active: theme(colors.iris.400)
412
- --color-info-medium: theme(colors.iris.400)
413
- --color-info-strong: theme(colors.iris.300)
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
414
  /* Text alias */
415
415
  --color-info-text: var(--color-info)
416
416
  /* ========================================
@@ -422,12 +422,12 @@
422
422
  --color-action-primary-text: var(--color-brand-50)
423
423
  /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
424
424
  /* Danger Actions */
425
- --color-action-danger: theme(colors.red.500)
426
- --color-action-danger-hover: theme(colors.red.600)
427
- --color-action-danger-active: theme(colors.red.700)
428
- --color-action-danger-disabled: theme(colors.red.700)
429
- --color-action-danger-subtle: theme(colors.red.950)
430
- --color-action-danger-subtle-hover: theme(colors.red.900)
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
431
  /* Shadow Colors */
432
432
  --shadow-opacity: 0.3
433
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))
package/dist/zabi-components-theme-dark-only.css CHANGED
@@ -23,54 +23,54 @@
23
23
  --zabi-base-900: #18181b
24
24
  --zabi-base-925: #101013
25
25
  --zabi-base-950: #09090b
26
- /* Brand Color Scale - Dark mode variants */
27
- --color-brand-50: theme(colors.brand.950)
28
- --color-brand-100: theme(colors.brand.900)
29
- --color-brand-200: theme(colors.brand.800)
30
- --color-brand-300: theme(colors.brand.700)
31
- --color-brand-400: theme(colors.brand.600)
32
- --color-brand-500: theme(colors.brand.500)
33
- --color-brand-600: theme(colors.brand.400)
34
- --color-brand-700: theme(colors.brand.300)
35
- --color-brand-800: theme(colors.brand.200)
36
- --color-brand-900: theme(colors.brand.100)
37
- --color-brand-950: theme(colors.brand.50)
26
+ /* Brand Color Scale - Dark mode variants (mirrored from light physical hex; no theme() forward refs) */
27
+ --color-brand-50: #1f2866
28
+ --color-brand-100: #2f3c99
29
+ --color-brand-200: #3f4fc0
30
+ --color-brand-300: #5366e2
31
+ --color-brand-400: #6e84fa
32
+ --color-brand-500: #8fa8ff
33
+ --color-brand-600: #abc4ff
34
+ --color-brand-700: #ccdbfd
35
+ --color-brand-800: #dfe7fb
36
+ --color-brand-900: #edf2fb
37
+ --color-brand-950: #f7faff
38
38
  /* Citron Color Scale - Dark mode variants */
39
- --color-citron-50: theme(colors.citron.950)
40
- --color-citron-100: theme(colors.citron.900)
41
- --color-citron-200: theme(colors.citron.800)
42
- --color-citron-300: theme(colors.citron.700)
43
- --color-citron-400: theme(colors.citron.600)
44
- --color-citron-500: theme(colors.citron.500)
45
- --color-citron-600: theme(colors.citron.400)
46
- --color-citron-700: theme(colors.citron.300)
47
- --color-citron-800: theme(colors.citron.200)
48
- --color-citron-900: theme(colors.citron.100)
49
- --color-citron-950: theme(colors.citron.50)
39
+ --color-citron-50: #323518
40
+ --color-citron-100: #4d5229
41
+ --color-citron-200: #666c35
42
+ --color-citron-300: #848a43
43
+ --color-citron-400: #a3a852
44
+ --color-citron-500: #bbbe64
45
+ --color-citron-600: #c7d460
46
+ --color-citron-700: #d5e184
47
+ --color-citron-800: #e4ecaa
48
+ --color-citron-900: #f1f5cf
49
+ --color-citron-950: #f9faeb
50
50
  /* Pine Color Scale - Dark mode variants */
51
- --color-pine-50: theme(colors.pine.950)
52
- --color-pine-100: theme(colors.pine.900)
53
- --color-pine-200: theme(colors.pine.800)
54
- --color-pine-300: theme(colors.pine.700)
55
- --color-pine-400: theme(colors.pine.600)
56
- --color-pine-500: theme(colors.pine.500)
57
- --color-pine-600: theme(colors.pine.400)
58
- --color-pine-700: theme(colors.pine.300)
59
- --color-pine-800: theme(colors.pine.200)
60
- --color-pine-900: theme(colors.pine.100)
61
- --color-pine-950: theme(colors.pine.50)
51
+ --color-pine-50: #02160f
52
+ --color-pine-100: #04231a
53
+ --color-pine-200: #063a2a
54
+ --color-pine-300: #084532
55
+ --color-pine-400: #0a513a
56
+ --color-pine-500: #0c5d43
57
+ --color-pine-600: #49ad91
58
+ --color-pine-700: #78c4ad
59
+ --color-pine-800: #a7d9c9
60
+ --color-pine-900: #d2ece4
61
+ --color-pine-950: #e9f6f2
62
62
  /* Iris Color Scale - Dark mode variants */
63
- --color-iris-50: theme(colors.iris.950)
64
- --color-iris-100: theme(colors.iris.900)
65
- --color-iris-200: theme(colors.iris.800)
66
- --color-iris-300: theme(colors.iris.700)
67
- --color-iris-400: theme(colors.iris.600)
68
- --color-iris-500: theme(colors.iris.500)
69
- --color-iris-600: theme(colors.iris.400)
70
- --color-iris-700: theme(colors.iris.300)
71
- --color-iris-800: theme(colors.iris.200)
72
- --color-iris-900: theme(colors.iris.100)
73
- --color-iris-950: theme(colors.iris.50)
63
+ --color-iris-50: #1b1b37
64
+ --color-iris-100: #2a2a56
65
+ --color-iris-200: #38386f
66
+ --color-iris-300: #474788
67
+ --color-iris-400: #58589e
68
+ --color-iris-500: #6969b3
69
+ --color-iris-600: #a3a3d8
70
+ --color-iris-700: #bdbde6
71
+ --color-iris-800: #d6d6f0
72
+ --color-iris-900: #e9e9f7
73
+ --color-iris-950: #f4f4fa
74
74
  /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
75
75
  --color-base-50: #09090b
76
76
  --color-base-75: #101013
@@ -119,32 +119,32 @@
119
119
  /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
120
120
  /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
121
121
  /* Success Colors */
122
- --color-success: theme(colors.pine.400)
123
- --color-success-weak: theme(colors.pine.500)
124
- --color-success-medium: theme(colors.pine.300)
125
- --color-success-strong: theme(colors.pine.200)
122
+ --color-success: var(--color-pine-400)
123
+ --color-success-weak: var(--color-pine-500)
124
+ --color-success-medium: var(--color-pine-300)
125
+ --color-success-strong: var(--color-pine-200)
126
126
  /* Warning Colors */
127
- --color-warning: theme(colors.amber.500)
128
- --color-warning-weak: theme(colors.amber.600)
129
- --color-warning-medium: theme(colors.amber.400)
130
- --color-warning-strong: theme(colors.amber.300)
127
+ --color-warning: #f59e0b
128
+ --color-warning-weak: #d97706
129
+ --color-warning-medium: #fbbf24
130
+ --color-warning-strong: #fcd34d
131
131
  /* Error Colors */
132
- --color-error: theme(colors.red.500)
133
- --color-error-weak: theme(colors.red.600)
134
- --color-error-medium: theme(colors.red.400)
135
- --color-error-strong: theme(colors.red.300)
132
+ --color-error: #ef4444
133
+ --color-error-weak: #dc2626
134
+ --color-error-medium: #f87171
135
+ --color-error-strong: #fca5a5
136
136
  /* Energetic Colors (Citron) */
137
- --color-energetic: theme(colors.citron.400)
138
- --color-energetic-weak: theme(colors.citron.500)
139
- --color-energetic-medium: theme(colors.citron.300)
140
- --color-energetic-strong: theme(colors.citron.200)
137
+ --color-energetic: var(--color-citron-400)
138
+ --color-energetic-weak: var(--color-citron-500)
139
+ --color-energetic-medium: var(--color-citron-300)
140
+ --color-energetic-strong: var(--color-citron-200)
141
141
  /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
142
142
  /* Info Colors */
143
- --color-info: theme(colors.iris.500)
144
- --color-info-weak: theme(colors.iris.600)
145
- --color-info-active: theme(colors.iris.400)
146
- --color-info-medium: theme(colors.iris.400)
147
- --color-info-strong: theme(colors.iris.300)
143
+ --color-info: var(--color-iris-500)
144
+ --color-info-weak: var(--color-iris-600)
145
+ --color-info-active: var(--color-iris-400)
146
+ --color-info-medium: var(--color-iris-400)
147
+ --color-info-strong: var(--color-iris-300)
148
148
  /* Text alias */
149
149
  --color-info-text: var(--color-info)
150
150
  /* ========================================
@@ -156,12 +156,12 @@
156
156
  --color-action-primary-text: var(--color-brand-50)
157
157
  /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
158
158
  /* Danger Actions */
159
- --color-action-danger: theme(colors.red.500)
160
- --color-action-danger-hover: theme(colors.red.600)
161
- --color-action-danger-active: theme(colors.red.700)
162
- --color-action-danger-disabled: theme(colors.red.700)
163
- --color-action-danger-subtle: theme(colors.red.950)
164
- --color-action-danger-subtle-hover: theme(colors.red.900)
159
+ --color-action-danger: #ef4444
160
+ --color-action-danger-hover: #dc2626
161
+ --color-action-danger-active: #b91c1c
162
+ --color-action-danger-disabled: #b91c1c
163
+ --color-action-danger-subtle: #450a0a
164
+ --color-action-danger-subtle-hover: #7f1d1d
165
165
  /* Shadow Colors */
166
166
  --shadow-opacity: 0.3
167
167
  --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))