contain-css-svelte 1.4.0 → 1.4.2

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 (50) hide show
  1. package/dist/Card.svelte +25 -0
  2. package/dist/controls/Button.svelte +43 -18
  3. package/dist/controls/ButtonLink.svelte +31 -92
  4. package/dist/controls/Checkbox.svelte +34 -4
  5. package/dist/controls/CircleButton.svelte +36 -95
  6. package/dist/controls/Input.svelte +25 -0
  7. package/dist/controls/RadioButton.svelte +27 -2
  8. package/dist/controls/Select.svelte +25 -0
  9. package/dist/controls/Slider.svelte +25 -0
  10. package/dist/controls/TabItem.svelte +25 -0
  11. package/dist/controls/Toggle.svelte +27 -2
  12. package/dist/dropdowns/DropdownMenu.svelte +60 -6
  13. package/dist/layout/Accordion.svelte +28 -3
  14. package/dist/layout/Bar.svelte +25 -0
  15. package/dist/layout/ColumnContainer.svelte +25 -0
  16. package/dist/layout/Columns.svelte +25 -0
  17. package/dist/layout/Container.svelte +25 -0
  18. package/dist/layout/DataList.svelte +25 -0
  19. package/dist/layout/DataListItem.svelte +28 -3
  20. package/dist/layout/Fieldset.svelte +25 -0
  21. package/dist/layout/Form.svelte +25 -0
  22. package/dist/layout/FormItem.svelte +25 -0
  23. package/dist/layout/GridLayout.svelte +25 -0
  24. package/dist/layout/Hero.svelte +35 -0
  25. package/dist/layout/Inline.svelte +25 -0
  26. package/dist/layout/MenuList.svelte +36 -11
  27. package/dist/layout/Page.svelte +25 -0
  28. package/dist/layout/RowContainer.svelte +25 -0
  29. package/dist/layout/Sidebar.svelte +37 -7
  30. package/dist/layout/SidebarContainer.svelte +25 -0
  31. package/dist/layout/SplitPane.svelte +25 -0
  32. package/dist/layout/Stack.svelte +25 -0
  33. package/dist/layout/TabBar.svelte +25 -0
  34. package/dist/layout/Table.svelte +75 -10
  35. package/dist/layout/Tile.svelte +28 -3
  36. package/dist/misc/CodeInner.svelte +49 -22
  37. package/dist/misc/Progress.svelte +25 -0
  38. package/dist/misc/Tag.svelte +25 -0
  39. package/dist/overlays/Dialog.svelte +58 -0
  40. package/dist/overlays/Tooltip.svelte +57 -1
  41. package/dist/sass/_affordances.scss +10 -4
  42. package/dist/sass/_typography.scss +53 -0
  43. package/dist/typography/TextLayout.svelte +25 -0
  44. package/dist/vars/affordances.css +9 -4
  45. package/dist/vars/code.css +12 -0
  46. package/dist/vars/colors.css +24 -19
  47. package/dist/vars/defaults.css +45 -23
  48. package/dist/vars/themes/dark.css +3 -3
  49. package/dist/vars/themes/light.css +34 -31
  50. package/package.json +1 -1
