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/CircleButton.svelte CHANGED
@@ -43,7 +43,75 @@ button.primary {
43
43
  var(--_bg-base),
44
44
  var(--_bg-mix-color) var(--_bg-mix-amount)
45
45
  );
46
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
46
+ --_color: color-mix(
47
+ in srgb,
48
+ var(--_fg-base),
49
+ var(--_fg-mix-color) var(--_fg-mix-amount)
50
+ );
51
+ --muted-color: var(--muted-color-override, var(--_background-color));
52
+ --primary-text-fg: var(
53
+ --primary-text-fg-override,
54
+ color-mix(
55
+ in srgb,
56
+ var(--_color),
57
+ var(--primary-color)
58
+ var(--primary-text-amount, var(--text-amount, 50%))
59
+ )
60
+ );
61
+ --secondary-text-fg: var(
62
+ --secondary-text-fg-override,
63
+ color-mix(
64
+ in srgb,
65
+ var(--_color),
66
+ var(--secondary-color)
67
+ var(--secondary-text-amount, var(--text-amount, 50%))
68
+ )
69
+ );
70
+ --info-text-fg: var(
71
+ --info-text-fg-override,
72
+ color-mix(
73
+ in srgb,
74
+ var(--_color),
75
+ var(--info-color)
76
+ var(--info-text-amount, var(--text-amount, 50%))
77
+ )
78
+ );
79
+ --success-text-fg: var(
80
+ --success-text-fg-override,
81
+ color-mix(
82
+ in srgb,
83
+ var(--_color),
84
+ var(--success-color)
85
+ var(--success-text-amount, var(--text-amount, 50%))
86
+ )
87
+ );
88
+ --warning-text-fg: var(
89
+ --warning-text-fg-override,
90
+ color-mix(
91
+ in srgb,
92
+ var(--_color),
93
+ var(--warning-color)
94
+ var(--warning-text-amount, var(--text-amount, 50%))
95
+ )
96
+ );
97
+ --danger-text-fg: var(
98
+ --danger-text-fg-override,
99
+ color-mix(
100
+ in srgb,
101
+ var(--_color),
102
+ var(--danger-color)
103
+ var(--danger-text-amount, var(--text-amount, 50%))
104
+ )
105
+ );
106
+ --muted-text-fg: var(
107
+ --muted-text-fg-override,
108
+ color-mix(
109
+ in srgb,
110
+ var(--_color),
111
+ var(--muted-color)
112
+ var(--muted-text-amount, var(--text-amount, 50%))
113
+ )
114
+ );
47
115
  background-color: var(--_background-color);
48
116
  color: var(--_color);
49
117
  }
@@ -79,7 +147,75 @@ button {
79
147
  var(--_bg-base),
80
148
  var(--_bg-mix-color) var(--_bg-mix-amount)
81
149
  );
82
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
150
+ --_color: color-mix(
151
+ in srgb,
152
+ var(--_fg-base),
153
+ var(--_fg-mix-color) var(--_fg-mix-amount)
154
+ );
155
+ --muted-color: var(--muted-color-override, var(--_background-color));
156
+ --primary-text-fg: var(
157
+ --primary-text-fg-override,
158
+ color-mix(
159
+ in srgb,
160
+ var(--_color),
161
+ var(--primary-color)
162
+ var(--primary-text-amount, var(--text-amount, 50%))
163
+ )
164
+ );
165
+ --secondary-text-fg: var(
166
+ --secondary-text-fg-override,
167
+ color-mix(
168
+ in srgb,
169
+ var(--_color),
170
+ var(--secondary-color)
171
+ var(--secondary-text-amount, var(--text-amount, 50%))
172
+ )
173
+ );
174
+ --info-text-fg: var(
175
+ --info-text-fg-override,
176
+ color-mix(
177
+ in srgb,
178
+ var(--_color),
179
+ var(--info-color)
180
+ var(--info-text-amount, var(--text-amount, 50%))
181
+ )
182
+ );
183
+ --success-text-fg: var(
184
+ --success-text-fg-override,
185
+ color-mix(
186
+ in srgb,
187
+ var(--_color),
188
+ var(--success-color)
189
+ var(--success-text-amount, var(--text-amount, 50%))
190
+ )
191
+ );
192
+ --warning-text-fg: var(
193
+ --warning-text-fg-override,
194
+ color-mix(
195
+ in srgb,
196
+ var(--_color),
197
+ var(--warning-color)
198
+ var(--warning-text-amount, var(--text-amount, 50%))
199
+ )
200
+ );
201
+ --danger-text-fg: var(
202
+ --danger-text-fg-override,
203
+ color-mix(
204
+ in srgb,
205
+ var(--_color),
206
+ var(--danger-color)
207
+ var(--danger-text-amount, var(--text-amount, 50%))
208
+ )
209
+ );
210
+ --muted-text-fg: var(
211
+ --muted-text-fg-override,
212
+ color-mix(
213
+ in srgb,
214
+ var(--_color),
215
+ var(--muted-color)
216
+ var(--muted-text-amount, var(--text-amount, 50%))
217
+ )
218
+ );
83
219
  background-color: var(--_background-color);
