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/zabi-components-theme-dark.css CHANGED
@@ -25,54 +25,54 @@
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)
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
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)
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
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)
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
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)
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
76
76
  /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
77
77
  --color-base-50: #09090b
78
78
  --color-base-75: #101013
@@ -121,32 +121,32 @@
121
121
  /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
122
122
  /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
123
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)
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
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)
129
+ --color-warning: #f59e0b
130
+ --color-warning-weak: #d97706
131
+ --color-warning-medium: #fbbf24
132
+ --color-warning-strong: #fcd34d
133
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)
134
+ --color-error: #ef4444
135
+ --color-error-weak: #dc2626
136
+ --color-error-medium: #f87171
137
+ --color-error-strong: #fca5a5
138
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)
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)
143
143
  /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
144
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)
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
150
  /* Text alias */
151
151
  --color-info-text: var(--color-info)
152
152
  /* ========================================
@@ -158,12 +158,12 @@
158
158
  --color-action-primary-text: var(--color-brand-50)
159
159
  /* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
160
160
  /* 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)
161
+ --color-action-danger: #ef4444
162
+ --color-action-danger-hover: #dc2626
163
+ --color-action-danger-active: #b91c1c
164
+ --color-action-danger-disabled: #b91c1c
165
+ --color-action-danger-subtle: #450a0a
166
+ --color-action-danger-subtle-hover: #7f1d1d
167
167
  /* Shadow Colors */
168
168
  --shadow-opacity: 0.3
169
169
  --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-only.css CHANGED
@@ -106,12 +106,12 @@
106
106
  --color-page: var(--color-base-100)
107
107
  --color-page-secondary: var(--color-base-200)
108
108
  /* Card Colors */
109
- --color-card: theme(colors.white)
109
+ --color-card: #ffffff
110
110
  --color-card-hover: var(--color-base-100)
111
111
  --color-card-active: var(--color-base-100)
112
- --color-card-elevated: theme(colors.white)
112
+ --color-card-elevated: #ffffff
113
113
  /* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
114
- --color-surface-1: theme(colors.white)
114
+ --color-surface-1: #ffffff
115
115
  --color-surface-2: var(--color-base-50)
116
116
  --color-surface-3: var(--color-base-75)
117
117
  --color-surface-4: var(--color-base-100)
@@ -130,8 +130,8 @@
130
130
  --color-caption: var(--color-base-500)
131
131
  --color-input-placeholder: var(--color-base-400)
132
132
  --color-label: var(--color-base-700)
133
- --color-link: theme(colors.brand.600)
134
- --color-link-hover: theme(colors.brand.700)
133
+ --color-link: var(--color-brand-600)
134
+ --color-link-hover: var(--color-brand-700)
135
135
  /* Navigation menu item — menubar triggers, menu links, inline/sidebar nav rows */
136
136
  --color-nav-menu-item: var(--color-body)
137
137
  --color-nav-menu-item-hover: var(--color-headline)
@@ -140,11 +140,11 @@
140
140
  --color-nav-menu-active: var(--color-action-primary-subtle)
141
141
  --color-nav-menu-focus: var(--color-brand-500)
142
142
  --color-success-text: var(--color-success)
143
- --color-warning-text: theme(colors.amber.700)
143
+ --color-warning-text: #b45309
144
144
  --color-neutral-text: var(--color-base-700)
145
- --color-energetic-text: theme(colors.citron.700)
146
- --color-error-text: theme(colors.red.700)
147
- --color-inverse: theme(colors.white)
145
+ --color-energetic-text: var(--color-citron-700)
146
+ --color-error-text: #b91c1c
147
+ --color-inverse: #ffffff
148
148
  --color-disabled: var(--color-base-400)
149
149
  /* Border Colors */
150
150
  --color-border: var(--color-base-300)
@@ -152,53 +152,53 @@
152
152
  --color-border-medium: var(--color-base-400)
153
153
  --color-border-strong: var(--color-base-500)
154
154
  /* Focus Colors */