package/dist/typography/TextLayout.svelte CHANGED
@@ -33,6 +33,31 @@ const el = $derived(elementProps(restProps, "text-layout", ["marginBlock", "marg
33
33
  text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
34
34
  has to happen where the real element is, in the global consumer rule; only
35
35
  the VALUES move to context vars here. */
36
+ /* Text reset for an overlay's root element: a tooltip, popover menu or dialog
37
+ that sits in the DOM wherever its trigger was placed.
38
+
39
+ The top layer changes how an element paints and where it is positioned, not
40
+ what it inherits. A popover declared inside a `white-space: nowrap` table
41
+ cell is nowrap too, and one inside a bold, uppercase, centred header is
42
+ bold, uppercase and centred -- styles that belong to the trigger's context,
43
+ not to the overlay. typography-props() doesn't stop that: its chains end in
44
+ `unset`, which for an inherited property means "take the parent's value".
45
+
46
+ So this re-declares every inherited text property with a real default at
47
+ the end of the same variable chain. The vars still win (--tooltip-*, then
48
+ the category, then the global), and custom properties still inherit --
49
+ that is how theming reaches an overlay -- but when nothing is set, the
50
+ overlay gets its own defaults instead of its host's.
51
+
52
+ INCLUDE IT AFTER typography-props() / typography-container-props() in the
53
+ same rule: it has to beat their `unset` fallbacks by source order.
54
+
55
+ Deliberately left inheriting:
56
+ - direction, writing-mode: the document's script direction is the
57
+ overlay's too.
58
+ - visibility: a hidden subtree should not be able to show an overlay.
59
+ - font-family: every theme defines --font-family at :root, and there is no
60
+ neutral value to fall back to that would beat "the page's font". */
36
61
  /* Logical, not top/bottom/left/right: margin-block/margin-inline already take
37
62
  one value (both sides equal) or two (start end), so there is no separate
38
63
  "which side" prop to remember and no 4-value shorthand order to get wrong.
package/dist/vars/affordances.css CHANGED
@@ -43,7 +43,10 @@
43
43
  --checkbox-transition: 400ms;
44
44
  --checked-weight: var(--bold);
45
45
  --grab-bar-hover-base-color-percentage: 88%;
46
- --grab-bar-hover-color-mix: var(--hover-color-mix, white);
46
+ --grab-bar-hover-color-mix: var(
47
+ --hover-color-mix,
48
+ var(--grab-bar-fg, var(--sidebar-fg, var(--fg)))
49
+ );
47
50
  --grab-bar-active-base-color-percentage: 80%;
48
51
  --grab-bar-active-color-mix: var(--active-color-mix, black);
49
52
  --grab-bar-shadow-color: color-mix(
@@ -52,14 +55,14 @@
52
55
  transparent
53
56
  );
54
57
  --grab-bar-hover-bg: color-mix(
55
- in oklch,
58
+ in oklab,
56
59
  var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
57
60
  var(--grab-bar-hover-base-color-percentage, 88%),
58
61
  var(--grab-bar-hover-color-mix, white)
59
62
  calc(100% - var(--grab-bar-hover-base-color-percentage, 88%))
60
63
  );
61
64
  --grab-bar-active-bg: color-mix(
62
- in oklch,
65
+ in oklab,
63
66
  var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
64
67
  var(--grab-bar-active-base-color-percentage, 80%),
65
68
  var(--grab-bar-active-color-mix, black)
@@ -81,7 +84,9 @@
81
84
  --scrollbar-track-bg: transparent;
82
85
 
83
86
  --hover-base-color-percentage: 90%;
84
- --hover-color-mix: white;
87
+ /* --hover-color-mix is deliberately unset: hovers mix toward each
88
+ element's own text color (see clickable-hover-affordance). Set it to
89
+ force one direction, e.g. black. */
85
90
  --active-base-color-percentage: 90%;
86
91
  --active-color-mix: black;
87
92
  --disabled-base-color-percentage: 50%;
package/dist/vars/code.css CHANGED
@@ -4,4 +4,16 @@
4
4
  --code-tab-size: 4;
5
5
  --code-width: min(75em, 100%);
6
6
  --code-height: auto;
7
+ /* Token backgrounds must be explicit: each token's color-props chain ends
8
+ with no fallback, and an unset custom property inherits, so without these
9
+ an ancestor's --bg would paint behind every token. Themes that style
10
+ tokens already set these; this covers themes that don't. */
11
+ --code-comment-bg: transparent;
12
+ --code-string-bg: transparent;
13
+ --code-keyword-bg: transparent;
14
+ --code-attr-name-bg: transparent;
15
+ --code-tag-bg: transparent;
16
+ --code-function-bg: transparent;
17
+ --code-variable-bg: transparent;
18
+ --code-operator-bg: transparent;
7
19
  }
package/dist/vars/colors.css CHANGED
@@ -3,18 +3,18 @@
3
3
  --muted-text-amount: 20%;
4
4
  --white: #fff;
5
5
  --black: #222;
6
- --primary-bg: var(--material-color-blue-600);
7
- --primary-color: var(--material-color-blue-600);
6
+ --primary-bg: var(--material-color-indigo-600);
7
+ --primary-color: var(--material-color-indigo-600);
8
8
  --primary-fg: var(--white);
9
- --secondary-bg: var(--material-color-blue-grey-100);
10
- --secondary-color: var(--material-color-blue-grey-100);
11
- --secondary-fg: var(--material-color-grey-900);
9
+ --secondary-bg: var(--material-color-indigo-50);
10
+ --secondary-color: var(--material-color-indigo-50);
11
+ --secondary-fg: var(--material-color-indigo-900);
12
12
  --inactive-bg: var(--material-color-grey-400);
13
13
  --inactive-fg: var(--material-color-grey-900);
14
14
 
15
15
  /* Fallback colors - themes can override these */
16
- --bg: var(--material-color-grey-50);
17
- --fg: var(--material-color-grey-900);
16
+ --bg: #fcfcff;
17
+ --fg: #1b1d2e;
18
18
 
19
19
  --stripe-fg: var(--menu-fg, var(--fg));
20
20
  --stripe-bg: color-mix(
@@ -23,21 +23,26 @@
23
23
  var(--menu-fg, var(--fg)) 6%
24
24
  );
25
25
  --shadow-color: color-mix(in srgb, var(--fg) 10%, rgba(34, 34, 34, 0.2));
26
- --border-color: var(--fg);
27
- --warning-bg: var(--material-color-orange-600);
28
- --warning-color: var(--material-color-orange-600);
29
- --warning-fg: var(--white);
26
+ /* Derived from the page pair rather than hard-coded, so a theme that only
27
+ sets --bg/--fg (light or dark) still gets a visible but quiet border. */
28
+ --border-color: color-mix(in oklab, var(--fg) 35%, var(--bg));
29
+ /* Semantic pairs meet WCAG AA (4.5:1) for button-sized text. Warning is
30
+ amber with dark text: no orange dark enough for white text still reads
31
+ as "warning" rather than "danger". */
32
+ --warning-bg: var(--material-color-amber-400);
33
+ --warning-color: var(--material-color-amber-400);
34
+ --warning-fg: var(--material-color-grey-900);
30
35
  --warning-text-transform: uppercase;
31
36
 
32
37
  /* Semantic color variants */
33
- --danger-bg: var(--material-color-red-600);
34
- --danger-color: var(--material-color-red-600);
38
+ --danger-bg: var(--material-color-red-700);
39
+ --danger-color: var(--material-color-red-700);
35
40
  --danger-fg: var(--white);
36
- --success-bg: var(--material-color-green-600);
37
- --success-color: var(--material-color-green-600);
41
+ --success-bg: var(--material-color-green-800);
42
+ --success-color: var(--material-color-green-800);
38
43
  --success-fg: var(--white);
39
- --info-bg: var(--material-color-light-blue-600);
40
- --info-color: var(--material-color-light-blue-600);
44
+ --info-bg: var(--material-color-light-blue-800);
45
+ --info-color: var(--material-color-light-blue-800);
41
46
  --info-fg: var(--white);
42
47
 
43
48
  --surface-bg: var(--bg);
@@ -48,7 +53,7 @@
48
53
  affordances.css. The color-props(menu-item, menu, button, control) chain
49
54
  resolves it to --menu-bg / --bg at the element, keeping per-instance
50
55
  --menu-bg overrides working. */
51
- --focus-color: var(--material-color-blue-a400);
56
+ --focus-color: var(--material-color-indigo-a200);
52
57
  --tooltip-border: none;
53
58
  }
54
59
 
@@ -59,7 +64,7 @@ body {
59
64
 
60
65
  a {
61
66
  background-color: var(--link-bg, transparent);
62
- color: var(--link-fg, var(--material-color-blue-a400));
67
+ color: var(--link-fg, var(--material-color-indigo-700));
63
68
  }
64
69
 
65
70
  /* Color definitions */
package/dist/vars/defaults.css CHANGED
@@ -297,18 +297,18 @@
297
297
  --muted-text-amount: 20%;
298
298
  --white: #fff;
299
299
  --black: #222;
300
- --primary-bg: var(--material-color-blue-600);
301
- --primary-color: var(--material-color-blue-600);
300
+ --primary-bg: var(--material-color-indigo-600);
301
+ --primary-color: var(--material-color-indigo-600);
302
302
  --primary-fg: var(--white);
303
- --secondary-bg: var(--material-color-blue-grey-100);
304
- --secondary-color: var(--material-color-blue-grey-100);
305
- --secondary-fg: var(--material-color-grey-900);
303
+ --secondary-bg: var(--material-color-indigo-50);
304
+ --secondary-color: var(--material-color-indigo-50);
305
+ --secondary-fg: var(--material-color-indigo-900);
306
306
  --inactive-bg: var(--material-color-grey-400);
307
307
  --inactive-fg: var(--material-color-grey-900);
308
308
 
309
309
  /* Fallback colors - themes can override these */
310
- --bg: var(--material-color-grey-50);
311
- --fg: var(--material-color-grey-900);
310
+ --bg: #fcfcff;
311
+ --fg: #1b1d2e;
312
312
 
313
313
  --stripe-fg: var(--menu-fg, var(--fg));
314
314
  --stripe-bg: color-mix(
@@ -317,21 +317,26 @@
317
317
  var(--menu-fg, var(--fg)) 6%
318
318
  );
319
319
  --shadow-color: color-mix(in srgb, var(--fg) 10%, rgba(34, 34, 34, 0.2));
320
- --border-color: var(--fg);
321
- --warning-bg: var(--material-color-orange-600);
322
- --warning-color: var(--material-color-orange-600);
323
- --warning-fg: var(--white);
320
+ /* Derived from the page pair rather than hard-coded, so a theme that only
321
+ sets --bg/--fg (light or dark) still gets a visible but quiet border. */
322
+ --border-color: color-mix(in oklab, var(--fg) 35%, var(--bg));
323
+ /* Semantic pairs meet WCAG AA (4.5:1) for button-sized text. Warning is
324
+ amber with dark text: no orange dark enough for white text still reads
325
+ as "warning" rather than "danger". */
326
+ --warning-bg: var(--material-color-amber-400);
327
+ --warning-color: var(--material-color-amber-400);
328
+ --warning-fg: var(--material-color-grey-900);
324
329
  --warning-text-transform: uppercase;
325
330
 
326
331
  /* Semantic color variants */
327
- --danger-bg: var(--material-color-red-600);
328
- --danger-color: var(--material-color-red-600);
332
+ --danger-bg: var(--material-color-red-700);
333
+ --danger-color: var(--material-color-red-700);
329
334
  --danger-fg: var(--white);
330
- --success-bg: var(--material-color-green-600);
331
- --success-color: var(--material-color-green-600);
335
+ --success-bg: var(--material-color-green-800);
336
+ --success-color: var(--material-color-green-800);
332
337
  --success-fg: var(--white);
333
- --info-bg: var(--material-color-light-blue-600);
334
- --info-color: var(--material-color-light-blue-600);
338
+ --info-bg: var(--material-color-light-blue-800);
339
+ --info-color: var(--material-color-light-blue-800);
335
340
  --info-fg: var(--white);
336
341
 
337
342
  --surface-bg: var(--bg);
@@ -342,7 +347,7 @@
342
347
  affordances.css. The color-props(menu-item, menu, button, control) chain
343
348
  resolves it to --menu-bg / --bg at the element, keeping per-instance
344
349
  --menu-bg overrides working. */
345
- --focus-color: var(--material-color-blue-a400);
350
+ --focus-color: var(--material-color-indigo-a200);
346
351
  --tooltip-border: none;
347
352
  }
348
353
  body {
@@ -351,7 +356,7 @@ body {
351
356
  }
352
357
  a {
353
358
  background-color: var(--link-bg, transparent);
354
- color: var(--link-fg, var(--material-color-blue-a400));
359
+ color: var(--link-fg, var(--material-color-indigo-700));
355
360
  }
356
361
  /* Color definitions */
357
362
  :root {
@@ -701,6 +706,18 @@ a {
701
706
  --code-tab-size: 4;
702
707
  --code-width: min(75em, 100%);
703
708
  --code-height: auto;
709
+ /* Token backgrounds must be explicit: each token's color-props chain ends
710
+ with no fallback, and an unset custom property inherits, so without these
711
+ an ancestor's --bg would paint behind every token. Themes that style
712
+ tokens already set these; this covers themes that don't. */
713
+ --code-comment-bg: transparent;
714
+ --code-string-bg: transparent;
715
+ --code-keyword-bg: transparent;
716
+ --code-attr-name-bg: transparent;
717
+ --code-tag-bg: transparent;
718
+ --code-function-bg: transparent;
719
+ --code-variable-bg: transparent;
720
+ --code-operator-bg: transparent;
704
721
  }
705
722
  :root {
706
723
  --shadow-blur: 4px;
@@ -747,7 +764,10 @@ a {
747
764
  --checkbox-transition: 400ms;
748
765
  --checked-weight: var(--bold);
749
766
  --grab-bar-hover-base-color-percentage: 88%;
750
- --grab-bar-hover-color-mix: var(--hover-color-mix, white);
767
+ --grab-bar-hover-color-mix: var(
768
+ --hover-color-mix,
769
+ var(--grab-bar-fg, var(--sidebar-fg, var(--fg)))
770
+ );
751
771
  --grab-bar-active-base-color-percentage: 80%;
752
772
  --grab-bar-active-color-mix: var(--active-color-mix, black);
753
773
  --grab-bar-shadow-color: color-mix(
@@ -756,14 +776,14 @@ a {
756
776
  transparent
757
777
  );
758
778
  --grab-bar-hover-bg: color-mix(
759
- in oklch,
779
+ in oklab,
760
780
  var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
761
781
  var(--grab-bar-hover-base-color-percentage, 88%),
762
782
  var(--grab-bar-hover-color-mix, white)
763
783
  calc(100% - var(--grab-bar-hover-base-color-percentage, 88%))
764
784
  );
765
785
  --grab-bar-active-bg: color-mix(
766
- in oklch,
786
+ in oklab,
767
787
  var(--grab-bar-bg, var(--sidebar-bg, var(--surface-bg, var(--bg))))
768
788
  var(--grab-bar-active-base-color-percentage, 80%),
769
789
  var(--grab-bar-active-color-mix, black)
@@ -785,7 +805,9 @@ a {
785
805
  --scrollbar-track-bg: transparent;
786
806
 
787
807
  --hover-base-color-percentage: 90%;
788
- --hover-color-mix: white;
808
+ /* --hover-color-mix is deliberately unset: hovers mix toward each
809
+ element's own text color (see clickable-hover-affordance). Set it to
810
+ force one direction, e.g. black. */
789
811
  --active-base-color-percentage: 90%;
790
812
  --active-color-mix: black;
791
813
  --disabled-base-color-percentage: 50%;
package/dist/vars/themes/dark.css CHANGED
@@ -11,9 +11,9 @@
11
11
  --sidebar-fg: var(--material-color-blue-grey-50);
12
12
  --menu-bg: var(--material-color-blue-grey-900);
13
13
  --menu-fg: var(--material-color-blue-grey-50);
14
- --primary-bg: var(--material-color-light-blue-100);
15
- --primary-color: var(--material-color-light-blue-100);
16
- --primary-fg: var(--material-color-blue-grey-800);
14
+ --primary-bg: var(--material-color-indigo-200);
15
+ --primary-color: var(--material-color-indigo-200);
16
+ --primary-fg: var(--material-color-indigo-900);
17
17
  --secondary-bg: var(--material-color-blue-grey-300);
18
18
  --secondary-color: var(--material-color-blue-grey-300);
19
19
  --secondary-fg: var(--material-color-blue-grey-800);
package/dist/vars/themes/light.css CHANGED
@@ -1,50 +1,53 @@
1
1
  /* light mode */
2
2
 
3
3
  :root {
4
- --fg: var(--material-color-grey-800);
5
- --bg: #fafafa;
6
- --surface-bg: var(--material-color-grey-100);
7
- --surface-fg: var(--material-color-grey-800);
4
+ --fg: #1b1d2e;
5
+ --bg: #fcfcff;
6
+ --surface-bg: #f4f5fb;
7
+ --surface-fg: #1b1d2e;
8
8
  --container-bg: var(--surface-bg);
9
9
  --container-fg: var(--surface-fg);
10
- --sidebar-bg: var(--material-color-grey-100);
11
- --sidebar-fg: var(--material-color-grey-900);
10
+ --sidebar-bg: #eef0fa;
11
+ --sidebar-fg: #1b1d2e;
12
12
 
13
- --menu-fg: var(--material-color-grey-900);
14
- --menu-bg: var(--material-color-grey-100);
15
- --primary-bg: var(--material-color-blue-500);
16
- --primary-color: var(--material-color-blue-500);
17
- --primary-fg: var(--material-color-grey-100);
18
- --secondary-bg: var(--material-color-grey-400);
19
- --secondary-color: var(--material-color-grey-400);
20
- --secondary-fg: var(--material-color-grey-900);
13
+ --menu-fg: #1b1d2e;
14
+ --menu-bg: #ffffff;
15
+ --primary-bg: var(--material-color-indigo-600);
16
+ --primary-color: var(--material-color-indigo-600);
17
+ --primary-fg: var(--white);
18
+ --secondary-bg: var(--material-color-indigo-50);
19
+ --secondary-color: var(--material-color-indigo-50);
20
+ --secondary-fg: var(--material-color-indigo-900);
21
21
  --stripe-bg: color-mix(in srgb, var(--menu-bg) 94%, var(--menu-fg) 6%);
22
- --hover-color-mix: #444;
23
22
  --active-color-mix: black;
24
23
  --stripe-fg: var(--menu-fg);
25
- --control-bg: var(--material-color-grey-300);
26
- --control-fg: var(--material-color-grey-900);
27
- --tab-bg: var(--material-color-grey-200);
28
- --tab-fg: var(--material-color-grey-800);
24
+ --control-bg: var(--material-color-indigo-50);
25
+ --control-fg: var(--material-color-indigo-900);
26
+ --tab-bg: var(--material-color-indigo-50);
27
+ --tab-fg: var(--material-color-indigo-900);
29
28
  --tab-active-bg: #ffffff;
30
- --tab-active-fg: var(--material-color-blue-700);
31
- --tab-bar-fg: var(--material-color-grey-900);
29
+ --tab-active-fg: var(--material-color-indigo-700);
30
+ --tab-bar-fg: #1b1d2e;
32
31
 
33
32
  /* Semantic colors for light mode */
34
- --warning-bg: var(--material-color-orange-600);
35
- --warning-color: var(--material-color-orange-600);
36
- --warning-fg: var(--white);
37
- --danger-bg: var(--material-color-red-600);
38
- --danger-color: var(--material-color-red-600);
33
+ --warning-bg: var(--material-color-amber-400);
34
+ --warning-color: var(--material-color-amber-400);
35
+ --warning-fg: var(--material-color-grey-900);
36
+ --danger-bg: var(--material-color-red-700);
37
+ --danger-color: var(--material-color-red-700);
39
38
  --danger-fg: var(--white);
40
- --success-bg: var(--material-color-green-600);
41
- --success-color: var(--material-color-green-600);
39
+ --success-bg: var(--material-color-green-800);
40
+ --success-color: var(--material-color-green-800);
42
41
  --success-fg: var(--white);
43
- --info-bg: var(--material-color-light-blue-600);
44
- --info-color: var(--material-color-light-blue-600);
42
+ --info-bg: var(--material-color-light-blue-800);
43
+ --info-color: var(--material-color-light-blue-800);
45
44
  --info-fg: var(--white);
46
45
 
47
- --border-color: var(--material-color-grey-400);
46
+ --border-color: var(--material-color-indigo-300);
47
+ --focus-color: var(--material-color-indigo-a200);
48
+ --tooltip-bg: var(--material-color-indigo-900);
49
+ --tooltip-fg: var(--white);
50
+ --tooltip-arrow-color: var(--tooltip-bg);
48
51
  --input-bg: #fefefe;
49
52
  --input-fg: var(--material-color-grey-900);
50
53
  --slider-track-bg: color-mix(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contain-css-svelte",
3
- "version": "1.4.0",
3
+ "version": "1.4.2",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "capture:review": "node scripts/capture-review.mjs",