contain-css-svelte 1.1.13 → 1.1.15

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 (51) 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/cssprops.js +1 -0
  13. package/dist/dropdowns/DropdownMenu.svelte +277 -5
  14. package/dist/index.d.ts +2 -0
  15. package/dist/index.js +2 -0
  16. package/dist/layout/Accordion.svelte +276 -4
  17. package/dist/layout/Bar.svelte +138 -2
  18. package/dist/layout/Container.svelte +75 -1
  19. package/dist/layout/DataList.svelte +69 -1
  20. package/dist/layout/DataListItem.svelte +70 -2
  21. package/dist/layout/Fieldset.svelte +138 -2
  22. package/dist/layout/Form.svelte +69 -1
  23. package/dist/layout/Hero.svelte +69 -1
  24. package/dist/layout/MenuList.svelte +276 -4
  25. package/dist/layout/Page.svelte +138 -2
  26. package/dist/layout/Sidebar.svelte +345 -5
  27. package/dist/layout/TabBar.svelte +69 -1
  28. package/dist/layout/Table.svelte +345 -5
  29. package/dist/layout/Tile.svelte +276 -4
  30. package/dist/misc/CodeInner.svelte +621 -9
  31. package/dist/misc/Progress.svelte +276 -4
  32. package/dist/misc/Tag.svelte +415 -7
  33. package/dist/overlays/Dialog.svelte +71 -3
  34. package/dist/overlays/Tooltip.svelte +210 -22
  35. package/dist/review/scenarios/IncredibleAppShell.svelte +3 -3
  36. package/dist/review/scenarios/LayoutWorkbench.svelte +2 -2
  37. package/dist/sass/_color.scss +37 -5
  38. package/dist/typography/Text.svelte +54 -0
  39. package/dist/typography/Text.svelte.d.ts +21 -0
  40. package/dist/vars/colors.css +8 -0
  41. package/dist/vars/defaults.css +13 -1
  42. package/dist/vars/themes/bootstrap.css +6 -0
  43. package/dist/vars/themes/canyon.css +6 -0
  44. package/dist/vars/themes/dark.css +6 -0
  45. package/dist/vars/themes/forest.css +6 -0
  46. package/dist/vars/themes/light.css +6 -0
  47. package/dist/vars/themes/material.css +6 -0
  48. package/dist/vars/themes/purple.css +6 -0
  49. package/dist/vars/themes/retro.css +6 -0
  50. package/dist/vars/typography.css +5 -1
  51. package/package.json +1 -1
package/dist/controls/ButtonLink.svelte CHANGED
@@ -85,7 +85,75 @@ a[role=button] {
85
85
  var(--_bg-base),
86
86
  var(--_bg-mix-color) var(--_bg-mix-amount)
87
87
  );
88
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
88
+ --_color: color-mix(
89
+ in srgb,
90
+ var(--_fg-base),
91
+ var(--_fg-mix-color) var(--_fg-mix-amount)
92
+ );
93
+ --muted-color: var(--muted-color-override, var(--_background-color));
94
+ --primary-text-fg: var(
95
+ --primary-text-fg-override,
96
+ color-mix(
97
+ in srgb,
98
+ var(--_color),
99
+ var(--primary-color)
100
+ var(--primary-text-amount, var(--text-amount, 50%))
101
+ )
102
+ );
103
+ --secondary-text-fg: var(
104
+ --secondary-text-fg-override,
105
+ color-mix(
106
+ in srgb,
107
+ var(--_color),
108
+ var(--secondary-color)
109
+ var(--secondary-text-amount, var(--text-amount, 50%))
110
+ )
111
+ );
112
+ --info-text-fg: var(
113
+ --info-text-fg-override,
114
+ color-mix(
115
+ in srgb,
116
+ var(--_color),
117
+ var(--info-color)
118
+ var(--info-text-amount, var(--text-amount, 50%))
119
+ )
120
+ );
121
+ --success-text-fg: var(
122
+ --success-text-fg-override,
123
+ color-mix(
124
+ in srgb,
125
+ var(--_color),
126
+ var(--success-color)
127
+ var(--success-text-amount, var(--text-amount, 50%))
128
+ )
129
+ );
130
+ --warning-text-fg: var(
131
+ --warning-text-fg-override,
132
+ color-mix(
133
+ in srgb,
134
+ var(--_color),
135
+ var(--warning-color)
136
+ var(--warning-text-amount, var(--text-amount, 50%))
137
+ )
138
+ );
139
+ --danger-text-fg: var(
140
+ --danger-text-fg-override,
141
+ color-mix(
142
+ in srgb,
143
+ var(--_color),
144
+ var(--danger-color)
145
+ var(--danger-text-amount, var(--text-amount, 50%))
146
+ )
147
+ );
148
+ --muted-text-fg: var(
149
+ --muted-text-fg-override,
150
+ color-mix(
151
+ in srgb,
152
+ var(--_color),
153
+ var(--muted-color)
154
+ var(--muted-text-amount, var(--text-amount, 50%))
155
+ )
156
+ );
89
157
  background-color: var(--_background-color);
