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.
Files changed (8) hide show
  1. package/dist/atoms/Tooltip.svelte +12 -38
  2. package/dist/zabi-components-colors.css +3 -437
  3. package/dist/zabi-components-theme-dark-only.css +151 -78
  4. package/dist/zabi-components-theme-dark.css +151 -78
  5. package/dist/zabi-components-theme-only.css +153 -59
  6. package/dist/zabi-components-theme.css +153 -59
  7. package/dist/zabi-components.css +268 -106
  8. package/package.json +2 -2
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 (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
- /* Citron Color Scale - Dark mode variants */
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
- /* Pine Color Scale - Dark mode variants */
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
- /* Iris Color Scale - Dark mode variants */
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
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,41 +214,18 @@
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: 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
- /* Warning Colors */
127
- --color-warning: #f59e0b
128
- --color-warning-weak: #d97706
129
- --color-warning-medium: #fbbf24
130
- --color-warning-strong: #fcd34d
131
- /* Error Colors */
132
- --color-error: #ef4444
133
- --color-error-weak: #dc2626
134
- --color-error-medium: #f87171
135
- --color-error-strong: #fca5a5
136
- /* Energetic Colors (Citron) */
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)
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: 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
- /* 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 */
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 (mirrored from light physical hex; no theme() forward refs) */
29
- --color-brand-50: #1f2866
30
- --color-brand-100: #2f3c99
31
- --color-brand-200: #3f4fc0
32
- --color-brand-300: #5366e2
33
- --color-brand-400: #6e84fa
34
- --color-brand-500: #8fa8ff
35
- --color-brand-600: #abc4ff
36
- --color-brand-700: #ccdbfd
37
- --color-brand-800: #dfe7fb
38
- --color-brand-900: #edf2fb
39
- --color-brand-950: #f7faff
40
- /* Citron Color Scale - Dark mode variants */
41
- --color-citron-50: #323518
42
- --color-citron-100: #4d5229
43
- --color-citron-200: #666c35
44
- --color-citron-300: #848a43
45
- --color-citron-400: #a3a852
46
- --color-citron-500: #bbbe64
47
- --color-citron-600: #c7d460
48
- --color-citron-700: #d5e184
49
- --color-citron-800: #e4ecaa
50
- --color-citron-900: #f1f5cf
51
- --color-citron-950: #f9faeb
52
- /* Pine Color Scale - Dark mode variants */
53
- --color-pine-50: #02160f
54
- --color-pine-100: #04231a
55
- --color-pine-200: #063a2a
56
- --color-pine-300: #084532
57
- --color-pine-400: #0a513a
58
- --color-pine-500: #0c5d43
59
- --color-pine-600: #49ad91
60
- --color-pine-700: #78c4ad
61
- --color-pine-800: #a7d9c9
62
- --color-pine-900: #d2ece4
63
- --color-pine-950: #e9f6f2
64
- /* Iris Color Scale - Dark mode variants */
65
- --color-iris-50: #1b1b37
66
- --color-iris-100: #2a2a56
67
- --color-iris-200: #38386f
68
- --color-iris-300: #474788
69
- --color-iris-400: #58589e
70
- --color-iris-500: #6969b3
71
- --color-iris-600: #a3a3d8
72
- --color-iris-700: #bdbde6
73
- --color-iris-800: #d6d6f0
74
- --color-iris-900: #e9e9f7
75
- --color-iris-950: #f4f4fa
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,41 +216,18 @@
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: var(--color-pine-400)
125
- --color-success-weak: var(--color-pine-500)
126
- --color-success-medium: var(--color-pine-300)
127
- --color-success-strong: var(--color-pine-200)
128
- /* Warning Colors */
129
- --color-warning: #f59e0b
130
- --color-warning-weak: #d97706
131
- --color-warning-medium: #fbbf24
132
- --color-warning-strong: #fcd34d
133
- /* Error Colors */
134
- --color-error: #ef4444
135
- --color-error-weak: #dc2626
136
- --color-error-medium: #f87171
137
- --color-error-strong: #fca5a5
138
- /* Energetic Colors (Citron) */
139
- --color-energetic: var(--color-citron-400)
140
- --color-energetic-weak: var(--color-citron-500)
141
- --color-energetic-medium: var(--color-citron-300)
142
- --color-energetic-strong: var(--color-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: var(--color-iris-500)
146
- --color-info-weak: var(--color-iris-600)
147
- --color-info-active: var(--color-iris-400)
148
- --color-info-medium: var(--color-iris-400)
149
- --color-info-strong: var(--color-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 */