84
220
  color: var(--_color);
85
221
  cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
@@ -149,7 +285,75 @@ button.primary {
149
285
  var(--_bg-base),
150
286
  var(--_bg-mix-color) var(--_bg-mix-amount)
151
287
  );
152
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
288
+ --_color: color-mix(
289
+ in srgb,
290
+ var(--_fg-base),
291
+ var(--_fg-mix-color) var(--_fg-mix-amount)
292
+ );
293
+ --muted-color: var(--muted-color-override, var(--_background-color));
294
+ --primary-text-fg: var(
295
+ --primary-text-fg-override,
296
+ color-mix(
297
+ in srgb,
298
+ var(--_color),
299
+ var(--primary-color)
300
+ var(--primary-text-amount, var(--text-amount, 50%))
301
+ )
302
+ );
303
+ --secondary-text-fg: var(
304
+ --secondary-text-fg-override,
305
+ color-mix(
306
+ in srgb,
307
+ var(--_color),
308
+ var(--secondary-color)
309
+ var(--secondary-text-amount, var(--text-amount, 50%))
310
+ )
311
+ );
312
+ --info-text-fg: var(
313
+ --info-text-fg-override,
314
+ color-mix(
315
+ in srgb,
316
+ var(--_color),
317
+ var(--info-color)
318
+ var(--info-text-amount, var(--text-amount, 50%))
319
+ )
320
+ );
321
+ --success-text-fg: var(
322
+ --success-text-fg-override,
323
+ color-mix(
324
+ in srgb,
325
+ var(--_color),
326
+ var(--success-color)
327
+ var(--success-text-amount, var(--text-amount, 50%))
328
+ )
329
+ );
330
+ --warning-text-fg: var(
331
+ --warning-text-fg-override,
332
+ color-mix(
333
+ in srgb,
334
+ var(--_color),
335
+ var(--warning-color)
336
+ var(--warning-text-amount, var(--text-amount, 50%))
337
+ )
338
+ );
339
+ --danger-text-fg: var(
340
+ --danger-text-fg-override,
341
+ color-mix(
342
+ in srgb,
343
+ var(--_color),
344
+ var(--danger-color)
345
+ var(--danger-text-amount, var(--text-amount, 50%))
346
+ )
347
+ );
348
+ --muted-text-fg: var(
349
+ --muted-text-fg-override,
350
+ color-mix(
351
+ in srgb,
352
+ var(--_color),
353
+ var(--muted-color)
354
+ var(--muted-text-amount, var(--text-amount, 50%))
355
+ )
356
+ );
153
357
  background-color: var(--_background-color);
154
358
  color: var(--_color);
155
359
  }
@@ -168,7 +372,75 @@ button.warning {
168
372
  var(--_bg-base),
169
373
  var(--_bg-mix-color) var(--_bg-mix-amount)
170
374
  );
