zabi-components 7.0.0 → 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.
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 +19 -41
  6. package/dist/atoms/Tooltip.svelte.d.ts +6 -5
  7. package/dist/zabi-components-colors.css +3 -437
  8. package/dist/zabi-components-theme-dark-only.css +157 -84
  9. package/dist/zabi-components-theme-dark.css +157 -84
  10. package/dist/zabi-components-theme-only.css +185 -91
  11. package/dist/zabi-components-theme.css +185 -91
  12. package/dist/zabi-components.css +298 -118
  13. package/docs/lucide-icons.md +24 -0
  14. package/package.json +5 -4
  15. package/scripts/fix-lucide-svelte-icon-dts.js +35 -0
package/dist/zabi-components-theme-dark-only.css CHANGED
@@ -23,54 +23,150 @@
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)
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)
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)
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)
26
+ /* Mirror @theme --zabi-brand-* ramp (same physical hex; required for standalone dark import) */
27
+ --zabi-brand-50: #f7faff
28
+ --zabi-brand-100: #edf2fb
29
+ --zabi-brand-200: #dfe7fb
30
+ --zabi-brand-300: #ccdbfd
31
+ --zabi-brand-400: #abc4ff
32
+ --zabi-brand-500: #8fa8ff
33
+ --zabi-brand-600: #6e84fa
34
+ --zabi-brand-700: #5366e2
35
+ --zabi-brand-800: #3f4fc0
36
+ --zabi-brand-900: #2f3c99
37
+ --zabi-brand-950: #1f2866
38
+ /* Brand Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
39
+ --color-brand-50: var(--zabi-brand-950)
40
+ --color-brand-100: var(--zabi-brand-900)
41
+ --color-brand-200: var(--zabi-brand-800)
42
+ --color-brand-300: var(--zabi-brand-700)
43
+ --color-brand-400: var(--zabi-brand-600)
44
+ --color-brand-500: var(--zabi-brand-500)
45
+ --color-brand-600: var(--zabi-brand-400)
46
+ --color-brand-700: var(--zabi-brand-300)
47
+ --color-brand-800: var(--zabi-brand-200)
48
+ --color-brand-900: var(--zabi-brand-100)
49
+ --color-brand-950: var(--zabi-brand-50)
50
+ /* Mirror @theme --zabi-citron-* ramp (same physical hex; required for standalone dark import) */
51
+ --zabi-citron-50: #f9faeb
52
+ --zabi-citron-100: #f1f5cf
53
+ --zabi-citron-200: #e4ecaa
54
+ --zabi-citron-300: #d5e184
55
+ --zabi-citron-400: #c7d460
56
+ --zabi-citron-500: #bbbe64
57
+ --zabi-citron-600: #a3a852
58
+ --zabi-citron-700: #848a43
59
+ --zabi-citron-800: #666c35
60
+ --zabi-citron-900: #4d5229
61
+ --zabi-citron-950: #323518
62
+ /* Citron Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
63
+ --color-citron-50: var(--zabi-citron-950)
64
+ --color-citron-100: var(--zabi-citron-900)
65
+ --color-citron-200: var(--zabi-citron-800)
66
+ --color-citron-300: var(--zabi-citron-700)
67
+ --color-citron-400: var(--zabi-citron-600)
68
+ --color-citron-500: var(--zabi-citron-500)
69
+ --color-citron-600: var(--zabi-citron-400)
70
+ --color-citron-700: var(--zabi-citron-300)
71
+ --color-citron-800: var(--zabi-citron-200)
72
+ --color-citron-900: var(--zabi-citron-100)
73
+ --color-citron-950: var(--zabi-citron-50)
74
+ /* Mirror @theme --zabi-pine-* ramp (same physical hex; required for standalone dark import) */
75
+ --zabi-pine-50: #e9f6f2
76
+ --zabi-pine-100: #d2ece4
77
+ --zabi-pine-200: #a7d9c9
78
+ --zabi-pine-300: #78c4ad
79
+ --zabi-pine-400: #49ad91
80
+ --zabi-pine-500: #0c5d43
81
+ --zabi-pine-600: #0a513a
82
+ --zabi-pine-700: #084532
83
+ --zabi-pine-800: #063a2a
84
+ --zabi-pine-900: #04231a
85
+ --zabi-pine-950: #02160f
86
+ /* Pine Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
87
+ --color-pine-50: var(--zabi-pine-950)
88
+ --color-pine-100: var(--zabi-pine-900)
89
+ --color-pine-200: var(--zabi-pine-800)
90
+ --color-pine-300: var(--zabi-pine-700)
91
+ --color-pine-400: var(--zabi-pine-600)
92
+ --color-pine-500: var(--zabi-pine-500)
93
+ --color-pine-600: var(--zabi-pine-400)
94
+ --color-pine-700: var(--zabi-pine-300)
95
+ --color-pine-800: var(--zabi-pine-200)
96
+ --color-pine-900: var(--zabi-pine-100)
97
+ --color-pine-950: var(--zabi-pine-50)
98
+ /* Mirror @theme --zabi-iris-* ramp (same physical hex; required for standalone dark import) */
99
+ --zabi-iris-50: #f4f4fa
100
+ --zabi-iris-100: #e9e9f7
101
+ --zabi-iris-200: #d6d6f0
102
+ --zabi-iris-300: #bdbde6
103
+ --zabi-iris-400: #a3a3d8
104
+ --zabi-iris-500: #6969b3
105
+ --zabi-iris-600: #58589e
106
+ --zabi-iris-700: #474788
107
+ --zabi-iris-800: #38386f
108
+ --zabi-iris-900: #2a2a56
109
+ --zabi-iris-950: #1b1b37
110
+ /* Iris Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
111
+ --color-iris-50: var(--zabi-iris-950)
112
+ --color-iris-100: var(--zabi-iris-900)
113
+ --color-iris-200: var(--zabi-iris-800)
114
+ --color-iris-300: var(--zabi-iris-700)
115
+ --color-iris-400: var(--zabi-iris-600)
116
+ --color-iris-500: var(--zabi-iris-500)
117
+ --color-iris-600: var(--zabi-iris-400)
118
+ --color-iris-700: var(--zabi-iris-300)
119
+ --color-iris-800: var(--zabi-iris-200)
120
+ --color-iris-900: var(--zabi-iris-100)
121
+ --color-iris-950: var(--zabi-iris-50)
122
+ /* Mirror @theme --zabi-warning-* ramp (same physical hex; required for standalone dark import) */
123
+ --zabi-warning-50: #fffbeb
124
+ --zabi-warning-100: #fef3c7
125
+ --zabi-warning-200: #fde68a
126
+ --zabi-warning-300: #fcd34d
127
+ --zabi-warning-400: #fbbf24
128
+ --zabi-warning-500: #f59e0b
129
+ --zabi-warning-600: #d97706
130
+ --zabi-warning-700: #b45309
131
+ --zabi-warning-800: #92400e
132
+ --zabi-warning-900: #78350f
133
+ --zabi-warning-950: #451a03
134
+ /* Warning Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
135
+ --color-warning-50: var(--zabi-warning-950)
136
+ --color-warning-100: var(--zabi-warning-900)
137
+ --color-warning-200: var(--zabi-warning-800)
138
+ --color-warning-300: var(--zabi-warning-700)
139
+ --color-warning-400: var(--zabi-warning-600)
140
+ --color-warning-500: var(--zabi-warning-500)
141
+ --color-warning-600: var(--zabi-warning-400)
142
+ --color-warning-700: var(--zabi-warning-300)
143
+ --color-warning-800: var(--zabi-warning-200)
144
+ --color-warning-900: var(--zabi-warning-100)
145
+ --color-warning-950: var(--zabi-warning-50)
146
+ /* Mirror @theme --zabi-error-* ramp (same physical hex; required for standalone dark import) */
147
+ --zabi-error-50: #fef2f2
148
+ --zabi-error-100: #fee2e2
149
+ --zabi-error-200: #fecaca
150
+ --zabi-error-300: #fca5a5
151
+ --zabi-error-400: #f87171
152
+ --zabi-error-500: #ef4444
153
+ --zabi-error-600: #dc2626
154
+ --zabi-error-700: #b91c1c
155
+ --zabi-error-800: #991b1b
156
+ --zabi-error-900: #7f1d1d
157
+ --zabi-error-950: #450a0a
158
+ /* Error Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
159
+ --color-error-50: var(--zabi-error-950)
160
+ --color-error-100: var(--zabi-error-900)
161
+ --color-error-200: var(--zabi-error-800)
162
+ --color-error-300: var(--zabi-error-700)
163
+ --color-error-400: var(--zabi-error-600)
164
+ --color-error-500: var(--zabi-error-500)
165
+ --color-error-600: var(--zabi-error-400)
166
+ --color-error-700: var(--zabi-error-300)
167
+ --color-error-800: var(--zabi-error-200)
168
+ --color-error-900: var(--zabi-error-100)
169
+ --color-error-950: var(--zabi-error-50)
74
170
  /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
75
171
  --color-base-50: #09090b
76
172
  --color-base-75: #101013
@@ -118,50 +214,27 @@
118
214
  /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
119
215
  /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
120
216
  /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
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)
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)
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)
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)
217
+ /* Success Colors — no overrides: @theme uses --color-pine-*; semantic pine resolves to mirrored physical ramp inside .dark */
218
+ /* Warning Colors — no overrides: @theme uses --color-warning-* scale; it mirrors in .dark via --zabi-warning-* */
219
+ /* Error Colors — no overrides: @theme uses --color-error-* scale; it mirrors in .dark via --zabi-error-* */
220
+ /* Energetic Colors — no overrides: @theme uses --color-citron-*; citron mirrors in .dark via --zabi-citron-* */
141
221
  /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
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)
148
- /* Text alias */
149
- --color-info-text: var(--color-info)
222
+ /* Info Colors — no overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
150
223
  /* ========================================
151
224
  ACTION COLORS - Dark Mode Overrides
152
225
  ======================================== */