155
- --color-focus: theme(colors.brand.500)
156
- --color-focus-weak: theme(colors.brand.600)
157
- --color-focus-medium: theme(colors.brand.700)
158
- --color-focus-strong: theme(colors.brand.800)
155
+ --color-focus: var(--color-brand-500)
156
+ --color-focus-weak: var(--color-brand-600)
157
+ --color-focus-medium: var(--color-brand-700)
158
+ --color-focus-strong: var(--color-brand-800)
159
159
  /* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
160
160
  --color-focus-ring: var(--color-focus)
161
161
  --color-focus-ring-offset: var(--color-card)
162
162
  /* Primary Colors */
163
- --color-primary: theme(colors.brand.600)
164
- --color-primary-weak: theme(colors.brand.700)
165
- --color-primary-medium: theme(colors.brand.800)
166
- --color-primary-strong: theme(colors.brand.900)
163
+ --color-primary: var(--color-brand-600)
164
+ --color-primary-weak: var(--color-brand-700)
165
+ --color-primary-medium: var(--color-brand-800)
166
+ --color-primary-strong: var(--color-brand-900)
167
167
  /* Secondary Colors */
168
168
  --color-secondary: var(--color-base-600)
169
169
  --color-secondary-weak: var(--color-base-700)
170
170
  --color-secondary-medium: var(--color-base-800)
171
171
  --color-secondary-strong: var(--color-base-900)
172
172
  /* Success Colors */
173
- --color-success: theme(colors.pine.600)
174
- --color-success-weak: theme(colors.pine.700)
175
- --color-success-medium: theme(colors.pine.800)
176
- --color-success-strong: theme(colors.pine.900)
173
+ --color-success: var(--color-pine-600)
174
+ --color-success-weak: var(--color-pine-700)
175
+ --color-success-medium: var(--color-pine-800)
176
+ --color-success-strong: var(--color-pine-900)
177
177
  /* Warning Colors */
178
- --color-warning: theme(colors.amber.500)
179
- --color-warning-weak: theme(colors.amber.600)
180
- --color-warning-medium: theme(colors.amber.400)
181
- --color-warning-strong: theme(colors.amber.300)
178
+ --color-warning: #f59e0b
179
+ --color-warning-weak: #d97706
180
+ --color-warning-medium: #fbbf24
181
+ --color-warning-strong: #fcd34d
182
182
  /* Error Colors */
183
- --color-error: theme(colors.red.500)
184
- --color-error-weak: theme(colors.red.600)
185
- --color-error-medium: theme(colors.red.400)
186
- --color-error-strong: theme(colors.red.300)
183
+ --color-error: #ef4444
184
+ --color-error-weak: #dc2626
185
+ --color-error-medium: #f87171
186
+ --color-error-strong: #fca5a5
187
187
  /* Energetic Colors (Citron) */
188
- --color-energetic: theme(colors.citron.500)
189
- --color-energetic-weak: theme(colors.citron.600)
190
- --color-energetic-medium: theme(colors.citron.400)
191
- --color-energetic-strong: theme(colors.citron.300)
188
+ --color-energetic: var(--color-citron-500)
189
+ --color-energetic-weak: var(--color-citron-600)
190
+ --color-energetic-medium: var(--color-citron-400)
191
+ --color-energetic-strong: var(--color-citron-300)
192
192
  /* Neutral Colors */
193
193
  --color-neutral: var(--color-base-600)
194
194
  --color-neutral-weak: var(--color-base-700)
195
195
  --color-neutral-medium: var(--color-base-800)
196
196
  --color-neutral-strong: var(--color-base-900)
197
197
  /* Info Colors */
198
- --color-info: theme(colors.iris.600)
199
- --color-info-weak: theme(colors.iris.700)
200
- --color-info-medium: theme(colors.iris.800)
201
- --color-info-strong: theme(colors.iris.900)
198
+ --color-info: var(--color-iris-600)
199
+ --color-info-weak: var(--color-iris-700)
200
+ --color-info-medium: var(--color-iris-800)
201
+ --color-info-strong: var(--color-iris-900)
202
202
  /* Text alias */
203
203
  --color-info-text: var(--color-info)
204
204
  /* ========================================
@@ -221,12 +221,12 @@
221
221
  --color-action-secondary-subtle: var(--color-brand-600)
222
222
  --color-action-secondary-subtle-hover: var(--color-brand-700)
223
223
  /* Danger Actions - Used by bg-action-danger utility class */