171
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
375
+ --_color: color-mix(
376
+ in srgb,
377
+ var(--_fg-base),
378
+ var(--_fg-mix-color) var(--_fg-mix-amount)
379
+ );
380
+ --muted-color: var(--muted-color-override, var(--_background-color));
381
+ --primary-text-fg: var(
382
+ --primary-text-fg-override,
383
+ color-mix(
384
+ in srgb,
385
+ var(--_color),
386
+ var(--primary-color)
387
+ var(--primary-text-amount, var(--text-amount, 50%))
388
+ )
389
+ );
390
+ --secondary-text-fg: var(
391
+ --secondary-text-fg-override,
392
+ color-mix(
393
+ in srgb,
394
+ var(--_color),
395
+ var(--secondary-color)
396
+ var(--secondary-text-amount, var(--text-amount, 50%))
397
+ )
398
+ );
399
+ --info-text-fg: var(
400
+ --info-text-fg-override,
401
+ color-mix(
402
+ in srgb,
403
+ var(--_color),
404
+ var(--info-color)
405
+ var(--info-text-amount, var(--text-amount, 50%))
406
+ )
407
+ );
408
+ --success-text-fg: var(
409
+ --success-text-fg-override,
410
+ color-mix(
411
+ in srgb,
412
+ var(--_color),
413
+ var(--success-color)
414
+ var(--success-text-amount, var(--text-amount, 50%))
415
+ )
416
+ );
417
+ --warning-text-fg: var(
418
+ --warning-text-fg-override,
419
+ color-mix(
420
+ in srgb,
421
+ var(--_color),
422
+ var(--warning-color)
423
+ var(--warning-text-amount, var(--text-amount, 50%))
424
+ )
425
+ );
426
+ --danger-text-fg: var(
427
+ --danger-text-fg-override,
428
+ color-mix(
429
+ in srgb,
430
+ var(--_color),
431
+ var(--danger-color)
432
+ var(--danger-text-amount, var(--text-amount, 50%))
433
+ )
434
+ );
435
+ --muted-text-fg: var(
436
+ --muted-text-fg-override,
437
+ color-mix(
438
+ in srgb,
439
+ var(--_color),
440
+ var(--muted-color)
441
+ var(--muted-text-amount, var(--text-amount, 50%))
442
+ )
443
+ );
172
444
  background-color: var(--_background-color);
173
445
  color: var(--_color);
174
446
  }
@@ -187,7 +459,75 @@ button.danger {
187
459
  var(--_bg-base),
188
460
  var(--_bg-mix-color) var(--_bg-mix-amount)
189
461
  );
190
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
462
+ --_color: color-mix(
463
+ in srgb,
464
+ var(--_fg-base),
465
+ var(--_fg-mix-color) var(--_fg-mix-amount)
466
+ );
467
+ --muted-color: var(--muted-color-override, var(--_background-color));
468
+ --primary-text-fg: var(
469
+ --primary-text-fg-override,
470
+ color-mix(
471
+ in srgb,
472
+ var(--_color),
473
+ var(--primary-color)
474
+ var(--primary-text-amount, var(--text-amount, 50%))
475
+ )
476
+ );
477
+ --secondary-text-fg: var(
478
+ --secondary-text-fg-override,
479
+ color-mix(
480
+ in srgb,
481
+ var(--_color),
482
+ var(--secondary-color)
483
+ var(--secondary-text-amount, var(--text-amount, 50%))
484
+ )
485
+ );
486
+ --info-text-fg: var(
487
+ --info-text-fg-override,
488
+ color-mix(
489
+ in srgb,
490
+ var(--_color),
491
+ var(--info-color)
492
+ var(--info-text-amount, var(--text-amount, 50%))
493
+ )
494
+ );
495
+ --success-text-fg: var(
496
+ --success-text-fg-override,
497
+ color-mix(
498
+ in srgb,
499
+ var(--_color),
500
+ var(--success-color)
501
+ var(--success-text-amount, var(--text-amount, 50%))
502
+ )
503
+ );
504
+ --warning-text-fg: var(
505
+ --warning-text-fg-override,
506
+ color-mix(
507
+ in srgb,
508
+ var(--_color),
509
+ var(--warning-color)
510
+ var(--warning-text-amount, var(--text-amount, 50%))
511
+ )
512
+ );
513
+ --danger-text-fg: var(
514
+ --danger-text-fg-override,
515
+ color-mix(
516
+ in srgb,
517
+ var(--_color),
518
+ var(--danger-color)
519
+ var(--danger-text-amount, var(--text-amount, 50%))
520
+ )
521
+ );
522
+ --muted-text-fg: var(
523
+ --muted-text-fg-override,
524
+ color-mix(
525
+ in srgb,
526
+ var(--_color),
527
+ var(--muted-color)
528
+ var(--muted-text-amount, var(--text-amount, 50%))
529
+ )
530
+ );
191
531
  background-color: var(--_background-color);
