@infonomic/uikit 5.18.0 → 5.19.0

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 (24) hide show
  1. package/dist/components/badge/badge.module.css +14 -13
  2. package/dist/components/badge/badge_module.css +7 -7
  3. package/dist/components/button/button.module.css +103 -119
  4. package/dist/components/button/button_module.css +72 -71
  5. package/dist/components/chips/chip.d.ts.map +1 -1
  6. package/dist/components/chips/chip.js +3 -6
  7. package/dist/components/chips/chip.module.css +82 -96
  8. package/dist/components/chips/chip.module.js +2 -3
  9. package/dist/components/chips/chip_module.css +63 -65
  10. package/dist/components/pager/pagination.module.css +9 -8
  11. package/dist/components/pager/pagination_module.css +2 -2
  12. package/dist/react.d.ts +1 -0
  13. package/dist/react.d.ts.map +1 -1
  14. package/dist/react.js +2 -0
  15. package/dist/styles/components-vanilla.css +1 -1
  16. package/dist/styles/styles.css +1 -1
  17. package/package.json +11 -11
  18. package/src/components/badge/badge.module.css +14 -13
  19. package/src/components/button/button.module.css +103 -119
  20. package/src/components/chips/chip.module.css +82 -96
  21. package/src/components/chips/chip.tsx +4 -6
  22. package/src/components/pager/pagination.module.css +9 -8
  23. package/src/react.ts +4 -0
  24. package/src/styles/functional/colors.css +613 -180
package/dist/components/badge/badge.module.css CHANGED
@@ -1,11 +1,12 @@
1
1
  @layer infonomic-base,
2
- infonomic-functional,
3
- infonomic-utilities,
4
- infonomic-theme,
5
- infonomic-typography,
6
- infonomic-components;
2
+ infonomic-functional,
3
+ infonomic-utilities,
4
+ infonomic-theme,
5
+ infonomic-typography,
6
+ infonomic-components;
7
7
 
8
8
  @layer infonomic-components {
9
+
9
10
  .badge,
10
11
  :global(.badge) {
11
12
  display: inline-block;
@@ -21,46 +22,46 @@
21
22
 
22
23
  .primary,
23
24
  :global(.badge-primary) {
24
- color: var(--text-on-primary);
25
+ color: var(--text-on-primary-strong);
25
26
  background-color: var(--fill-primary-strong);
26
27
  }
27
28
 
28
29
  .secondary,
29
30
  :global(.badge-secondary) {
30
- color: var(--text-on-secondary);
31
+ color: var(--text-on-secondary-strong);
31
32
  background-color: var(--fill-secondary-strong);
32
33
  }
33
34
 
34
35
  .noeffect,
35
36
  :global(.badge-noeffect) {
36
- color: var(--text-on-noeffect);
37
+ color: var(--text-on-noeffect-strong);
37
38
  background-color: var(--fill-noeffect-strong);
38
39
  }
39
40
 
40
41
  .success,
41
42
  :global(.badge-success) {
42
- color: var(--text-on-success);
43
+ color: var(--text-on-success-strong);
43
44
  background-color: var(--fill-success-strong);
44
45
  }
45
46
 
46
47
  .info,
47
48
  :global(.badge-info) {
48
- color: var(--text-on-info);
49
+ color: var(--text-on-info-strong);
49
50
  background-color: var(--fill-info-strong);
50
51
  }
51
52
 
52
53
  .warning,
53
54
  :global(.badge-warning) {
54
- color: var(--text-on-warning);
55
+ color: var(--text-on-warning-strong);
55
56
  background-color: var(--fill-warning-strong);
56
57
  }
57
58
 
58
59
  .danger,
59
60
  :global(.badge-danger) {
60
- color: var(--text-on-danger);
61
+ color: var(--text-on-danger-strong);
61
62
  background-color: var(--fill-danger-strong);
62
63
  }
63
64
 
64
65
  /* Dark mode - All intents now handled by semantic tokens in theme layer */
65
66
  /* No overrides needed! Tokens automatically switch in .dark and respect .not-dark */
66
- }
67
+ }
package/dist/components/badge/badge_module.css CHANGED
@@ -14,37 +14,37 @@
14
14
  }
