contain-css-svelte 1.1.13 → 1.1.14

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 (49) hide show
  1. package/README.md +6 -2
  2. package/dist/Card.svelte +345 -5
  3. package/dist/controls/Button.svelte +414 -6
  4. package/dist/controls/ButtonLink.svelte +483 -7
  5. package/dist/controls/Checkbox.svelte +138 -2
  6. package/dist/controls/CircleButton.svelte +483 -7
  7. package/dist/controls/Input.svelte +69 -1
  8. package/dist/controls/RadioButton.svelte +138 -2
  9. package/dist/controls/Select.svelte +138 -2
  10. package/dist/controls/TabItem.svelte +138 -2
  11. package/dist/controls/Toggle.svelte +138 -2
  12. package/dist/dropdowns/DropdownMenu.svelte +276 -4
  13. package/dist/index.d.ts +2 -0
  14. package/dist/index.js +2 -0
  15. package/dist/layout/Accordion.svelte +276 -4
  16. package/dist/layout/Bar.svelte +138 -2
  17. package/dist/layout/Container.svelte +75 -1
  18. package/dist/layout/DataList.svelte +69 -1
  19. package/dist/layout/DataListItem.svelte +69 -1
  20. package/dist/layout/Fieldset.svelte +138 -2
  21. package/dist/layout/Form.svelte +69 -1
  22. package/dist/layout/Hero.svelte +69 -1
  23. package/dist/layout/MenuList.svelte +276 -4
  24. package/dist/layout/Page.svelte +138 -2
  25. package/dist/layout/Sidebar.svelte +345 -5
  26. package/dist/layout/TabBar.svelte +69 -1
  27. package/dist/layout/Table.svelte +345 -5
  28. package/dist/layout/Tile.svelte +276 -4
  29. package/dist/misc/CodeInner.svelte +621 -9
  30. package/dist/misc/Progress.svelte +276 -4
  31. package/dist/misc/Tag.svelte +414 -6
  32. package/dist/overlays/Dialog.svelte +71 -3
  33. package/dist/overlays/Tooltip.svelte +210 -22
  34. package/dist/review/scenarios/IncredibleAppShell.svelte +3 -3
  35. package/dist/review/scenarios/LayoutWorkbench.svelte +2 -2
  36. package/dist/sass/_color.scss +37 -5
  37. package/dist/typography/Text.svelte +54 -0
  38. package/dist/typography/Text.svelte.d.ts +21 -0
  39. package/dist/vars/colors.css +8 -0
  40. package/dist/vars/defaults.css +8 -0
  41. package/dist/vars/themes/bootstrap.css +6 -0
  42. package/dist/vars/themes/canyon.css +6 -0
  43. package/dist/vars/themes/dark.css +6 -0
  44. package/dist/vars/themes/forest.css +6 -0
  45. package/dist/vars/themes/light.css +6 -0
  46. package/dist/vars/themes/material.css +6 -0
  47. package/dist/vars/themes/purple.css +6 -0
  48. package/dist/vars/themes/retro.css +6 -0
  49. package/package.json +1 -1
package/dist/dropdowns/DropdownMenu.svelte CHANGED
@@ -296,7 +296,75 @@ button {
296
296
  var(--_bg-base),
297
297
  var(--_bg-mix-color) var(--_bg-mix-amount)
298
298
  );
