@duskmoon-dev/core 1.0.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 (39) hide show
  1. package/dist/components/button.css +47 -46
  2. package/dist/components/index.css +47 -46
  3. package/dist/esm/components/accordion.js +251 -0
  4. package/dist/esm/components/alert.js +206 -0
  5. package/dist/esm/components/appbar.js +315 -0
  6. package/dist/esm/components/autocomplete.js +276 -0
  7. package/dist/esm/components/avatar.js +174 -0
  8. package/dist/esm/components/badge.js +185 -0
  9. package/dist/esm/components/bottom-navigation.js +270 -0
  10. package/dist/esm/components/bottomsheet.js +341 -0
  11. package/dist/esm/components/button.js +482 -0
  12. package/dist/esm/components/card.js +227 -0
  13. package/dist/esm/components/chip.js +218 -0
  14. package/dist/esm/components/collapse.js +261 -0
  15. package/dist/esm/components/datepicker.js +354 -0
  16. package/dist/esm/components/dialog.js +180 -0
  17. package/dist/esm/components/divider.js +291 -0
  18. package/dist/esm/components/drawer.js +378 -0
  19. package/dist/esm/components/file-upload.js +328 -0
  20. package/dist/esm/components/form.js +448 -0
  21. package/dist/esm/components/input.js +247 -0
  22. package/dist/esm/components/list.js +195 -0
  23. package/dist/esm/components/markdown-body.js +412 -0
  24. package/dist/esm/components/modal.js +298 -0
  25. package/dist/esm/components/navigation.js +399 -0
  26. package/dist/esm/components/popover.js +333 -0
  27. package/dist/esm/components/progress.js +245 -0
  28. package/dist/esm/components/rating.js +237 -0
  29. package/dist/esm/components/skeleton.js +223 -0
  30. package/dist/esm/components/slider.js +334 -0
  31. package/dist/esm/components/snackbar.js +318 -0
  32. package/dist/esm/components/stepper.js +320 -0
  33. package/dist/esm/components/switch.js +284 -0
  34. package/dist/esm/components/table.js +206 -0
  35. package/dist/esm/components/timeline.js +360 -0
  36. package/dist/esm/components/toast.js +258 -0
  37. package/dist/esm/components/tooltip.js +291 -0
  38. package/dist/index.css +47 -46
  39. package/package.json +108 -38
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;