153
226
  /* Primary Actions - Background adapts automatically via brand color inversion */
154
- /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
155
- /* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
227
+ /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --zabi-brand-* physical ramp above (semantic --color-brand-* follows mirror) */
228
+ /* Text color - Use brand-50 (semantic; maps across light/dark via --zabi-brand-*) for proper contrast */
156
229
  --color-action-primary-text: var(--color-brand-50)
157
230
  /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
158
231
  /* 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)
232
+ --color-action-danger: #ef4444
233
+ --color-action-danger-hover: #dc2626
234
+ --color-action-danger-active: #b91c1c
235
+ --color-action-danger-disabled: #b91c1c
236
+ --color-action-danger-subtle: #450a0a
237
+ --color-action-danger-subtle-hover: #7f1d1d
165
238
  /* Shadow Colors */
166
239
  --shadow-opacity: 0.3
167
240
  --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.css CHANGED
@@ -25,54 +25,150 @@
25
25
  --zabi-base-900: #18181b
26
26
  --zabi-base-925: #101013
27
27
  --zabi-base-950: #09090b
28
- /* Brand Color Scale - Dark mode variants */
29
- --color-brand-50: theme(colors.brand.950)
30
- --color-brand-100: theme(colors.brand.900)
31
- --color-brand-200: theme(colors.brand.800)
32
- --color-brand-300: theme(colors.brand.700)
33
- --color-brand-400: theme(colors.brand.600)
34
- --color-brand-500: theme(colors.brand.500)
35
- --color-brand-600: theme(colors.brand.400)
36
- --color-brand-700: theme(colors.brand.300)
37
- --color-brand-800: theme(colors.brand.200)
38
- --color-brand-900: theme(colors.brand.100)
39
- --color-brand-950: theme(colors.brand.50)
40
- /* Citron Color Scale - Dark mode variants */
41
- --color-citron-50: theme(colors.citron.950)
42
- --color-citron-100: theme(colors.citron.900)
43
- --color-citron-200: theme(colors.citron.800)
44
- --color-citron-300: theme(colors.citron.700)
45
- --color-citron-400: theme(colors.citron.600)
46
- --color-citron-500: theme(colors.citron.500)
47
- --color-citron-600: theme(colors.citron.400)
48
- --color-citron-700: theme(colors.citron.300)
49
- --color-citron-800: theme(colors.citron.200)
50
- --color-citron-900: theme(colors.citron.100)
51
- --color-citron-950: theme(colors.citron.50)
52
- /* Pine Color Scale - Dark mode variants */
53
- --color-pine-50: theme(colors.pine.950)
54
- --color-pine-100: theme(colors.pine.900)
55
- --color-pine-200: theme(colors.pine.800)
56
- --color-pine-300: theme(colors.pine.700)
57
- --color-pine-400: theme(colors.pine.600)
58
- --color-pine-500: theme(colors.pine.500)
59
- --color-pine-600: theme(colors.pine.400)
60
- --color-pine-700: theme(colors.pine.300)
61
- --color-pine-800: theme(colors.pine.200)
62
- --color-pine-900: theme(colors.pine.100)
63
- --color-pine-950: theme(colors.pine.50)
64
- /* Iris Color Scale - Dark mode variants */
65
- --color-iris-50: theme(colors.iris.950)
66
- --color-iris-100: theme(colors.iris.900)
67
- --color-iris-200: theme(colors.iris.800)
68
- --color-iris-300: theme(colors.iris.700)
69
- --color-iris-400: theme(colors.iris.600)
70
- --color-iris-500: theme(colors.iris.500)
71
- --color-iris-600: theme(colors.iris.400)
72
- --color-iris-700: theme(colors.iris.300)
73
- --color-iris-800: theme(colors.iris.200)
74
- --color-iris-900: theme(colors.iris.100)
75
- --color-iris-950: theme(colors.iris.50)
28
+ /* Mirror @theme --zabi-brand-* ramp (same physical hex; required for standalone dark import) */
29
+ --zabi-brand-50: #f7faff
30
+ --zabi-brand-100: #edf2fb
31
+ --zabi-brand-200: #dfe7fb
32
+ --zabi-brand-300: #ccdbfd
33
+ --zabi-brand-400: #abc4ff
34
+ --zabi-brand-500: #8fa8ff
35
+ --zabi-brand-600: #6e84fa
36
+ --zabi-brand-700: #5366e2
37
+ --zabi-brand-800: #3f4fc0
38
+ --zabi-brand-900: #2f3c99
39
+ --zabi-brand-950: #1f2866
40
+ /* Brand Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
41
+ --color-brand-50: var(--zabi-brand-950)
42
+ --color-brand-100: var(--zabi-brand-900)
43
+ --color-brand-200: var(--zabi-brand-800)
44
+ --color-brand-300: var(--zabi-brand-700)
45
+ --color-brand-400: var(--zabi-brand-600)
46
+ --color-brand-500: var(--zabi-brand-500)
47
+ --color-brand-600: var(--zabi-brand-400)
48
+ --color-brand-700: var(--zabi-brand-300)
49
+ --color-brand-800: var(--zabi-brand-200)
50
+ --color-brand-900: var(--zabi-brand-100)
51
+ --color-brand-950: var(--zabi-brand-50)
52
+ /* Mirror @theme --zabi-citron-* ramp (same physical hex; required for standalone dark import) */
53
+ --zabi-citron-50: #f9faeb
54
+ --zabi-citron-100: #f1f5cf
55
+ --zabi-citron-200: #e4ecaa
56
+ --zabi-citron-300: #d5e184
57
+ --zabi-citron-400: #c7d460
58
+ --zabi-citron-500: #bbbe64
59
+ --zabi-citron-600: #a3a852
60
+ --zabi-citron-700: #848a43
61
+ --zabi-citron-800: #666c35
62
+ --zabi-citron-900: #4d5229
63
+ --zabi-citron-950: #323518
64
+ /* Citron Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
65
+ --color-citron-50: var(--zabi-citron-950)
66
+ --color-citron-100: var(--zabi-citron-900)
67
+ --color-citron-200: var(--zabi-citron-800)
68
+ --color-citron-300: var(--zabi-citron-700)
69
+ --color-citron-400: var(--zabi-citron-600)
70
+ --color-citron-500: var(--zabi-citron-500)
71
+ --color-citron-600: var(--zabi-citron-400)
72
+ --color-citron-700: var(--zabi-citron-300)
73
+ --color-citron-800: var(--zabi-citron-200)
74
+ --color-citron-900: var(--zabi-citron-100)
75
+ --color-citron-950: var(--zabi-citron-50)
76
+ /* Mirror @theme --zabi-pine-* ramp (same physical hex; required for standalone dark import) */
77
+ --zabi-pine-50: #e9f6f2
78
+ --zabi-pine-100: #d2ece4
79
+ --zabi-pine-200: #a7d9c9
80
+ --zabi-pine-300: #78c4ad
81
+ --zabi-pine-400: #49ad91
82
+ --zabi-pine-500: #0c5d43
83
+ --zabi-pine-600: #0a513a
84
+ --zabi-pine-700: #084532
85
+ --zabi-pine-800: #063a2a
86
+ --zabi-pine-900: #04231a
87
+ --zabi-pine-950: #02160f
88
+ /* Pine Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
89
+ --color-pine-50: var(--zabi-pine-950)
90
+ --color-pine-100: var(--zabi-pine-900)
91
+ --color-pine-200: var(--zabi-pine-800)
92
+ --color-pine-300: var(--zabi-pine-700)
93
+ --color-pine-400: var(--zabi-pine-600)
94
+ --color-pine-500: var(--zabi-pine-500)
95
+ --color-pine-600: var(--zabi-pine-400)
96
+ --color-pine-700: var(--zabi-pine-300)
97
+ --color-pine-800: var(--zabi-pine-200)
98
+ --color-pine-900: var(--zabi-pine-100)
99
+ --color-pine-950: var(--zabi-pine-50)
100
+ /* Mirror @theme --zabi-iris-* ramp (same physical hex; required for standalone dark import) */
101
+ --zabi-iris-50: #f4f4fa
102
+ --zabi-iris-100: #e9e9f7
103
+ --zabi-iris-200: #d6d6f0
104
+ --zabi-iris-300: #bdbde6
105
+ --zabi-iris-400: #a3a3d8
106
+ --zabi-iris-500: #6969b3
107
+ --zabi-iris-600: #58589e
108
+ --zabi-iris-700: #474788
109
+ --zabi-iris-800: #38386f
110
+ --zabi-iris-900: #2a2a56
111
+ --zabi-iris-950: #1b1b37
112
+ /* Iris Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
113
+ --color-iris-50: var(--zabi-iris-950)
114
+ --color-iris-100: var(--zabi-iris-900)
115
+ --color-iris-200: var(--zabi-iris-800)
116
+ --color-iris-300: var(--zabi-iris-700)
117
+ --color-iris-400: var(--zabi-iris-600)
118
+ --color-iris-500: var(--zabi-iris-500)
119
+ --color-iris-600: var(--zabi-iris-400)
120
+ --color-iris-700: var(--zabi-iris-300)
121
+ --color-iris-800: var(--zabi-iris-200)
122
+ --color-iris-900: var(--zabi-iris-100)
123
+ --color-iris-950: var(--zabi-iris-50)
124
+ /* Mirror @theme --zabi-warning-* ramp (same physical hex; required for standalone dark import) */
125
+ --zabi-warning-50: #fffbeb
126
+ --zabi-warning-100: #fef3c7
127
+ --zabi-warning-200: #fde68a
128
+ --zabi-warning-300: #fcd34d
129
+ --zabi-warning-400: #fbbf24
130
+ --zabi-warning-500: #f59e0b
131
+ --zabi-warning-600: #d97706
132
+ --zabi-warning-700: #b45309
133
+ --zabi-warning-800: #92400e
134
+ --zabi-warning-900: #78350f
135
+ --zabi-warning-950: #451a03
136
+ /* Warning Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
137
+ --color-warning-50: var(--zabi-warning-950)
138
+ --color-warning-100: var(--zabi-warning-900)
139
+ --color-warning-200: var(--zabi-warning-800)
140
+ --color-warning-300: var(--zabi-warning-700)
141
+ --color-warning-400: var(--zabi-warning-600)
142
+ --color-warning-500: var(--zabi-warning-500)
143
+ --color-warning-600: var(--zabi-warning-400)
144
+ --color-warning-700: var(--zabi-warning-300)
145
+ --color-warning-800: var(--zabi-warning-200)
146
+ --color-warning-900: var(--zabi-warning-100)
147
+ --color-warning-950: var(--zabi-warning-50)
148
+ /* Mirror @theme --zabi-error-* ramp (same physical hex; required for standalone dark import) */
149
+ --zabi-error-50: #fef2f2
150
+ --zabi-error-100: #fee2e2
151
+ --zabi-error-200: #fecaca
152
+ --zabi-error-300: #fca5a5
153
+ --zabi-error-400: #f87171
154
+ --zabi-error-500: #ef4444
155
+ --zabi-error-600: #dc2626
156
+ --zabi-error-700: #b91c1c
157
+ --zabi-error-800: #991b1b
158
+ --zabi-error-900: #7f1d1d
159
+ --zabi-error-950: #450a0a
160
+ /* Error Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
161
+ --color-error-50: var(--zabi-error-950)
162
+ --color-error-100: var(--zabi-error-900)
163
+ --color-error-200: var(--zabi-error-800)
164
+ --color-error-300: var(--zabi-error-700)
165
+ --color-error-400: var(--zabi-error-600)
166
+ --color-error-500: var(--zabi-error-500)
167
+ --color-error-600: var(--zabi-error-400)
168
+ --color-error-700: var(--zabi-error-300)
169
+ --color-error-800: var(--zabi-error-200)
170
+ --color-error-900: var(--zabi-error-100)
171
+ --color-error-950: var(--zabi-error-50)
76
172
  /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
77
173
  --color-base-50: #09090b
78
174
  --color-base-75: #101013
@@ -120,50 +216,27 @@
120
216
  /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
121
217
  /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
122
218
  /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
123
- /* Success Colors */
124
- --color-success: theme(colors.pine.400)
125
- --color-success-weak: theme(colors.pine.500)
126
- --color-success-medium: theme(colors.pine.300)
127
- --color-success-strong: theme(colors.pine.200)
128
- /* Warning Colors */
129
- --color-warning: theme(colors.amber.500)
130
- --color-warning-weak: theme(colors.amber.600)
131
- --color-warning-medium: theme(colors.amber.400)
132
- --color-warning-strong: theme(colors.amber.300)
133
- /* Error Colors */
134
- --color-error: theme(colors.red.500)
135
- --color-error-weak: theme(colors.red.600)
136
- --color-error-medium: theme(colors.red.400)
137
- --color-error-strong: theme(colors.red.300)
138
- /* Energetic Colors (Citron) */
139
- --color-energetic: theme(colors.citron.400)
140
- --color-energetic-weak: theme(colors.citron.500)
141
- --color-energetic-medium: theme(colors.citron.300)
142
- --color-energetic-strong: theme(colors.citron.200)
219
+ /* Success Colors — no overrides: @theme uses --color-pine-*; semantic pine resolves to mirrored physical ramp inside .dark */
220
+ /* Warning Colors — no overrides: @theme uses --color-warning-* scale; it mirrors in .dark via --zabi-warning-* */
221
+ /* Error Colors — no overrides: @theme uses --color-error-* scale; it mirrors in .dark via --zabi-error-* */
222
+ /* Energetic Colors — no overrides: @theme uses --color-citron-*; citron mirrors in .dark via --zabi-citron-* */
143
223
  /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
