contain-css-svelte 0.0.2 → 0.0.4

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 (12) hide show
  1. package/dist/Card.svelte +1 -0
  2. package/dist/controls/Select.svelte +16 -4
  3. package/dist/index.d.ts +2 -1
  4. package/dist/index.js +2 -1
  5. package/dist/layout/Page.svelte +7 -0
  6. package/dist/layout/ResponsiveText.svelte +1 -2
  7. package/dist/layout/SplitPane.svelte +2 -0
  8. package/dist/layout/Tile.svelte +20 -7
  9. package/dist/sass/_mixins.scss +4 -4
  10. package/dist/vars/themes/dark.css +13 -0
  11. package/dist/vars/themes/light.css +24 -0
  12. package/package.json +8 -4
package/dist/Card.svelte CHANGED
@@ -57,6 +57,7 @@ let hasFooter = $$slots.footer;
57
57
  border: var(--card-border, var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
58
58
  display: flex;
59
59
  flex-direction: column;
60
+ margin: var(--card-margin, var(--margin, 16px));
60
61
  }
61
62
  .card :global(p), .card :global(blockquote), .card :global(dl), .card :global(ul), .card :global(ol) {
62
63
  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, 40em)));
package/dist/controls/Select.svelte CHANGED
@@ -71,10 +71,22 @@ select,
71
71
  .dropdown-wrapper {
72
72
  box-sizing: border-box;
73
73
  border: var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))))))));
