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/Sidebar.svelte CHANGED
@@ -57,7 +57,75 @@ aside {
57
57
  var(--_bg-base),
58
58
  var(--_bg-mix-color) var(--_bg-mix-amount)
59
59
  );
60
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
60
+ --_color: color-mix(
61
+ in srgb,
62
+ var(--_fg-base),
63
+ var(--_fg-mix-color) var(--_fg-mix-amount)
64
+ );
65
+ --muted-color: var(--muted-color-override, var(--_background-color));
66
+ --primary-text-fg: var(
67
+ --primary-text-fg-override,
68
+ color-mix(
69
+ in srgb,
70
+ var(--_color),
71
+ var(--primary-color)
72
+ var(--primary-text-amount, var(--text-amount, 50%))
73
+ )
74
+ );
75
+ --secondary-text-fg: var(
76
+ --secondary-text-fg-override,
77
+ color-mix(
78
+ in srgb,
79
+ var(--_color),
80
+ var(--secondary-color)
81
+ var(--secondary-text-amount, var(--text-amount, 50%))
82
+ )
83
+ );
84
+ --info-text-fg: var(
85
+ --info-text-fg-override,
86
+ color-mix(
87
+ in srgb,
88
+ var(--_color),
89
+ var(--info-color)
90
+ var(--info-text-amount, var(--text-amount, 50%))
91
+ )
92
+ );
93
+ --success-text-fg: var(
94
+ --success-text-fg-override,
95
+ color-mix(
96
+ in srgb,
97
+ var(--_color),
98
+ var(--success-color)
99
+ var(--success-text-amount, var(--text-amount, 50%))
100
+ )
101
+ );
102
+ --warning-text-fg: var(
103
+ --warning-text-fg-override,
104
+ color-mix(
105
+ in srgb,
106
+ var(--_color),
107
+ var(--warning-color)
108
+ var(--warning-text-amount, var(--text-amount, 50%))
109
+ )
110
+ );
111
+ --danger-text-fg: var(
112
+ --danger-text-fg-override,
113
+ color-mix(
114
+ in srgb,
115
+ var(--_color),
116
+ var(--danger-color)
117
+ var(--danger-text-amount, var(--text-amount, 50%))
118
+ )
119
+ );
120
+ --muted-text-fg: var(
121
+ --muted-text-fg-override,
122
+ color-mix(
123
+ in srgb,
124
+ var(--_color),
125
+ var(--muted-color)
126
+ var(--muted-text-amount, var(--text-amount, 50%))
127
+ )
128
+ );
61
129
  background-color: var(--_background-color);
62
130
  color: var(--_color);
63
131
  font-family: var(--sidebar-font-family, var(--surface-font-family, inherit));
@@ -91,7 +159,75 @@ aside .content {
91
159
  var(--_bg-base),
92
160
  var(--_bg-mix-color) var(--_bg-mix-amount)
93
161
  );
94
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
162
+ --_color: color-mix(
163
+ in srgb,
164
+ var(--_fg-base),
165
+ var(--_fg-mix-color) var(--_fg-mix-amount)
166
+ );
167
+ --muted-color: var(--muted-color-override, var(--_background-color));
168
+ --primary-text-fg: var(
169
+ --primary-text-fg-override,
170
+ color-mix(
171
+ in srgb,
172
+ var(--_color),
173
+ var(--primary-color)
174
+ var(--primary-text-amount, var(--text-amount, 50%))
175
+ )
176
+ );
177
+ --secondary-text-fg: var(
178
+ --secondary-text-fg-override,
179
+ color-mix(
180
+ in srgb,
181
+ var(--_color),
182
+ var(--secondary-color)
183
+ var(--secondary-text-amount, var(--text-amount, 50%))
184
+ )
185
+ );
186
+ --info-text-fg: var(
187
+ --info-text-fg-override,
188
+ color-mix(
189
+ in srgb,
190
+ var(--_color),
191
+ var(--info-color)
192
+ var(--info-text-amount, var(--text-amount, 50%))
193
+ )
194
+ );
195
+ --success-text-fg: var(
196
+ --success-text-fg-override,
197
+ color-mix(
198
+ in srgb,
199
+ var(--_color),
200
+ var(--success-color)
201
+ var(--success-text-amount, var(--text-amount, 50%))
202
+ )
203
+ );
204
+ --warning-text-fg: var(
205
+ --warning-text-fg-override,
206
+ color-mix(
207
+ in srgb,
208
+ var(--_color),
209
+ var(--warning-color)
210
+ var(--warning-text-amount, var(--text-amount, 50%))
211
+ )
212
+ );
213
+ --danger-text-fg: var(
214
+ --danger-text-fg-override,
215
+ color-mix(
216
+ in srgb,
217
+ var(--_color),
218
+ var(--danger-color)
219
+ var(--danger-text-amount, var(--text-amount, 50%))
220
+ )
221
+ );
222
+ --muted-text-fg: var(
223
+ --muted-text-fg-override,
224
+ color-mix(
225
+ in srgb,
226
+ var(--_color),
227
+ var(--muted-color)
228
+ var(--muted-text-amount, var(--text-amount, 50%))
229
+ )
230
+ );
95
231
  background-color: var(--_background-color);