299
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
299
+ --_color: color-mix(
300
+ in srgb,
301
+ var(--_fg-base),
302
+ var(--_fg-mix-color) var(--_fg-mix-amount)
303
+ );
304
+ --muted-color: var(--muted-color-override, var(--_background-color));
305
+ --primary-text-fg: var(
306
+ --primary-text-fg-override,
307
+ color-mix(
308
+ in srgb,
309
+ var(--_color),
310
+ var(--primary-color)
311
+ var(--primary-text-amount, var(--text-amount, 50%))
312
+ )
313
+ );
314
+ --secondary-text-fg: var(
315
+ --secondary-text-fg-override,
316
+ color-mix(
317
+ in srgb,
318
+ var(--_color),
319
+ var(--secondary-color)
320
+ var(--secondary-text-amount, var(--text-amount, 50%))
321
+ )
322
+ );
323
+ --info-text-fg: var(
324
+ --info-text-fg-override,
325
+ color-mix(
326
+ in srgb,
327
+ var(--_color),
328
+ var(--info-color)
329
+ var(--info-text-amount, var(--text-amount, 50%))
330
+ )
331
+ );
332
+ --success-text-fg: var(
333
+ --success-text-fg-override,
334
+ color-mix(
335
+ in srgb,
336
+ var(--_color),
337
+ var(--success-color)
338
+ var(--success-text-amount, var(--text-amount, 50%))
339
+ )
340
+ );
341
+ --warning-text-fg: var(
342
+ --warning-text-fg-override,
343
+ color-mix(
344
+ in srgb,
345
+ var(--_color),
346
+ var(--warning-color)
347
+ var(--warning-text-amount, var(--text-amount, 50%))
348
+ )
349
+ );
350
+ --danger-text-fg: var(
351
+ --danger-text-fg-override,
352
+ color-mix(
353
+ in srgb,
354
+ var(--_color),
355
+ var(--danger-color)
356
+ var(--danger-text-amount, var(--text-amount, 50%))
357
+ )
358
+ );
359
+ --muted-text-fg: var(
360
+ --muted-text-fg-override,
361
+ color-mix(
362
+ in srgb,
363
+ var(--_color),
364
+ var(--muted-color)
365
+ var(--muted-text-amount, var(--text-amount, 50%))
366
+ )
367
+ );
300
368
  background-color: var(--_background-color);
301
369
  color: var(--_color);
302
370
  box-sizing: border-box;
@@ -361,7 +429,75 @@ button {
361
429
  var(--_bg-base),
362
430
  var(--_bg-mix-color) var(--_bg-mix-amount)
363
431
  );
364
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
432
+ --_color: color-mix(
433
+ in srgb,
434
+ var(--_fg-base),
435
+ var(--_fg-mix-color) var(--_fg-mix-amount)
436
+ );
437
+ --muted-color: var(--muted-color-override, var(--_background-color));
438
+ --primary-text-fg: var(
439
+ --primary-text-fg-override,
440
+ color-mix(
441
+ in srgb,
442
+ var(--_color),
443
+ var(--primary-color)
444
+ var(--primary-text-amount, var(--text-amount, 50%))
445
+ )
446
+ );
447
+ --secondary-text-fg: var(
448
+ --secondary-text-fg-override,
449
+ color-mix(
450
+ in srgb,
451
+ var(--_color),
452
+ var(--secondary-color)
453
+ var(--secondary-text-amount, var(--text-amount, 50%))
454
+ )
455
+ );
456
+ --info-text-fg: var(
457
+ --info-text-fg-override,
458
+ color-mix(
459
+ in srgb,
460
+ var(--_color),
461
+ var(--info-color)
462
+ var(--info-text-amount, var(--text-amount, 50%))
463
+ )
464
+ );
465
+ --success-text-fg: var(
466
+ --success-text-fg-override,
467
+ color-mix(
468
+ in srgb,
469
+ var(--_color),
470
+ var(--success-color)
471
+ var(--success-text-amount, var(--text-amount, 50%))
472
+ )
473
+ );
474
+ --warning-text-fg: var(
475
+ --warning-text-fg-override,
476
+ color-mix(
477
+ in srgb,
478
+ var(--_color),
479
+ var(--warning-color)
480
+ var(--warning-text-amount, var(--text-amount, 50%))
481
+ )
482
+ );
483
+ --danger-text-fg: var(
484
+ --danger-text-fg-override,
485
+ color-mix(
486
+ in srgb,
487
+ var(--_color),
488
+ var(--danger-color)
489
+ var(--danger-text-amount, var(--text-amount, 50%))
490
+ )
491
+ );
492
+ --muted-text-fg: var(
493
+ --muted-text-fg-override,
494
+ color-mix(
495
+ in srgb,
496
+ var(--_color),
497
+ var(--muted-color)
498
+ var(--muted-text-amount, var(--text-amount, 50%))
499
+ )
500
+ );
365
501
  background-color: var(--_background-color);
366
502
  color: var(--_color);
367
503
  font-family: var(--menu-font-family, var(--surface-font-family, var(--font-family, unset)));
@@ -499,7 +635,75 @@ button {
499
635
  var(--_bg-base),
500
636
  var(--_bg-mix-color) var(--_bg-mix-amount)
501
637
  );