224
- --color-action-danger: theme(colors.red.600)
225
- --color-action-danger-hover: theme(colors.red.700)
226
- --color-action-danger-active: theme(colors.red.800)
227
- --color-action-danger-disabled: theme(colors.red.300)
228
- --color-action-danger-subtle: theme(colors.red.50)
229
- --color-action-danger-subtle-hover: theme(colors.red.100)
224
+ --color-action-danger: #dc2626
225
+ --color-action-danger-hover: #b91c1c
226
+ --color-action-danger-active: #991b1b
227
+ --color-action-danger-disabled: #fca5a5
228
+ --color-action-danger-subtle: #fef2f2
229
+ --color-action-danger-subtle-hover: #fee2e2
230
230
  /* Shadow Colors */
231
231
  --shadow-color: 0 0 0
232
232
  --shadow-opacity: 0.1
package/dist/zabi-components-theme.css CHANGED
@@ -108,12 +108,12 @@
108
108
  --color-page: var(--color-base-100)
109
109
  --color-page-secondary: var(--color-base-200)
110
110
  /* Card Colors */
111
- --color-card: theme(colors.white)
111
+ --color-card: #ffffff
112
112
  --color-card-hover: var(--color-base-100)
113
113
  --color-card-active: var(--color-base-100)
114
- --color-card-elevated: theme(colors.white)
114
+ --color-card-elevated: #ffffff
115
115
  /* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
116
- --color-surface-1: theme(colors.white)
116
+ --color-surface-1: #ffffff
117
117
  --color-surface-2: var(--color-base-50)
118
118
  --color-surface-3: var(--color-base-75)
119
119
  --color-surface-4: var(--color-base-100)
@@ -132,8 +132,8 @@
132
132
  --color-caption: var(--color-base-500)
133
133
  --color-input-placeholder: var(--color-base-400)
134
134
  --color-label: var(--color-base-700)
135
- --color-link: theme(colors.brand.600)
136
- --color-link-hover: theme(colors.brand.700)
135
+ --color-link: var(--color-brand-600)
136
+ --color-link-hover: var(--color-brand-700)
137
137
  /* Navigation menu item — menubar triggers, menu links, inline/sidebar nav rows */
138
138
  --color-nav-menu-item: var(--color-body)
139
139
  --color-nav-menu-item-hover: var(--color-headline)
@@ -142,11 +142,11 @@
142
142
  --color-nav-menu-active: var(--color-action-primary-subtle)
143
143
  --color-nav-menu-focus: var(--color-brand-500)
144
144
  --color-success-text: var(--color-success)
145
- --color-warning-text: theme(colors.amber.700)
145
+ --color-warning-text: #b45309
146
146
  --color-neutral-text: var(--color-base-700)
147
- --color-energetic-text: theme(colors.citron.700)
148
- --color-error-text: theme(colors.red.700)
149
- --color-inverse: theme(colors.white)
147
+ --color-energetic-text: var(--color-citron-700)
148
+ --color-error-text: #b91c1c
149
+ --color-inverse: #ffffff
150
150
  --color-disabled: var(--color-base-400)
151
151
  /* Border Colors */
152
152
  --color-border: var(--color-base-300)
@@ -154,53 +154,53 @@
154
154
  --color-border-medium: var(--color-base-400)
155
155
  --color-border-strong: var(--color-base-500)
156
156
  /* Focus Colors */
157
- --color-focus: theme(colors.brand.500)
158
- --color-focus-weak: theme(colors.brand.600)
159
- --color-focus-medium: theme(colors.brand.700)
160
- --color-focus-strong: theme(colors.brand.800)
157
+ --color-focus: var(--color-brand-500)
158
+ --color-focus-weak: var(--color-brand-600)
159
+ --color-focus-medium: var(--color-brand-700)
160
+ --color-focus-strong: var(--color-brand-800)
161
161
  /* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
162
162
  --color-focus-ring: var(--color-focus)
163
163
  --color-focus-ring-offset: var(--color-card)
164
164
  /* Primary Colors */
165
- --color-primary: theme(colors.brand.600)
166
- --color-primary-weak: theme(colors.brand.700)
167
- --color-primary-medium: theme(colors.brand.800)
168
- --color-primary-strong: theme(colors.brand.900)
165
+ --color-primary: var(--color-brand-600)
166
+ --color-primary-weak: var(--color-brand-700)
167
+ --color-primary-medium: var(--color-brand-800)
168
+ --color-primary-strong: var(--color-brand-900)
169
169
  /* Secondary Colors */