96
232
  color: var(--_color);
97
233
  width: var(--sidebar-width);
@@ -186,7 +322,75 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
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
  background: var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg)));
@@ -284,7 +488,75 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
284
488
  var(--_bg-base),
285
489
  var(--_bg-mix-color) var(--_bg-mix-amount)
286
490
  );
287
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
491
+ --_color: color-mix(
492
+ in srgb,
493
+ var(--_fg-base),
494
+ var(--_fg-mix-color) var(--_fg-mix-amount)
495
+ );
496
+ --muted-color: var(--muted-color-override, var(--_background-color));
497
+ --primary-text-fg: var(
498
+ --primary-text-fg-override,
499
+ color-mix(
500
+ in srgb,
501
+ var(--_color),
502
+ var(--primary-color)
503
+ var(--primary-text-amount, var(--text-amount, 50%))
504
+ )
505
+ );
506
+ --secondary-text-fg: var(
507
+ --secondary-text-fg-override,
508
+ color-mix(
509
+ in srgb,
510
+ var(--_color),
511
+ var(--secondary-color)
512
+ var(--secondary-text-amount, var(--text-amount, 50%))
513
+ )
514
+ );
515
+ --info-text-fg: var(
516
+ --info-text-fg-override,
517
+ color-mix(
518
+ in srgb,
519
+ var(--_color),
520
+ var(--info-color)
521
+ var(--info-text-amount, var(--text-amount, 50%))
522
+ )
523
+ );
524
+ --success-text-fg: var(
525
+ --success-text-fg-override,
526
+ color-mix(
527
+ in srgb,
528
+ var(--_color),
529
+ var(--success-color)
530
+ var(--success-text-amount, var(--text-amount, 50%))
531
+ )
532
+ );
533
+ --warning-text-fg: var(
534
+ --warning-text-fg-override,
535
+ color-mix(
536
+ in srgb,
537
+ var(--_color),
538
+ var(--warning-color)
539
+ var(--warning-text-amount, var(--text-amount, 50%))
540
+ )
541
+ );
542
+ --danger-text-fg: var(
543
+ --danger-text-fg-override,
544
+ color-mix(
545
+ in srgb,
546
+ var(--_color),
547
+ var(--danger-color)
548
+ var(--danger-text-amount, var(--text-amount, 50%))
549
+ )
550
+ );
551
+ --muted-text-fg: var(
552
+ --muted-text-fg-override,
553
+ color-mix(
554
+ in srgb,
555
+ var(--_color),
556
+ var(--muted-color)
557
+ var(--muted-text-amount, var(--text-amount, 50%))
558
+ )
559
+ );
288
560
  background-color: var(--_background-color);
289
561
  color: var(--_color);
290
562
  }
@@ -326,7 +598,75 @@ aside .content:hover::-webkit-scrollbar-thumb:hover {
326
598
  var(--_bg-base),
327
599
  var(--_bg-mix-color) var(--_bg-mix-amount)
328
600
  );