502
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
638
+ --_color: color-mix(
639
+ in srgb,
640
+ var(--_fg-base),
641
+ var(--_fg-mix-color) var(--_fg-mix-amount)
642
+ );
643
+ --muted-color: var(--muted-color-override, var(--_background-color));
644
+ --primary-text-fg: var(
645
+ --primary-text-fg-override,
646
+ color-mix(
647
+ in srgb,
648
+ var(--_color),
649
+ var(--primary-color)
650
+ var(--primary-text-amount, var(--text-amount, 50%))
651
+ )
652
+ );
653
+ --secondary-text-fg: var(
654
+ --secondary-text-fg-override,
655
+ color-mix(
656
+ in srgb,
657
+ var(--_color),
658
+ var(--secondary-color)
659
+ var(--secondary-text-amount, var(--text-amount, 50%))
660
+ )
661
+ );
662
+ --info-text-fg: var(
663
+ --info-text-fg-override,
664
+ color-mix(
665
+ in srgb,
666
+ var(--_color),
667
+ var(--info-color)
668
+ var(--info-text-amount, var(--text-amount, 50%))
669
+ )
670
+ );
671
+ --success-text-fg: var(
672
+ --success-text-fg-override,
673
+ color-mix(
674
+ in srgb,
675
+ var(--_color),
676
+ var(--success-color)
677
+ var(--success-text-amount, var(--text-amount, 50%))
678
+ )
679
+ );
680
+ --warning-text-fg: var(
681
+ --warning-text-fg-override,
682
+ color-mix(
683
+ in srgb,
684
+ var(--_color),
685
+ var(--warning-color)
686
+ var(--warning-text-amount, var(--text-amount, 50%))
687
+ )
688
+ );
689
+ --danger-text-fg: var(
690
+ --danger-text-fg-override,
691
+ color-mix(
692
+ in srgb,
693
+ var(--_color),
694
+ var(--danger-color)
695
+ var(--danger-text-amount, var(--text-amount, 50%))
696
+ )
697
+ );
698
+ --muted-text-fg: var(
699
+ --muted-text-fg-override,
700
+ color-mix(
701
+ in srgb,
702
+ var(--_color),
703
+ var(--muted-color)
704
+ var(--muted-text-amount, var(--text-amount, 50%))
705
+ )
706
+ );
503
707
  background-color: var(--_background-color);
504
708
  color: var(--_color);
505
709
  --_box-shadow:
@@ -548,7 +752,75 @@ button {
548
752
  var(--_bg-base),
549
753
  var(--_bg-mix-color) var(--_bg-mix-amount)
550
754
  );
551
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
755
+ --_color: color-mix(
756
+ in srgb,
757
+ var(--_fg-base),
758
+ var(--_fg-mix-color) var(--_fg-mix-amount)
759
+ );
760
+ --muted-color: var(--muted-color-override, var(--_background-color));
761
+ --primary-text-fg: var(
762
+ --primary-text-fg-override,
763
+ color-mix(
764
+ in srgb,
765
+ var(--_color),
766
+ var(--primary-color)
767
+ var(--primary-text-amount, var(--text-amount, 50%))
768
+ )
769
+ );
770
+ --secondary-text-fg: var(
771
+ --secondary-text-fg-override,
772
+ color-mix(
773
+ in srgb,
774
+ var(--_color),
775
+ var(--secondary-color)
776
+ var(--secondary-text-amount, var(--text-amount, 50%))
777
+ )
778
+ );
779
+ --info-text-fg: var(
780
+ --info-text-fg-override,
781
+ color-mix(
782
+ in srgb,
783
+ var(--_color),
784
+ var(--info-color)
785
+ var(--info-text-amount, var(--text-amount, 50%))
786
+ )
787
+ );
788
+ --success-text-fg: var(
789
+ --success-text-fg-override,
790
+ color-mix(
791
+ in srgb,
792
+ var(--_color),
793
+ var(--success-color)
794
+ var(--success-text-amount, var(--text-amount, 50%))
795
+ )
796
+ );
797
+ --warning-text-fg: var(
798
+ --warning-text-fg-override,
799
+ color-mix(
800
+ in srgb,
801
+ var(--_color),
802
+ var(--warning-color)
803
+ var(--warning-text-amount, var(--text-amount, 50%))
804
+ )
805
+ );
806
+ --danger-text-fg: var(
807
+ --danger-text-fg-override,
808
+ color-mix(
809
+ in srgb,
810
+ var(--_color),
811
+ var(--danger-color)
812
+ var(--danger-text-amount, var(--text-amount, 50%))
813
+ )
814
+ );
815
+ --muted-text-fg: var(
816
+ --muted-text-fg-override,
817
+ color-mix(
818
+ in srgb,
819
+ var(--_color),
820
+ var(--muted-color)
821
+ var(--muted-text-amount, var(--text-amount, 50%))
822
+ )
823
+ );
552
824
  background-color: var(--_background-color);