170
170
  --color-secondary: var(--color-base-600)
171
171
  --color-secondary-weak: var(--color-base-700)
172
172
  --color-secondary-medium: var(--color-base-800)
173
173
  --color-secondary-strong: var(--color-base-900)
174
174
  /* Success Colors */
175
- --color-success: theme(colors.pine.600)
176
- --color-success-weak: theme(colors.pine.700)
177
- --color-success-medium: theme(colors.pine.800)
178
- --color-success-strong: theme(colors.pine.900)
175
+ --color-success: var(--color-pine-600)
176
+ --color-success-weak: var(--color-pine-700)
177
+ --color-success-medium: var(--color-pine-800)
178
+ --color-success-strong: var(--color-pine-900)
179
179
  /* Warning Colors */
180
- --color-warning: theme(colors.amber.500)
181
- --color-warning-weak: theme(colors.amber.600)
182
- --color-warning-medium: theme(colors.amber.400)
183
- --color-warning-strong: theme(colors.amber.300)
180
+ --color-warning: #f59e0b
181
+ --color-warning-weak: #d97706
182
+ --color-warning-medium: #fbbf24
183
+ --color-warning-strong: #fcd34d
184
184
  /* Error Colors */
185
- --color-error: theme(colors.red.500)
186
- --color-error-weak: theme(colors.red.600)
187
- --color-error-medium: theme(colors.red.400)
188
- --color-error-strong: theme(colors.red.300)
185
+ --color-error: #ef4444
186
+ --color-error-weak: #dc2626
187
+ --color-error-medium: #f87171
188
+ --color-error-strong: #fca5a5
189
189
  /* Energetic Colors (Citron) */
190
- --color-energetic: theme(colors.citron.500)
191
- --color-energetic-weak: theme(colors.citron.600)
192
- --color-energetic-medium: theme(colors.citron.400)
193
- --color-energetic-strong: theme(colors.citron.300)
190
+ --color-energetic: var(--color-citron-500)
191
+ --color-energetic-weak: var(--color-citron-600)
192
+ --color-energetic-medium: var(--color-citron-400)
193
+ --color-energetic-strong: var(--color-citron-300)
194
194
  /* Neutral Colors */
195
195
  --color-neutral: var(--color-base-600)
196
196
  --color-neutral-weak: var(--color-base-700)
197
197
  --color-neutral-medium: var(--color-base-800)
198
198
  --color-neutral-strong: var(--color-base-900)
199
199
  /* Info Colors */
200
- --color-info: theme(colors.iris.600)
201
- --color-info-weak: theme(colors.iris.700)
202
- --color-info-medium: theme(colors.iris.800)
203
- --color-info-strong: theme(colors.iris.900)
200
+ --color-info: var(--color-iris-600)
201
+ --color-info-weak: var(--color-iris-700)
202
+ --color-info-medium: var(--color-iris-800)
203
+ --color-info-strong: var(--color-iris-900)
204
204
  /* Text alias */
205
205
  --color-info-text: var(--color-info)
206
206
  /* ========================================
@@ -223,12 +223,12 @@
223
223
  --color-action-secondary-subtle: var(--color-brand-600)
224
224
  --color-action-secondary-subtle-hover: var(--color-brand-700)
225
225
  /* Danger Actions - Used by bg-action-danger utility class */
226
- --color-action-danger: theme(colors.red.600)
227
- --color-action-danger-hover: theme(colors.red.700)
228
- --color-action-danger-active: theme(colors.red.800)
229
- --color-action-danger-disabled: theme(colors.red.300)
230
- --color-action-danger-subtle: theme(colors.red.50)
231
- --color-action-danger-subtle-hover: theme(colors.red.100)
226
+ --color-action-danger: #dc2626
227
+ --color-action-danger-hover: #b91c1c
228
+ --color-action-danger-active: #991b1b
229
+ --color-action-danger-disabled: #fca5a5
230
+ --color-action-danger-subtle: #fef2f2
231
+ --color-action-danger-subtle-hover: #fee2e2
232
232
  /* Shadow Colors */
233
233
  --shadow-color: 0 0 0
234
234
  --shadow-opacity: 0.1