192
532
  color: var(--_color);
193
533
  }
@@ -206,7 +546,75 @@ button.success {
206
546
  var(--_bg-base),
207
547
  var(--_bg-mix-color) var(--_bg-mix-amount)
208
548
  );
209
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
549
+ --_color: color-mix(
550
+ in srgb,
551
+ var(--_fg-base),
552
+ var(--_fg-mix-color) var(--_fg-mix-amount)
553
+ );
554
+ --muted-color: var(--muted-color-override, var(--_background-color));
555
+ --primary-text-fg: var(
556
+ --primary-text-fg-override,
557
+ color-mix(
558
+ in srgb,
559
+ var(--_color),
560
+ var(--primary-color)
561
+ var(--primary-text-amount, var(--text-amount, 50%))
562
+ )
563
+ );
564
+ --secondary-text-fg: var(
565
+ --secondary-text-fg-override,
566
+ color-mix(
567
+ in srgb,
568
+ var(--_color),
569
+ var(--secondary-color)
570
+ var(--secondary-text-amount, var(--text-amount, 50%))
571
+ )
572
+ );
573
+ --info-text-fg: var(
574
+ --info-text-fg-override,
575
+ color-mix(
576
+ in srgb,
577
+ var(--_color),
578
+ var(--info-color)
579
+ var(--info-text-amount, var(--text-amount, 50%))
580
+ )
581
+ );
582
+ --success-text-fg: var(
583
+ --success-text-fg-override,
584
+ color-mix(
585
+ in srgb,
586
+ var(--_color),
587
+ var(--success-color)
588
+ var(--success-text-amount, var(--text-amount, 50%))
589
+ )
590
+ );
591
+ --warning-text-fg: var(
592
+ --warning-text-fg-override,
593
+ color-mix(
594
+ in srgb,
595
+ var(--_color),
596
+ var(--warning-color)
597
+ var(--warning-text-amount, var(--text-amount, 50%))
598
+ )
599
+ );
600
+ --danger-text-fg: var(
601
+ --danger-text-fg-override,
602
+ color-mix(
603
+ in srgb,
604
+ var(--_color),
605
+ var(--danger-color)
606
+ var(--danger-text-amount, var(--text-amount, 50%))
607
+ )
608
+ );
609
+ --muted-text-fg: var(
610
+ --muted-text-fg-override,
611
+ color-mix(
612
+ in srgb,
613
+ var(--_color),
614
+ var(--muted-color)
615
+ var(--muted-text-amount, var(--text-amount, 50%))
616
+ )
617
+ );
210
618
  background-color: var(--_background-color);
211
619
  color: var(--_color);
212
620
  }
@@ -225,7 +633,75 @@ button.info {
225
633
  var(--_bg-base),
226
634
  var(--_bg-mix-color) var(--_bg-mix-amount)
227
635
  );