553
825
  color: var(--_color);
554
826
  font-family: var(--search-hint-font-family, var(--tag-font-family, inherit));
package/dist/index.d.ts CHANGED
@@ -45,6 +45,7 @@ import Tooltip from "./overlays/Tooltip.svelte";
45
45
  import Table from "./layout/Table.svelte";
46
46
  import Accordion from "./layout/Accordion.svelte";
47
47
  import Tag from "./misc/Tag.svelte";
48
+ import Text from "./typography/Text.svelte";
48
49
  export type { BaseStyleProps, ContainerStyleProps, BarStyleProps, MenuStyleProps, CardStyleProps, TagStyleProps, SidebarStyleProps, HeroStyleProps, DropdownMenuStyleProps, } from "./types";
49
50
  export { Tag };
50
51
  export { Hero };
@@ -59,3 +60,4 @@ export { Dialog };
59
60
  export { Progress, Tooltip };
60
61
  export { Table };
61
62
  export { DropdownMenu };
63
+ export { Text };
package/dist/index.js CHANGED
@@ -46,6 +46,7 @@ import Tooltip from "./overlays/Tooltip.svelte";
46
46
  import Table from "./layout/Table.svelte";
47
47
  import Accordion from "./layout/Accordion.svelte";
48
48
  import Tag from "./misc/Tag.svelte";
49
+ import Text from "./typography/Text.svelte";
49
50
  export { Tag };
50
51
  export { Hero };
51
52
  export { TabItem };
@@ -59,3 +60,4 @@ export { Dialog };
59
60
  export { Progress, Tooltip };
60
61
  export { Table };
61
62
  export { DropdownMenu };
63
+ export { Text };
package/dist/layout/Accordion.svelte CHANGED
@@ -59,7 +59,75 @@ div {
59
59
  var(--_bg-base),
60
60
  var(--_bg-mix-color) var(--_bg-mix-amount)
61
61
  );
62
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
62
+ --_color: color-mix(
63
+ in srgb,
64
+ var(--_fg-base),
65
+ var(--_fg-mix-color) var(--_fg-mix-amount)
66
+ );
67
+ --muted-color: var(--muted-color-override, var(--_background-color));
68
+ --primary-text-fg: var(
69
+ --primary-text-fg-override,
70
+ color-mix(
71
+ in srgb,
72
+ var(--_color),
73
+ var(--primary-color)
74
+ var(--primary-text-amount, var(--text-amount, 50%))
75
+ )
76
+ );
77
+ --secondary-text-fg: var(
78
+ --secondary-text-fg-override,
79
+ color-mix(
80
+ in srgb,
81
+ var(--_color),
82
+ var(--secondary-color)
83
+ var(--secondary-text-amount, var(--text-amount, 50%))
84
+ )
85
+ );
86
+ --info-text-fg: var(
87
+ --info-text-fg-override,
88
+ color-mix(
89
+ in srgb,
90
+ var(--_color),
91
+ var(--info-color)
92
+ var(--info-text-amount, var(--text-amount, 50%))
93
+ )
94
+ );
95
+ --success-text-fg: var(
96
+ --success-text-fg-override,
97
+ color-mix(
98
+ in srgb,
99
+ var(--_color),
100
+ var(--success-color)
101
+ var(--success-text-amount, var(--text-amount, 50%))
102
+ )
103
+ );
104
+ --warning-text-fg: var(
105
+ --warning-text-fg-override,
106
+ color-mix(
107
+ in srgb,
108
+ var(--_color),
109
+ var(--warning-color)
110
+ var(--warning-text-amount, var(--text-amount, 50%))
111
+ )
112
+ );
113
+ --danger-text-fg: var(
114
+ --danger-text-fg-override,
115
+ color-mix(
116
+ in srgb,
117
+ var(--_color),
118
+ var(--danger-color)
119
+ var(--danger-text-amount, var(--text-amount, 50%))
120
+ )
121
+ );
122
+ --muted-text-fg: var(
123
+ --muted-text-fg-override,
124
+ color-mix(
125
+ in srgb,
126
+ var(--_color),
127
+ var(--muted-color)
128
+ var(--muted-text-amount, var(--text-amount, 50%))
129
+ )
130
+ );
63
131
  background-color: var(--_background-color);
