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/controls/Button.svelte CHANGED
@@ -71,7 +71,75 @@ button {
71
71
  var(--_bg-base),
72
72
  var(--_bg-mix-color) var(--_bg-mix-amount)
73
73
  );
74
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
74
+ --_color: color-mix(
75
+ in srgb,
76
+ var(--_fg-base),
77
+ var(--_fg-mix-color) var(--_fg-mix-amount)
78
+ );
79
+ --muted-color: var(--muted-color-override, var(--_background-color));
80
+ --primary-text-fg: var(
81
+ --primary-text-fg-override,
82
+ color-mix(
83
+ in srgb,
84
+ var(--_color),
85
+ var(--primary-color)
86
+ var(--primary-text-amount, var(--text-amount, 50%))
87
+ )
88
+ );
89
+ --secondary-text-fg: var(
90
+ --secondary-text-fg-override,
91
+ color-mix(
92
+ in srgb,
93
+ var(--_color),
94
+ var(--secondary-color)
95
+ var(--secondary-text-amount, var(--text-amount, 50%))
96
+ )
97
+ );
98
+ --info-text-fg: var(
99
+ --info-text-fg-override,
100
+ color-mix(
101
+ in srgb,
102
+ var(--_color),
103
+ var(--info-color)
104
+ var(--info-text-amount, var(--text-amount, 50%))
105
+ )
106
+ );
107
+ --success-text-fg: var(
108
+ --success-text-fg-override,
109
+ color-mix(
110
+ in srgb,
111
+ var(--_color),
112
+ var(--success-color)
113
+ var(--success-text-amount, var(--text-amount, 50%))
114
+ )
115
+ );
116
+ --warning-text-fg: var(
117
+ --warning-text-fg-override,
118
+ color-mix(
119
+ in srgb,
120
+ var(--_color),
121
+ var(--warning-color)
122
+ var(--warning-text-amount, var(--text-amount, 50%))
123
+ )
124
+ );
125
+ --danger-text-fg: var(
126
+ --danger-text-fg-override,
127
+ color-mix(
128
+ in srgb,
129
+ var(--_color),
130
+ var(--danger-color)
131
+ var(--danger-text-amount, var(--text-amount, 50%))
132
+ )
133
+ );
134
+ --muted-text-fg: var(
135
+ --muted-text-fg-override,
136
+ color-mix(
137
+ in srgb,
138
+ var(--_color),
139
+ var(--muted-color)
140
+ var(--muted-text-amount, var(--text-amount, 50%))
141
+ )
142
+ );
75
143
  background-color: var(--_background-color);
76
144
  color: var(--_color);
77
145
  --_box-shadow:
@@ -138,7 +206,75 @@ button.primary {
138
206
  var(--_bg-base),
139
207
  var(--_bg-mix-color) var(--_bg-mix-amount)
140
208
  );
