@duskmoon-dev/core 1.1.0 → 1.1.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 (5) hide show
  1. package/dist/components/button.css +47 -46
  2. package/dist/components/index.css +47 -46
  3. package/dist/esm/components/button.js +47 -46
  4. package/dist/index.css +47 -46
  5. package/package.json +1 -1
package/dist/components/button.css CHANGED
@@ -8,6 +8,7 @@
8
8
  .btn {
9
9
  --btn-p: 1.25rem;
10
10
  --btn-py: 0.625rem;
11
+ --btn-text-color: var(--color-on-surface);
11
12
  display: inline-flex;
12
13
  align-items: center;
13
14
  justify-content: center;
@@ -27,7 +28,7 @@
27
28
  border-radius: 0.5rem;
28
29
  transition: all 150ms ease-in-out;
29
30
  background-color: var(--color-surface-container);
30
- color: var(--color-on-surface);
31
+ color: var(--btn-text-color);
31
32
  }
32
33
 
33
34
  .btn:hover {
@@ -55,8 +56,8 @@
55
56
 
56
57
  /* Primary Button */
57
58
  .btn-primary {
59
+ --btn-text-color: var(--color-primary-content);
58
60
  background-color: var(--color-primary);
59
- color: var(--color-primary-content);
60
61
  border-color: var(--color-primary);
61
62
  }
62
63
 
@@ -72,8 +73,8 @@
72
73
 
73
74
  /* Secondary Button */
74
75
  .btn-secondary {
76
+ --btn-text-color: var(--color-secondary-content);
75
77
  background-color: var(--color-secondary);
76
- color: var(--color-secondary-content);
77
78
  border-color: var(--color-secondary);
78
79
  }
79
80
 
@@ -89,8 +90,8 @@
89
90
 
90
91
  /* Tertiary Button */
91
92
  .btn-tertiary {
93
+ --btn-text-color: var(--color-tertiary-content);
92
94
  background-color: var(--color-tertiary);
93
- color: var(--color-tertiary-content);
94
95
  border-color: var(--color-tertiary);
95
96
  }
96
97
 
@@ -106,9 +107,9 @@
106
107
 
107
108
  /* Outline Variant */
108
109
  .btn-outline {
110
+ --btn-text-color: var(--color-on-surface);
109
111
  background-color: transparent;
110
112
  border: 1px solid var(--color-outline);
111
- color: var(--color-on-surface);
112
113
  }
113
114
 
114
115
  .btn-outline:hover {
@@ -117,40 +118,40 @@
117
118
  }
118
119
 
119
120
  .btn-outline.btn-primary {
121
+ --btn-text-color: var(--color-primary);
120
122
  border-color: var(--color-primary);
121
- color: var(--color-primary);
122
123
  }
123
124
 
124
125
  .btn-outline.btn-primary:hover {
126
+ --btn-text-color: var(--color-primary-content);
125
127
  background-color: var(--color-primary);
126
- color: var(--color-primary-content);
127
128
  }
128
129
 
129
130
  .btn-outline.btn-secondary {
131
+ --btn-text-color: var(--color-secondary);
130
132
  border-color: var(--color-secondary);
131
- color: var(--color-secondary);
132
133
  }
133
134
 
134
135
  .btn-outline.btn-secondary:hover {
136
+ --btn-text-color: var(--color-secondary-content);
135
137
  background-color: var(--color-secondary);
136
- color: var(--color-secondary-content);
137
138
  }
138
139
 
139
140
  .btn-outline.btn-tertiary {
141
+ --btn-text-color: var(--color-tertiary);
140
142
  border-color: var(--color-tertiary);
141
- color: var(--color-tertiary);
142
143
  }
143
144
 
144
145
  .btn-outline.btn-tertiary:hover {
146
+ --btn-text-color: var(--color-tertiary-content);
145
147
  background-color: var(--color-tertiary);
146
- color: var(--color-tertiary-content);
147
148
  }
148
149
 
149
150
  /* Outlined Variant (alias for .btn-outline - documentation aligned) */
150
151
  .btn-outlined {
152
+ --btn-text-color: var(--color-on-surface);
151
153
  background-color: transparent;
152
154
  border: 1px solid var(--color-outline);
153
- color: var(--color-on-surface);
154
155
  }
155
156
 
156
157
  .btn-outlined:hover {
@@ -159,40 +160,40 @@
159
160
  }
160
161
 
161
162
  .btn-outlined.btn-primary {
163
+ --btn-text-color: var(--color-primary);
162
164
  border-color: var(--color-primary);
163
- color: var(--color-primary);
164
165
  }
165
166
 
166
167
  .btn-outlined.btn-primary:hover {
168
+ --btn-text-color: var(--color-primary-content);
167
169
  background-color: var(--color-primary);
168
- color: var(--color-primary-content);
169
170
  }
170
171
 
171
172
  .btn-outlined.btn-secondary {
173
+ --btn-text-color: var(--color-secondary);
172
174
  border-color: var(--color-secondary);
173
- color: var(--color-secondary);
174
175
  }
175
176
 
176
177
  .btn-outlined.btn-secondary:hover {
178
+ --btn-text-color: var(--color-secondary-content);
177
179
  background-color: var(--color-secondary);
178
- color: var(--color-secondary-content);
179
180
  }
180
181
 
181
182
  .btn-outlined.btn-tertiary {
183
+ --btn-text-color: var(--color-tertiary);
182
184
  border-color: var(--color-tertiary);
183
- color: var(--color-tertiary);
184
185
  }
185
186
 
186
187
  .btn-outlined.btn-tertiary:hover {
188
+ --btn-text-color: var(--color-tertiary-content);
187
189
  background-color: var(--color-tertiary);
188
- color: var(--color-tertiary-content);
189
190
  }
190
191
 
191
192
  /* Ghost Variant */
192
193
  .btn-ghost {
194
+ --btn-text-color: var(--color-on-surface);
193
195
  background-color: transparent;
194
196
  border-color: transparent;
195
- color: var(--color-on-surface);
196
197
  }
197
198
 
198
199
  .btn-ghost:hover {
@@ -201,37 +202,37 @@
201
202
  }
202
203
 
203
204
  .btn-ghost.btn-primary {
204
- color: var(--color-primary);
205
+ --btn-text-color: var(--color-primary);
205
206
  }
206
207
 
207
208
  .btn-ghost.btn-primary:hover {
209
+ --btn-text-color: var(--color-on-primary-container);
208
210
  background-color: var(--color-primary-container);
209
- color: var(--color-on-primary-container);
210
211
  }
211
212
 
212
213
  .btn-ghost.btn-secondary {
213
- color: var(--color-secondary);
214
+ --btn-text-color: var(--color-secondary);
214
215
  }
215
216
 
216
217
  .btn-ghost.btn-secondary:hover {
218
+ --btn-text-color: var(--color-on-secondary-container);
217
219
  background-color: var(--color-secondary-container);
218
- color: var(--color-on-secondary-container);
219
220
  }
220
221
 
221
222
  .btn-ghost.btn-tertiary {
222
- color: var(--color-tertiary);
223
+ --btn-text-color: var(--color-tertiary);
223
224
  }
224
225
 
225
226
  .btn-ghost.btn-tertiary:hover {
227
+ --btn-text-color: var(--color-on-tertiary-container);
226
228
  background-color: var(--color-tertiary-container);
227
- color: var(--color-on-tertiary-container);
228
229
  }
229
230
 
230
231
  /* Text Variant (alias for .btn-ghost - documentation aligned) */
231
232
  .btn-text {
233
+ --btn-text-color: var(--color-on-surface);
232
234
  background-color: transparent;
233
235
  border-color: transparent;
234
- color: var(--color-on-surface);
235
236
  }
236
237
 
237
238
  .btn-text:hover {
@@ -240,36 +241,36 @@
240
241
  }
241
242
 
242
243
  .btn-text.btn-primary {
243
- color: var(--color-primary);
244
+ --btn-text-color: var(--color-primary);
244
245
  }
245
246
 
246
247
  .btn-text.btn-primary:hover {
248
+ --btn-text-color: var(--color-on-primary-container);
247
249
  background-color: var(--color-primary-container);
248
- color: var(--color-on-primary-container);
249
250
  }
250
251
 
251
252
  .btn-text.btn-secondary {
252
- color: var(--color-secondary);
253
+ --btn-text-color: var(--color-secondary);
253
254
  }
254
255
 
255
256
  .btn-text.btn-secondary:hover {
257
+ --btn-text-color: var(--color-on-secondary-container);
256
258
  background-color: var(--color-secondary-container);
257
- color: var(--color-on-secondary-container);
258
259
  }
259
260
 
260
261
  .btn-text.btn-tertiary {
261
- color: var(--color-tertiary);
262
+ --btn-text-color: var(--color-tertiary);
262
263
  }
263
264
 
264
265
  .btn-text.btn-tertiary:hover {
266
+ --btn-text-color: var(--color-on-tertiary-container);
265
267
  background-color: var(--color-tertiary-container);
266
- color: var(--color-on-tertiary-container);
267
268
  }
268
269
 
269
270
  /* Tonal Variant - uses container colors for subtle appearance */
270
271
  .btn-tonal {
272
+ --btn-text-color: var(--color-on-primary-container);
271
273
  background-color: var(--color-primary-container);
272
- color: var(--color-on-primary-container);
273
274
  border-color: transparent;
274
275
  }
275
276
 
@@ -278,44 +279,44 @@
278
279
  }
