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/layout/Table.svelte CHANGED
@@ -222,7 +222,75 @@ table {
222
222
  var(--_bg-base),
223
223
  var(--_bg-mix-color) var(--_bg-mix-amount)
224
224
  );
225
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
225
+ --_color: color-mix(
226
+ in srgb,
227
+ var(--_fg-base),
228
+ var(--_fg-mix-color) var(--_fg-mix-amount)
229
+ );
230
+ --muted-color: var(--muted-color-override, var(--_background-color));
231
+ --primary-text-fg: var(
232
+ --primary-text-fg-override,
233
+ color-mix(
234
+ in srgb,
235
+ var(--_color),
236
+ var(--primary-color)
237
+ var(--primary-text-amount, var(--text-amount, 50%))
238
+ )
239
+ );
240
+ --secondary-text-fg: var(
241
+ --secondary-text-fg-override,
242
+ color-mix(
243
+ in srgb,
244
+ var(--_color),
245
+ var(--secondary-color)
246
+ var(--secondary-text-amount, var(--text-amount, 50%))
247
+ )
248
+ );
249
+ --info-text-fg: var(
250
+ --info-text-fg-override,
251
+ color-mix(
252
+ in srgb,
253
+ var(--_color),
254
+ var(--info-color)
255
+ var(--info-text-amount, var(--text-amount, 50%))
256
+ )
257
+ );
258
+ --success-text-fg: var(
259
+ --success-text-fg-override,
260
+ color-mix(
261
+ in srgb,
262
+ var(--_color),
263
+ var(--success-color)
264
+ var(--success-text-amount, var(--text-amount, 50%))
265
+ )
266
+ );
267
+ --warning-text-fg: var(
268
+ --warning-text-fg-override,
269
+ color-mix(
270
+ in srgb,
271
+ var(--_color),
272
+ var(--warning-color)
273
+ var(--warning-text-amount, var(--text-amount, 50%))
274
+ )
275
+ );
276
+ --danger-text-fg: var(
277
+ --danger-text-fg-override,
278
+ color-mix(
279
+ in srgb,
280
+ var(--_color),
281
+ var(--danger-color)
282
+ var(--danger-text-amount, var(--text-amount, 50%))
283
+ )
284
+ );
285
+ --muted-text-fg: var(
286
+ --muted-text-fg-override,
287
+ color-mix(
288
+ in srgb,
289
+ var(--_color),
290
+ var(--muted-color)
291
+ var(--muted-text-amount, var(--text-amount, 50%))
292
+ )
293
+ );
226
294
  background-color: var(--_background-color);
227
295
  color: var(--_color);
228
296
  max-width: var(--table-line-width, var(--surface-line-width, var(--paragraph-line-width, var(--line-width, unset))));
@@ -575,7 +643,75 @@ table :global(th) {
575
643
  var(--_bg-base),
576
644
  var(--_bg-mix-color) var(--_bg-mix-amount)
577
645
  );