15
15
 
16
16
  :is(.primary-oZyR_M, .badge-primary) {
17
- color: var(--text-on-primary);
17
+ color: var(--text-on-primary-strong);
18
18
  background-color: var(--fill-primary-strong);
19
19
  }
20
20
 
21
21
  :is(.secondary-VsqJTm, .badge-secondary) {
22
- color: var(--text-on-secondary);
22
+ color: var(--text-on-secondary-strong);
23
23
  background-color: var(--fill-secondary-strong);
24
24
  }
25
25
 
26
26
  :is(.noeffect-R8eJtO, .badge-noeffect) {
27
- color: var(--text-on-noeffect);
27
+ color: var(--text-on-noeffect-strong);
28
28
  background-color: var(--fill-noeffect-strong);
29
29
  }
30
30
 
31
31
  :is(.success-h2otET, .badge-success) {
32
- color: var(--text-on-success);
32
+ color: var(--text-on-success-strong);
33
33
  background-color: var(--fill-success-strong);
34
34
  }
35
35
 
36
36
  :is(.info-OG3F3u, .badge-info) {
37
- color: var(--text-on-info);
37
+ color: var(--text-on-info-strong);
38
38
  background-color: var(--fill-info-strong);
39
39
  }
40
40
 
41
41
  :is(.warning-zTXksZ, .badge-warning) {
42
- color: var(--text-on-warning);
42
+ color: var(--text-on-warning-strong);
43
43
  background-color: var(--fill-warning-strong);
44
44
  }
45
45
 
46
46
  :is(.danger-hKF7l_, .badge-danger) {
47
- color: var(--text-on-danger);
47
+ color: var(--text-on-danger-strong);
48
48
  background-color: var(--fill-danger-strong);
49
49
  }
50
50
  }
package/dist/components/button/button.module.css CHANGED
@@ -1,11 +1,12 @@
1
1
  @layer infonomic-base,
2
- infonomic-functional,
3
- infonomic-utilities,
4
- infonomic-theme,
5
- infonomic-typography,
6
- infonomic-components;
2
+ infonomic-functional,
3
+ infonomic-utilities,
4
+ infonomic-theme,
5
+ infonomic-typography,
6
+ infonomic-components;
7
7
 
