contain-css-svelte 0.0.13 → 0.0.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 (44) hide show
  1. package/dist/Card.svelte +46 -26
  2. package/dist/controls/Button.svelte +7 -2
  3. package/dist/controls/Checkbox.svelte +6 -1
  4. package/dist/controls/Input.svelte +2 -2
  5. package/dist/controls/MiniButton.svelte +11 -2
  6. package/dist/controls/RadioButton.svelte +11 -5
  7. package/dist/controls/Select.svelte +46 -30
  8. package/dist/controls/TabItem.svelte +2 -2
  9. package/dist/cssprops.js +0 -1
  10. package/dist/dropdowns/DropdownMenu.svelte +20 -17
  11. package/dist/layout/Bar.svelte +2 -2
  12. package/dist/layout/Column.svelte +3 -3
  13. package/dist/layout/Columns.svelte +2 -2
  14. package/dist/layout/Container.svelte +46 -26
  15. package/dist/layout/FormItem.svelte +2 -2
  16. package/dist/layout/GridLayout.svelte +2 -2
  17. package/dist/layout/Hero.svelte +46 -26
  18. package/dist/layout/MenuList.svelte +8 -2
  19. package/dist/layout/Page.svelte +2 -2
  20. package/dist/layout/Row.svelte +2 -2
  21. package/dist/layout/Sidebar.svelte +6 -1
  22. package/dist/layout/SplitPane.svelte +2 -2
  23. package/dist/layout/TabBar.svelte +2 -2
  24. package/dist/layout/Tile.svelte +59 -33
  25. package/dist/misc/CodeInner.svelte +2 -109
  26. package/dist/misc/Progress.svelte +288 -0
  27. package/dist/misc/Progress.svelte.d.ts +28 -0
  28. package/dist/overlays/Dialog.svelte +2 -2
  29. package/dist/overlays/Tooltip.svelte +54 -34
  30. package/dist/sass/_affordances.scss +51 -0
  31. package/dist/sass/_box.scss +112 -0
  32. package/dist/sass/_color.scss +8 -0
  33. package/dist/sass/_functions.scss +113 -0
  34. package/dist/sass/_mixins.scss +6 -418
  35. package/dist/sass/_responsive.scss +75 -0
  36. package/dist/sass/_typography.scss +116 -0
  37. package/dist/typography/TextLayout.svelte +46 -26
  38. package/dist/vars/affordances.css +6 -1
  39. package/dist/vars/colors.css +1 -0
  40. package/dist/vars/defaults.css +7 -1
  41. package/dist/vars/themes/typography-airy.css +1 -1
  42. package/dist/vars/themes/typography-browser.css +1 -1
  43. package/dist/vars/themes/typography-carbon.css +1 -1
  44. package/package.json +3 -3
package/dist/typography/TextLayout.svelte CHANGED
@@ -5,13 +5,13 @@
5
5
  <slot />
6
6
  </div>
7
7
 
8
- <style>/* Convenience groupings */
9
- /* Warning: because we define a fallback
8
+ <style>/* Warning: because we define a fallback
10
9
  media query, the media query can override the container
11
10
  if we stack a bunch of these in a row and aren't thoughtful about the order.
12
11
  Put min-width queries *after* max-width queries so that smaller
13
12
  container queries don't get their styles overridden by large media queries.
14
13
  */