578
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
646
+ --_color: color-mix(
647
+ in srgb,
648
+ var(--_fg-base),
649
+ var(--_fg-mix-color) var(--_fg-mix-amount)
650
+ );
651
+ --muted-color: var(--muted-color-override, var(--_background-color));
652
+ --primary-text-fg: var(
653
+ --primary-text-fg-override,
654
+ color-mix(
655
+ in srgb,
656
+ var(--_color),
657
+ var(--primary-color)
658
+ var(--primary-text-amount, var(--text-amount, 50%))
659
+ )
660
+ );
661
+ --secondary-text-fg: var(
662
+ --secondary-text-fg-override,
663
+ color-mix(
664
+ in srgb,
665
+ var(--_color),
666
+ var(--secondary-color)
667
+ var(--secondary-text-amount, var(--text-amount, 50%))
668
+ )
669
+ );
670
+ --info-text-fg: var(
671
+ --info-text-fg-override,
672
+ color-mix(
673
+ in srgb,
674
+ var(--_color),
675
+ var(--info-color)
676
+ var(--info-text-amount, var(--text-amount, 50%))
677
+ )
678
+ );
679
+ --success-text-fg: var(
680
+ --success-text-fg-override,
681
+ color-mix(
682
+ in srgb,
683
+ var(--_color),
684
+ var(--success-color)
685
+ var(--success-text-amount, var(--text-amount, 50%))
686
+ )
687
+ );
688
+ --warning-text-fg: var(
689
+ --warning-text-fg-override,
690
+ color-mix(
691
+ in srgb,
692
+ var(--_color),
693
+ var(--warning-color)
694
+ var(--warning-text-amount, var(--text-amount, 50%))
695
+ )
696
+ );
697
+ --danger-text-fg: var(
698
+ --danger-text-fg-override,
699
+ color-mix(
700
+ in srgb,
701
+ var(--_color),
702
+ var(--danger-color)
703
+ var(--danger-text-amount, var(--text-amount, 50%))
704
+ )
705
+ );
706
+ --muted-text-fg: var(
707
+ --muted-text-fg-override,
708
+ color-mix(
709
+ in srgb,
710
+ var(--_color),
711
+ var(--muted-color)
712
+ var(--muted-text-amount, var(--text-amount, 50%))
713
+ )
714
+ );
579
715
  background-color: var(--_background-color);
580
716
  color: var(--_color);
581
717
  font-family: var(--table-head-font-family, var(--header-font-family, inherit));
@@ -665,7 +801,75 @@ table :global(tr > th:first-child:has(~ td)) {
665
801
  var(--_bg-base),
666
802
  var(--_bg-mix-color) var(--_bg-mix-amount)
667
803
  );
668
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
804
+ --_color: color-mix(
805
+ in srgb,
806
+ var(--_fg-base),
807
+ var(--_fg-mix-color) var(--_fg-mix-amount)
808
+ );
809
+ --muted-color: var(--muted-color-override, var(--_background-color));
810
+ --primary-text-fg: var(
811
+ --primary-text-fg-override,
812
+ color-mix(
813
+ in srgb,
814
+ var(--_color),
815
+ var(--primary-color)
816
+ var(--primary-text-amount, var(--text-amount, 50%))
817
+ )
818
+ );
819
+ --secondary-text-fg: var(
820
+ --secondary-text-fg-override,
821
+ color-mix(
822
+ in srgb,
823
+ var(--_color),
824
+ var(--secondary-color)
825
+ var(--secondary-text-amount, var(--text-amount, 50%))
826
+ )
827
+ );
828
+ --info-text-fg: var(
829
+ --info-text-fg-override,
830
+ color-mix(
831
+ in srgb,
832
+ var(--_color),
833
+ var(--info-color)
834
+ var(--info-text-amount, var(--text-amount, 50%))
835
+ )
836
+ );
837
+ --success-text-fg: var(
838
+ --success-text-fg-override,
839
+ color-mix(
840
+ in srgb,
841
+ var(--_color),
842
+ var(--success-color)
843
+ var(--success-text-amount, var(--text-amount, 50%))
844
+ )
845
+ );
846
+ --warning-text-fg: var(
847
+ --warning-text-fg-override,
848
+ color-mix(
849
+ in srgb,
850
+ var(--_color),
851
+ var(--warning-color)
852
+ var(--warning-text-amount, var(--text-amount, 50%))
853
+ )
854
+ );
855
+ --danger-text-fg: var(
856
+ --danger-text-fg-override,
857
+ color-mix(
858
+ in srgb,
859
+ var(--_color),
860
+ var(--danger-color)
861
+ var(--danger-text-amount, var(--text-amount, 50%))
862
+ )
863
+ );
864
+ --muted-text-fg: var(
865
+ --muted-text-fg-override,
866
+ color-mix(
867
+ in srgb,
868
+ var(--_color),
869
+ var(--muted-color)
870
+ var(--muted-text-amount, var(--text-amount, 50%))
871
+ )
872
+ );
669
873
  background-color: var(--_background-color);
670
874
  color: var(--_color);
671
875
  }
