contain-css-svelte 1.4.1 → 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 +31 -6
  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/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.1",
3
+ "version": "1.4.2",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "capture:review": "node scripts/capture-review.mjs",