228
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
636
+ --_color: color-mix(
637
+ in srgb,
638
+ var(--_fg-base),
639
+ var(--_fg-mix-color) var(--_fg-mix-amount)
640
+ );
641
+ --muted-color: var(--muted-color-override, var(--_background-color));
642
+ --primary-text-fg: var(
643
+ --primary-text-fg-override,
644
+ color-mix(
645
+ in srgb,
646
+ var(--_color),
647
+ var(--primary-color)
648
+ var(--primary-text-amount, var(--text-amount, 50%))
649
+ )
650
+ );
651
+ --secondary-text-fg: var(
652
+ --secondary-text-fg-override,
653
+ color-mix(
654
+ in srgb,
655
+ var(--_color),
656
+ var(--secondary-color)
657
+ var(--secondary-text-amount, var(--text-amount, 50%))
658
+ )
659
+ );
660
+ --info-text-fg: var(
661
+ --info-text-fg-override,
662
+ color-mix(
663
+ in srgb,
664
+ var(--_color),
665
+ var(--info-color)
666
+ var(--info-text-amount, var(--text-amount, 50%))
667
+ )
668
+ );
669
+ --success-text-fg: var(
670
+ --success-text-fg-override,
671
+ color-mix(
672
+ in srgb,
673
+ var(--_color),
674
+ var(--success-color)
675
+ var(--success-text-amount, var(--text-amount, 50%))
676
+ )
677
+ );
678
+ --warning-text-fg: var(
679
+ --warning-text-fg-override,
680
+ color-mix(
681
+ in srgb,
682
+ var(--_color),
683
+ var(--warning-color)
684
+ var(--warning-text-amount, var(--text-amount, 50%))
685
+ )
686
+ );
687
+ --danger-text-fg: var(
688
+ --danger-text-fg-override,
689
+ color-mix(
690
+ in srgb,
691
+ var(--_color),
692
+ var(--danger-color)
693
+ var(--danger-text-amount, var(--text-amount, 50%))
694
+ )
695
+ );
696
+ --muted-text-fg: var(
697
+ --muted-text-fg-override,
698
+ color-mix(
699
+ in srgb,
700
+ var(--_color),
701
+ var(--muted-color)
702
+ var(--muted-text-amount, var(--text-amount, 50%))
703
+ )
704
+ );
229
705
  background-color: var(--_background-color);
230
706
  color: var(--_color);
231
707
  }</style>
package/dist/controls/Input.svelte CHANGED
@@ -54,7 +54,75 @@ input {
54
54
  var(--_bg-base),
55
55
  var(--_bg-mix-color) var(--_bg-mix-amount)
56
56
  );
57
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
57
+ --_color: color-mix(
58
+ in srgb,
59
+ var(--_fg-base),
60
+ var(--_fg-mix-color) var(--_fg-mix-amount)
61
+ );
62
+ --muted-color: var(--muted-color-override, var(--_background-color));
63
+ --primary-text-fg: var(
64
+ --primary-text-fg-override,
65
+ color-mix(
66
+ in srgb,
67
+ var(--_color),
68
+ var(--primary-color)
69
+ var(--primary-text-amount, var(--text-amount, 50%))
70
+ )
71
+ );
72
+ --secondary-text-fg: var(
73
+ --secondary-text-fg-override,
74
+ color-mix(
75
+ in srgb,
76
+ var(--_color),
77
+ var(--secondary-color)
78
+ var(--secondary-text-amount, var(--text-amount, 50%))
79
+ )
80
+ );
81
+ --info-text-fg: var(
82
+ --info-text-fg-override,
83
+ color-mix(
84
+ in srgb,
85
+ var(--_color),
86
+ var(--info-color)
87
+ var(--info-text-amount, var(--text-amount, 50%))
88
+ )
89
+ );
90
+ --success-text-fg: var(
91
+ --success-text-fg-override,
92
+ color-mix(
93
+ in srgb,
94
+ var(--_color),
95
+ var(--success-color)
96
+ var(--success-text-amount, var(--text-amount, 50%))
97
+ )
98
+ );
99
+ --warning-text-fg: var(
100
+ --warning-text-fg-override,
101
+ color-mix(
102
+ in srgb,
103
+ var(--_color),
104
+ var(--warning-color)
105
+ var(--warning-text-amount, var(--text-amount, 50%))
106
+ )
107
+ );
108
+ --danger-text-fg: var(
109
+ --danger-text-fg-override,
110
+ color-mix(
111
+ in srgb,
112
+ var(--_color),
113
+ var(--danger-color)
114
+ var(--danger-text-amount, var(--text-amount, 50%))
115
+ )
116
+ );
117
+ --muted-text-fg: var(
118
+ --muted-text-fg-override,
119
+ color-mix(
120
+ in srgb,
121
+ var(--_color),
122
+ var(--muted-color)
123
+ var(--muted-text-amount, var(--text-amount, 50%))
124
+ )
125
+ );
58
126
  background-color: var(--_background-color);
59
127
  color: var(--_color);
60
128
  width: var(--input-width);