@@ -701,7 +905,75 @@ table :global(tr > th:first-child:has(~ td)) {
701
905
  var(--_bg-base),
702
906
  var(--_bg-mix-color) var(--_bg-mix-amount)
703
907
  );
704
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
908
+ --_color: color-mix(
909
+ in srgb,
910
+ var(--_fg-base),
911
+ var(--_fg-mix-color) var(--_fg-mix-amount)
912
+ );
913
+ --muted-color: var(--muted-color-override, var(--_background-color));
914
+ --primary-text-fg: var(
915
+ --primary-text-fg-override,
916
+ color-mix(
917
+ in srgb,
918
+ var(--_color),
919
+ var(--primary-color)
920
+ var(--primary-text-amount, var(--text-amount, 50%))
921
+ )
922
+ );
923
+ --secondary-text-fg: var(
924
+ --secondary-text-fg-override,
925
+ color-mix(
926
+ in srgb,
927
+ var(--_color),
928
+ var(--secondary-color)
929
+ var(--secondary-text-amount, var(--text-amount, 50%))
930
+ )
931
+ );
932
+ --info-text-fg: var(
933
+ --info-text-fg-override,
934
+ color-mix(
935
+ in srgb,
936
+ var(--_color),
937
+ var(--info-color)
938
+ var(--info-text-amount, var(--text-amount, 50%))
939
+ )
940
+ );
941
+ --success-text-fg: var(
942
+ --success-text-fg-override,
943
+ color-mix(
944
+ in srgb,
945
+ var(--_color),
946
+ var(--success-color)
947
+ var(--success-text-amount, var(--text-amount, 50%))
948
+ )
949
+ );
950
+ --warning-text-fg: var(
951
+ --warning-text-fg-override,
952
+ color-mix(
953
+ in srgb,
954
+ var(--_color),
955
+ var(--warning-color)
956
+ var(--warning-text-amount, var(--text-amount, 50%))
957
+ )
958
+ );
959
+ --danger-text-fg: var(
960
+ --danger-text-fg-override,
961
+ color-mix(
962
+ in srgb,
963
+ var(--_color),
964
+ var(--danger-color)
965
+ var(--danger-text-amount, var(--text-amount, 50%))
966
+ )
967
+ );
968
+ --muted-text-fg: var(
969
+ --muted-text-fg-override,
970
+ color-mix(
971
+ in srgb,
972
+ var(--_color),
973
+ var(--muted-color)
974
+ var(--muted-text-amount, var(--text-amount, 50%))
975
+ )
976
+ );
705
977
  background-color: var(--_background-color);
706
978
  color: var(--_color);
707
979
  z-index: -1;
@@ -721,7 +993,75 @@ table :global(tr > th:first-child:has(~ td)) {
721
993
  var(--_bg-base),
722
994
  var(--_bg-mix-color) var(--_bg-mix-amount)
723
995
  );
