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/MenuList.svelte CHANGED
@@ -46,7 +46,75 @@ const style = $derived(injectVars(restProps, "menu", [
46
46
  var(--_bg-base),
47
47
  var(--_bg-mix-color) var(--_bg-mix-amount)
48
48
  );
49
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
49
+ --_color: color-mix(
50
+ in srgb,
51
+ var(--_fg-base),
52
+ var(--_fg-mix-color) var(--_fg-mix-amount)
53
+ );
54
+ --muted-color: var(--muted-color-override, var(--_background-color));
55
+ --primary-text-fg: var(
56
+ --primary-text-fg-override,
57
+ color-mix(
58
+ in srgb,
59
+ var(--_color),
60
+ var(--primary-color)
61
+ var(--primary-text-amount, var(--text-amount, 50%))
62
+ )
63
+ );
64
+ --secondary-text-fg: var(
65
+ --secondary-text-fg-override,
66
+ color-mix(
67
+ in srgb,
68
+ var(--_color),
69
+ var(--secondary-color)
70
+ var(--secondary-text-amount, var(--text-amount, 50%))
71
+ )
72
+ );
73
+ --info-text-fg: var(
74
+ --info-text-fg-override,
75
+ color-mix(
76
+ in srgb,
77
+ var(--_color),
78
+ var(--info-color)
79
+ var(--info-text-amount, var(--text-amount, 50%))
80
+ )
81
+ );
82
+ --success-text-fg: var(
83
+ --success-text-fg-override,
84
+ color-mix(
85
+ in srgb,
86
+ var(--_color),
87
+ var(--success-color)
88
+ var(--success-text-amount, var(--text-amount, 50%))
89
+ )
90
+ );
91
+ --warning-text-fg: var(
92
+ --warning-text-fg-override,
93
+ color-mix(
94
+ in srgb,
95
+ var(--_color),
96
+ var(--warning-color)
97
+ var(--warning-text-amount, var(--text-amount, 50%))
98
+ )
99
+ );
100
+ --danger-text-fg: var(
101
+ --danger-text-fg-override,
102
+ color-mix(
103
+ in srgb,
104
+ var(--_color),
105
+ var(--danger-color)
106
+ var(--danger-text-amount, var(--text-amount, 50%))
107
+ )
108
+ );
109
+ --muted-text-fg: var(
110
+ --muted-text-fg-override,
111
+ color-mix(
112
+ in srgb,
113
+ var(--_color),
114
+ var(--muted-color)
115
+ var(--muted-text-amount, var(--text-amount, 50%))
116
+ )
117
+ );
50
118
  background-color: var(--_background-color);
51
119
  color: var(--_color);
52
120
  overflow: hidden;
@@ -189,7 +257,75 @@ const style = $derived(injectVars(restProps, "menu", [
189
257
  var(--_bg-base),
190
258
  var(--_bg-mix-color) var(--_bg-mix-amount)
191
259
  );
192
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
260
+ --_color: color-mix(
261
+ in srgb,
262
+ var(--_fg-base),
263
+ var(--_fg-mix-color) var(--_fg-mix-amount)
264
+ );
265
+ --muted-color: var(--muted-color-override, var(--_background-color));
266
+ --primary-text-fg: var(
267
+ --primary-text-fg-override,
268
+ color-mix(
269
+ in srgb,
270
+ var(--_color),
271
+ var(--primary-color)
272
+ var(--primary-text-amount, var(--text-amount, 50%))
273
+ )
274
+ );
275
+ --secondary-text-fg: var(
276
+ --secondary-text-fg-override,
277
+ color-mix(
278
+ in srgb,
279
+ var(--_color),
280
+ var(--secondary-color)
281
+ var(--secondary-text-amount, var(--text-amount, 50%))
282
+ )
283
+ );
284
+ --info-text-fg: var(
285
+ --info-text-fg-override,
286
+ color-mix(
287
+ in srgb,
288
+ var(--_color),
289
+ var(--info-color)
290
+ var(--info-text-amount, var(--text-amount, 50%))
291
+ )
292
+ );
293
+ --success-text-fg: var(
294
+ --success-text-fg-override,
295
+ color-mix(
296
+ in srgb,
297
+ var(--_color),
298
+ var(--success-color)
299
+ var(--success-text-amount, var(--text-amount, 50%))
300
+ )
301
+ );
302
+ --warning-text-fg: var(
303
+ --warning-text-fg-override,
304
+ color-mix(
305
+ in srgb,
306
+ var(--_color),
307
+ var(--warning-color)
308
+ var(--warning-text-amount, var(--text-amount, 50%))
309
+ )
310
+ );
311
+ --danger-text-fg: var(
312
+ --danger-text-fg-override,
313
+ color-mix(
314
+ in srgb,
315
+ var(--_color),
316
+ var(--danger-color)
317
+ var(--danger-text-amount, var(--text-amount, 50%))
318
+ )
319
+ );
320
+ --muted-text-fg: var(
321
+ --muted-text-fg-override,
322
+ color-mix(
323
+ in srgb,
324
+ var(--_color),
325
+ var(--muted-color)
326
+ var(--muted-text-amount, var(--text-amount, 50%))
327
+ )
328
+ );
193
329
  background-color: var(--_background-color);
194
330
  color: var(--_color);
195
331
  box-sizing: border-box;
@@ -257,7 +393,75 @@ const style = $derived(injectVars(restProps, "menu", [
257
393
  var(--_bg-base),
258
394
  var(--_bg-mix-color) var(--_bg-mix-amount)
259
395
  );
260
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
396
+ --_color: color-mix(
397
+ in srgb,
398
+ var(--_fg-base),
399
+ var(--_fg-mix-color) var(--_fg-mix-amount)
400
+ );
401
+ --muted-color: var(--muted-color-override, var(--_background-color));
402
+ --primary-text-fg: var(
403
+ --primary-text-fg-override,
404
+ color-mix(
405
+ in srgb,
406
+ var(--_color),
407
+ var(--primary-color)
408
+ var(--primary-text-amount, var(--text-amount, 50%))
409
+ )
410
+ );
411
+ --secondary-text-fg: var(
412
+ --secondary-text-fg-override,
413
+ color-mix(
414
+ in srgb,
415
+ var(--_color),
416
+ var(--secondary-color)
417
+ var(--secondary-text-amount, var(--text-amount, 50%))
418
+ )
419
+ );
420
+ --info-text-fg: var(
421
+ --info-text-fg-override,
422
+ color-mix(
423
+ in srgb,
424
+ var(--_color),
425
+ var(--info-color)
426
+ var(--info-text-amount, var(--text-amount, 50%))
427
+ )
428
+ );
429
+ --success-text-fg: var(
430
+ --success-text-fg-override,
431
+ color-mix(
432
+ in srgb,
433
+ var(--_color),
434
+ var(--success-color)
435
+ var(--success-text-amount, var(--text-amount, 50%))
436
+ )
437
+ );
438
+ --warning-text-fg: var(
439
+ --warning-text-fg-override,
440
+ color-mix(
441
+ in srgb,
442
+ var(--_color),
443
+ var(--warning-color)
444
+ var(--warning-text-amount, var(--text-amount, 50%))
445
+ )
446
+ );
447
+ --danger-text-fg: var(
448
+ --danger-text-fg-override,
449
+ color-mix(
450
+ in srgb,
451
+ var(--_color),
452
+ var(--danger-color)
453
+ var(--danger-text-amount, var(--text-amount, 50%))
454
+ )
455
+ );
456
+ --muted-text-fg: var(
457
+ --muted-text-fg-override,
458
+ color-mix(
459
+ in srgb,
460
+ var(--_color),
461
+ var(--muted-color)
462
+ var(--muted-text-amount, var(--text-amount, 50%))
463
+ )
464
+ );
261
465
  background-color: var(--_background-color);
262
466
  color: var(--_color);
263
467
  }
@@ -277,7 +481,75 @@ const style = $derived(injectVars(restProps, "menu", [
277
481
  var(--_bg-base),
278
482
  var(--_bg-mix-color) var(--_bg-mix-amount)
279
483
  );
280
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
484
+ --_color: color-mix(
485
+ in srgb,
486
+ var(--_fg-base),
487
+ var(--_fg-mix-color) var(--_fg-mix-amount)
488
+ );
489
+ --muted-color: var(--muted-color-override, var(--_background-color));
490
+ --primary-text-fg: var(
491
+ --primary-text-fg-override,
492
+ color-mix(
493
+ in srgb,
494
+ var(--_color),
495
+ var(--primary-color)
496
+ var(--primary-text-amount, var(--text-amount, 50%))
497
+ )
498
+ );
499
+ --secondary-text-fg: var(
500
+ --secondary-text-fg-override,
501
+ color-mix(
502
+ in srgb,
503
+ var(--_color),
504
+ var(--secondary-color)
505
+ var(--secondary-text-amount, var(--text-amount, 50%))
506
+ )
507
+ );
508
+ --info-text-fg: var(
509
+ --info-text-fg-override,
510
+ color-mix(
511
+ in srgb,
512
+ var(--_color),
513
+ var(--info-color)
514
+ var(--info-text-amount, var(--text-amount, 50%))
515
+ )
516
+ );
517
+ --success-text-fg: var(
518
+ --success-text-fg-override,
519
+ color-mix(
520
+ in srgb,
521
+ var(--_color),
522
+ var(--success-color)
523
+ var(--success-text-amount, var(--text-amount, 50%))
524
+ )
525
+ );
526
+ --warning-text-fg: var(
527
+ --warning-text-fg-override,
528
+ color-mix(
529
+ in srgb,
530
+ var(--_color),
531
+ var(--warning-color)
532
+ var(--warning-text-amount, var(--text-amount, 50%))
533
+ )
534
+ );
535
+ --danger-text-fg: var(
536
+ --danger-text-fg-override,
537
+ color-mix(
538
+ in srgb,
539
+ var(--_color),
540
+ var(--danger-color)
541
+ var(--danger-text-amount, var(--text-amount, 50%))
542
+ )
543
+ );
544
+ --muted-text-fg: var(
545
+ --muted-text-fg-override,
546
+ color-mix(
547
+ in srgb,
548
+ var(--_color),
549
+ var(--muted-color)
550
+ var(--muted-text-amount, var(--text-amount, 50%))
551
+ )
552
+ );
281
553
  background-color: var(--_background-color);
282
554
  color: var(--_color);
283
555
  }</style>
package/dist/layout/Page.svelte CHANGED
@@ -136,7 +136,75 @@ footer {
136
136
  var(--_bg-base),
137
137
  var(--_bg-mix-color) var(--_bg-mix-amount)
138
138
  );
139
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
139
+ --_color: color-mix(
140
+ in srgb,
141
+ var(--_fg-base),
142
+ var(--_fg-mix-color) var(--_fg-mix-amount)
143
+ );
144
+ --muted-color: var(--muted-color-override, var(--_background-color));
145
+ --primary-text-fg: var(
146
+ --primary-text-fg-override,
147
+ color-mix(
148
+ in srgb,
149
+ var(--_color),
150
+ var(--primary-color)
151
+ var(--primary-text-amount, var(--text-amount, 50%))
152
+ )
153
+ );
154
+ --secondary-text-fg: var(
155
+ --secondary-text-fg-override,
156
+ color-mix(
157
+ in srgb,
158
+ var(--_color),
159
+ var(--secondary-color)
160
+ var(--secondary-text-amount, var(--text-amount, 50%))
161
+ )
162
+ );
163
+ --info-text-fg: var(
164
+ --info-text-fg-override,
165
+ color-mix(
166
+ in srgb,
167
+ var(--_color),
168
+ var(--info-color)
169
+ var(--info-text-amount, var(--text-amount, 50%))
170
+ )
171
+ );
172
+ --success-text-fg: var(
173
+ --success-text-fg-override,
174
+ color-mix(
175
+ in srgb,
176
+ var(--_color),
177
+ var(--success-color)
178
+ var(--success-text-amount, var(--text-amount, 50%))
179
+ )
180
+ );
181
+ --warning-text-fg: var(
182
+ --warning-text-fg-override,
183
+ color-mix(
184
+ in srgb,
185
+ var(--_color),
186
+ var(--warning-color)
187
+ var(--warning-text-amount, var(--text-amount, 50%))
188
+ )
189
+ );
190
+ --danger-text-fg: var(
191
+ --danger-text-fg-override,
192
+ color-mix(
193
+ in srgb,
194
+ var(--_color),
195
+ var(--danger-color)
196
+ var(--danger-text-amount, var(--text-amount, 50%))
197
+ )
198
+ );
199
+ --muted-text-fg: var(
200
+ --muted-text-fg-override,
201
+ color-mix(
202
+ in srgb,
203
+ var(--_color),
204
+ var(--muted-color)
205
+ var(--muted-text-amount, var(--text-amount, 50%))
206
+ )
207
+ );
140
208
  background-color: var(--_background-color);
141
209
  color: var(--_color);
142
210
  font-family: var(--page-font-family, var(--surface-font-family, inherit));
@@ -228,7 +296,75 @@ footer {
228
296
  var(--_bg-base),
229
297
  var(--_bg-mix-color) var(--_bg-mix-amount)
230
298
  );
231
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
299
+ --_color: color-mix(
300
+ in srgb,
301
+ var(--_fg-base),
302
+ var(--_fg-mix-color) var(--_fg-mix-amount)
303
+ );
304
+ --muted-color: var(--muted-color-override, var(--_background-color));
305
+ --primary-text-fg: var(
306
+ --primary-text-fg-override,
307
+ color-mix(
308
+ in srgb,
309
+ var(--_color),
310
+ var(--primary-color)
311
+ var(--primary-text-amount, var(--text-amount, 50%))
312
+ )
313
+ );
314
+ --secondary-text-fg: var(
315
+ --secondary-text-fg-override,
316
+ color-mix(
317
+ in srgb,
318
+ var(--_color),
319
+ var(--secondary-color)
320
+ var(--secondary-text-amount, var(--text-amount, 50%))
321
+ )
322
+ );
323
+ --info-text-fg: var(
324
+ --info-text-fg-override,
325
+ color-mix(
326
+ in srgb,
327
+ var(--_color),
328
+ var(--info-color)
329
+ var(--info-text-amount, var(--text-amount, 50%))
330
+ )
331
+ );
332
+ --success-text-fg: var(
333
+ --success-text-fg-override,
334
+ color-mix(
335
+ in srgb,
336
+ var(--_color),
337
+ var(--success-color)
338
+ var(--success-text-amount, var(--text-amount, 50%))
339
+ )
340
+ );
341
+ --warning-text-fg: var(
342
+ --warning-text-fg-override,
343
+ color-mix(
344
+ in srgb,
345
+ var(--_color),
346
+ var(--warning-color)
347
+ var(--warning-text-amount, var(--text-amount, 50%))
348
+ )
349
+ );
350
+ --danger-text-fg: var(
351
+ --danger-text-fg-override,
352
+ color-mix(
353
+ in srgb,
354
+ var(--_color),
355
+ var(--danger-color)
356
+ var(--danger-text-amount, var(--text-amount, 50%))
357
+ )
358
+ );
359
+ --muted-text-fg: var(
360
+ --muted-text-fg-override,
361
+ color-mix(
362
+ in srgb,
363
+ var(--_color),
364
+ var(--muted-color)
365
+ var(--muted-text-amount, var(--text-amount, 50%))
366
+ )
367
+ );
232
368
  background-color: var(--_background-color);
233
369
  color: var(--_color);
234
370
  }