90
158
  color: var(--_color);
91
159
  --_box-shadow:
@@ -160,7 +228,75 @@ a.primary[role=button]:hover {
160
228
  var(--_bg-base),
161
229
  var(--_bg-mix-color) var(--_bg-mix-amount)
162
230
  );
163
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
231
+ --_color: color-mix(
232
+ in srgb,
233
+ var(--_fg-base),
234
+ var(--_fg-mix-color) var(--_fg-mix-amount)
235
+ );
236
+ --muted-color: var(--muted-color-override, var(--_background-color));
237
+ --primary-text-fg: var(
238
+ --primary-text-fg-override,
239
+ color-mix(
240
+ in srgb,
241
+ var(--_color),
242
+ var(--primary-color)
243
+ var(--primary-text-amount, var(--text-amount, 50%))
244
+ )
245
+ );
246
+ --secondary-text-fg: var(
247
+ --secondary-text-fg-override,
248
+ color-mix(
249
+ in srgb,
250
+ var(--_color),
251
+ var(--secondary-color)
252
+ var(--secondary-text-amount, var(--text-amount, 50%))
253
+ )
254
+ );
255
+ --info-text-fg: var(
256
+ --info-text-fg-override,
257
+ color-mix(
258
+ in srgb,
259
+ var(--_color),
260
+ var(--info-color)
261
+ var(--info-text-amount, var(--text-amount, 50%))
262
+ )
263
+ );
264
+ --success-text-fg: var(
265
+ --success-text-fg-override,
266
+ color-mix(
267
+ in srgb,
268
+ var(--_color),
269
+ var(--success-color)
270
+ var(--success-text-amount, var(--text-amount, 50%))
271
+ )
272
+ );
273
+ --warning-text-fg: var(
274
+ --warning-text-fg-override,
275
+ color-mix(
276
+ in srgb,
277
+ var(--_color),
278
+ var(--warning-color)
279
+ var(--warning-text-amount, var(--text-amount, 50%))
280
+ )
281
+ );
282
+ --danger-text-fg: var(
283
+ --danger-text-fg-override,
284
+ color-mix(
285
+ in srgb,
286
+ var(--_color),
287
+ var(--danger-color)
288
+ var(--danger-text-amount, var(--text-amount, 50%))
289
+ )
290
+ );
291
+ --muted-text-fg: var(
292
+ --muted-text-fg-override,
293
+ color-mix(
294
+ in srgb,
295
+ var(--_color),
296
+ var(--muted-color)
297
+ var(--muted-text-amount, var(--text-amount, 50%))
298
+ )
299
+ );
164
300
  background-color: var(--_background-color);
165
301
  color: var(--_color);
166
302
  }
@@ -179,7 +315,75 @@ a.primary {
179
315
  var(--_bg-base),
180
316
  var(--_bg-mix-color) var(--_bg-mix-amount)
181
317
  );