279
280
 
280
281
  .btn-tonal.btn-primary {
282
+ --btn-text-color: var(--color-on-primary-container);
281
283
  background-color: var(--color-primary-container);
282
- color: var(--color-on-primary-container);
283
284
  }
284
285
 
285
286
  .btn-tonal.btn-secondary {
287
+ --btn-text-color: var(--color-on-secondary-container);
286
288
  background-color: var(--color-secondary-container);
287
- color: var(--color-on-secondary-container);
288
289
  }
289
290
 
290
291
  .btn-tonal.btn-tertiary {
292
+ --btn-text-color: var(--color-on-tertiary-container);
291
293
  background-color: var(--color-tertiary-container);
292
- color: var(--color-on-tertiary-container);
293
294
  }
294
295
 
295
296
  .btn-tonal.btn-info {
297
+ --btn-text-color: var(--color-on-info-container);
296
298
  background-color: var(--color-info-container);
297
- color: var(--color-on-info-container);
298
299
  }
299
300
 
300
301
  .btn-tonal.btn-success {
302
+ --btn-text-color: var(--color-on-success-container);
301
303
  background-color: var(--color-success-container);
302
- color: var(--color-on-success-container);
303
304
  }
304
305
 
305
306
  .btn-tonal.btn-warning {
307
+ --btn-text-color: var(--color-on-warning-container);
306
308
  background-color: var(--color-warning-container);
307
- color: var(--color-on-warning-container);
308
309
  }
309
310
 
310
311
  .btn-tonal.btn-error {
312
+ --btn-text-color: var(--color-on-error-container);
311
313
  background-color: var(--color-error-container);
312
- color: var(--color-on-error-container);
313
314
  }
314
315
 
315
316
  /* Semantic Colors */
316
317
  .btn-info {
318
+ --btn-text-color: var(--color-info-content);
317
319
  background-color: var(--color-info);
318
- color: var(--color-info-content);
319
320
  border-color: var(--color-info);
320
321
  }
321
322
 
@@ -326,8 +327,8 @@
326
327
  }
327
328
 
328
329
  .btn-success {
330
+ --btn-text-color: var(--color-success-content);
329
331
  background-color: var(--color-success);
330
- color: var(--color-success-content);
331
332
  border-color: var(--color-success);
332
333
  }
333
334
 
@@ -338,8 +339,8 @@
338
339
  }
339
340
 
340
341
  .btn-warning {
342
+ --btn-text-color: var(--color-warning-content);
341
343
  background-color: var(--color-warning);
342
- color: var(--color-warning-content);
343
344
  border-color: var(--color-warning);
344
345
  }
345
346
 
@@ -350,8 +351,8 @@
350
351
  }
351
352
 
352
353
  .btn-error {
354
+ --btn-text-color: var(--color-error-content);
353
355
  background-color: var(--color-error);
354
- color: var(--color-error-content);
355
356
  border-color: var(--color-error);
356
357
  }
357
358
 
@@ -427,7 +428,7 @@
427
428
  .btn-loading {
428
429
  pointer-events: none;
429
430
  position: relative;
430
- color: transparent;
431
+ color: transparent !important;
431
432
  }
432
433
 