724
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
996
+ --_color: color-mix(
997
+ in srgb,
998
+ var(--_fg-base),
999
+ var(--_fg-mix-color) var(--_fg-mix-amount)
1000
+ );
1001
+ --muted-color: var(--muted-color-override, var(--_background-color));
1002
+ --primary-text-fg: var(
1003
+ --primary-text-fg-override,
1004
+ color-mix(
1005
+ in srgb,
1006
+ var(--_color),
1007
+ var(--primary-color)
1008
+ var(--primary-text-amount, var(--text-amount, 50%))
1009
+ )
1010
+ );
1011
+ --secondary-text-fg: var(
1012
+ --secondary-text-fg-override,
1013
+ color-mix(
1014
+ in srgb,
1015
+ var(--_color),
1016
+ var(--secondary-color)
1017
+ var(--secondary-text-amount, var(--text-amount, 50%))
1018
+ )
1019
+ );
1020
+ --info-text-fg: var(
1021
+ --info-text-fg-override,
1022
+ color-mix(
1023
+ in srgb,
1024
+ var(--_color),
1025
+ var(--info-color)
1026
+ var(--info-text-amount, var(--text-amount, 50%))
1027
+ )
1028
+ );
1029
+ --success-text-fg: var(
1030
+ --success-text-fg-override,
1031
+ color-mix(
1032
+ in srgb,
1033
+ var(--_color),
1034
+ var(--success-color)
1035
+ var(--success-text-amount, var(--text-amount, 50%))
1036
+ )
1037
+ );
1038
+ --warning-text-fg: var(
1039
+ --warning-text-fg-override,
1040
+ color-mix(
1041
+ in srgb,
1042
+ var(--_color),
1043
+ var(--warning-color)
1044
+ var(--warning-text-amount, var(--text-amount, 50%))
1045
+ )
1046
+ );
1047
+ --danger-text-fg: var(
1048
+ --danger-text-fg-override,
1049
+ color-mix(
1050
+ in srgb,
1051
+ var(--_color),
1052
+ var(--danger-color)
1053
+ var(--danger-text-amount, var(--text-amount, 50%))
1054
+ )
1055
+ );
1056
+ --muted-text-fg: var(
1057
+ --muted-text-fg-override,
1058
+ color-mix(
1059
+ in srgb,
1060
+ var(--_color),
1061
+ var(--muted-color)
1062
+ var(--muted-text-amount, var(--text-amount, 50%))
1063
+ )
1064
+ );
725
1065
  background-color: var(--_background-color);
726
1066
  color: var(--_color);
727
1067
  font-family: var(--table-head-font-family, var(--header-font-family, inherit));
package/dist/layout/Tile.svelte CHANGED
@@ -88,7 +88,75 @@ function getInteractiveButtonProps(value) {
88
88
  var(--_bg-base),
89
89
  var(--_bg-mix-color) var(--_bg-mix-amount)
90
90
  );
91
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
91
+ --_color: color-mix(
92
+ in srgb,
93
+ var(--_fg-base),
94
+ var(--_fg-mix-color) var(--_fg-mix-amount)
95
+ );
96
+ --muted-color: var(--muted-color-override, var(--_background-color));
97
+ --primary-text-fg: var(
98
+ --primary-text-fg-override,
99
+ color-mix(
100
+ in srgb,
101
+ var(--_color),
102
+ var(--primary-color)
103
+ var(--primary-text-amount, var(--text-amount, 50%))
104
+ )
105
+ );
106
+ --secondary-text-fg: var(
107
+ --secondary-text-fg-override,
108
+ color-mix(
109
+ in srgb,
110
+ var(--_color),
111
+ var(--secondary-color)
112
+ var(--secondary-text-amount, var(--text-amount, 50%))
113
+ )
114
+ );
115
+ --info-text-fg: var(
116
+ --info-text-fg-override,
117
+ color-mix(
118
+ in srgb,
119
+ var(--_color),
120
+ var(--info-color)
121
+ var(--info-text-amount, var(--text-amount, 50%))
122
+ )
123
+ );
124
+ --success-text-fg: var(
125
+ --success-text-fg-override,
126
+ color-mix(
127
+ in srgb,
128
+ var(--_color),
129
+ var(--success-color)
130
+ var(--success-text-amount, var(--text-amount, 50%))
131
+ )
132
+ );
133
+ --warning-text-fg: var(
134
+ --warning-text-fg-override,
135
+ color-mix(
136
+ in srgb,
137
+ var(--_color),
138
+ var(--warning-color)
139
+ var(--warning-text-amount, var(--text-amount, 50%))
140
+ )
141
+ );
142
+ --danger-text-fg: var(
143
+ --danger-text-fg-override,
144
+ color-mix(
145
+ in srgb,
146
+ var(--_color),
147
+ var(--danger-color)
148
+ var(--danger-text-amount, var(--text-amount, 50%))
149
+ )
150
+ );
151
+ --muted-text-fg: var(
152
+ --muted-text-fg-override,
153
+ color-mix(
154
+ in srgb,
155
+ var(--_color),
156
+ var(--muted-color)
157
+ var(--muted-text-amount, var(--text-amount, 50%))
158
+ )
159
+ );
92
160
  background-color: var(--_background-color);