141
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
209
+ --_color: color-mix(
210
+ in srgb,
211
+ var(--_fg-base),
212
+ var(--_fg-mix-color) var(--_fg-mix-amount)
213
+ );
214
+ --muted-color: var(--muted-color-override, var(--_background-color));
215
+ --primary-text-fg: var(
216
+ --primary-text-fg-override,
217
+ color-mix(
218
+ in srgb,
219
+ var(--_color),
220
+ var(--primary-color)
221
+ var(--primary-text-amount, var(--text-amount, 50%))
222
+ )
223
+ );
224
+ --secondary-text-fg: var(
225
+ --secondary-text-fg-override,
226
+ color-mix(
227
+ in srgb,
228
+ var(--_color),
229
+ var(--secondary-color)
230
+ var(--secondary-text-amount, var(--text-amount, 50%))
231
+ )
232
+ );
233
+ --info-text-fg: var(
234
+ --info-text-fg-override,
235
+ color-mix(
236
+ in srgb,
237
+ var(--_color),
238
+ var(--info-color)
239
+ var(--info-text-amount, var(--text-amount, 50%))
240
+ )
241
+ );
242
+ --success-text-fg: var(
243
+ --success-text-fg-override,
244
+ color-mix(
245
+ in srgb,
246
+ var(--_color),
247
+ var(--success-color)
248
+ var(--success-text-amount, var(--text-amount, 50%))
249
+ )
250
+ );
251
+ --warning-text-fg: var(
252
+ --warning-text-fg-override,
253
+ color-mix(
254
+ in srgb,
255
+ var(--_color),
256
+ var(--warning-color)
257
+ var(--warning-text-amount, var(--text-amount, 50%))
258
+ )
259
+ );
260
+ --danger-text-fg: var(
261
+ --danger-text-fg-override,
262
+ color-mix(
263
+ in srgb,
264
+ var(--_color),
265
+ var(--danger-color)
266
+ var(--danger-text-amount, var(--text-amount, 50%))
267
+ )
268
+ );
269
+ --muted-text-fg: var(
270
+ --muted-text-fg-override,
271
+ color-mix(
272
+ in srgb,
273
+ var(--_color),
274
+ var(--muted-color)
275
+ var(--muted-text-amount, var(--text-amount, 50%))
276
+ )
277
+ );
142
278
  background-color: var(--_background-color);
143
279
  color: var(--_color);