433
434
  .btn-loading::after {
@@ -435,7 +436,7 @@
435
436
  position: absolute;
436
437
  width: 1rem;
437
438
  height: 1rem;
438
- border: 2px solid currentColor;
439
+ border: 2px solid var(--btn-text-color);
439
440
  border-right-color: transparent;
440
441
  border-radius: 50%;
441
442
  animation: btn-spin 0.6s linear infinite;
package/dist/components/index.css CHANGED
@@ -18,6 +18,7 @@
18
18
  .btn {
19
19
  --btn-p: 1.25rem;
20
20
  --btn-py: 0.625rem;
21
+ --btn-text-color: var(--color-on-surface);
21
22
  display: inline-flex;
22
23
  align-items: center;
23
24
  justify-content: center;
@@ -37,7 +38,7 @@
37
38
  border-radius: 0.5rem;
38
39
  transition: all 150ms ease-in-out;
39
40
  background-color: var(--color-surface-container);
40
- color: var(--color-on-surface);
41
+ color: var(--btn-text-color);
41
42
  }
42
43
 
43
44
  .btn:hover {
@@ -65,8 +66,8 @@
65
66
 
66
67
  /* Primary Button */
67
68
  .btn-primary {
69
+ --btn-text-color: var(--color-primary-content);
68
70
  background-color: var(--color-primary);
69
- color: var(--color-primary-content);
70
71
  border-color: var(--color-primary);
71
72
  }
72
73
 
@@ -82,8 +83,8 @@
82
83
 
83
84
  /* Secondary Button */
84
85
  .btn-secondary {
86
+ --btn-text-color: var(--color-secondary-content);
85
87
  background-color: var(--color-secondary);
86
- color: var(--color-secondary-content);
87
88
  border-color: var(--color-secondary);
88
89
  }
89
90
 
@@ -99,8 +100,8 @@
99
100
 
100
101
  /* Tertiary Button */
101
102
  .btn-tertiary {
103
+ --btn-text-color: var(--color-tertiary-content);
102
104
  background-color: var(--color-tertiary);
103
- color: var(--color-tertiary-content);
104
105
  border-color: var(--color-tertiary);
105
106
  }
106
107
 
@@ -116,9 +117,9 @@
116
117
 
117
118
  /* Outline Variant */
118
119
  .btn-outline {
120
+ --btn-text-color: var(--color-on-surface);
119
121
  background-color: transparent;
120
122
  border: 1px solid var(--color-outline);
121
- color: var(--color-on-surface);
122
123
  }
123
124
 
124
125
  .btn-outline:hover {
@@ -127,40 +128,40 @@
127
128
  }
128
129
 
129
130
  .btn-outline.btn-primary {
131
+ --btn-text-color: var(--color-primary);
130
132
  border-color: var(--color-primary);
131
- color: var(--color-primary);
132
133
  }
133
134
 
134
135
  .btn-outline.btn-primary:hover {
136
+ --btn-text-color: var(--color-primary-content);
135
137
  background-color: var(--color-primary);
136
- color: var(--color-primary-content);
137
138
  }
138
139
 
139
140
  .btn-outline.btn-secondary {
141
+ --btn-text-color: var(--color-secondary);
140
142
  border-color: var(--color-secondary);
141
- color: var(--color-secondary);
142
143
  }
143
144
 
144
145
  .btn-outline.btn-secondary:hover {
146
+ --btn-text-color: var(--color-secondary-content);
145
147
  background-color: var(--color-secondary);
146
- color: var(--color-secondary-content);
147
148
  }
148
149
 
149
150
  .btn-outline.btn-tertiary {
151
+ --btn-text-color: var(--color-tertiary);
150
152
  border-color: var(--color-tertiary);
151
- color: var(--color-tertiary);
152
153
  }
153
154
 
154
155
  .btn-outline.btn-tertiary:hover {
156
+ --btn-text-color: var(--color-tertiary-content);
155
157
  background-color: var(--color-tertiary);
156
- color: var(--color-tertiary-content);
157
158
  }
158
159
 
159
160
  /* Outlined Variant (alias for .btn-outline - documentation aligned) */
160
161
  .btn-outlined {
162
+ --btn-text-color: var(--color-on-surface);
161
163
  background-color: transparent;
162
164
  border: 1px solid var(--color-outline);
163
- color: var(--color-on-surface);
164
165
  }
165
166
 
166
167
  .btn-outlined:hover {
@@ -169,40 +170,40 @@
169
170
  }
170
171
 
171
172
  .btn-outlined.btn-primary {
173
+ --btn-text-color: var(--color-primary);
172
174
  border-color: var(--color-primary);
173
- color: var(--color-primary);
174
175
  }
175
176
 
176
177
  .btn-outlined.btn-primary:hover {
178
+ --btn-text-color: var(--color-primary-content);
177
179
  background-color: var(--color-primary);
178
- color: var(--color-primary-content);
179
180
  }
180
181
 
181
182
  .btn-outlined.btn-secondary {
183
+ --btn-text-color: var(--color-secondary);
182
184
  border-color: var(--color-secondary);
183
- color: var(--color-secondary);
184
185
  }
185
186
 
186
187
  .btn-outlined.btn-secondary:hover {
188
+ --btn-text-color: var(--color-secondary-content);
187
189
  background-color: var(--color-secondary);
188
- color: var(--color-secondary-content);
189
190
  }
190
191
 
191
192
  .btn-outlined.btn-tertiary {
193
+ --btn-text-color: var(--color-tertiary);
192
194
  border-color: var(--color-tertiary);
193
- color: var(--color-tertiary);
194
195
  }
195
196
 
196
197
  .btn-outlined.btn-tertiary:hover {
198
+ --btn-text-color: var(--color-tertiary-content);
197
199
  background-color: var(--color-tertiary);
198
- color: var(--color-tertiary-content);
199
200
  }
200
201
 
201
202
  /* Ghost Variant */
202
203
  .btn-ghost {
204
+ --btn-text-color: var(--color-on-surface);
203
205
  background-color: transparent;
204
206
  border-color: transparent;
205
- color: var(--color-on-surface);
206
207
  }
207
208
 
208
209
  .btn-ghost:hover {
@@ -211,37 +212,37 @@
211
212
  }
212
213
 
213
214
  .btn-ghost.btn-primary {
214
- color: var(--color-primary);
215
+ --btn-text-color: var(--color-primary);
215
216
  }
216
217
 
217
218
  .btn-ghost.btn-primary:hover {
219
+ --btn-text-color: var(--color-on-primary-container);
218
220
  background-color: var(--color-primary-container);
219
- color: var(--color-on-primary-container);
220
221
  }
221
222
 
222
223
  .btn-ghost.btn-secondary {
223
- color: var(--color-secondary);
224
+ --btn-text-color: var(--color-secondary);
224
225
  }
225
226
 
226
227
  .btn-ghost.btn-secondary:hover {
228
+ --btn-text-color: var(--color-on-secondary-container);
227
229
  background-color: var(--color-secondary-container);
228
- color: var(--color-on-secondary-container);
229
230
  }
230
231
 
231
232
  .btn-ghost.btn-tertiary {
232
- color: var(--color-tertiary);
233
+ --btn-text-color: var(--color-tertiary);
233
234
  }
234
235
 
235
236
  .btn-ghost.btn-tertiary:hover {
237
+ --btn-text-color: var(--color-on-tertiary-container);
236
238
  background-color: var(--color-tertiary-container);
237
- color: var(--color-on-tertiary-container);
238
239
  }
239
240
 
240
241
  /* Text Variant (alias for .btn-ghost - documentation aligned) */
241
242
  .btn-text {
243
+ --btn-text-color: var(--color-on-surface);
242
244
  background-color: transparent;
243
245
  border-color: transparent;
244
- color: var(--color-on-surface);
245
246
  }
246
247
 
247
248
  .btn-text:hover {
@@ -250,36 +251,36 @@
250
251
  }
251
252
 
252
253
  .btn-text.btn-primary {
253
- color: var(--color-primary);
254
+ --btn-text-color: var(--color-primary);
254
255
  }
255
256
 
256
257
  .btn-text.btn-primary:hover {
258
+ --btn-text-color: var(--color-on-primary-container);
257
259
  background-color: var(--color-primary-container);
258
- color: var(--color-on-primary-container);
259
260
  }
260
261
 
261
262
  .btn-text.btn-secondary {
262
- color: var(--color-secondary);
263
+ --btn-text-color: var(--color-secondary);
263
264
  }
264
265
 
265
266
  .btn-text.btn-secondary:hover {
267
+ --btn-text-color: var(--color-on-secondary-container);
266
268
  background-color: var(--color-secondary-container);
267
- color: var(--color-on-secondary-container);
268
269
  }
269
270
 
270
271
  .btn-text.btn-tertiary {
271
- color: var(--color-tertiary);
272
+ --btn-text-color: var(--color-tertiary);
272
273
  }
273
274
 
274
275
  .btn-text.btn-tertiary:hover {
276
+ --btn-text-color: var(--color-on-tertiary-container);
275
277
  background-color: var(--color-tertiary-container);
276
- color: var(--color-on-tertiary-container);
277
278
  }
278
279
 
279
280
  /* Tonal Variant - uses container colors for subtle appearance */
280
281
  .btn-tonal {
282
+ --btn-text-color: var(--color-on-primary-container);
281
283
  background-color: var(--color-primary-container);
282
- color: var(--color-on-primary-container);
283
284
  border-color: transparent;
284
285
  }
285
286
 
@@ -288,44 +289,44 @@
288
289
  }
289
290
 
290
291
  .btn-tonal.btn-primary {
292
+ --btn-text-color: var(--color-on-primary-container);
291
293
  background-color: var(--color-primary-container);
292
- color: var(--color-on-primary-container);
293
294
  }
294
295
 
295
296
  .btn-tonal.btn-secondary {
297
+ --btn-text-color: var(--color-on-secondary-container);
296
298
  background-color: var(--color-secondary-container);
297
- color: var(--color-on-secondary-container);
298
299
  }
299
300
 
300
301
  .btn-tonal.btn-tertiary {
302
+ --btn-text-color: var(--color-on-tertiary-container);
301
303
  background-color: var(--color-tertiary-container);
302
- color: var(--color-on-tertiary-container);
303
304
  }
304
305
 
305
306
  .btn-tonal.btn-info {
307
+ --btn-text-color: var(--color-on-info-container);
306
308
  background-color: var(--color-info-container);
307
- color: var(--color-on-info-container);
308
309
  }
309
310
 
310
311
  .btn-tonal.btn-success {
312
+ --btn-text-color: var(--color-on-success-container);
311
313
  background-color: var(--color-success-container);
312
- color: var(--color-on-success-container);
313
314
  }
314
315
 
315
316
  .btn-tonal.btn-warning {
317
+ --btn-text-color: var(--color-on-warning-container);
316
318
  background-color: var(--color-warning-container);
317
- color: var(--color-on-warning-container);
318
319
  }
319
320
 
320
321
  .btn-tonal.btn-error {
322
+ --btn-text-color: var(--color-on-error-container);
321
323
  background-color: var(--color-error-container);
322
- color: var(--color-on-error-container);
323
324
  }
324
325
 
325
326
  /* Semantic Colors */
326
327
  .btn-info {
328
+ --btn-text-color: var(--color-info-content);
327
329
  background-color: var(--color-info);
328
- color: var(--color-info-content);
329
330
  border-color: var(--color-info);
330
331
  }
331
332
 
@@ -336,8 +337,8 @@
336
337
  }