8
8
  @layer infonomic-components {
9
+
9
10
  .button,
10
11
  :global(.button) {
11
12
  border: none;
@@ -116,14 +117,10 @@
116
117
  .filled[disabled],
117
118
  :global(.button-filled):disabled,
118
119
  :global(.button-filled)[disabled] {
119
- background-color: var(
120
- --button-variant-filled-disabled,
121
- oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
122
- );
123
- color: var(
124
- --button-variant-filled-foreground-disabled,
125
- oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
126
- );
120
+ background-color: var(--button-variant-filled-disabled,
121
+ oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
122
+ color: var(--button-variant-filled-foreground-disabled,
123
+ oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
127
124
  }
128
125
 
129
126
  /* -------------------------------------------------------- */
@@ -151,14 +148,10 @@
151
148
  .filled-weak[disabled],
152
149
  :global(.button-filled-weak):disabled,
153
150
  :global(.button-filled-weak)[disabled] {
154
- background-color: var(
155
- --button-variant-filled-weak-disabled,
156
- oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
157
- );
158
- color: var(
159
- --button-variant-filled-weak-foreground-disabled,
160
- oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
161
- );
151
+ background-color: var(--button-variant-filled-weak-disabled,
152
+ oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
153
+ color: var(--button-variant-filled-weak-foreground-disabled,
154
+ oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
162
155
  }
163
156
 
164
157
  .outlined,
@@ -172,14 +165,10 @@
172
165
  .outlined[disabled],
173
166
  :global(.button-outlined):disabled,
174
167
  :global(.button-outlined)[disabled] {
175
- border-color: var(
176
- --button-variant-outlined-border-disabled,
177
- oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
178
- );
179
- color: var(
180
- --button-variant-outlined-foreground-disabled,
181
- oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
182
- );
168
+ border-color: var(--button-variant-outlined-border-disabled,
169
+ oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
170
+ color: var(--button-variant-outlined-foreground-disabled,
171
+ oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
183
172
  }
184
173
 
185
174
  .outlined:hover,
@@ -197,11 +186,9 @@
197
186
  .gradient,
198
187
  :global(.button-gradient) {
199
188
  color: var(--button-variant-gradient-foreground);
200
- background: linear-gradient(
201
- 45deg,
202
- var(--button-variant-gradient-start),
203
- var(--button-variant-gradient-end)
204
- );
189
+ background: linear-gradient(45deg,
190
+ var(--button-variant-gradient-start),
191
+ var(--button-variant-gradient-end));
205
192
  }
206
193
 
207
194
  .gradient:disabled,
@@ -209,24 +196,18 @@
209
196
  :global(.button-gradient):disabled,
210
197
  :global(.button-gradient)[disabled] {
211
198
  background: unset;
212
- background-color: var(
213
- --button-variant-gradient-disabled,
214
- oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
215
- );
216
- color: var(
217
- --button-variant-gradient-foreground-disabled,
218
- oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
219
- );
199
+ background-color: var(--button-variant-gradient-disabled,
200
+ oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
201
+ color: var(--button-variant-gradient-foreground-disabled,
202
+ oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h));
220
203
  }
221
204
 
222
205
  .gradient:hover,
223
206
  :global(.button-gradient):hover {
224
207
  color: var(--button-variant-gradient-foreground);
225
- background: linear-gradient(
226
- 45deg,
227
- var(--button-variant-gradient-start),
228
- var(--button-variant-gradient-end)
229
- );
208
+ background: linear-gradient(45deg,
209
+ var(--button-variant-gradient-start),
210
+ var(--button-variant-gradient-end));
230
211
  }
231
212
 
232
213
  .gradient:focus,
@@ -268,30 +249,31 @@
268
249
 
269
250
  /* Filled */
270
251
  --button-variant-filled: var(--fill-primary-strong);
271
- --button-variant-filled-foreground: var(--text-on-primary);
272
252
  --button-variant-filled-hover: var(--fill-primary-strong-hover);
273
253
  --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
274
- --button-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
254
+ --button-variant-filled-foreground: var(--text-on-primary-strong);
255
+ --button-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
275
256
 
276
257
  /* Filled Weak */
277
258
  --button-variant-filled-weak: var(--fill-primary-weak);
278
- --button-variant-filled-weak-foreground: var(--text-primary-weak);
279
259
  --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
280
260
  --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
281
- --button-variant-filled-weak-foreground-disabled: var(--text-primary-weak-disabled);
261
+ --button-variant-filled-weak-foreground: var(--text-on-primary-weak);
262
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
282
263
 
283
264
  /* Outlined */
284
- --button-variant-outlined: transparent;
285
- --button-variant-outlined-foreground: var(--text-primary-strong);
286
- --button-variant-outlined-hover: var(--fill-primary-weak);
265
+ --button-variant-outlined: var(--fill-primary-outlined);
266
+ --button-variant-outlined-hover: var(--fill-primary-outlined-hover);
287
267
  --button-variant-outlined-border: var(--stroke-primary);
288
268
  --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
289
- --button-variant-outlined-foreground-disabled: var(--text-primary-disabled);
269
+ --button-variant-outlined-foreground: var(--text-on-primary-outlined);
270
+ --button-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
290
271
 
291
272
  /* Text */
292
- --button-variant-text: transparent;
293
- --button-variant-text-foreground: var(--text-primary-weak);
294
- --button-variant-text-hover: var(--fill-primary-weak-hover);
273
+ --button-variant-text: var(--fill-primary-text);
274
+ --button-variant-text-hover: var(--fill-primary-text-hover);
275
+ --button-variant-text-foreground: var(--text-primary);
276
+
295
277
 
296
278
  /* Gradient */
297
279
  --button-variant-gradient-start: var(--gradient-primary-start);
@@ -307,30 +289,30 @@
307
289
 
308
290
  /* Filled */
309
291
  --button-variant-filled: var(--fill-secondary-strong);
310
- --button-variant-filled-foreground: var(--text-on-secondary);
311
292
  --button-variant-filled-hover: var(--fill-secondary-strong-hover);
312
293
  --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
313
- --button-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
294
+ --button-variant-filled-foreground: var(--text-on-secondary-strong);
295
+ --button-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
314
296
 
315
297
  /* Filled Weak */
316
298
  --button-variant-filled-weak: var(--fill-secondary-weak);
317
- --button-variant-filled-weak-foreground: var(--text-secondary-weak);
318
299
  --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
319
300
  --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
320
- --button-variant-filled-weak-foreground-disabled: var(--text-secondary-weak-disabled);
301
+ --button-variant-filled-weak-foreground: var(--text-on-secondary-weak);
302
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-secondary-weak-disabled);
321
303
 
322
304
  /* Outlined */
323
- --button-variant-outlined: transparent;
324
- --button-variant-outlined-foreground: var(--text-secondary-strong);
325
- --button-variant-outlined-hover: var(--fill-secondary-weak);
305
+ --button-variant-outlined: var(--fill-secondary-outlined);
326
306
  --button-variant-outlined-border: var(--stroke-secondary);
327
307
  --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
328
- --button-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
308
+ --button-variant-outlined-hover: var(--fill-secondary-outlined-hover);
309
+ --button-variant-outlined-foreground: var(--text-on-secondary-outlined);
310
+ --button-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
329
311
 
330
312
  /* Text */
331
- --button-variant-text: transparent;
332
- --button-variant-text-foreground: var(--text-secondary-weak);
333
- --button-variant-text-hover: var(--fill-secondary-weak-hover);
313
+ --button-variant-text: var(--fill-secondary-text);
314
+ --button-variant-text-hover: var(--fill-secondary-text-hover);
315
+ --button-variant-text-foreground: var(--text-secondary);
334
316
 
335
317
  /* Gradient */
336
318
  --button-variant-gradient-start: var(--gradient-secondary-start);
@@ -346,30 +328,32 @@
346
328
 
347
329
  /* Filled */
348
330
  --button-variant-filled: var(--fill-noeffect-strong);
349
- --button-variant-filled-foreground: var(--text-on-noeffect);
350
331
  --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
351
332
  --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
352
- --button-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
333
+ --button-variant-filled-foreground: var(--text-on-noeffect-strong);
334
+ --button-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
353
335
 
354
336
  /* Filled Weak */
355
337
  --button-variant-filled-weak: var(--fill-noeffect-weak);
356
- --button-variant-filled-weak-foreground: var(--text-on-noeffect);
357
338
  --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
358
339
  --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
359
- --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
340
+ --button-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
341
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
342
+
360
343
 
361
344
  /* Outlined */
362
- --button-variant-outlined: transparent;
363
- --button-variant-outlined-foreground: var(--text-noeffect-strong);
364
- --button-variant-outlined-hover: var(--fill-noeffect-weak);
345
+ --button-variant-outlined: var(--fill-noeffect-outlined);
346
+ --button-variant-outlined-hover: var(--fill-noeffect-outlined-hover);
347
+ --button-variant-outlined-disabled: var(--fill-noeffect-outlined-disabled);
365
348
  --button-variant-outlined-border: var(--stroke-noeffect);
366
349
  --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
367
- --button-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
350
+ --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
351
+ --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-disabled);
368
352
 
369
353
  /* Text */
370
- --button-variant-text: transparent;
371
- --button-variant-text-foreground: var(--text-noeffect-weak);
372
- --button-variant-text-hover: var(--fill-noeffect-weak-hover);
354
+ --button-variant-text: var(--fill-noeffect-text);
355
+ --button-variant-text-hover: var(--fill-noeffect-text-hover);
356
+ --button-variant-text-foreground: var(--text-noeffect);
373
357
 
374
358
  /* Gradient */
375
359
  --button-variant-gradient-start: var(--gradient-noeffect-start);
@@ -385,30 +369,30 @@
385
369
 
386
370
  /* Filled */
387
371
  --button-variant-filled: var(--fill-success-strong);
388
- --button-variant-filled-foreground: var(--text-on-success);
389
372
  --button-variant-filled-hover: var(--fill-success-strong-hover);
390
373
  --button-variant-filled-disabled: var(--fill-success-strong-disabled);
391
- --button-variant-filled-foreground-disabled: var(--text-on-success-disabled);
374
+ --button-variant-filled-foreground: var(--text-on-success-strong);
375
+ --button-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
392
376
 
393
377
  /* Filled Weak */
394
378
  --button-variant-filled-weak: var(--fill-success-weak);
395
- --button-variant-filled-weak-foreground: var(--text-success-weak);
396
379
  --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
397
380
  --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
398
- --button-variant-filled-weak-foreground-disabled: var(--text-success-weak-disabled);
381
+ --button-variant-filled-weak-foreground: var(--text-on-success-weak);
382
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
399
383
 
400
384
  /* Outlined */
401
- --button-variant-outlined: transparent;
402
- --button-variant-outlined-foreground: var(--text-success-strong);
403
- --button-variant-outlined-hover: var(--fill-success-weak);
385
+ --button-variant-outlined: var(--fill-success-outlined);
386
+ --button-variant-outlined-hover: var(--fill-success-outlined-hover);
404
387
  --button-variant-outlined-border: var(--stroke-success);
405
388
  --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
406
- --button-variant-outlined-foreground-disabled: var(--text-success-disabled);
389
+ --button-variant-outlined-foreground: var(--text-on-success-outlined);
390
+ --button-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
407
391
 
408
392
  /* Text */
409
393
  --button-variant-text: transparent;
410
- --button-variant-text-foreground: var(--text-success-weak);
411
- --button-variant-text-hover: var(--fill-success-weak-hover);
394
+ --button-variant-text-hover: var(--fill-success-text-hover);
395
+ --button-variant-text-foreground: var(--text-success);
412
396
 
413
397
  /* Gradient */
414
398
  --button-variant-gradient-start: var(--gradient-success-start);
@@ -424,30 +408,30 @@
424
408
 
425
409
  /* Filled */
426
410
  --button-variant-filled: var(--fill-info-strong);
427
- --button-variant-filled-foreground: var(--text-on-info);
428
411
  --button-variant-filled-hover: var(--fill-info-strong-hover);
429
412
  --button-variant-filled-disabled: var(--fill-info-strong-disabled);
430
- --button-variant-filled-foreground-disabled: var(--text-on-info-disabled);
413
+ --button-variant-filled-foreground: var(--text-on-info-strong);
414
+ --button-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
431
415
 
432
416
  /* Filled Weak */
433
417
  --button-variant-filled-weak: var(--fill-info-weak);
434
- --button-variant-filled-weak-foreground: var(--text-info-weak);
435
418
  --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
436
419
  --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
437
- --button-variant-filled-weak-foreground-disabled: var(--text-info-weak-disabled);
420
+ --button-variant-filled-weak-foreground: var(--text-on-info-weak);
421
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
438
422
 
439
423
  /* Outlined */
440
424
  --button-variant-outlined: transparent;
441
- --button-variant-outlined-foreground: var(--text-info-strong);
442
- --button-variant-outlined-hover: var(--fill-info-weak);
425
+ --button-variant-outlined-hover: var(--fill-info-outlined-hover);
443
426
  --button-variant-outlined-border: var(--stroke-info);
444
427
  --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
445
- --button-variant-outlined-foreground-disabled: var(--text-info-disabled);
428
+ --button-variant-outlined-foreground: var(--text-on-info-outlined);
429
+ --button-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
446
430
 
447
431
  /* Text */
448
432
  --button-variant-text: transparent;
449
- --button-variant-text-foreground: var(--text-info-weak);
450
- --button-variant-text-hover: var(--fill-info-weak-hover);
433
+ --button-variant-text-hover: var(--fill-info-text-hover);
434
+ --button-variant-text-foreground: var(--text-info);
451
435
 
452
436
  /* Gradient */
453
437
  --button-variant-gradient-start: var(--gradient-info-start);
@@ -463,30 +447,30 @@
463
447
 
464
448
  /* Filled */
465
449
  --button-variant-filled: var(--fill-warning-strong);
466
- --button-variant-filled-foreground: var(--text-on-warning);
467
450
  --button-variant-filled-hover: var(--fill-warning-strong-hover);
468
451
  --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
469
- --button-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
452
+ --button-variant-filled-foreground: var(--text-on-warning-strong);
453
+ --button-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
470
454
 
471
455
  /* Filled Weak */
472
456
  --button-variant-filled-weak: var(--fill-warning-weak);
473
- --button-variant-filled-weak-foreground: var(--text-warning-weak);
474
457
  --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
475
458
  --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
476
- --button-variant-filled-weak-foreground-disabled: var(--text-warning-weak-disabled);
459
+ --button-variant-filled-weak-foreground: var(--text-on-warning-weak);
460
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
477
461
 
478
462
  /* Outlined */
479
- --button-variant-outlined: transparent;
480
- --button-variant-outlined-foreground: var(--text-warning-strong);
481
- --button-variant-outlined-hover: var(--fill-warning-weak);
463
+ --button-variant-outlined: var(--fill-warning-outlined);
464
+ --button-variant-outlined-hover: var(--fill-warning-outlined-hover);
482
465
  --button-variant-outlined-border: var(--stroke-warning);
483
466
  --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
484
- --button-variant-outlined-foreground-disabled: var(--text-warning-disabled);
467
+ --button-variant-outlined-foreground: var(--text-on-warning-outlined);
468
+ --button-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
485
469
 
486
470
  /* Text */
487
471
  --button-variant-text: transparent;
488
- --button-variant-text-foreground: var(--text-warning-weak);
489
- --button-variant-text-hover: var(--fill-warning-weak-hover);
472
+ --button-variant-text-hover: var(--fill-warning-text-hover);
473
+ --button-variant-text-foreground: var(--text-warning);
490
474
 
491
475
  /* Gradient */
492
476
  --button-variant-gradient-start: var(--gradient-warning-start);
@@ -502,30 +486,30 @@
502
486
 
503
487
  /* Filled */
504
488
  --button-variant-filled: var(--fill-danger-strong);
505
- --button-variant-filled-foreground: var(--text-on-danger);
506
489
  --button-variant-filled-hover: var(--fill-danger-strong-hover);
507
490
  --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
508
- --button-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
491
+ --button-variant-filled-foreground: var(--text-on-danger-strong);
492
+ --button-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
509
493
 
510
494
  /* Filled Weak */
511
495
  --button-variant-filled-weak: var(--fill-danger-weak);
512
- --button-variant-filled-weak-foreground: var(--text-danger-weak);
513
496
  --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
514
497
  --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
515
- --button-variant-filled-weak-foreground-disabled: var(--text-danger-weak-disabled);
498
+ --button-variant-filled-weak-foreground: var(--text-on-danger-weak);
499
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
516
500
 
517
501
  /* Outlined */
518
502
  --button-variant-outlined: transparent;
519
- --button-variant-outlined-foreground: var(--text-danger-strong);
520
- --button-variant-outlined-hover: var(--fill-danger-weak);
503
+ --button-variant-outlined-hover: var(--fill-danger-outlined-hover);
521
504
  --button-variant-outlined-border: var(--stroke-danger);
522
505
  --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
523
- --button-variant-outlined-foreground-disabled: var(--text-danger-disabled);
506
+ --button-variant-outlined-foreground: var(--text-on-danger-outlined);
507
+ --button-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
524
508
 
525
509
  /* Text */
526
510
  --button-variant-text: transparent;
527
- --button-variant-text-foreground: var(--text-danger-weak);
528
- --button-variant-text-hover: var(--fill-danger-weak-hover);
511
+ --button-variant-text-hover: var(--fill-danger-text-hover);
512
+ --button-variant-text-foreground: var(--text-danger);
529
513
 
530
514
  /* Gradient */
531
515
  --button-variant-gradient-start: var(--gradient-danger-start);
@@ -541,4 +525,4 @@
541
525
  width: 100%;
542
526
  display: flex;
543
527
  }
544
- }
528
+ }