182
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
318
+ --_color: color-mix(
319
+ in srgb,
320
+ var(--_fg-base),
321
+ var(--_fg-mix-color) var(--_fg-mix-amount)
322
+ );
323
+ --muted-color: var(--muted-color-override, var(--_background-color));
324
+ --primary-text-fg: var(
325
+ --primary-text-fg-override,
326
+ color-mix(
327
+ in srgb,
328
+ var(--_color),
329
+ var(--primary-color)
330
+ var(--primary-text-amount, var(--text-amount, 50%))
331
+ )
332
+ );
333
+ --secondary-text-fg: var(
334
+ --secondary-text-fg-override,
335
+ color-mix(
336
+ in srgb,
337
+ var(--_color),
338
+ var(--secondary-color)
339
+ var(--secondary-text-amount, var(--text-amount, 50%))
340
+ )
341
+ );
342
+ --info-text-fg: var(
343
+ --info-text-fg-override,
344
+ color-mix(
345
+ in srgb,
346
+ var(--_color),
347
+ var(--info-color)
348
+ var(--info-text-amount, var(--text-amount, 50%))
349
+ )
350
+ );
351
+ --success-text-fg: var(
352
+ --success-text-fg-override,
353
+ color-mix(
354
+ in srgb,
355
+ var(--_color),
356
+ var(--success-color)
357
+ var(--success-text-amount, var(--text-amount, 50%))
358
+ )
359
+ );
360
+ --warning-text-fg: var(
361
+ --warning-text-fg-override,
362
+ color-mix(
363
+ in srgb,
364
+ var(--_color),
365
+ var(--warning-color)
366
+ var(--warning-text-amount, var(--text-amount, 50%))
367
+ )
368
+ );
369
+ --danger-text-fg: var(
370
+ --danger-text-fg-override,
371
+ color-mix(
372
+ in srgb,
373
+ var(--_color),
374
+ var(--danger-color)
375
+ var(--danger-text-amount, var(--text-amount, 50%))
376
+ )
377
+ );
378
+ --muted-text-fg: var(
379
+ --muted-text-fg-override,
380
+ color-mix(
381
+ in srgb,
382
+ var(--_color),
383
+ var(--muted-color)
384
+ var(--muted-text-amount, var(--text-amount, 50%))
385
+ )
386
+ );
183
387
  background-color: var(--_background-color);
184
388
  color: var(--_color);