64
132
  color: var(--_color);
65
133
  font-family: var(--accordion-font-family, var(--header-font-family, var(--font-family, unset)));
@@ -110,7 +178,75 @@ div :global(details > summary) {
110
178
  var(--_bg-base),
111
179
  var(--_bg-mix-color) var(--_bg-mix-amount)
112
180
  );
113
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
181
+ --_color: color-mix(
182
+ in srgb,
183
+ var(--_fg-base),
184
+ var(--_fg-mix-color) var(--_fg-mix-amount)
185
+ );
186
+ --muted-color: var(--muted-color-override, var(--_background-color));
187
+ --primary-text-fg: var(
188
+ --primary-text-fg-override,
189
+ color-mix(
190
+ in srgb,
191
+ var(--_color),
192
+ var(--primary-color)
193
+ var(--primary-text-amount, var(--text-amount, 50%))
194
+ )
195
+ );
196
+ --secondary-text-fg: var(
197
+ --secondary-text-fg-override,
198
+ color-mix(
199
+ in srgb,
200
+ var(--_color),
201
+ var(--secondary-color)
202
+ var(--secondary-text-amount, var(--text-amount, 50%))
203
+ )
204
+ );
205
+ --info-text-fg: var(
206
+ --info-text-fg-override,
207
+ color-mix(
208
+ in srgb,
209
+ var(--_color),
210
+ var(--info-color)
211
+ var(--info-text-amount, var(--text-amount, 50%))
212
+ )
213
+ );
214
+ --success-text-fg: var(
215
+ --success-text-fg-override,
216
+ color-mix(
217
+ in srgb,
218
+ var(--_color),
219
+ var(--success-color)
220
+ var(--success-text-amount, var(--text-amount, 50%))
221
+ )
222
+ );
223
+ --warning-text-fg: var(
224
+ --warning-text-fg-override,
225
+ color-mix(
226
+ in srgb,
227
+ var(--_color),
228
+ var(--warning-color)
229
+ var(--warning-text-amount, var(--text-amount, 50%))
230
+ )
231
+ );
232
+ --danger-text-fg: var(
233
+ --danger-text-fg-override,
234
+ color-mix(
235
+ in srgb,
236
+ var(--_color),
237
+ var(--danger-color)
238
+ var(--danger-text-amount, var(--text-amount, 50%))
239
+ )
240
+ );
241
+ --muted-text-fg: var(
242
+ --muted-text-fg-override,
243
+ color-mix(
244
+ in srgb,
245
+ var(--_color),
246
+ var(--muted-color)
247
+ var(--muted-text-amount, var(--text-amount, 50%))
248
+ )
249
+ );
114
250
  background-color: var(--_background-color);
115
251
  color: var(--_color);
116
252
  box-sizing: border-box;
@@ -186,7 +322,75 @@ div :global(details[open] > summary) {
186
322
  var(--_bg-base),
187
323
  var(--_bg-mix-color) var(--_bg-mix-amount)
188
324
  );