144
280
  font-family: var(--primary-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -192,7 +328,75 @@ button.warning {
192
328
  var(--_bg-base),
193
329
  var(--_bg-mix-color) var(--_bg-mix-amount)
194
330
  );
195
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
331
+ --_color: color-mix(
332
+ in srgb,
333
+ var(--_fg-base),
334
+ var(--_fg-mix-color) var(--_fg-mix-amount)
335
+ );
336
+ --muted-color: var(--muted-color-override, var(--_background-color));
337
+ --primary-text-fg: var(
338
+ --primary-text-fg-override,
339
+ color-mix(
340
+ in srgb,
341
+ var(--_color),
342
+ var(--primary-color)
343
+ var(--primary-text-amount, var(--text-amount, 50%))
344
+ )
345
+ );
346
+ --secondary-text-fg: var(
347
+ --secondary-text-fg-override,
348
+ color-mix(
349
+ in srgb,
350
+ var(--_color),
351
+ var(--secondary-color)
352
+ var(--secondary-text-amount, var(--text-amount, 50%))
353
+ )
354
+ );
355
+ --info-text-fg: var(
356
+ --info-text-fg-override,
357
+ color-mix(
358
+ in srgb,
359
+ var(--_color),
360
+ var(--info-color)
361
+ var(--info-text-amount, var(--text-amount, 50%))
362
+ )
363
+ );
364
+ --success-text-fg: var(
365
+ --success-text-fg-override,
366
+ color-mix(
367
+ in srgb,
368
+ var(--_color),
369
+ var(--success-color)
370
+ var(--success-text-amount, var(--text-amount, 50%))
371
+ )
372
+ );
373
+ --warning-text-fg: var(
374
+ --warning-text-fg-override,
375
+ color-mix(
376
+ in srgb,
377
+ var(--_color),
378
+ var(--warning-color)
379
+ var(--warning-text-amount, var(--text-amount, 50%))
380
+ )
381
+ );
382
+ --danger-text-fg: var(
383
+ --danger-text-fg-override,
384
+ color-mix(
385
+ in srgb,
386
+ var(--_color),
387
+ var(--danger-color)
388
+ var(--danger-text-amount, var(--text-amount, 50%))
389
+ )
390
+ );
391
+ --muted-text-fg: var(
392
+ --muted-text-fg-override,
393
+ color-mix(
394
+ in srgb,
395
+ var(--_color),
396
+ var(--muted-color)
397
+ var(--muted-text-amount, var(--text-amount, 50%))
398
+ )
399
+ );
196
400
  background-color: var(--_background-color);
197
401
  color: var(--_color);
198
402
  font-family: var(--warning-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -246,7 +450,75 @@ button.danger {
246
450
  var(--_bg-base),
247
451
  var(--_bg-mix-color) var(--_bg-mix-amount)
248
452
  );
249
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
453
+ --_color: color-mix(
454
+ in srgb,
455
+ var(--_fg-base),
456
+ var(--_fg-mix-color) var(--_fg-mix-amount)
457
+ );
458
+ --muted-color: var(--muted-color-override, var(--_background-color));
459
+ --primary-text-fg: var(
460
+ --primary-text-fg-override,
461
+ color-mix(
462
+ in srgb,
463
+ var(--_color),
464
+ var(--primary-color)
465
+ var(--primary-text-amount, var(--text-amount, 50%))
466
+ )
467
+ );
468
+ --secondary-text-fg: var(
469
+ --secondary-text-fg-override,
470
+ color-mix(
471
+ in srgb,
472
+ var(--_color),
473
+ var(--secondary-color)
474
+ var(--secondary-text-amount, var(--text-amount, 50%))
475
+ )
476
+ );
477
+ --info-text-fg: var(
478
+ --info-text-fg-override,
479
+ color-mix(
480
+ in srgb,
481
+ var(--_color),
482
+ var(--info-color)
483
+ var(--info-text-amount, var(--text-amount, 50%))
484
+ )
485
+ );
486
+ --success-text-fg: var(
487
+ --success-text-fg-override,
488
+ color-mix(
489
+ in srgb,
490
+ var(--_color),
491
+ var(--success-color)
492
+ var(--success-text-amount, var(--text-amount, 50%))
493
+ )
494
+ );
495
+ --warning-text-fg: var(
496
+ --warning-text-fg-override,
497
+ color-mix(
498
+ in srgb,
499
+ var(--_color),
500
+ var(--warning-color)
501
+ var(--warning-text-amount, var(--text-amount, 50%))
502
+ )
503
+ );
504
+ --danger-text-fg: var(
505
+ --danger-text-fg-override,
506
+ color-mix(
507
+ in srgb,
508
+ var(--_color),
509
+ var(--danger-color)
510
+ var(--danger-text-amount, var(--text-amount, 50%))
511
+ )
512
+ );
513
+ --muted-text-fg: var(
514
+ --muted-text-fg-override,
515
+ color-mix(
516
+ in srgb,
517
+ var(--_color),
518
+ var(--muted-color)
519
+ var(--muted-text-amount, var(--text-amount, 50%))
520
+ )
521
+ );
250
522
  background-color: var(--_background-color);
251
523
  color: var(--_color);
252
524
  font-family: var(--danger-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -300,7 +572,75 @@ button.success {
300
572
  var(--_bg-base),
301
573
  var(--_bg-mix-color) var(--_bg-mix-amount)
302
574
  );
303
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
575
+ --_color: color-mix(
576
+ in srgb,
577
+ var(--_fg-base),
578
+ var(--_fg-mix-color) var(--_fg-mix-amount)
579
+ );
580
+ --muted-color: var(--muted-color-override, var(--_background-color));
581
+ --primary-text-fg: var(
582
+ --primary-text-fg-override,
583
+ color-mix(
584
+ in srgb,
585
+ var(--_color),
586
+ var(--primary-color)
587
+ var(--primary-text-amount, var(--text-amount, 50%))
588
+ )
589
+ );
590
+ --secondary-text-fg: var(
591
+ --secondary-text-fg-override,
592
+ color-mix(
593
+ in srgb,
594
+ var(--_color),
595
+ var(--secondary-color)
596
+ var(--secondary-text-amount, var(--text-amount, 50%))
597
+ )
598
+ );
599
+ --info-text-fg: var(
600
+ --info-text-fg-override,
601
+ color-mix(
602
+ in srgb,
603
+ var(--_color),
604
+ var(--info-color)
605
+ var(--info-text-amount, var(--text-amount, 50%))
606
+ )
607
+ );
608
+ --success-text-fg: var(
609
+ --success-text-fg-override,
610
+ color-mix(
611
+ in srgb,
612
+ var(--_color),
613
+ var(--success-color)
614
+ var(--success-text-amount, var(--text-amount, 50%))
615
+ )
616
+ );
617
+ --warning-text-fg: var(
618
+ --warning-text-fg-override,
619
+ color-mix(
620
+ in srgb,
621
+ var(--_color),
622
+ var(--warning-color)
623
+ var(--warning-text-amount, var(--text-amount, 50%))
624
+ )
625
+ );
626
+ --danger-text-fg: var(
627
+ --danger-text-fg-override,
628
+ color-mix(
629
+ in srgb,
630
+ var(--_color),
631
+ var(--danger-color)
632
+ var(--danger-text-amount, var(--text-amount, 50%))
633
+ )
634
+ );
635
+ --muted-text-fg: var(
636
+ --muted-text-fg-override,
637
+ color-mix(
638
+ in srgb,
639
+ var(--_color),
640
+ var(--muted-color)
641
+ var(--muted-text-amount, var(--text-amount, 50%))
642
+ )
643
+ );
304
644
  background-color: var(--_background-color);
305
645
  color: var(--_color);
306
646
  font-family: var(--success-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -354,7 +694,75 @@ button.info {
354
694
  var(--_bg-base),
355
695
  var(--_bg-mix-color) var(--_bg-mix-amount)
356
696
  );
357
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
697
+ --_color: color-mix(
698
+ in srgb,
699
+ var(--_fg-base),
700
+ var(--_fg-mix-color) var(--_fg-mix-amount)
701
+ );
702
+ --muted-color: var(--muted-color-override, var(--_background-color));
703
+ --primary-text-fg: var(
704
+ --primary-text-fg-override,
705
+ color-mix(
706
+ in srgb,
707
+ var(--_color),
708
+ var(--primary-color)
709
+ var(--primary-text-amount, var(--text-amount, 50%))
710
+ )
711
+ );
712
+ --secondary-text-fg: var(
713
+ --secondary-text-fg-override,
714
+ color-mix(
715
+ in srgb,
716
+ var(--_color),
717
+ var(--secondary-color)
718
+ var(--secondary-text-amount, var(--text-amount, 50%))
719
+ )
720
+ );
721
+ --info-text-fg: var(
722
+ --info-text-fg-override,
723
+ color-mix(
724
+ in srgb,
725
+ var(--_color),
726
+ var(--info-color)
727
+ var(--info-text-amount, var(--text-amount, 50%))
728
+ )
729
+ );
730
+ --success-text-fg: var(
731
+ --success-text-fg-override,
732
+ color-mix(
733
+ in srgb,
734
+ var(--_color),
735
+ var(--success-color)
736
+ var(--success-text-amount, var(--text-amount, 50%))
737
+ )
738
+ );
739
+ --warning-text-fg: var(
740
+ --warning-text-fg-override,
741
+ color-mix(
742
+ in srgb,
743
+ var(--_color),
744
+ var(--warning-color)
745
+ var(--warning-text-amount, var(--text-amount, 50%))
746
+ )
747
+ );
748
+ --danger-text-fg: var(
749
+ --danger-text-fg-override,
750
+ color-mix(
751
+ in srgb,
752
+ var(--_color),
753
+ var(--danger-color)
754
+ var(--danger-text-amount, var(--text-amount, 50%))
755
+ )
756
+ );
757
+ --muted-text-fg: var(
758
+ --muted-text-fg-override,
759
+ color-mix(
760
+ in srgb,
761
+ var(--_color),
762
+ var(--muted-color)
763
+ var(--muted-text-amount, var(--text-amount, 50%))
764
+ )
765
+ );
358
766
  background-color: var(--_background-color);
359
767
  color: var(--_color);
360
768
  font-family: var(--info-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));