185
389
  font-family: var(--primary-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -209,7 +413,75 @@ a.warning {
209
413
  var(--_bg-base),
210
414
  var(--_bg-mix-color) var(--_bg-mix-amount)
211
415
  );
212
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
416
+ --_color: color-mix(
417
+ in srgb,
418
+ var(--_fg-base),
419
+ var(--_fg-mix-color) var(--_fg-mix-amount)
420
+ );
421
+ --muted-color: var(--muted-color-override, var(--_background-color));
422
+ --primary-text-fg: var(
423
+ --primary-text-fg-override,
424
+ color-mix(
425
+ in srgb,
426
+ var(--_color),
427
+ var(--primary-color)
428
+ var(--primary-text-amount, var(--text-amount, 50%))
429
+ )
430
+ );
431
+ --secondary-text-fg: var(
432
+ --secondary-text-fg-override,
433
+ color-mix(
434
+ in srgb,
435
+ var(--_color),
436
+ var(--secondary-color)
437
+ var(--secondary-text-amount, var(--text-amount, 50%))
438
+ )
439
+ );
440
+ --info-text-fg: var(
441
+ --info-text-fg-override,
442
+ color-mix(
443
+ in srgb,
444
+ var(--_color),
445
+ var(--info-color)
446
+ var(--info-text-amount, var(--text-amount, 50%))
447
+ )
448
+ );
449
+ --success-text-fg: var(
450
+ --success-text-fg-override,
451
+ color-mix(
452
+ in srgb,
453
+ var(--_color),
454
+ var(--success-color)
455
+ var(--success-text-amount, var(--text-amount, 50%))
456
+ )
457
+ );
458
+ --warning-text-fg: var(
459
+ --warning-text-fg-override,
460
+ color-mix(
461
+ in srgb,
462
+ var(--_color),
463
+ var(--warning-color)
464
+ var(--warning-text-amount, var(--text-amount, 50%))
465
+ )
466
+ );
467
+ --danger-text-fg: var(
468
+ --danger-text-fg-override,
469
+ color-mix(
470
+ in srgb,
471
+ var(--_color),
472
+ var(--danger-color)
473
+ var(--danger-text-amount, var(--text-amount, 50%))
474
+ )
475
+ );
476
+ --muted-text-fg: var(
477
+ --muted-text-fg-override,
478
+ color-mix(
479
+ in srgb,
480
+ var(--_color),
481
+ var(--muted-color)
482
+ var(--muted-text-amount, var(--text-amount, 50%))
483
+ )
484
+ );
213
485
  background-color: var(--_background-color);
214
486
  color: var(--_color);
215
487
  font-family: var(--warning-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -239,7 +511,75 @@ a.danger {
239
511
  var(--_bg-base),
240
512
  var(--_bg-mix-color) var(--_bg-mix-amount)
241
513
  );
242
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
514
+ --_color: color-mix(
515
+ in srgb,
516
+ var(--_fg-base),
517
+ var(--_fg-mix-color) var(--_fg-mix-amount)
518
+ );
519
+ --muted-color: var(--muted-color-override, var(--_background-color));
520
+ --primary-text-fg: var(
521
+ --primary-text-fg-override,
522
+ color-mix(
523
+ in srgb,
524
+ var(--_color),
525
+ var(--primary-color)
526
+ var(--primary-text-amount, var(--text-amount, 50%))
527
+ )
528
+ );
529
+ --secondary-text-fg: var(
530
+ --secondary-text-fg-override,
531
+ color-mix(
532
+ in srgb,
533
+ var(--_color),
534
+ var(--secondary-color)
535
+ var(--secondary-text-amount, var(--text-amount, 50%))
536
+ )
537
+ );
538
+ --info-text-fg: var(
539
+ --info-text-fg-override,
540
+ color-mix(
541
+ in srgb,
542
+ var(--_color),
543
+ var(--info-color)
544
+ var(--info-text-amount, var(--text-amount, 50%))
545
+ )
546
+ );
547
+ --success-text-fg: var(
548
+ --success-text-fg-override,
549
+ color-mix(
550
+ in srgb,
551
+ var(--_color),
552
+ var(--success-color)
553
+ var(--success-text-amount, var(--text-amount, 50%))
554
+ )
555
+ );
556
+ --warning-text-fg: var(
557
+ --warning-text-fg-override,
558
+ color-mix(
559
+ in srgb,
560
+ var(--_color),
561
+ var(--warning-color)
562
+ var(--warning-text-amount, var(--text-amount, 50%))
563
+ )
564
+ );
565
+ --danger-text-fg: var(
566
+ --danger-text-fg-override,
567
+ color-mix(
568
+ in srgb,
569
+ var(--_color),
570
+ var(--danger-color)
571
+ var(--danger-text-amount, var(--text-amount, 50%))
572
+ )
573
+ );
574
+ --muted-text-fg: var(
575
+ --muted-text-fg-override,
576
+ color-mix(
577
+ in srgb,
578
+ var(--_color),
579
+ var(--muted-color)
580
+ var(--muted-text-amount, var(--text-amount, 50%))
581
+ )
582
+ );
243
583
  background-color: var(--_background-color);
244
584
  color: var(--_color);
245
585
  font-family: var(--danger-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -269,7 +609,75 @@ a.success {
269
609
  var(--_bg-base),
270
610
  var(--_bg-mix-color) var(--_bg-mix-amount)
271
611
  );
272
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
612
+ --_color: color-mix(
613
+ in srgb,
614
+ var(--_fg-base),
615
+ var(--_fg-mix-color) var(--_fg-mix-amount)
616
+ );
617
+ --muted-color: var(--muted-color-override, var(--_background-color));
618
+ --primary-text-fg: var(
619
+ --primary-text-fg-override,
620
+ color-mix(
621
+ in srgb,
622
+ var(--_color),
623
+ var(--primary-color)
624
+ var(--primary-text-amount, var(--text-amount, 50%))
625
+ )
626
+ );
627
+ --secondary-text-fg: var(
628
+ --secondary-text-fg-override,
629
+ color-mix(
630
+ in srgb,
631
+ var(--_color),
632
+ var(--secondary-color)
633
+ var(--secondary-text-amount, var(--text-amount, 50%))
634
+ )
635
+ );
636
+ --info-text-fg: var(
637
+ --info-text-fg-override,
638
+ color-mix(
639
+ in srgb,
640
+ var(--_color),
641
+ var(--info-color)
642
+ var(--info-text-amount, var(--text-amount, 50%))
643
+ )
644
+ );
645
+ --success-text-fg: var(
646
+ --success-text-fg-override,
647
+ color-mix(
648
+ in srgb,
649
+ var(--_color),
650
+ var(--success-color)
651
+ var(--success-text-amount, var(--text-amount, 50%))
652
+ )
653
+ );
654
+ --warning-text-fg: var(
655
+ --warning-text-fg-override,
656
+ color-mix(
657
+ in srgb,
658
+ var(--_color),
659
+ var(--warning-color)
660
+ var(--warning-text-amount, var(--text-amount, 50%))
661
+ )
662
+ );
663
+ --danger-text-fg: var(
664
+ --danger-text-fg-override,
665
+ color-mix(
666
+ in srgb,
667
+ var(--_color),
668
+ var(--danger-color)
669
+ var(--danger-text-amount, var(--text-amount, 50%))
670
+ )
671
+ );
672
+ --muted-text-fg: var(
673
+ --muted-text-fg-override,
674
+ color-mix(
675
+ in srgb,
676
+ var(--_color),
677
+ var(--muted-color)
678
+ var(--muted-text-amount, var(--text-amount, 50%))
679
+ )
680
+ );
273
681
  background-color: var(--_background-color);
274
682
  color: var(--_color);
275
683
  font-family: var(--success-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -299,7 +707,75 @@ a.info {
299
707
  var(--_bg-base),
300
708
  var(--_bg-mix-color) var(--_bg-mix-amount)
301
709
  );
302
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
710
+ --_color: color-mix(
711
+ in srgb,
712
+ var(--_fg-base),
713
+ var(--_fg-mix-color) var(--_fg-mix-amount)
714
+ );
715
+ --muted-color: var(--muted-color-override, var(--_background-color));
716
+ --primary-text-fg: var(
717
+ --primary-text-fg-override,
718
+ color-mix(
719
+ in srgb,
720
+ var(--_color),
721
+ var(--primary-color)
722
+ var(--primary-text-amount, var(--text-amount, 50%))
723
+ )
724
+ );
725
+ --secondary-text-fg: var(
726
+ --secondary-text-fg-override,
727
+ color-mix(
728
+ in srgb,
729
+ var(--_color),
730
+ var(--secondary-color)
731
+ var(--secondary-text-amount, var(--text-amount, 50%))
732
+ )
733
+ );
734
+ --info-text-fg: var(
735
+ --info-text-fg-override,
736
+ color-mix(
737
+ in srgb,
738
+ var(--_color),
739
+ var(--info-color)
740
+ var(--info-text-amount, var(--text-amount, 50%))
741
+ )
742
+ );
743
+ --success-text-fg: var(
744
+ --success-text-fg-override,
745
+ color-mix(
746
+ in srgb,
747
+ var(--_color),
748
+ var(--success-color)
749
+ var(--success-text-amount, var(--text-amount, 50%))
750
+ )
751
+ );
752
+ --warning-text-fg: var(
753
+ --warning-text-fg-override,
754
+ color-mix(
755
+ in srgb,
756
+ var(--_color),
757
+ var(--warning-color)
758
+ var(--warning-text-amount, var(--text-amount, 50%))
759
+ )
760
+ );
761
+ --danger-text-fg: var(
762
+ --danger-text-fg-override,
763
+ color-mix(
764
+ in srgb,
765
+ var(--_color),
766
+ var(--danger-color)
767
+ var(--danger-text-amount, var(--text-amount, 50%))
768
+ )
769
+ );
770
+ --muted-text-fg: var(
771
+ --muted-text-fg-override,
772
+ color-mix(
773
+ in srgb,
774
+ var(--_color),
775
+ var(--muted-color)
776
+ var(--muted-text-amount, var(--text-amount, 50%))
777
+ )
778
+ );
303
779
  background-color: var(--_background-color);
304
780
  color: var(--_color);
305
781
  font-family: var(--info-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
package/dist/controls/Checkbox.svelte CHANGED
@@ -170,7 +170,75 @@ label::before {
170
170
  var(--_bg-base),
171
171
  var(--_bg-mix-color) var(--_bg-mix-amount)
172
172
  );
173
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
173
+ --_color: color-mix(
174
+ in srgb,
175
+ var(--_fg-base),
176
+ var(--_fg-mix-color) var(--_fg-mix-amount)
177
+ );
178
+ --muted-color: var(--muted-color-override, var(--_background-color));
179
+ --primary-text-fg: var(
180
+ --primary-text-fg-override,
181
+ color-mix(
182
+ in srgb,
183
+ var(--_color),
184
+ var(--primary-color)
185
+ var(--primary-text-amount, var(--text-amount, 50%))
186
+ )
187
+ );
188
+ --secondary-text-fg: var(
189
+ --secondary-text-fg-override,
190
+ color-mix(
191
+ in srgb,
192
+ var(--_color),
193
+ var(--secondary-color)
194
+ var(--secondary-text-amount, var(--text-amount, 50%))
195
+ )
196
+ );
197
+ --info-text-fg: var(
198
+ --info-text-fg-override,
199
+ color-mix(
200
+ in srgb,
201
+ var(--_color),
202
+ var(--info-color)
203
+ var(--info-text-amount, var(--text-amount, 50%))
204
+ )
205
+ );
206
+ --success-text-fg: var(
207
+ --success-text-fg-override,
208
+ color-mix(
209
+ in srgb,
210
+ var(--_color),
211
+ var(--success-color)
212
+ var(--success-text-amount, var(--text-amount, 50%))
213
+ )
214
+ );
215
+ --warning-text-fg: var(
216
+ --warning-text-fg-override,
217
+ color-mix(
218
+ in srgb,
219
+ var(--_color),
220
+ var(--warning-color)
221
+ var(--warning-text-amount, var(--text-amount, 50%))
222
+ )
223
+ );
224
+ --danger-text-fg: var(
225
+ --danger-text-fg-override,
226
+ color-mix(
227
+ in srgb,
228
+ var(--_color),
229
+ var(--danger-color)
230
+ var(--danger-text-amount, var(--text-amount, 50%))
231
+ )
232
+ );
233
+ --muted-text-fg: var(
234
+ --muted-text-fg-override,
235
+ color-mix(
236
+ in srgb,
237
+ var(--_color),
238
+ var(--muted-color)
239
+ var(--muted-text-amount, var(--text-amount, 50%))
240
+ )
241
+ );
174
242
  background-color: var(--_background-color);
175
243
  color: var(--_color);
176
244
  border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
@@ -206,7 +274,75 @@ label:has(input:checked)::before {
206
274
  var(--_bg-base),
207
275
  var(--_bg-mix-color) var(--_bg-mix-amount)
208
276
  );
209
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
277
+ --_color: color-mix(
278
+ in srgb,
279
+ var(--_fg-base),
280
+ var(--_fg-mix-color) var(--_fg-mix-amount)
281
+ );
282
+ --muted-color: var(--muted-color-override, var(--_background-color));
283
+ --primary-text-fg: var(
284
+ --primary-text-fg-override,
285
+ color-mix(
286
+ in srgb,
287
+ var(--_color),
288
+ var(--primary-color)
289
+ var(--primary-text-amount, var(--text-amount, 50%))
290
+ )
291
+ );
292
+ --secondary-text-fg: var(
293
+ --secondary-text-fg-override,
294
+ color-mix(
295
+ in srgb,
296
+ var(--_color),
297
+ var(--secondary-color)
298
+ var(--secondary-text-amount, var(--text-amount, 50%))
299
+ )
300
+ );
301
+ --info-text-fg: var(
302
+ --info-text-fg-override,
303
+ color-mix(
304
+ in srgb,
305
+ var(--_color),
306
+ var(--info-color)
307
+ var(--info-text-amount, var(--text-amount, 50%))
308
+ )
309
+ );
310
+ --success-text-fg: var(
311
+ --success-text-fg-override,
312
+ color-mix(
313
+ in srgb,
314
+ var(--_color),
315
+ var(--success-color)
316
+ var(--success-text-amount, var(--text-amount, 50%))
317
+ )
318
+ );
319
+ --warning-text-fg: var(
320
+ --warning-text-fg-override,
321
+ color-mix(
322
+ in srgb,
323
+ var(--_color),
324
+ var(--warning-color)
325
+ var(--warning-text-amount, var(--text-amount, 50%))
326
+ )
327
+ );
328
+ --danger-text-fg: var(
329
+ --danger-text-fg-override,
330
+ color-mix(
331
+ in srgb,
332
+ var(--_color),
333
+ var(--danger-color)
334
+ var(--danger-text-amount, var(--text-amount, 50%))
335
+ )
336
+ );
337
+ --muted-text-fg: var(
338
+ --muted-text-fg-override,
339
+ color-mix(
340
+ in srgb,
341
+ var(--_color),
342
+ var(--muted-color)
343
+ var(--muted-text-amount, var(--text-amount, 50%))
344
+ )
345
+ );
210
346
  background-color: var(--_background-color);
211
347
  color: var(--_color);
212
348
  border: var(--checkbox-checked-border, var(--toggle-on-border, var(--border, checkbox)));