93
161
  color: var(--_color);
94
162
  max-width: var(--tile-line-width, var(--surface-line-width, var(--line-width, unset)));
@@ -466,7 +534,75 @@ label.tile {
466
534
  var(--_bg-base),
467
535
  var(--_bg-mix-color) var(--_bg-mix-amount)
468
536
  );
469
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
537
+ --_color: color-mix(
538
+ in srgb,
539
+ var(--_fg-base),
540
+ var(--_fg-mix-color) var(--_fg-mix-amount)
541
+ );
542
+ --muted-color: var(--muted-color-override, var(--_background-color));
543
+ --primary-text-fg: var(
544
+ --primary-text-fg-override,
545
+ color-mix(
546
+ in srgb,
547
+ var(--_color),
548
+ var(--primary-color)
549
+ var(--primary-text-amount, var(--text-amount, 50%))
550
+ )
551
+ );
552
+ --secondary-text-fg: var(
553
+ --secondary-text-fg-override,
554
+ color-mix(
555
+ in srgb,
556
+ var(--_color),
557
+ var(--secondary-color)
558
+ var(--secondary-text-amount, var(--text-amount, 50%))
559
+ )
560
+ );
561
+ --info-text-fg: var(
562
+ --info-text-fg-override,
563
+ color-mix(
564
+ in srgb,
565
+ var(--_color),
566
+ var(--info-color)
567
+ var(--info-text-amount, var(--text-amount, 50%))
568
+ )
569
+ );
570
+ --success-text-fg: var(
571
+ --success-text-fg-override,
572
+ color-mix(
573
+ in srgb,
574
+ var(--_color),
575
+ var(--success-color)
576
+ var(--success-text-amount, var(--text-amount, 50%))
577
+ )
578
+ );
579
+ --warning-text-fg: var(
580
+ --warning-text-fg-override,
581
+ color-mix(
582
+ in srgb,
583
+ var(--_color),
584
+ var(--warning-color)
585
+ var(--warning-text-amount, var(--text-amount, 50%))
586
+ )
587
+ );
588
+ --danger-text-fg: var(
589
+ --danger-text-fg-override,
590
+ color-mix(
591
+ in srgb,
592
+ var(--_color),
593
+ var(--danger-color)
594
+ var(--danger-text-amount, var(--text-amount, 50%))
595
+ )
596
+ );
597
+ --muted-text-fg: var(
598
+ --muted-text-fg-override,
599
+ color-mix(
600
+ in srgb,
601
+ var(--_color),
602
+ var(--muted-color)
603
+ var(--muted-text-amount, var(--text-amount, 50%))
604
+ )
605
+ );
470
606
  background-color: var(--_background-color);
471
607
  color: var(--_color);
472
608
  font-family: var(--tile-selected-font-family, var(--font-family, unset));
@@ -526,7 +662,75 @@ label.tile:has(:global(input:focus-visible)) {
526
662
  var(--_bg-base),
527
663
  var(--_bg-mix-color) var(--_bg-mix-amount)
528
664
  );