337
338
 
338
339
  .btn-success {
340
+ --btn-text-color: var(--color-success-content);
339
341
  background-color: var(--color-success);
340
- color: var(--color-success-content);
341
342
  border-color: var(--color-success);
342
343
  }
343
344
 
@@ -348,8 +349,8 @@
348
349
  }
349
350
 
350
351
  .btn-warning {
352
+ --btn-text-color: var(--color-warning-content);
351
353
  background-color: var(--color-warning);
352
- color: var(--color-warning-content);
353
354
  border-color: var(--color-warning);
354
355
  }
355
356
 
@@ -360,8 +361,8 @@
360
361
  }
361
362
 
362
363
  .btn-error {
364
+ --btn-text-color: var(--color-error-content);
363
365
  background-color: var(--color-error);
364
- color: var(--color-error-content);
365
366
  border-color: var(--color-error);
366
367
  }
367
368
 
@@ -437,7 +438,7 @@
437
438
  .btn-loading {
438
439
  pointer-events: none;
439
440
  position: relative;
440
- color: transparent;
441
+ color: transparent !important;
441
442
  }
442
443
 
443
444
  .btn-loading::after {
@@ -445,7 +446,7 @@
445
446
  position: absolute;
446
447
  width: 1rem;
447
448
  height: 1rem;
448
- border: 2px solid currentColor;
449
+ border: 2px solid var(--btn-text-color);
449
450
  border-right-color: transparent;
450
451
  border-radius: 50%;
451
452
  animation: btn-spin 0.6s linear infinite;
package/dist/esm/components/button.js CHANGED
@@ -9,6 +9,7 @@ export const css = `/**
9
9
  .btn {
10
10
  --btn-p: 1.25rem;
11
11
  --btn-py: 0.625rem;
12
+ --btn-text-color: var(--color-on-surface);
12
13
  display: inline-flex;
13
14
  align-items: center;
14
15
  justify-content: center;
@@ -28,7 +29,7 @@ export const css = `/**
28
29
  border-radius: 0.5rem;
29
30
  transition: all 150ms ease-in-out;
30
31
  background-color: var(--color-surface-container);
31
- color: var(--color-on-surface);
32
+ color: var(--btn-text-color);
32
33
  }
33
34
 
34
35
  .btn:hover {
@@ -56,8 +57,8 @@ export const css = `/**
56
57
 
57
58
  /* Primary Button */
58
59
  .btn-primary {
60
+ --btn-text-color: var(--color-primary-content);
59
61
  background-color: var(--color-primary);
60
- color: var(--color-primary-content);
61
62
  border-color: var(--color-primary);
62
63
  }
63
64
 
@@ -73,8 +74,8 @@ export const css = `/**
73
74
 
74
75
  /* Secondary Button */
75
76
  .btn-secondary {
77
+ --btn-text-color: var(--color-secondary-content);
76
78
  background-color: var(--color-secondary);
77
- color: var(--color-secondary-content);
78
79
  border-color: var(--color-secondary);
79
80
  }
80
81
 
@@ -90,8 +91,8 @@ export const css = `/**
90
91
 
91
92
  /* Tertiary Button */
92
93
  .btn-tertiary {
94
+ --btn-text-color: var(--color-tertiary-content);
93
95
  background-color: var(--color-tertiary);
94
- color: var(--color-tertiary-content);
95
96
  border-color: var(--color-tertiary);
96
97
  }
97
98
 
@@ -107,9 +108,9 @@ export const css = `/**
107
108
 
108
109
  /* Outline Variant */
109
110
  .btn-outline {
111
+ --btn-text-color: var(--color-on-surface);
110
112
  background-color: transparent;
111
113
  border: 1px solid var(--color-outline);
112
- color: var(--color-on-surface);
113
114
  }
114
115
 
115
116
  .btn-outline:hover {
@@ -118,40 +119,40 @@ export const css = `/**
118
119
  }
119
120
 
120
121
  .btn-outline.btn-primary {
122
+ --btn-text-color: var(--color-primary);
121
123
  border-color: var(--color-primary);
122
- color: var(--color-primary);
123
124
  }
124
125
 
125
126
  .btn-outline.btn-primary:hover {
127
+ --btn-text-color: var(--color-primary-content);
126
128
  background-color: var(--color-primary);
127
- color: var(--color-primary-content);
128
129
  }
129
130
 
130
131
  .btn-outline.btn-secondary {
132
+ --btn-text-color: var(--color-secondary);
131
133
  border-color: var(--color-secondary);
132
- color: var(--color-secondary);
133
134
  }
134
135
 
135
136
  .btn-outline.btn-secondary:hover {
137
+ --btn-text-color: var(--color-secondary-content);
136
138
  background-color: var(--color-secondary);
137
- color: var(--color-secondary-content);
138
139
  }
139
140
 
140
141
  .btn-outline.btn-tertiary {
142
+ --btn-text-color: var(--color-tertiary);
141
143
  border-color: var(--color-tertiary);
142
- color: var(--color-tertiary);
143
144
  }
144
145
 
145
146
  .btn-outline.btn-tertiary:hover {
147
+ --btn-text-color: var(--color-tertiary-content);
146
148
  background-color: var(--color-tertiary);
147
- color: var(--color-tertiary-content);
148
149
  }
149
150
 
150
151
  /* Outlined Variant (alias for .btn-outline - documentation aligned) */
151
152
  .btn-outlined {
153
+ --btn-text-color: var(--color-on-surface);
152
154
  background-color: transparent;
153
155
  border: 1px solid var(--color-outline);
154
- color: var(--color-on-surface);
155
156
  }
156
157
 
157
158
  .btn-outlined:hover {
@@ -160,40 +161,40 @@ export const css = `/**
160
161
  }
161
162
 
162
163
  .btn-outlined.btn-primary {
164
+ --btn-text-color: var(--color-primary);
163
165
  border-color: var(--color-primary);
164
- color: var(--color-primary);
165
166
  }
166
167
 
167
168
  .btn-outlined.btn-primary:hover {
169
+ --btn-text-color: var(--color-primary-content);
168
170
  background-color: var(--color-primary);
169
- color: var(--color-primary-content);
170
171
  }
171
172
 
172
173
  .btn-outlined.btn-secondary {
174
+ --btn-text-color: var(--color-secondary);
173
175
  border-color: var(--color-secondary);
174
- color: var(--color-secondary);
175
176
  }
176
177
 
177
178
  .btn-outlined.btn-secondary:hover {
179
+ --btn-text-color: var(--color-secondary-content);
178
180
  background-color: var(--color-secondary);
179
- color: var(--color-secondary-content);
180
181
  }
181
182
 
182
183
  .btn-outlined.btn-tertiary {
184
+ --btn-text-color: var(--color-tertiary);
183
185
  border-color: var(--color-tertiary);
184
- color: var(--color-tertiary);
185
186
  }
186
187
 
187
188
  .btn-outlined.btn-tertiary:hover {
189
+ --btn-text-color: var(--color-tertiary-content);
188
190
  background-color: var(--color-tertiary);
189
- color: var(--color-tertiary-content);
190
191
  }
191
192
 
192
193
  /* Ghost Variant */
193
194
  .btn-ghost {
195
+ --btn-text-color: var(--color-on-surface);
194
196
  background-color: transparent;
195
197
  border-color: transparent;
196
- color: var(--color-on-surface);
197
198
  }
198
199
 
199
200
  .btn-ghost:hover {
@@ -202,37 +203,37 @@ export const css = `/**
202
203
  }
203
204
 
204
205
  .btn-ghost.btn-primary {
205
- color: var(--color-primary);
206
+ --btn-text-color: var(--color-primary);
206
207
  }
207
208
 
208
209
  .btn-ghost.btn-primary:hover {
210
+ --btn-text-color: var(--color-on-primary-container);
209
211
  background-color: var(--color-primary-container);
210
- color: var(--color-on-primary-container);
211
212
  }
212
213
 
213
214
  .btn-ghost.btn-secondary {
214
- color: var(--color-secondary);
215
+ --btn-text-color: var(--color-secondary);
215
216
  }
216
217
 
217
218
  .btn-ghost.btn-secondary:hover {
219
+ --btn-text-color: var(--color-on-secondary-container);
218
220
  background-color: var(--color-secondary-container);
219
- color: var(--color-on-secondary-container);
220
221
  }
221
222
 
222
223
  .btn-ghost.btn-tertiary {
223
- color: var(--color-tertiary);
224
+ --btn-text-color: var(--color-tertiary);
224
225
  }
225
226
 
226
227
  .btn-ghost.btn-tertiary:hover {
228
+ --btn-text-color: var(--color-on-tertiary-container);
227
229
  background-color: var(--color-tertiary-container);
228
- color: var(--color-on-tertiary-container);
229
230
  }
230
231
 
231
232
  /* Text Variant (alias for .btn-ghost - documentation aligned) */
232
233
  .btn-text {
234
+ --btn-text-color: var(--color-on-surface);
233
235
  background-color: transparent;
234
236
  border-color: transparent;
235
- color: var(--color-on-surface);
236
237
  }
237
238
 
238
239
  .btn-text:hover {
@@ -241,36 +242,36 @@ export const css = `/**
241
242
  }
242
243
 
243
244
  .btn-text.btn-primary {
244
- color: var(--color-primary);
245
+ --btn-text-color: var(--color-primary);
245
246
  }
246
247
 
247
248
  .btn-text.btn-primary:hover {
249
+ --btn-text-color: var(--color-on-primary-container);
248
250
  background-color: var(--color-primary-container);
249
- color: var(--color-on-primary-container);
250
251
  }
251
252
 
252
253
  .btn-text.btn-secondary {
253
- color: var(--color-secondary);
254
+ --btn-text-color: var(--color-secondary);
254
255
  }
255
256
 
256
257
  .btn-text.btn-secondary:hover {
258
+ --btn-text-color: var(--color-on-secondary-container);
257
259
  background-color: var(--color-secondary-container);
258
- color: var(--color-on-secondary-container);
259
260
  }
260
261
 
261
262
  .btn-text.btn-tertiary {
262
- color: var(--color-tertiary);
263
+ --btn-text-color: var(--color-tertiary);
263
264
  }
264
265
 
265
266
  .btn-text.btn-tertiary:hover {
267
+ --btn-text-color: var(--color-on-tertiary-container);
266
268
  background-color: var(--color-tertiary-container);
267
- color: var(--color-on-tertiary-container);
268
269
  }
269
270
 
270
271
  /* Tonal Variant - uses container colors for subtle appearance */
271
272
  .btn-tonal {
273
+ --btn-text-color: var(--color-on-primary-container);
272
274
  background-color: var(--color-primary-container);
273
- color: var(--color-on-primary-container);
274
275
  border-color: transparent;
275
276
  }
276
277
 
@@ -279,44 +280,44 @@ export const css = `/**
279
280
  }
280
281
 
281
282
  .btn-tonal.btn-primary {
283
+ --btn-text-color: var(--color-on-primary-container);
282
284
  background-color: var(--color-primary-container);
283
- color: var(--color-on-primary-container);
284
285
  }
285
286
 
286
287
  .btn-tonal.btn-secondary {
288
+ --btn-text-color: var(--color-on-secondary-container);
287
289
  background-color: var(--color-secondary-container);
288
- color: var(--color-on-secondary-container);
289
290
  }
290
291
 
291
292
  .btn-tonal.btn-tertiary {
293
+ --btn-text-color: var(--color-on-tertiary-container);
292
294
  background-color: var(--color-tertiary-container);
293
- color: var(--color-on-tertiary-container);
294
295
  }
295
296
 
296
297
  .btn-tonal.btn-info {
298
+ --btn-text-color: var(--color-on-info-container);
297
299
  background-color: var(--color-info-container);
298
- color: var(--color-on-info-container);
299
300
  }
300
301
 
301
302
  .btn-tonal.btn-success {
303
+ --btn-text-color: var(--color-on-success-container);
302
304
  background-color: var(--color-success-container);
303
- color: var(--color-on-success-container);
304
305
  }
305
306
 
306
307
  .btn-tonal.btn-warning {
308
+ --btn-text-color: var(--color-on-warning-container);
307
309
  background-color: var(--color-warning-container);
308
- color: var(--color-on-warning-container);
309
310
  }
310
311
 
311
312
  .btn-tonal.btn-error {
313
+ --btn-text-color: var(--color-on-error-container);
312
314
  background-color: var(--color-error-container);
313
- color: var(--color-on-error-container);
314
315
  }
315
316
 
316
317
  /* Semantic Colors */
317
318
  .btn-info {
319
+ --btn-text-color: var(--color-info-content);
318
320
  background-color: var(--color-info);
319
- color: var(--color-info-content);
320
321
  border-color: var(--color-info);
321
322
  }
322
323
 
@@ -327,8 +328,8 @@ export const css = `/**
327
328
  }
328
329
 
329
330
  .btn-success {
331
+ --btn-text-color: var(--color-success-content);
330
332
  background-color: var(--color-success);
331
- color: var(--color-success-content);
332
333
  border-color: var(--color-success);
333
334
  }
334
335
 
@@ -339,8 +340,8 @@ export const css = `/**
339
340
  }
340
341
 
341
342
  .btn-warning {
343
+ --btn-text-color: var(--color-warning-content);
342
344
  background-color: var(--color-warning);
343
- color: var(--color-warning-content);
344
345
  border-color: var(--color-warning);
345
346
  }
346
347
 
@@ -351,8 +352,8 @@ export const css = `/**
351
352
  }
352
353
 
353
354
  .btn-error {
355
+ --btn-text-color: var(--color-error-content);
354
356
  background-color: var(--color-error);
355
- color: var(--color-error-content);
356
357
  border-color: var(--color-error);
357
358
  }
358
359
 
@@ -428,7 +429,7 @@ export const css = `/**
428
429
  .btn-loading {
429
430
  pointer-events: none;
430
431
  position: relative;
431
- color: transparent;
432
+ color: transparent !important;
432
433
  }
433
434
 
434
435
  .btn-loading::after {
@@ -436,7 +437,7 @@ export const css = `/**
436
437
  position: absolute;
437
438
  width: 1rem;
438
439
  height: 1rem;
439
- border: 2px solid currentColor;
440
+ border: 2px solid var(--btn-text-color);
440
441
  border-right-color: transparent;
441
442
  border-radius: 50%;
442
443
  animation: btn-spin 0.6s linear infinite;
package/dist/index.css CHANGED
@@ -721,6 +721,7 @@ html {
721
721
  .btn {
722
722
  --btn-p: 1.25rem;
723
723
  --btn-py: 0.625rem;
724
+ --btn-text-color: var(--color-on-surface);
724
725
  display: inline-flex;
725
726
  align-items: center;
726
727
  justify-content: center;
@@ -740,7 +741,7 @@ html {
740
741
  border-radius: 0.5rem;
741
742
  transition: all 150ms ease-in-out;
742
743
  background-color: var(--color-surface-container);
743
- color: var(--color-on-surface);
744
+ color: var(--btn-text-color);
744
745
  }
745
746
 
746
747
  .btn:hover {
@@ -768,8 +769,8 @@ html {
768
769
 
769
770
  /* Primary Button */
770
771
  .btn-primary {
772
+ --btn-text-color: var(--color-primary-content);
771
773
  background-color: var(--color-primary);
772
- color: var(--color-primary-content);
773
774
  border-color: var(--color-primary);
774
775
  }
775
776
 
@@ -785,8 +786,8 @@ html {
785
786
 
786
787
  /* Secondary Button */
787
788
  .btn-secondary {
789
+ --btn-text-color: var(--color-secondary-content);
788
790
  background-color: var(--color-secondary);
789
- color: var(--color-secondary-content);
790
791
  border-color: var(--color-secondary);
791
792
  }
792
793
 
@@ -802,8 +803,8 @@ html {
802
803
 
803
804
  /* Tertiary Button */
804
805
  .btn-tertiary {
806
+ --btn-text-color: var(--color-tertiary-content);
805
807
  background-color: var(--color-tertiary);
806
- color: var(--color-tertiary-content);
807
808
  border-color: var(--color-tertiary);
808
809
  }
809
810
 
@@ -819,9 +820,9 @@ html {
819
820
 
820
821
  /* Outline Variant */
821
822
  .btn-outline {
823
+ --btn-text-color: var(--color-on-surface);
822
824
  background-color: transparent;
823
825
  border: 1px solid var(--color-outline);
824
- color: var(--color-on-surface);
825
826
  }
826
827
 
827
828
  .btn-outline:hover {
@@ -830,40 +831,40 @@ html {
830
831
  }
831
832
 
832
833
  .btn-outline.btn-primary {
834
+ --btn-text-color: var(--color-primary);
833
835
  border-color: var(--color-primary);
834
- color: var(--color-primary);
835
836
  }
836
837
 
837
838
  .btn-outline.btn-primary:hover {
839
+ --btn-text-color: var(--color-primary-content);
838
840
  background-color: var(--color-primary);
839
- color: var(--color-primary-content);
840
841
  }
841
842
 
842
843
  .btn-outline.btn-secondary {
844
+ --btn-text-color: var(--color-secondary);
843
845
  border-color: var(--color-secondary);
844
- color: var(--color-secondary);
845
846
  }
846
847
 
847
848
  .btn-outline.btn-secondary:hover {
849
+ --btn-text-color: var(--color-secondary-content);
848
850
  background-color: var(--color-secondary);
849
- color: var(--color-secondary-content);
850
851
  }
851
852
 
852
853
  .btn-outline.btn-tertiary {
854
+ --btn-text-color: var(--color-tertiary);
853
855
  border-color: var(--color-tertiary);
854
- color: var(--color-tertiary);
855
856
  }
856
857
 
857
858
  .btn-outline.btn-tertiary:hover {
859
+ --btn-text-color: var(--color-tertiary-content);
858
860
  background-color: var(--color-tertiary);
859
- color: var(--color-tertiary-content);
860
861
  }
861
862
 
862
863
  /* Outlined Variant (alias for .btn-outline - documentation aligned) */
863
864
  .btn-outlined {
865
+ --btn-text-color: var(--color-on-surface);
864
866
  background-color: transparent;
865
867
  border: 1px solid var(--color-outline);
866
- color: var(--color-on-surface);
867
868
  }
868
869
 
869
870
  .btn-outlined:hover {
@@ -872,40 +873,40 @@ html {
872
873
  }
873
874
 
874
875
  .btn-outlined.btn-primary {
876
+ --btn-text-color: var(--color-primary);
875
877
  border-color: var(--color-primary);
876
- color: var(--color-primary);
877
878
  }
878
879
 
879
880
  .btn-outlined.btn-primary:hover {
881
+ --btn-text-color: var(--color-primary-content);
880
882
  background-color: var(--color-primary);
881
- color: var(--color-primary-content);
882
883
  }
883
884
 
884
885
  .btn-outlined.btn-secondary {
886
+ --btn-text-color: var(--color-secondary);
885
887
  border-color: var(--color-secondary);
886
- color: var(--color-secondary);
887
888
  }
888
889
 
889
890
  .btn-outlined.btn-secondary:hover {
891
+ --btn-text-color: var(--color-secondary-content);
890
892
  background-color: var(--color-secondary);
891
- color: var(--color-secondary-content);
892
893
  }
893
894
 
894
895
  .btn-outlined.btn-tertiary {
896
+ --btn-text-color: var(--color-tertiary);
895
897
  border-color: var(--color-tertiary);
896
- color: var(--color-tertiary);
897
898
  }
898
899
 
899
900
  .btn-outlined.btn-tertiary:hover {
901
+ --btn-text-color: var(--color-tertiary-content);
900
902
  background-color: var(--color-tertiary);
901
- color: var(--color-tertiary-content);
902
903
  }
903
904
 
904
905
  /* Ghost Variant */
905
906
  .btn-ghost {
907
+ --btn-text-color: var(--color-on-surface);
906
908
  background-color: transparent;
907
909
  border-color: transparent;
908
- color: var(--color-on-surface);
909
910
  }
910
911
 
911
912
  .btn-ghost:hover {
@@ -914,37 +915,37 @@ html {
914
915
  }
915
916
 
916
917
  .btn-ghost.btn-primary {
917
- color: var(--color-primary);
918
+ --btn-text-color: var(--color-primary);
918
919
  }
919
920
 
920
921
  .btn-ghost.btn-primary:hover {
922
+ --btn-text-color: var(--color-on-primary-container);
921
923
  background-color: var(--color-primary-container);
922
- color: var(--color-on-primary-container);
923
924
  }
924
925
 
925
926
  .btn-ghost.btn-secondary {
926
- color: var(--color-secondary);
927
+ --btn-text-color: var(--color-secondary);
927
928
  }
928
929
 
929
930
  .btn-ghost.btn-secondary:hover {
931
+ --btn-text-color: var(--color-on-secondary-container);
930
932
  background-color: var(--color-secondary-container);
931
- color: var(--color-on-secondary-container);
932
933
  }
933
934
 
934
935
  .btn-ghost.btn-tertiary {
935
- color: var(--color-tertiary);
936
+ --btn-text-color: var(--color-tertiary);
936
937
  }
937
938
 
938
939
  .btn-ghost.btn-tertiary:hover {
940
+ --btn-text-color: var(--color-on-tertiary-container);
939
941
  background-color: var(--color-tertiary-container);
940
- color: var(--color-on-tertiary-container);
941
942
  }
942
943
 
943
944
  /* Text Variant (alias for .btn-ghost - documentation aligned) */
944
945
  .btn-text {
946
+ --btn-text-color: var(--color-on-surface);
945
947
  background-color: transparent;
946
948
  border-color: transparent;
947
- color: var(--color-on-surface);
948
949
  }
949
950
 
950
951
  .btn-text:hover {
@@ -953,36 +954,36 @@ html {
953
954
  }
954
955
 
955
956
  .btn-text.btn-primary {
956
- color: var(--color-primary);
957
+ --btn-text-color: var(--color-primary);
957
958
  }
958
959
 
959
960
  .btn-text.btn-primary:hover {
961
+ --btn-text-color: var(--color-on-primary-container);
960
962
  background-color: var(--color-primary-container);
961
- color: var(--color-on-primary-container);
962
963
  }
963
964
 
964
965
  .btn-text.btn-secondary {
965
- color: var(--color-secondary);
966
+ --btn-text-color: var(--color-secondary);
966
967
  }
967
968
 
968
969
  .btn-text.btn-secondary:hover {
970
+ --btn-text-color: var(--color-on-secondary-container);
969
971
  background-color: var(--color-secondary-container);
970
- color: var(--color-on-secondary-container);
971
972
  }
972
973
 
973
974
  .btn-text.btn-tertiary {
974
- color: var(--color-tertiary);
975
+ --btn-text-color: var(--color-tertiary);
975
976
  }
976
977
 
977
978
  .btn-text.btn-tertiary:hover {
979
+ --btn-text-color: var(--color-on-tertiary-container);
978
980
  background-color: var(--color-tertiary-container);
979
- color: var(--color-on-tertiary-container);
980
981
  }
981
982
 
982
983
  /* Tonal Variant - uses container colors for subtle appearance */
983
984
  .btn-tonal {
985
+ --btn-text-color: var(--color-on-primary-container);
984
986
  background-color: var(--color-primary-container);
985
- color: var(--color-on-primary-container);
986
987
  border-color: transparent;
987
988
  }
988
989
 
@@ -991,44 +992,44 @@ html {
991
992
  }
992
993
 
993
994
  .btn-tonal.btn-primary {
995
+ --btn-text-color: var(--color-on-primary-container);
994
996
  background-color: var(--color-primary-container);
995
- color: var(--color-on-primary-container);
996
997
  }
997
998
 
998
999
  .btn-tonal.btn-secondary {
1000
+ --btn-text-color: var(--color-on-secondary-container);
999
1001
  background-color: var(--color-secondary-container);
1000
- color: var(--color-on-secondary-container);
1001
1002
  }
1002
1003
 
1003
1004
  .btn-tonal.btn-tertiary {
1005
+ --btn-text-color: var(--color-on-tertiary-container);
1004
1006
  background-color: var(--color-tertiary-container);
1005
- color: var(--color-on-tertiary-container);
1006
1007
  }
1007
1008
 
1008
1009
  .btn-tonal.btn-info {
1010
+ --btn-text-color: var(--color-on-info-container);
1009
1011
  background-color: var(--color-info-container);
1010
- color: var(--color-on-info-container);
1011
1012
  }
1012
1013
 
1013
1014
  .btn-tonal.btn-success {
1015
+ --btn-text-color: var(--color-on-success-container);
1014
1016
  background-color: var(--color-success-container);
1015
- color: var(--color-on-success-container);
1016
1017
  }
1017
1018
 
1018
1019
  .btn-tonal.btn-warning {
1020
+ --btn-text-color: var(--color-on-warning-container);
1019
1021
  background-color: var(--color-warning-container);
1020
- color: var(--color-on-warning-container);
1021
1022
  }
1022
1023
 
1023
1024
  .btn-tonal.btn-error {
1025
+ --btn-text-color: var(--color-on-error-container);
1024
1026
  background-color: var(--color-error-container);
1025
- color: var(--color-on-error-container);
1026
1027
  }
1027
1028
 
1028
1029
  /* Semantic Colors */
1029
1030
  .btn-info {
1031
+ --btn-text-color: var(--color-info-content);
1030
1032
  background-color: var(--color-info);
1031
- color: var(--color-info-content);
1032
1033
  border-color: var(--color-info);
1033
1034
  }
1034
1035
 
@@ -1039,8 +1040,8 @@ html {
1039
1040
  }
1040
1041
 
1041
1042
  .btn-success {
1043
+ --btn-text-color: var(--color-success-content);
1042
1044
  background-color: var(--color-success);
1043
- color: var(--color-success-content);
1044
1045
  border-color: var(--color-success);
1045
1046
  }
1046
1047
 
@@ -1051,8 +1052,8 @@ html {
1051
1052
  }
1052
1053
 
1053
1054
  .btn-warning {
1055
+ --btn-text-color: var(--color-warning-content);
1054
1056
  background-color: var(--color-warning);
1055
- color: var(--color-warning-content);
1056
1057
  border-color: var(--color-warning);
1057
1058
  }
1058
1059
 
@@ -1063,8 +1064,8 @@ html {
1063
1064
  }
1064
1065
 
1065
1066
  .btn-error {
1067
+ --btn-text-color: var(--color-error-content);
1066
1068
  background-color: var(--color-error);
1067
- color: var(--color-error-content);
1068
1069
  border-color: var(--color-error);
1069
1070
  }
1070
1071
 
@@ -1140,7 +1141,7 @@ html {
1140
1141
  .btn-loading {
1141
1142
  pointer-events: none;
1142
1143
  position: relative;
1143
- color: transparent;
1144
+ color: transparent !important;
1144
1145
  }
1145
1146
 
1146
1147
  .btn-loading::after {
@@ -1148,7 +1149,7 @@ html {
1148
1149
  position: absolute;
1149
1150
  width: 1rem;
1150
1151
  height: 1rem;
1151
- border: 2px solid currentColor;
1152
+ border: 2px solid var(--btn-text-color);
1152
1153
  border-right-color: transparent;
1153
1154
  border-radius: 50%;
1154
1155
  animation: btn-spin 0.6s linear infinite;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@duskmoon-dev/core",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "DuskMoonUI - Tailwind CSS v4 plugin with Material Design 3 color system and component styles",
5
5
  "type": "module",
6
6
  "main": "./dist/index.css",