14
+ /* Convenience groupings */
15
15
  div {
16
16
  max-width: var(--body-line-width, var(--text-line-width, var(--line-width, unset)));
17
17
  margin-left: auto;
@@ -70,6 +70,25 @@ div :global(h6) {
70
70
  margin-right: auto;
71
71
  margin-bottom: var(--body-heading-margin-bottom, var(--text-heading-margin-bottom, var(--heading-margin-bottom, 0)));
72
72
  margin-top: var(--body-heading-margin-top, var(--text-heading-margin-top, var(--heading-margin-top, 1.5em)));
73
+ /* Typography */
74
+ font-family: var(--body-heading-font-family, var(--text-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
75
+ text-transform: var(--body-heading-text-transform, var(--text-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
76
+ text-decoration: var(--body-heading-text-decoration, var(--text-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
77
+ font-size: var(--body-heading-font-size, var(--text-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
78
+ font-weight: var(--body-heading-font-weight, var(--text-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
79
+ line-height: var(--body-heading-line-height, var(--text-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
80
+ letter-spacing: var(--body-heading-letter-spacing, var(--text-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
81
+ text-indent: var(--body-heading-indent, var(--text-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
82
+ font-variant: var(--body-heading-font-variant, var(--text-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
83
+ text-align: var(--body-heading-text-align, var(--text-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit))));
84
+ /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
85
+ font-size: fn.var(--heading-font-size, inherit);
86
+ font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
87
+ line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
88
+ letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
89
+ text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
90
+ font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
91
+ text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
73
92
  }
74
93
  div :global(p) {
75
94
  font-family: var(--body-paragraph-font-family, var(--text-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
@@ -100,34 +119,35 @@ div :global(h6 + p) {
100
119
  text-indent: var(--body-first-paragraph-indent, var(--text-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
101
120
  font-variant: var(--body-first-paragraph-font-variant, var(--text-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
102
121
  text-align: var(--body-first-paragraph-text-align, var(--text-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
122
+ margin-block-start: var(--body-first-paragraph-margin-top, var(--text-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
103
123
  }
104
124
  div :global(p:first-of-type::first-line) {
105
- font-family: var(--body-first-line-font-family, var(--text-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit))));
106
- text-transform: var(--body-first-line-text-transform, var(--text-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit))));
107
- text-decoration: var(--body-first-line-text-decoration, var(--text-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit))));
108
- font-size: var(--body-first-line-font-size, var(--text-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit))));
109
- font-weight: var(--body-first-line-font-weight, var(--text-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit))));
110
- line-height: var(--body-first-line-line-height, var(--text-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit))));
111
- letter-spacing: var(--body-first-line-letter-spacing, var(--text-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
112
- text-indent: var(--body-first-line-indent, var(--text-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit))));
113
- font-variant: var(--body-first-line-font-variant, var(--text-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit))));
114
- text-align: var(--body-first-line-text-align, var(--text-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit))));
125
+ font-family: var(--first-line-font-family, var(--body-first-line-font-family, var(--text-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
126
+ text-transform: var(--first-line-text-transform, var(--body-first-line-text-transform, var(--text-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
127
+ text-decoration: var(--first-line-text-decoration, var(--body-first-line-text-decoration, var(--text-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
128
+ font-size: var(--first-line-font-size, var(--body-first-line-font-size, var(--text-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
129
+ font-weight: var(--first-line-font-weight, var(--body-first-line-font-weight, var(--text-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
130
+ line-height: var(--first-line-line-height, var(--body-first-line-line-height, var(--text-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
131
+ letter-spacing: var(--first-line-letter-spacing, var(--body-first-line-letter-spacing, var(--text-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
132
+ text-indent: var(--first-line-indent, var(--body-first-line-indent, var(--text-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
133
+ font-variant: var(--first-line-font-variant, var(--body-first-line-font-variant, var(--text-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
134
+ text-align: var(--first-line-text-align, var(--body-first-line-text-align, var(--text-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
115
135
  }
116
136
  div :global(p:first-of-type::first-letter) {
117
- font-family: var(--body-first-letter-font-family, var(--text-first-letter-font-family, var(--text-first-letter-font-family, inherit)));
118
- text-transform: var(--body-first-letter-text-transform, var(--text-first-letter-text-transform, var(--text-first-letter-text-transform, inherit)));
119
- text-decoration: var(--body-first-letter-text-decoration, var(--text-first-letter-text-decoration, var(--text-first-letter-text-decoration, inherit)));
120
- font-size: var(--body-first-letter-font-size, var(--text-first-letter-font-size, var(--text-first-letter-font-size, inherit)));
121
- font-weight: var(--body-first-letter-font-weight, var(--text-first-letter-font-weight, var(--text-first-letter-font-weight, inherit)));
122
- line-height: var(--body-first-letter-line-height, var(--text-first-letter-line-height, var(--text-first-letter-line-height, inherit)));
123
- letter-spacing: var(--body-first-letter-letter-spacing, var(--text-first-letter-letter-spacing, var(--text-first-letter-letter-spacing, inherit)));
124
- text-indent: var(--body-first-letter-indent, var(--text-first-letter-indent, var(--text-first-letter-indent, inherit)));
125
- font-variant: var(--body-first-letter-font-variant, var(--text-first-letter-font-variant, var(--text-first-letter-font-variant, inherit)));
126
- text-align: var(--body-first-letter-text-align, var(--text-first-letter-text-align, var(--text-first-letter-text-align, inherit)));
127
- background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
128
- color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
129
- --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
130
- --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
137
+ font-family: var(--first-letter-font-family, var(--body-first-letter-font-family, var(--text-first-letter-font-family, var(--text-first-letter-font-family, inherit))));
138
+ text-transform: var(--first-letter-text-transform, var(--body-first-letter-text-transform, var(--text-first-letter-text-transform, var(--text-first-letter-text-transform, inherit))));
139
+ text-decoration: var(--first-letter-text-decoration, var(--body-first-letter-text-decoration, var(--text-first-letter-text-decoration, var(--text-first-letter-text-decoration, inherit))));
140
+ font-size: var(--first-letter-font-size, var(--body-first-letter-font-size, var(--text-first-letter-font-size, var(--text-first-letter-font-size, inherit))));
141
+ font-weight: var(--first-letter-font-weight, var(--body-first-letter-font-weight, var(--text-first-letter-font-weight, var(--text-first-letter-font-weight, inherit))));
142
+ line-height: var(--first-letter-line-height, var(--body-first-letter-line-height, var(--text-first-letter-line-height, var(--text-first-letter-line-height, inherit))));
143
+ letter-spacing: var(--first-letter-letter-spacing, var(--body-first-letter-letter-spacing, var(--text-first-letter-letter-spacing, var(--text-first-letter-letter-spacing, inherit))));
144
+ text-indent: var(--first-letter-indent, var(--body-first-letter-indent, var(--text-first-letter-indent, var(--text-first-letter-indent, inherit))));
145
+ font-variant: var(--first-letter-font-variant, var(--body-first-letter-font-variant, var(--text-first-letter-font-variant, var(--text-first-letter-font-variant, inherit))));
146
+ text-align: var(--first-letter-text-align, var(--body-first-letter-text-align, var(--text-first-letter-text-align, var(--text-first-letter-text-align, inherit))));
147
+ --link-bg: var(--body-link-bg, var(--text-link-bg, var(--text-link-bg, inherit)));
148
+ --link-fg: var(--body-link-fg, var(--text-link-fg, var(--text-link-fg, inherit)));
149
+ background: var(--body-first-letter-bg, var(--text-first-letter-bg, var(--first-letter-bg, inherit)));
150
+ color: var(--body-first-letter-fg, var(--text-first-letter-fg, var(--first-letter-fg, inherit)));
131
151
  }
132
152
 
133
153
  div :global(code) {
package/dist/vars/affordances.css CHANGED
@@ -22,5 +22,10 @@
22
22
  --grab-bar-active-bg: #fff4;
23
23
  --grab-bar-hover-filter: drop-shadow(0 0 2px #fff);
24
24
  --grab-bar-active-filter: drop-shdaow(0 0 4px #fff);
25
- --greyed-out-filter: blur(2px) grayscale(0.5);
25
+ --greyed-out-filter: blur(2px) grayscale(0.5);
26
+ --disabled-hover-transform: none;
27
+ --disabled-transform: none;
28
+ --disabled-filter: brightness(0.9)grayscale(0.5)blur(0.5px);
29
+ --disabled-shadow-distance: var(--button-shadow-distance);
30
+ --disabled-shadow-color: var(--button-shadow-color);
26
31
  }
package/dist/vars/colors.css CHANGED
@@ -17,6 +17,7 @@
17
17
  --warning-fg: var(--white);
18
18
  --warning-text-transform: uppercase;
19
19
  --container-link-fg: var(--primary-bg);
20
+ --menu-item-bg: var(--menu-bg);
20
21
  }
21
22
 
22
23
  body {
package/dist/vars/defaults.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --warning-fg: var(--white);
39
39
  --warning-text-transform: uppercase;
40
40
  --container-link-fg: var(--primary-bg);
41
+ --menu-item-bg: var(--menu-bg);
41
42
  }
42
43
  body {
43
44
  background-color: var(--bg);
@@ -398,7 +399,12 @@ a {
398
399
  --grab-bar-active-bg: #fff4;
399
400
  --grab-bar-hover-filter: drop-shadow(0 0 2px #fff);
400
401
  --grab-bar-active-filter: drop-shdaow(0 0 4px #fff);
401
- --greyed-out-filter: blur(2px) grayscale(0.5);
402
+ --greyed-out-filter: blur(2px) grayscale(0.5);
403
+ --disabled-hover-transform: none;
404
+ --disabled-transform: none;
405
+ --disabled-filter: brightness(0.9)grayscale(0.5)blur(0.5px);
406
+ --disabled-shadow-distance: var(--button-shadow-distance);
407
+ --disabled-shadow-color: var(--button-shadow-color);
402
408
  }
403
409
  body {
404
410
  margin: 0;
package/dist/vars/themes/typography-airy.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --line-height: 1.8;
6
6
  --heading-line-height: 1;
7
7
  --bold: 400;
8
- --line-width: 30em;
8
+ --line-width: 30rem;
9
9
  --normal: 200;
10
10
  --ui-font-weight: 400;
11
11
  --code-font-size: 1em;
package/dist/vars/themes/typography-browser.css CHANGED
@@ -13,7 +13,7 @@
13
13
  --line-height: 1.4;
14
14
  --line-width: 30rem;
15
15
  --bold: bold;
16
- --heading-margin: 0.5em 0;
16
+ --heading-margin: 0.5rem 0;
17
17
  --first-heading-margin: 0;
18
18
  --heading-bg: transparent;
19
19
  --heading-fg: var(--primary-bg);
package/dist/vars/themes/typography-carbon.css CHANGED
@@ -13,7 +13,7 @@
13
13
  --heading-line-height: 1.1;
14
14
  --line-width: 30rem;
15
15
  --bold: 500;
16
- --heading-margin: 0.5em 0;
16
+ --heading-margin: 0.5rem 0;
17
17
  --first-heading-margin: 0;
18
18
  --heading-bg: transparent;
19
19
  --heading-fg: var(--primary-bg);
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "contain-css-svelte",
3
- "version": "0.0.13",
3
+ "version": "0.0.14",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build-css": "postcss src/lib/vars/defaults.css -o dist/vars/defaults.css",
7
- "build": "vite build && npm run package && npm run build-css",
7
+ "build": "NODE_ENV=production vite build && npm run package && npm run build-css",
8
8
  "add-nojekyll": "echo > build/.nojekyll",
9
9
  "preview": "vite preview",
10
10
  "package": "svelte-kit sync && svelte-package && publint",
11
- "deploy": "vite build && npm run add-nojekyll && gh-pages -d build -t true",
11
+ "deploy": "NODE_ENV=production vite build && npm run add-nojekyll && gh-pages -d build -t true",
12
12
  "prepublishOnly": "npm run package && npm run build-css",
13
13
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
14
14
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"