189
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
325
+ --_color: color-mix(
326
+ in srgb,
327
+ var(--_fg-base),
328
+ var(--_fg-mix-color) var(--_fg-mix-amount)
329
+ );
330
+ --muted-color: var(--muted-color-override, var(--_background-color));
331
+ --primary-text-fg: var(
332
+ --primary-text-fg-override,
333
+ color-mix(
334
+ in srgb,
335
+ var(--_color),
336
+ var(--primary-color)
337
+ var(--primary-text-amount, var(--text-amount, 50%))
338
+ )
339
+ );
340
+ --secondary-text-fg: var(
341
+ --secondary-text-fg-override,
342
+ color-mix(
343
+ in srgb,
344
+ var(--_color),
345
+ var(--secondary-color)
346
+ var(--secondary-text-amount, var(--text-amount, 50%))
347
+ )
348
+ );
349
+ --info-text-fg: var(
350
+ --info-text-fg-override,
351
+ color-mix(
352
+ in srgb,
353
+ var(--_color),
354
+ var(--info-color)
355
+ var(--info-text-amount, var(--text-amount, 50%))
356
+ )
357
+ );
358
+ --success-text-fg: var(
359
+ --success-text-fg-override,
360
+ color-mix(
361
+ in srgb,
362
+ var(--_color),
363
+ var(--success-color)
364
+ var(--success-text-amount, var(--text-amount, 50%))
365
+ )
366
+ );
367
+ --warning-text-fg: var(
368
+ --warning-text-fg-override,
369
+ color-mix(
370
+ in srgb,
371
+ var(--_color),
372
+ var(--warning-color)
373
+ var(--warning-text-amount, var(--text-amount, 50%))
374
+ )
375
+ );
376
+ --danger-text-fg: var(
377
+ --danger-text-fg-override,
378
+ color-mix(
379
+ in srgb,
380
+ var(--_color),
381
+ var(--danger-color)
382
+ var(--danger-text-amount, var(--text-amount, 50%))
383
+ )
384
+ );
385
+ --muted-text-fg: var(
386
+ --muted-text-fg-override,
387
+ color-mix(
388
+ in srgb,
389
+ var(--_color),
390
+ var(--muted-color)
391
+ var(--muted-text-amount, var(--text-amount, 50%))
392
+ )
393
+ );
190
394
  background-color: var(--_background-color);
191
395
  color: var(--_color);
192
396
  font-family: var(--accordion-summary-open-font-family, var(--accordion-summary-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -238,7 +442,75 @@ div :global(summary) {
238
442
  var(--_bg-base),
239
443
  var(--_bg-mix-color) var(--_bg-mix-amount)
240
444
  );
241
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
445
+ --_color: color-mix(
446
+ in srgb,
447
+ var(--_fg-base),
448
+ var(--_fg-mix-color) var(--_fg-mix-amount)
449
+ );
450
+ --muted-color: var(--muted-color-override, var(--_background-color));
451
+ --primary-text-fg: var(
452
+ --primary-text-fg-override,
453
+ color-mix(
454
+ in srgb,
455
+ var(--_color),
456
+ var(--primary-color)
457
+ var(--primary-text-amount, var(--text-amount, 50%))
458
+ )
459
+ );
460
+ --secondary-text-fg: var(
461
+ --secondary-text-fg-override,
462
+ color-mix(
463
+ in srgb,
464
+ var(--_color),
465
+ var(--secondary-color)
466
+ var(--secondary-text-amount, var(--text-amount, 50%))
467
+ )
468
+ );
469
+ --info-text-fg: var(
470
+ --info-text-fg-override,
471
+ color-mix(
472
+ in srgb,
473
+ var(--_color),
474
+ var(--info-color)
475
+ var(--info-text-amount, var(--text-amount, 50%))
476
+ )
477
+ );
478
+ --success-text-fg: var(
479
+ --success-text-fg-override,
480
+ color-mix(
481
+ in srgb,
482
+ var(--_color),
483
+ var(--success-color)
484
+ var(--success-text-amount, var(--text-amount, 50%))
485
+ )
486
+ );
487
+ --warning-text-fg: var(
488
+ --warning-text-fg-override,
489
+ color-mix(
490
+ in srgb,
491
+ var(--_color),
492
+ var(--warning-color)
493
+ var(--warning-text-amount, var(--text-amount, 50%))
494
+ )
495
+ );
496
+ --danger-text-fg: var(
497
+ --danger-text-fg-override,
498
+ color-mix(
499
+ in srgb,
500
+ var(--_color),
501
+ var(--danger-color)
502
+ var(--danger-text-amount, var(--text-amount, 50%))
503
+ )
504
+ );
505
+ --muted-text-fg: var(
506
+ --muted-text-fg-override,
507
+ color-mix(
508
+ in srgb,
509
+ var(--_color),
510
+ var(--muted-color)
511
+ var(--muted-text-amount, var(--text-amount, 50%))
512
+ )
513
+ );
242
514
  background-color: var(--_background-color);
243
515
  color: var(--_color);
244
516
  box-sizing: border-box;