329
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
601
+ --_color: color-mix(
602
+ in srgb,
603
+ var(--_fg-base),
604
+ var(--_fg-mix-color) var(--_fg-mix-amount)
605
+ );
606
+ --muted-color: var(--muted-color-override, var(--_background-color));
607
+ --primary-text-fg: var(
608
+ --primary-text-fg-override,
609
+ color-mix(
610
+ in srgb,
611
+ var(--_color),
612
+ var(--primary-color)
613
+ var(--primary-text-amount, var(--text-amount, 50%))
614
+ )
615
+ );
616
+ --secondary-text-fg: var(
617
+ --secondary-text-fg-override,
618
+ color-mix(
619
+ in srgb,
620
+ var(--_color),
621
+ var(--secondary-color)
622
+ var(--secondary-text-amount, var(--text-amount, 50%))
623
+ )
624
+ );
625
+ --info-text-fg: var(
626
+ --info-text-fg-override,
627
+ color-mix(
628
+ in srgb,
629
+ var(--_color),
630
+ var(--info-color)
631
+ var(--info-text-amount, var(--text-amount, 50%))
632
+ )
633
+ );
634
+ --success-text-fg: var(
635
+ --success-text-fg-override,
636
+ color-mix(
637
+ in srgb,
638
+ var(--_color),
639
+ var(--success-color)
640
+ var(--success-text-amount, var(--text-amount, 50%))
641
+ )
642
+ );
643
+ --warning-text-fg: var(
644
+ --warning-text-fg-override,
645
+ color-mix(
646
+ in srgb,
647
+ var(--_color),
648
+ var(--warning-color)
649
+ var(--warning-text-amount, var(--text-amount, 50%))
650
+ )
651
+ );
652
+ --danger-text-fg: var(
653
+ --danger-text-fg-override,
654
+ color-mix(
655
+ in srgb,
656
+ var(--_color),
657
+ var(--danger-color)
658
+ var(--danger-text-amount, var(--text-amount, 50%))
659
+ )
660
+ );
661
+ --muted-text-fg: var(
662
+ --muted-text-fg-override,
663
+ color-mix(
664
+ in srgb,
665
+ var(--_color),
666
+ var(--muted-color)
667
+ var(--muted-text-amount, var(--text-amount, 50%))
668
+ )
669
+ );
330
670
  background-color: var(--_background-color);
331
671
  color: var(--_color);
332
672
  cursor: var(--mini-button-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
package/dist/layout/TabBar.svelte CHANGED
@@ -58,7 +58,75 @@ div > :global(div > .bar) {
58
58
  var(--_bg-base),
59
59
  var(--_bg-mix-color) var(--_bg-mix-amount)
60
60
  );
61
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
61
+ --_color: color-mix(
62
+ in srgb,
63
+ var(--_fg-base),
64
+ var(--_fg-mix-color) var(--_fg-mix-amount)
65
+ );
66
+ --muted-color: var(--muted-color-override, var(--_background-color));
67
+ --primary-text-fg: var(
68
+ --primary-text-fg-override,
69
+ color-mix(
70
+ in srgb,
71
+ var(--_color),
72
+ var(--primary-color)
73
+ var(--primary-text-amount, var(--text-amount, 50%))
74
+ )
75
+ );
76
+ --secondary-text-fg: var(
77
+ --secondary-text-fg-override,
78
+ color-mix(
79
+ in srgb,
80
+ var(--_color),
81
+ var(--secondary-color)
82
+ var(--secondary-text-amount, var(--text-amount, 50%))
83
+ )
84
+ );
85
+ --info-text-fg: var(
86
+ --info-text-fg-override,
87
+ color-mix(
88
+ in srgb,
89
+ var(--_color),
90
+ var(--info-color)
91
+ var(--info-text-amount, var(--text-amount, 50%))
92
+ )
93
+ );
94
+ --success-text-fg: var(
95
+ --success-text-fg-override,
96
+ color-mix(
97
+ in srgb,
98
+ var(--_color),
99
+ var(--success-color)
100
+ var(--success-text-amount, var(--text-amount, 50%))
101
+ )
102
+ );
103
+ --warning-text-fg: var(
104
+ --warning-text-fg-override,
105
+ color-mix(
106
+ in srgb,
107
+ var(--_color),
108
+ var(--warning-color)
109
+ var(--warning-text-amount, var(--text-amount, 50%))
110
+ )
111
+ );
112
+ --danger-text-fg: var(
113
+ --danger-text-fg-override,
114
+ color-mix(
115
+ in srgb,
116
+ var(--_color),
117
+ var(--danger-color)
118
+ var(--danger-text-amount, var(--text-amount, 50%))
119
+ )
120
+ );
121
+ --muted-text-fg: var(
122
+ --muted-text-fg-override,
123
+ color-mix(
124
+ in srgb,
125
+ var(--_color),
126
+ var(--muted-color)
127
+ var(--muted-text-amount, var(--text-amount, 50%))
128
+ )
129
+ );
62
130
  background-color: var(--_background-color);
63
131
  color: var(--_color);
64
132
  font-family: var(--tab-bar-font-family, var(--bar-font-family, var(--surface-font-family, inherit)));