74
- border-top: var(--select-border-top, var(--input-border-top, var(--menu-border-top, var(--control-border-top, var(--container-border-top, var(--border-top, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
75
- border-right: var(--select-border-right, var(--input-border-right, var(--menu-border-right, var(--control-border-right, var(--container-border-right, var(--border-right, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
76
- border-bottom: var(--select-border-bottom, var(--input-border-bottom, var(--menu-border-bottom, var(--control-border-bottom, var(--container-border-bottom, var(--border-bottom, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
77
- border-left: var(--select-border-left, var(--input-border-left, var(--menu-border-left, var(--control-border-left, var(--container-border-left, var(--border-left, var(--select-border, var(--input-border, var(--menu-border, var(--control-border, var(--border, container)))))))))));
74
+ /* border-top: var-with-fallbacks(--border-top,
75
+ append($prefixes,
76
+ var-with-fallbacks(--border,$prefixes...)
77
+ )...) */
78
+ /* border-right: var-with-fallbacks(--border-right,
79
+ append($prefixes,
80
+ var-with-fallbacks(--border,$prefixes...)
81
+ )...) */
82
+ /* border-bottom: var-with-fallbacks(--border-bottom,
83
+ append($prefixes,
84
+ var-with-fallbacks(--border,$prefixes...)
85
+ )...) */
86
+ /* border-left: var-with-fallbacks(--border-left,
87
+ append($prefixes,
88
+ var-with-fallbacks(--border,$prefixes...)
89
+ )...) */
78
90
  padding: var(--select-padding, var(--input-padding, var(--menu-padding, var(--control-padding, var(--container-padding, var(--padding, 4px))))));
79
91
  border-radius: var(--select-square-radius, var(--input-square-radius, var(--menu-square-radius, var(--control-square-radius, var(--container-square-radius, var(--square-radius, 0))))));
80
92
  background: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, white))))));
package/dist/index.d.ts CHANGED
@@ -23,10 +23,11 @@ import TabBar from "./layout/TabBar.svelte";
23
23
  import Tile from "./layout/Tile.svelte";
24
24
  import Code from "./misc/Code.svelte";
25
25
  import TextLayout from "./typography/TextLayout.svelte";
26
+ import Sidebar from "./layout/Sidebar.svelte";
26
27
  export { Hero };
27
28
  export { TabItem };
28
29
  export { Button, Checkbox, Input, Slider, RadioButton, MiniButton, Select };
29
30
  export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
30
31
  export { TextLayout, Code };
31
32
  export { Card, Tile, FormItem };
32
- export { Row, Column, Columns, SplitPane };
33
+ export { Row, Column, Columns, SplitPane, Sidebar };
package/dist/index.js CHANGED
@@ -24,10 +24,11 @@ import TabBar from "./layout/TabBar.svelte";
24
24
  import Tile from "./layout/Tile.svelte";
25
25
  import Code from "./misc/Code.svelte";
26
26
  import TextLayout from "./typography/TextLayout.svelte";
27
+ import Sidebar from "./layout/Sidebar.svelte";
27
28
  export { Hero };
28
29
  export { TabItem };
29
30
  export { Button, Checkbox, Input, Slider, RadioButton, MiniButton, Select };
30
31
  export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
31
32
  export { TextLayout, Code };
32
33
  export { Card, Tile, FormItem };
33
- export { Row, Column, Columns, SplitPane };
34
+ export { Row, Column, Columns, SplitPane, Sidebar };
package/dist/layout/Page.svelte CHANGED
@@ -95,6 +95,13 @@ onMount(() => {
95
95
  Put min-width queries *after* max-width queries so that smaller
96
96
  container queries don't get their styles overridden by large media queries.
97
97
  */
98
+ header,
99
+ .content,
100
+ .aside,
101
+ footer {
102
+ /* Absolute positioning is relative to area */
103
+ position: relative;
104
+ }
98
105
  header {
99
106
  display: none;
100
107
  }
package/dist/layout/ResponsiveText.svelte CHANGED
@@ -1,5 +1,4 @@
1
- <script>import { browser } from "$app/environment";
2
- export let greaterThan = null;
1
+ <script>export let greaterThan = null;
3
2
  export let smallerThan = null;
4
3
  let smallerThanClasses = "";
5
4
  let greaterThanClasses = "";
package/dist/layout/SplitPane.svelte CHANGED
@@ -116,6 +116,8 @@ onMount(() => {
116
116
  .split-pane > div {
117
117
  padding: var(--split-pane-content-padding, var(--split-pane-padding, var(--padding, 8px)));
118
118
  container-type: inline-size;
119
+ display: flex;
120
+ flex-direction: column;
119
121
  }
120
122
  /* Resizer */
121
123
  .split-pane > .resizer {
package/dist/layout/Tile.svelte CHANGED
@@ -36,13 +36,25 @@ $:
36
36
  .tile button {
37
37
  border: var(--tile-border, var(--border-width) var(--border-style) var(--border-color));
38
38
  box-sizing: border-box;
39
- border: var(--tile-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))));
40
- border-top: var(--tile-border-top, var(--border-top, var(--border, tile)));
41
- border-right: var(--tile-border-right, var(--border-right, var(--border, tile)));
42
- border-bottom: var(--tile-border-bottom, var(--border-bottom, var(--border, tile)));
43
- border-left: var(--tile-border-left, var(--border-left, var(--border, tile)));
44
- padding: var(--tile-padding, var(--padding, 4px));
45
- border-radius: var(--tile-square-radius, var(--square-radius, 0));
39
+ border: var(--tile-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
40
+ /* border-top: var-with-fallbacks(--border-top,
41
+ append($prefixes,
42
+ var-with-fallbacks(--border,$prefixes...)
43
+ )...) */
44
+ /* border-right: var-with-fallbacks(--border-right,
45
+ append($prefixes,
46
+ var-with-fallbacks(--border,$prefixes...)
47
+ )...) */
48
+ /* border-bottom: var-with-fallbacks(--border-bottom,
49
+ append($prefixes,
50
+ var-with-fallbacks(--border,$prefixes...)
51
+ )...) */
52
+ /* border-left: var-with-fallbacks(--border-left,
53
+ append($prefixes,
54
+ var-with-fallbacks(--border,$prefixes...)
55
+ )...) */
56
+ padding: var(--tile-padding, var(--container-padding, var(--padding, 4px)));
57
+ border-radius: var(--tile-square-radius, var(--container-square-radius, var(--square-radius, 0)));
46
58
  background: var(--tile-bg, var(--bg, white));
47
59
  color: var(--tile-fg, var(--fg, black));
48
60
  font-family: var(--tile-font-family, var(--font-family, sans-serif));
@@ -52,6 +64,7 @@ $:
52
64
  font-weight: var(--tile-font-weight, var(--font-weight, 400));
53
65
  line-height: var(--tile-line-height, var(--line-height, 1.5));
54
66
  letter-spacing: var(--tile-letter-spacing, var(--letter-spacing, 0.05em));
67
+ box-shadow: var(--tile-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--tile-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--tile-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--tile-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
55
68
  width: var(--tile-width, calc(var(--space-lg) * 24));
56
69
  display: inline-flex;
57
70
  flex-direction: column;
package/dist/sass/_mixins.scss CHANGED
@@ -94,12 +94,12 @@
94
94
  // Loop through each direction
95
95
  @each $dir in $directions {
96
96
  // Apply prop for each direction
97
- @each $p in $rectProps {
98
- #{$p}-#{$dir}: var-with-fallbacks(--#{$p}-#{$dir},
97
+ @each $p in $rectProps {
98
+ /* #{$p}-#{$dir}: var-with-fallbacks(--#{$p}-#{$dir},
99
99
  append($prefixes,
100
100
  var-with-fallbacks(--border,$prefixes...)
101
- )...)
102
- }
101
+ )...) */
102
+ }
103
103
  }
104
104
  }
105
105
  @mixin border-props-none ($prefixes...) {
package/dist/vars/themes/dark.css ADDED
@@ -0,0 +1,13 @@
1
+ :root {
2
+ --fg: var(--material-color-grey-100);
3
+ --bg: var(--material-color-grey-800);
4
+ --body-bg: var(--material-color-grey-800);
5
+ --body-fg: var(--material-color-grey-100);
6
+ --container-bg: var(--material-color-grey-900);
7
+ --container-fg: var(--material-color-grey-100);
8
+ --primary-bg: var(--material-color-light-blue-500);
9
+ --primary-fg: var(--material-color-grey-100);
10
+ --secondary-bg: var(--material-color-grey-300);
11
+ --secondary-fg: var(--material-color-grey-900);
12
+ --hover-filter: brightness(1.1) contrast(1.5);
13
+ }
package/dist/vars/themes/light.css ADDED
@@ -0,0 +1,24 @@
1
+ /* light mode */
2
+
3
+ :root {
4
+ --fg: var(--material-color-grey-800);
5
+ --bg: #fafafa;
6
+ --container-bg: var(--material-color-grey-100);
7
+ --container-fg: var(--material-color-grey-800);
8
+ --sidebar-bg: var(--material-color-grey-100);
9
+ --sidebar-fg: var(--material-color-grey-900);
10
+ --menu-bg: var(--material-color-grey-100);
11
+ --menu-fg: var(--material-color-grey-900);
12
+ --primary-bg: var(--material-color-blue-500);
13
+ --primary-fg: var(--material-color-grey-100);
14
+ --secondary-bg: var(--material-color-grey-400);
15
+ --secondary-fg: var(--material-color-grey-900);
16
+ --stripe-bg: var(--material-color-grey-900);
17
+ --stripe-fg: var(--material-color-grey-100);
18
+ --control-bg: var(--material-color-grey-300);
19
+ --control-fg: var(--material-color-grey-900);
20
+ --border-color: var(--material-color-grey-400);
21
+ --input-bg: #fefefe;
22
+ --input-fg: var(--material-color-grey-900);
23
+ --hover-filter: brightness(0.9) contrast(1.5);
24
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contain-css-svelte",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run package",
@@ -16,8 +16,13 @@
16
16
  "svelte": "./dist/index.js",
17
17
  "css": "./dist/vars/defaults.css"
18
18
  },
19
- "./vars/*":"./dist/vars/*",
20
- "./themes/*":"./dist/vars/themes/*"
19
+ "./vars/*": "./dist/vars/*",
20
+ "./themes/*": "./dist/vars/themes/*",
21
+ "./controls/":"./dist/controls/",
22
+ "./layout/":"./dist/layout/",
23
+ "./dropdowns/":"./dist/dropdowns/",
24
+ "./typography/":"./dist/typography/",
25
+ "./misc":"./dist/misc/"
21
26
  },
22
27
  "files": [
23
28
  "dist",
@@ -44,7 +49,6 @@
44
49
  "types": "./dist/index.d.ts",
45
50
  "type": "module",
46
51
  "dependencies": {
47
- "prism-svelte": "^0.5.0",
48
52
  "svelte-actions-resize": "^0.1.1",
49
53
  "svelte-portal": "^2.2.0",
50
54
  "svelte-prism": "^1.1.6"