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/misc/Tag.svelte CHANGED
@@ -51,7 +51,75 @@ let style = $derived(injectVars(restProps, "tag", [
51
51
  var(--_bg-base),
52
52
  var(--_bg-mix-color) var(--_bg-mix-amount)
53
53
  );
54
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
54
+ --_color: color-mix(
55
+ in srgb,
56
+ var(--_fg-base),
57
+ var(--_fg-mix-color) var(--_fg-mix-amount)
58
+ );
59
+ --muted-color: var(--muted-color-override, var(--_background-color));
60
+ --primary-text-fg: var(
61
+ --primary-text-fg-override,
62
+ color-mix(
63
+ in srgb,
64
+ var(--_color),
65
+ var(--primary-color)
66
+ var(--primary-text-amount, var(--text-amount, 50%))
67
+ )
68
+ );
69
+ --secondary-text-fg: var(
70
+ --secondary-text-fg-override,
71
+ color-mix(
72
+ in srgb,
73
+ var(--_color),
74
+ var(--secondary-color)
75
+ var(--secondary-text-amount, var(--text-amount, 50%))
76
+ )
77
+ );
78
+ --info-text-fg: var(
79
+ --info-text-fg-override,
80
+ color-mix(
81
+ in srgb,
82
+ var(--_color),
83
+ var(--info-color)
84
+ var(--info-text-amount, var(--text-amount, 50%))
85
+ )
86
+ );
87
+ --success-text-fg: var(
88
+ --success-text-fg-override,
89
+ color-mix(
90
+ in srgb,
91
+ var(--_color),
92
+ var(--success-color)
93
+ var(--success-text-amount, var(--text-amount, 50%))
94
+ )
95
+ );
96
+ --warning-text-fg: var(
97
+ --warning-text-fg-override,
98
+ color-mix(
99
+ in srgb,
100
+ var(--_color),
101
+ var(--warning-color)
102
+ var(--warning-text-amount, var(--text-amount, 50%))
103
+ )
104
+ );
105
+ --danger-text-fg: var(
106
+ --danger-text-fg-override,
107
+ color-mix(
108
+ in srgb,
109
+ var(--_color),
110
+ var(--danger-color)
111
+ var(--danger-text-amount, var(--text-amount, 50%))
112
+ )
113
+ );
114
+ --muted-text-fg: var(
115
+ --muted-text-fg-override,
116
+ color-mix(
117
+ in srgb,
118
+ var(--_color),
119
+ var(--muted-color)
120
+ var(--muted-text-amount, var(--text-amount, 50%))
121
+ )
122
+ );
55
123
  background-color: var(--_background-color);
56
124
  color: var(--_color);
57
125
  font-family: var(--tag-font-family, inherit);
@@ -155,7 +223,75 @@ let style = $derived(injectVars(restProps, "tag", [
155
223
  var(--_bg-base),
156
224
  var(--_bg-mix-color) var(--_bg-mix-amount)
157
225
  );
158
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
226
+ --_color: color-mix(
227
+ in srgb,
228
+ var(--_fg-base),
229
+ var(--_fg-mix-color) var(--_fg-mix-amount)
230
+ );
231
+ --muted-color: var(--muted-color-override, var(--_background-color));
232
+ --primary-text-fg: var(
233
+ --primary-text-fg-override,
234
+ color-mix(
235
+ in srgb,
236
+ var(--_color),
237
+ var(--primary-color)
238
+ var(--primary-text-amount, var(--text-amount, 50%))
239
+ )
240
+ );
241
+ --secondary-text-fg: var(
242
+ --secondary-text-fg-override,
243
+ color-mix(
244
+ in srgb,
245
+ var(--_color),
246
+ var(--secondary-color)
247
+ var(--secondary-text-amount, var(--text-amount, 50%))
248
+ )
249
+ );
250
+ --info-text-fg: var(
251
+ --info-text-fg-override,
252
+ color-mix(
253
+ in srgb,
254
+ var(--_color),
255
+ var(--info-color)
256
+ var(--info-text-amount, var(--text-amount, 50%))
257
+ )
258
+ );
259
+ --success-text-fg: var(
260
+ --success-text-fg-override,
261
+ color-mix(
262
+ in srgb,
263
+ var(--_color),
264
+ var(--success-color)
265
+ var(--success-text-amount, var(--text-amount, 50%))
266
+ )
267
+ );
268
+ --warning-text-fg: var(
269
+ --warning-text-fg-override,
270
+ color-mix(
271
+ in srgb,
272
+ var(--_color),
273
+ var(--warning-color)
274
+ var(--warning-text-amount, var(--text-amount, 50%))
275
+ )
276
+ );
277
+ --danger-text-fg: var(
278
+ --danger-text-fg-override,
279
+ color-mix(
280
+ in srgb,
281
+ var(--_color),
282
+ var(--danger-color)
283
+ var(--danger-text-amount, var(--text-amount, 50%))
284
+ )
285
+ );
286
+ --muted-text-fg: var(
287
+ --muted-text-fg-override,
288
+ color-mix(
289
+ in srgb,
290
+ var(--_color),
291
+ var(--muted-color)
292
+ var(--muted-text-amount, var(--text-amount, 50%))
293
+ )
294
+ );
159
295
  background-color: var(--_background-color);
160
296
  color: var(--_color);
161
297
  }
@@ -174,7 +310,75 @@ let style = $derived(injectVars(restProps, "tag", [
174
310
  var(--_bg-base),
175
311
  var(--_bg-mix-color) var(--_bg-mix-amount)
176
312
  );
177
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
313
+ --_color: color-mix(
314
+ in srgb,
315
+ var(--_fg-base),
316
+ var(--_fg-mix-color) var(--_fg-mix-amount)
317
+ );
318
+ --muted-color: var(--muted-color-override, var(--_background-color));
319
+ --primary-text-fg: var(
320
+ --primary-text-fg-override,
321
+ color-mix(
322
+ in srgb,
323
+ var(--_color),
324
+ var(--primary-color)
325
+ var(--primary-text-amount, var(--text-amount, 50%))
326
+ )
327
+ );
328
+ --secondary-text-fg: var(
329
+ --secondary-text-fg-override,
330
+ color-mix(
331
+ in srgb,
332
+ var(--_color),
333
+ var(--secondary-color)
334
+ var(--secondary-text-amount, var(--text-amount, 50%))
335
+ )
336
+ );
337
+ --info-text-fg: var(
338
+ --info-text-fg-override,
339
+ color-mix(
340
+ in srgb,
341
+ var(--_color),
342
+ var(--info-color)
343
+ var(--info-text-amount, var(--text-amount, 50%))
344
+ )
345
+ );
346
+ --success-text-fg: var(
347
+ --success-text-fg-override,
348
+ color-mix(
349
+ in srgb,
350
+ var(--_color),
351
+ var(--success-color)
352
+ var(--success-text-amount, var(--text-amount, 50%))
353
+ )
354
+ );
355
+ --warning-text-fg: var(
356
+ --warning-text-fg-override,
357
+ color-mix(
358
+ in srgb,
359
+ var(--_color),
360
+ var(--warning-color)
361
+ var(--warning-text-amount, var(--text-amount, 50%))
362
+ )
363
+ );
364
+ --danger-text-fg: var(
365
+ --danger-text-fg-override,
366
+ color-mix(
367
+ in srgb,
368
+ var(--_color),
369
+ var(--danger-color)
370
+ var(--danger-text-amount, var(--text-amount, 50%))
371
+ )
372
+ );
373
+ --muted-text-fg: var(
374
+ --muted-text-fg-override,
375
+ color-mix(
376
+ in srgb,
377
+ var(--_color),
378
+ var(--muted-color)
379
+ var(--muted-text-amount, var(--text-amount, 50%))
380
+ )
381
+ );
178
382
  background-color: var(--_background-color);
179
383
  color: var(--_color);
180
384
  }
@@ -193,7 +397,75 @@ let style = $derived(injectVars(restProps, "tag", [
193
397
  var(--_bg-base),
194
398
  var(--_bg-mix-color) var(--_bg-mix-amount)
195
399
  );
196
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
400
+ --_color: color-mix(
401
+ in srgb,
402
+ var(--_fg-base),
403
+ var(--_fg-mix-color) var(--_fg-mix-amount)
404
+ );
405
+ --muted-color: var(--muted-color-override, var(--_background-color));
406
+ --primary-text-fg: var(
407
+ --primary-text-fg-override,
408
+ color-mix(
409
+ in srgb,
410
+ var(--_color),
411
+ var(--primary-color)
412
+ var(--primary-text-amount, var(--text-amount, 50%))
413
+ )
414
+ );
415
+ --secondary-text-fg: var(
416
+ --secondary-text-fg-override,
417
+ color-mix(
418
+ in srgb,
419
+ var(--_color),
420
+ var(--secondary-color)
421
+ var(--secondary-text-amount, var(--text-amount, 50%))
422
+ )
423
+ );
424
+ --info-text-fg: var(
425
+ --info-text-fg-override,
426
+ color-mix(
427
+ in srgb,
428
+ var(--_color),
429
+ var(--info-color)
430
+ var(--info-text-amount, var(--text-amount, 50%))
431
+ )
432
+ );
433
+ --success-text-fg: var(
434
+ --success-text-fg-override,
435
+ color-mix(
436
+ in srgb,
437
+ var(--_color),
438
+ var(--success-color)
439
+ var(--success-text-amount, var(--text-amount, 50%))
440
+ )
441
+ );
442
+ --warning-text-fg: var(
443
+ --warning-text-fg-override,
444
+ color-mix(
445
+ in srgb,
446
+ var(--_color),
447
+ var(--warning-color)
448
+ var(--warning-text-amount, var(--text-amount, 50%))
449
+ )
450
+ );
451
+ --danger-text-fg: var(
452
+ --danger-text-fg-override,
453
+ color-mix(
454
+ in srgb,
455
+ var(--_color),
456
+ var(--danger-color)
457
+ var(--danger-text-amount, var(--text-amount, 50%))
458
+ )
459
+ );
460
+ --muted-text-fg: var(
461
+ --muted-text-fg-override,
462
+ color-mix(
463
+ in srgb,
464
+ var(--_color),
465
+ var(--muted-color)
466
+ var(--muted-text-amount, var(--text-amount, 50%))
467
+ )
468
+ );
197
469
  background-color: var(--_background-color);
198
470
  color: var(--_color);
199
471
  }
@@ -212,7 +484,75 @@ let style = $derived(injectVars(restProps, "tag", [
212
484
  var(--_bg-base),
213
485
  var(--_bg-mix-color) var(--_bg-mix-amount)
214
486
  );
215
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
487
+ --_color: color-mix(
488
+ in srgb,
489
+ var(--_fg-base),
490
+ var(--_fg-mix-color) var(--_fg-mix-amount)
491
+ );
492
+ --muted-color: var(--muted-color-override, var(--_background-color));
493
+ --primary-text-fg: var(
494
+ --primary-text-fg-override,
495
+ color-mix(
496
+ in srgb,
497
+ var(--_color),
498
+ var(--primary-color)
499
+ var(--primary-text-amount, var(--text-amount, 50%))
500
+ )
501
+ );
502
+ --secondary-text-fg: var(
503
+ --secondary-text-fg-override,
504
+ color-mix(
505
+ in srgb,
506
+ var(--_color),
507
+ var(--secondary-color)
508
+ var(--secondary-text-amount, var(--text-amount, 50%))
509
+ )
510
+ );
511
+ --info-text-fg: var(
512
+ --info-text-fg-override,
513
+ color-mix(
514
+ in srgb,
515
+ var(--_color),
516
+ var(--info-color)
517
+ var(--info-text-amount, var(--text-amount, 50%))
518
+ )
519
+ );
520
+ --success-text-fg: var(
521
+ --success-text-fg-override,
522
+ color-mix(
523
+ in srgb,
524
+ var(--_color),
525
+ var(--success-color)
526
+ var(--success-text-amount, var(--text-amount, 50%))
527
+ )
528
+ );
529
+ --warning-text-fg: var(
530
+ --warning-text-fg-override,
531
+ color-mix(
532
+ in srgb,
533
+ var(--_color),
534
+ var(--warning-color)
535
+ var(--warning-text-amount, var(--text-amount, 50%))
536
+ )
537
+ );
538
+ --danger-text-fg: var(
539
+ --danger-text-fg-override,
540
+ color-mix(
541
+ in srgb,
542
+ var(--_color),
543
+ var(--danger-color)
544
+ var(--danger-text-amount, var(--text-amount, 50%))
545
+ )
546
+ );
547
+ --muted-text-fg: var(
548
+ --muted-text-fg-override,
549
+ color-mix(
550
+ in srgb,
551
+ var(--_color),
552
+ var(--muted-color)
553
+ var(--muted-text-amount, var(--text-amount, 50%))
554
+ )
555
+ );
216
556
  background-color: var(--_background-color);
217
557
  color: var(--_color);
218
558
  }
@@ -231,7 +571,75 @@ let style = $derived(injectVars(restProps, "tag", [
231
571
  var(--_bg-base),
232
572
  var(--_bg-mix-color) var(--_bg-mix-amount)
233
573
  );
234
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
574
+ --_color: color-mix(
575
+ in srgb,
576
+ var(--_fg-base),
577
+ var(--_fg-mix-color) var(--_fg-mix-amount)
578
+ );
579
+ --muted-color: var(--muted-color-override, var(--_background-color));
580
+ --primary-text-fg: var(
581
+ --primary-text-fg-override,
582
+ color-mix(
583
+ in srgb,
584
+ var(--_color),
585
+ var(--primary-color)
586
+ var(--primary-text-amount, var(--text-amount, 50%))
587
+ )
588
+ );
589
+ --secondary-text-fg: var(
590
+ --secondary-text-fg-override,
591
+ color-mix(
592
+ in srgb,
593
+ var(--_color),
594
+ var(--secondary-color)
595
+ var(--secondary-text-amount, var(--text-amount, 50%))
596
+ )
597
+ );
598
+ --info-text-fg: var(
599
+ --info-text-fg-override,
600
+ color-mix(
601
+ in srgb,
602
+ var(--_color),
603
+ var(--info-color)
604
+ var(--info-text-amount, var(--text-amount, 50%))
605
+ )
606
+ );
607
+ --success-text-fg: var(
608
+ --success-text-fg-override,
609
+ color-mix(
610
+ in srgb,
611
+ var(--_color),
612
+ var(--success-color)
613
+ var(--success-text-amount, var(--text-amount, 50%))
614
+ )
615
+ );
616
+ --warning-text-fg: var(
617
+ --warning-text-fg-override,
618
+ color-mix(
619
+ in srgb,
620
+ var(--_color),
621
+ var(--warning-color)
622
+ var(--warning-text-amount, var(--text-amount, 50%))
623
+ )
624
+ );
625
+ --danger-text-fg: var(
626
+ --danger-text-fg-override,
627
+ color-mix(
628
+ in srgb,
629
+ var(--_color),
630
+ var(--danger-color)
631
+ var(--danger-text-amount, var(--text-amount, 50%))
632
+ )
633
+ );
634
+ --muted-text-fg: var(
635
+ --muted-text-fg-override,
636
+ color-mix(
637
+ in srgb,
638
+ var(--_color),
639
+ var(--muted-color)
640
+ var(--muted-text-amount, var(--text-amount, 50%))
641
+ )
642
+ );
235
643
  background-color: var(--_background-color);
236
644
  color: var(--_color);
237
645
  }</style>
package/dist/overlays/Dialog.svelte CHANGED
@@ -1,4 +1,4 @@
1
- <script lang="ts">import MiniButton from "../controls/MiniButton.svelte";
1
+ <script lang="ts">import CircleButton from "../controls/CircleButton.svelte";
2
2
  import { copyCSSVariables, injectVars } from "../util";
3
3
  let { open = true, modal = true, dismissible = false, children, onClose, onclose: oncloseProp = null, ...restProps } = $props();
4
4
  let onclose = $derived(oncloseProp || onClose);
@@ -57,7 +57,7 @@ let ref;
57
57
  <dialog bind:this={dialogElement} {onclose} {...restProps}>
58
58
  <div class="close-bar">
59
59
  <div class="close-button">
60
- <MiniButton onclick={onclose}>&times;</MiniButton>
60
+ <CircleButton onclick={onclose}>&times;</CircleButton>
61
61
  </div>
62
62
  </div>
63
63
  {@render children?.()}
@@ -115,7 +115,75 @@ dialog {
115
115
  var(--_bg-base),
116
116
  var(--_bg-mix-color) var(--_bg-mix-amount)
117
117
  );
118
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
118
+ --_color: color-mix(
119
+ in srgb,
120
+ var(--_fg-base),
121
+ var(--_fg-mix-color) var(--_fg-mix-amount)
122
+ );
123
+ --muted-color: var(--muted-color-override, var(--_background-color));
124
+ --primary-text-fg: var(
125
+ --primary-text-fg-override,
126
+ color-mix(
127
+ in srgb,
128
+ var(--_color),
129
+ var(--primary-color)
130
+ var(--primary-text-amount, var(--text-amount, 50%))
131
+ )
132
+ );
133
+ --secondary-text-fg: var(
134
+ --secondary-text-fg-override,
135
+ color-mix(
136
+ in srgb,
137
+ var(--_color),
138
+ var(--secondary-color)
139
+ var(--secondary-text-amount, var(--text-amount, 50%))
140
+ )
141
+ );
142
+ --info-text-fg: var(
143
+ --info-text-fg-override,
144
+ color-mix(
145
+ in srgb,
146
+ var(--_color),
147
+ var(--info-color)
148
+ var(--info-text-amount, var(--text-amount, 50%))
149
+ )
150
+ );
151
+ --success-text-fg: var(
152
+ --success-text-fg-override,
153
+ color-mix(
154
+ in srgb,
155
+ var(--_color),
156
+ var(--success-color)
157
+ var(--success-text-amount, var(--text-amount, 50%))
158
+ )
159
+ );
160
+ --warning-text-fg: var(
161
+ --warning-text-fg-override,
162
+ color-mix(
163
+ in srgb,
164
+ var(--_color),
165
+ var(--warning-color)
166
+ var(--warning-text-amount, var(--text-amount, 50%))
167
+ )
168
+ );
169
+ --danger-text-fg: var(
170
+ --danger-text-fg-override,
171
+ color-mix(
172
+ in srgb,
173
+ var(--_color),
174
+ var(--danger-color)
175
+ var(--danger-text-amount, var(--text-amount, 50%))
176
+ )
177
+ );
178
+ --muted-text-fg: var(
179
+ --muted-text-fg-override,
180
+ color-mix(
181
+ in srgb,
182
+ var(--_color),
183
+ var(--muted-color)
184
+ var(--muted-text-amount, var(--text-amount, 50%))
185
+ )
186
+ );
119
187
  background-color: var(--_background-color);
120
188
  color: var(--_color);
121
189
  max-width: var(--dialog-line-width, var(--top-line-width, var(--surface-line-width, var(--block-line-width, var(--line-width, unset)))));