144
- /* Info Colors */
145
- --color-info: theme(colors.iris.500)
146
- --color-info-weak: theme(colors.iris.600)
147
- --color-info-active: theme(colors.iris.400)
148
- --color-info-medium: theme(colors.iris.400)
149
- --color-info-strong: theme(colors.iris.300)
150
- /* Text alias */
151
- --color-info-text: var(--color-info)
224
+ /* Info Colors — no overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
152
225
  /* ========================================
153
226
  ACTION COLORS - Dark Mode Overrides
154
227
  ======================================== */
155
228
  /* Primary Actions - Background adapts automatically via brand color inversion */
156
- /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
157
- /* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
229
+ /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --zabi-brand-* physical ramp above (semantic --color-brand-* follows mirror) */
230
+ /* Text color - Use brand-50 (semantic; maps across light/dark via --zabi-brand-*) for proper contrast */
158
231
  --color-action-primary-text: var(--color-brand-50)
159
232
  /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
160
233
  /* Danger Actions */
161
- --color-action-danger: theme(colors.red.500)
162
- --color-action-danger-hover: theme(colors.red.600)
163
- --color-action-danger-active: theme(colors.red.700)
164
- --color-action-danger-disabled: theme(colors.red.700)
165
- --color-action-danger-subtle: theme(colors.red.950)
166
- --color-action-danger-subtle-hover: theme(colors.red.900)
234
+ --color-action-danger: #ef4444
235
+ --color-action-danger-hover: #dc2626
236
+ --color-action-danger-active: #b91c1c
237
+ --color-action-danger-disabled: #b91c1c
238
+ --color-action-danger-subtle: #450a0a
239
+ --color-action-danger-subtle-hover: #7f1d1d
167
240
  /* Shadow Colors */
168
241
  --shadow-opacity: 0.3
169
242
  --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))