529
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
665
+ --_color: color-mix(
666
+ in srgb,
667
+ var(--_fg-base),
668
+ var(--_fg-mix-color) var(--_fg-mix-amount)
669
+ );
670
+ --muted-color: var(--muted-color-override, var(--_background-color));
671
+ --primary-text-fg: var(
672
+ --primary-text-fg-override,
673
+ color-mix(
674
+ in srgb,
675
+ var(--_color),
676
+ var(--primary-color)
677
+ var(--primary-text-amount, var(--text-amount, 50%))
678
+ )
679
+ );
680
+ --secondary-text-fg: var(
681
+ --secondary-text-fg-override,
682
+ color-mix(
683
+ in srgb,
684
+ var(--_color),
685
+ var(--secondary-color)
686
+ var(--secondary-text-amount, var(--text-amount, 50%))
687
+ )
688
+ );
689
+ --info-text-fg: var(
690
+ --info-text-fg-override,
691
+ color-mix(
692
+ in srgb,
693
+ var(--_color),
694
+ var(--info-color)
695
+ var(--info-text-amount, var(--text-amount, 50%))
696
+ )
697
+ );
698
+ --success-text-fg: var(
699
+ --success-text-fg-override,
700
+ color-mix(
701
+ in srgb,
702
+ var(--_color),
703
+ var(--success-color)
704
+ var(--success-text-amount, var(--text-amount, 50%))
705
+ )
706
+ );
707
+ --warning-text-fg: var(
708
+ --warning-text-fg-override,
709
+ color-mix(
710
+ in srgb,
711
+ var(--_color),
712
+ var(--warning-color)
713
+ var(--warning-text-amount, var(--text-amount, 50%))
714
+ )
715
+ );
716
+ --danger-text-fg: var(
717
+ --danger-text-fg-override,
718
+ color-mix(
719
+ in srgb,
720
+ var(--_color),
721
+ var(--danger-color)
722
+ var(--danger-text-amount, var(--text-amount, 50%))
723
+ )
724
+ );
725
+ --muted-text-fg: var(
726
+ --muted-text-fg-override,
727
+ color-mix(
728
+ in srgb,
729
+ var(--_color),
730
+ var(--muted-color)
731
+ var(--muted-text-amount, var(--text-amount, 50%))
732
+ )
733
+ );
530
734
  background-color: var(--_background-color);
531
735
  color: var(--_color);
532
736
  }
@@ -563,7 +767,75 @@ label:has(:global(input:focus-visible)) {
563
767
  var(--_bg-base),
564
768
  var(--_bg-mix-color) var(--_bg-mix-amount)
565
769
  );
566
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
770
+ --_color: color-mix(
771
+ in srgb,
772
+ var(--_fg-base),
773
+ var(--_fg-mix-color) var(--_fg-mix-amount)
774
+ );
775
+ --muted-color: var(--muted-color-override, var(--_background-color));
776
+ --primary-text-fg: var(
777
+ --primary-text-fg-override,
778
+ color-mix(
779
+ in srgb,
780
+ var(--_color),
781
+ var(--primary-color)
782
+ var(--primary-text-amount, var(--text-amount, 50%))
783
+ )
784
+ );
785
+ --secondary-text-fg: var(
786
+ --secondary-text-fg-override,
787
+ color-mix(
788
+ in srgb,
789
+ var(--_color),
790
+ var(--secondary-color)
791
+ var(--secondary-text-amount, var(--text-amount, 50%))
792
+ )
793
+ );
794
+ --info-text-fg: var(
795
+ --info-text-fg-override,
796
+ color-mix(
797
+ in srgb,
798
+ var(--_color),
799
+ var(--info-color)
800
+ var(--info-text-amount, var(--text-amount, 50%))
801
+ )
802
+ );
803
+ --success-text-fg: var(
804
+ --success-text-fg-override,
805
+ color-mix(
806
+ in srgb,
807
+ var(--_color),
808
+ var(--success-color)
809
+ var(--success-text-amount, var(--text-amount, 50%))
810
+ )
811
+ );
812
+ --warning-text-fg: var(
813
+ --warning-text-fg-override,
814
+ color-mix(
815
+ in srgb,
816
+ var(--_color),
817
+ var(--warning-color)
818
+ var(--warning-text-amount, var(--text-amount, 50%))
819
+ )
820
+ );
821
+ --danger-text-fg: var(
822
+ --danger-text-fg-override,
823
+ color-mix(
824
+ in srgb,
825
+ var(--_color),
826
+ var(--danger-color)
827
+ var(--danger-text-amount, var(--text-amount, 50%))
828
+ )
829
+ );
830
+ --muted-text-fg: var(
831
+ --muted-text-fg-override,
832
+ color-mix(
833
+ in srgb,
834
+ var(--_color),
835
+ var(--muted-color)
836
+ var(--muted-text-amount, var(--text-amount, 50%))
837
+ )
838
+ );
567
839
  background-color: var(--_background-color);
568
840
  color: var(--_color);
569
841
  }