contain-css-svelte 0.0.9 → 0.0.11

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 (26) hide show
  1. package/dist/Card.svelte +14 -13
  2. package/dist/controls/Button.svelte +7 -6
  3. package/dist/controls/Checkbox.svelte +4 -4
  4. package/dist/controls/Input.svelte +2 -2
  5. package/dist/controls/MiniButton.svelte +8 -8
  6. package/dist/controls/RadioButton.svelte +4 -4
  7. package/dist/controls/Select.svelte +4 -4
  8. package/dist/controls/TabItem.svelte +4 -4
  9. package/dist/dropdowns/DropdownMenu.svelte +4 -4
  10. package/dist/layout/Bar.svelte +6 -5
  11. package/dist/layout/Container.svelte +6 -6
  12. package/dist/layout/Hero.svelte +6 -6
  13. package/dist/layout/MenuList.svelte +6 -6
  14. package/dist/layout/Page.svelte +8 -6
  15. package/dist/layout/Sidebar.svelte +8 -8
  16. package/dist/layout/TabBar.svelte +2 -2
  17. package/dist/layout/Tile.svelte +12 -12
  18. package/dist/misc/Code.svelte +2 -2
  19. package/dist/misc/CodeInner.svelte +22 -22
  20. package/dist/overlays/Dialog.svelte +2 -2
  21. package/dist/overlays/Tooltip.svelte +6 -6
  22. package/dist/sass/_mixins.scss +2 -2
  23. package/dist/typography/TextLayout.svelte +4 -4
  24. package/dist/vars/themes/light.css +0 -2
  25. package/dist/vars/themes/lightordark.css +0 -2
  26. package/package.json +1 -1
package/dist/Card.svelte CHANGED
@@ -43,8 +43,8 @@ let hasFooter = $$slots.footer;
43
43
  --w: var(--card-width);
44
44
  --h: var(--card-height);
45
45
  box-shadow: var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--card-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--card-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
46
- background: var(--card-bg, var(--container-bg, var(--container-bg, inherit)));
47
- color: var(--card-fg, var(--container-fg, var(--container-fg, inherit)));
46
+ background: var(--card-bg, var(--container-bg, var(--bg, unset)));
47
+ color: var(--card-fg, var(--container-fg, var(--fg, unset)));
48
48
  --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
49
49
  --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
50
50
  border-radius: var(--card-border-radius, var(--container-border-radius, var(--border-radius, 0)));
@@ -89,8 +89,8 @@ let hasFooter = $$slots.footer;
89
89
  .card section :global(h4),
90
90
  .card section :global(h5),
91
91
  .card section :global(h6) {
92
- background: var(--heading-bg, var(--heading-bg, inherit));
93
- color: var(--heading-fg, var(--heading-fg, inherit));
92
+ background: var(--heading-bg, var(--bg, unset));
93
+ color: var(--heading-fg, var(--fg, unset));
94
94
  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
95
95
  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
96
96
  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
@@ -152,8 +152,8 @@ let hasFooter = $$slots.footer;
152
152
  text-indent: var(--card-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
153
153
  font-variant: var(--card-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
154
154
  text-align: var(--card-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
155
- background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
156
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
155
+ background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
156
+ color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
157
157
  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
158
158
  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
159
159
  }
@@ -219,8 +219,8 @@ section {
219
219
  }
220
220
 
221
221
  header {
222
- background: var(--card-header-bg, var(--secondary-bg, var(--secondary-bg, inherit)));
223
- color: var(--card-header-fg, var(--secondary-fg, var(--secondary-fg, inherit)));
222
+ background: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
223
+ color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
224
224
  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
225
225
  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
226
226
  box-sizing: border-box;
@@ -249,16 +249,17 @@ footer :global(h3),
249
249
  footer :global(h4),
250
250
  footer :global(h5),
251
251
  footer :global(h6) {
252
- margin: 0;
253
- background: var(--card-header-bg, var(--secondary-bg, var(--secondary-bg, inherit)));
254
- color: var(--card-header-fg, var(--secondary-fg, var(--secondary-fg, inherit)));
252
+ margin-block-start: 0 !important;
253
+ margin-block-end: 0 !important;
254
+ background: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
255
+ color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
255
256
  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
256
257
  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
257
258
  }
258
259
 
259
260
  footer {
260
- background: var(--card-footer-bg, var(--secondary-bg, var(--secondary-bg, inherit)));
261
- color: var(--card-footer-fg, var(--secondary-fg, var(--secondary-fg, inherit)));
261
+ background: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
262
+ color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
262
263
  --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
263
264
  --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
264
265
  box-sizing: border-box;
package/dist/controls/Button.svelte CHANGED
@@ -36,6 +36,7 @@ let cssVars = injectVars($$props, "button", [
36
36
  */
37
37
  button.has-icon {
38
38
  display: flex;
39
+ align-items: center;
39
40
  gap: var(--button-icon-gap, var(--space));
40
41
  }
41
42
 
@@ -55,8 +56,8 @@ button {
55
56
  border-right: var(--button-border-right, var(--border-right, var(--button-border, var(--border, none))));
56
57
  border-bottom: var(--button-border-bottom, var(--border-bottom, var(--button-border, var(--border, none))));
57
58
  border-left: var(--button-border-left, var(--border-left, var(--button-border, var(--border, none))));
58
- background: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit))));
59
- color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit))));
59
+ background: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
60
+ color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
60
61
  --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
61
62
  --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
62
63
  box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
@@ -84,8 +85,8 @@ button:active {
84
85
  }
85
86
 
86
87
  button.primary {
87
- background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
88
- color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
88
+ background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
89
+ color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
89
90
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
90
91
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
91
92
  font-family: var(--primary-font-family, var(--button-font-family, var(--button-font-family, inherit)));
@@ -101,8 +102,8 @@ button.primary {
101
102
  }
102
103
 
103
104
  button.warning {
104
- background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
105
- color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
105
+ background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
106
+ color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
106
107
  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
107
108
  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
108
109
  font-family: var(--warning-font-family, var(--button-font-family, var(--button-font-family, inherit)));
package/dist/controls/Checkbox.svelte CHANGED
@@ -129,8 +129,8 @@ label::before {
129
129
  content: " ";
130
130
  width: var(--checkbox-size, var(--font-size, var(--size, 1em)));
131
131
  height: var(--checkbox-size, var(--font-size, var(--size, 1em)));
132
- background: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
133
- color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
132
+ background: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
133
+ color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
134
134
  --link-bg: var(--checkbox-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
135
135
  --link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
136
136
  border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
@@ -139,8 +139,8 @@ label::before {
139
139
  }
140
140
 
141
141
  label:has(input:checked)::before {
142
- background: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--checkbox-bg, inherit)))));
143
- color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--checkbox-fg, inherit)))));
142
+ background: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
143
+ color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
144
144
  --link-bg: var(--checkbox-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--checkbox-link-bg, var(--checkbox-link-bg, inherit)))));
145
145
  --link-fg: var(--checkbox-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--checkbox-link-fg, var(--checkbox-link-fg, inherit)))));
146
146
  border: var(--checkbox-checked-border, var(--toggle-on-border, var(--border, checkbox)));
package/dist/controls/Input.svelte CHANGED
@@ -34,8 +34,8 @@ input {
34
34
  border-bottom: var(--input-border-bottom, var(--ui-border-bottom, var(--border-bottom, var(--input-border, var(--ui-border, var(--border, none))))));
35
35
  border-left: var(--input-border-left, var(--ui-border-left, var(--border-left, var(--input-border, var(--ui-border, var(--border, none))))));
36
36
  border-radius: var(--input-border-radius, var(--ui-border-radius, var(--border-radius, none)));
37
- background: var(--input-bg, var(--ui-bg, var(--ui-bg, inherit)));
38
- color: var(--input-fg, var(--ui-fg, var(--ui-fg, inherit)));
37
+ background: var(--input-bg, var(--ui-bg, var(--bg, unset)));
38
+ color: var(--input-fg, var(--ui-fg, var(--fg, unset)));
39
39
  --link-bg: var(--input-link-bg, var(--ui-link-bg, var(--ui-link-bg, inherit)));
40
40
  --link-fg: var(--input-link-fg, var(--ui-link-fg, var(--ui-link-fg, inherit)));
41
41
  width: var(--input-width);
package/dist/controls/MiniButton.svelte CHANGED
@@ -35,8 +35,8 @@ let style = injectVars($$props, "mini-button", [
35
35
  container queries don't get their styles overridden by large media queries.
36
36
  */
37
37
  button.primary {
38
- background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
39
- color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
38
+ background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
39
+ color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
40
40
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
41
41
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
42
42
  }
@@ -56,8 +56,8 @@ button {
56
56
  text-indent: var(--button-indent, var(--control-indent, var(--indent, unset)));
57
57
  font-variant: var(--button-font-variant, var(--control-font-variant, var(--font-variant, unset)));
58
58
  text-align: var(--button-text-align, var(--control-text-align, var(--text-align, unset)));
59
- background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
60
- color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
59
+ background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
60
+ color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
61
61
  --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
62
62
  --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
63
63
  font-family: var(--button-font);
@@ -82,15 +82,15 @@ button:active {
82
82
  }
83
83
 
84
84
  button.primary {
85
- background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
86
- color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
85
+ background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
86
+ color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
87
87
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
88
88
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
89
89
  }
90
90
 
91
91
  button.warning {
92
- background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
93
- color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
92
+ background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
93
+ color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
94
94
  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
95
95
  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
96
96
  }</style>
package/dist/controls/RadioButton.svelte CHANGED
@@ -126,8 +126,8 @@ label::before {
126
126
  content: " ";
127
127
  width: var(--radio-button-size, var(--font-size, var(--size, 1em)));
128
128
  height: var(--radio-button-size, var(--font-size, var(--size, 1em)));
129
- background: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
130
- color: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
129
+ background: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
130
+ color: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
131
131
  --link-bg: var(--radio-button-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
132
132
  --link-fg: var(--radio-button-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
133
133
  border: var(--radio-button-border, var(--border, 1px solid var(--border-color)));
@@ -137,8 +137,8 @@ label::before {
137
137
  }
138
138
 
139
139
  label:has(input:checked)::before {
140
- background: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--radio-button-bg, var(--radio-button-bg, inherit)))));
141
- color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--radio-button-fg, var(--radio-button-fg, inherit)))));
140
+ background: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--radio-button-bg, var(--bg, unset)))));
141
+ color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--radio-button-fg, var(--fg, unset)))));
142
142
  --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--radio-button-link-bg, var(--radio-button-link-bg, inherit)))));
143
143
  --link-fg: var(--radio-button-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--radio-button-link-fg, var(--radio-button-link-fg, inherit)))));
144
144
  border: var(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));
package/dist/controls/Select.svelte CHANGED
@@ -113,8 +113,8 @@ select,
113
113
  )...) */
114
114
  padding: var(--select-padding, var(--input-padding, var(--menu-padding, var(--control-padding, var(--container-padding, var(--padding, 4px))))));
115
115
  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))))));
116
- background: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--container-bg, inherit))))));
117
- color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--container-fg, inherit))))));
116
+ background: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, unset))))));
117
+ color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
118
118
  --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))))));
119
119
  --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
120
120
  width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100cw))));
@@ -134,8 +134,8 @@ select,
134
134
  }
135
135
 
136
136
  .dropdown-wrapper {
137
- background: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--container-bg, inherit))))));
138
- color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--container-fg, inherit))))));
137
+ background: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--container-bg, var(--bg, unset))))));
138
+ color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--container-fg, var(--fg, unset))))));
139
139
  --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))))));
140
140
  --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))))));
141
141
  }
package/dist/controls/TabItem.svelte CHANGED
@@ -39,8 +39,8 @@ span {
39
39
 
40
40
  div > :global(button),
41
41
  div > :global(div > button) {
42
- background: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
43
- color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
42
+ background: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
43
+ color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
44
44
  --link-bg: var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
45
45
  --link-fg: var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
46
46
  box-sizing: border-box;
@@ -57,8 +57,8 @@ div > :global(div > button) {
57
57
 
58
58
  div.active > :global(button),
59
59
  div.active > :global(div > button) {
60
- background: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit)))))));
61
- color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit)))))));
60
+ background: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
61
+ color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
62
62
  --link-bg: var(--tab-active-link-bg, var(--primary-link-bg, var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))))));
63
63
  --link-fg: var(--tab-active-link-fg, var(--primary-link-fg, var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))))));
64
64
  }</style>
package/dist/dropdowns/DropdownMenu.svelte CHANGED
@@ -154,8 +154,8 @@ let popoverDiv;
154
154
  container queries don't get their styles overridden by large media queries.
155
155
  */
156
156
  button {
157
- background: var(--menu-bg, var(--button-bg, var(--container-bg, var(--container-bg, inherit))));
158
- color: var(--menu-fg, var(--button-fg, var(--container-fg, var(--container-fg, inherit))));
157
+ background: var(--menu-bg, var(--button-bg, var(--container-bg, var(--bg, unset))));
158
+ color: var(--menu-fg, var(--button-fg, var(--container-fg, var(--fg, unset))));
159
159
  --link-bg: var(--menu-link-bg, var(--button-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
160
160
  --link-fg: var(--menu-link-fg, var(--button-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
161
161
  box-sizing: border-box;
@@ -180,8 +180,8 @@ button:active {
180
180
  }
181
181
 
182
182
  .menu {
183
- background: var(--menu-bg, var(--container-bg, var(--container-bg, inherit)));
184
- color: var(--menu-fg, var(--container-fg, var(--container-fg, inherit)));
183
+ background: var(--menu-bg, var(--container-bg, var(--bg, unset)));
184
+ color: var(--menu-fg, var(--container-fg, var(--fg, unset)));
185
185
  --link-bg: var(--menu-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
186
186
  --link-fg: var(--menu-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
187
187
  box-sizing: border-box;
package/dist/layout/Bar.svelte CHANGED
@@ -42,8 +42,8 @@ let style = injectVars($$props, "bar", [
42
42
  min-height: var(--bar-min-height);
43
43
  height: var(--bar-height, 3em);
44
44
  max-height: var(--bar-max-height);
45
- background: var(--bar-bg, var(--container-bg, var(--container-bg, inherit)));
46
- color: var(--bar-fg, var(--container-fg, var(--container-fg, inherit)));
45
+ background: var(--bar-bg, var(--container-bg, var(--bg, unset)));
46
+ color: var(--bar-fg, var(--container-fg, var(--fg, unset)));
47
47
  --link-bg: var(--bar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
48
48
  --link-fg: var(--bar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
49
49
  gap: var(--bar-gap, var(--gap, 8px));
@@ -55,9 +55,10 @@ let style = injectVars($$props, "bar", [
55
55
  .bar :global(h4),
56
56
  .bar :global(h5),
57
57
  .bar :global(h6) {
58
- margin: 0;
59
- background: var(--bar-bg, var(--container-bg, var(--container-bg, inherit)));
60
- color: var(--bar-fg, var(--container-fg, var(--container-fg, inherit)));
58
+ margin-block-start: 0 !important;
59
+ margin-block-end: 0 !important;
60
+ background: var(--bar-bg, var(--container-bg, var(--bg, unset)));
61
+ color: var(--bar-fg, var(--container-fg, var(--fg, unset)));
61
62
  --link-bg: var(--bar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
62
63
  --link-fg: var(--bar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
63
64
  }</style>
package/dist/layout/Container.svelte CHANGED
@@ -35,8 +35,8 @@ section {
35
35
  margin: auto;
36
36
  box-sizing: border-box;
37
37
  padding: var(--container-padding, var(--padding, 8px));
38
- background: var(--container-bg, var(--block-bg, var(--block-bg, inherit)));
39
- color: var(--container-fg, var(--block-fg, var(--block-fg, inherit)));
38
+ background: var(--container-bg, var(--block-bg, var(--bg, unset)));
39
+ color: var(--container-fg, var(--block-fg, var(--fg, unset)));
40
40
  --link-bg: var(--container-link-bg, var(--block-link-bg, var(--block-link-bg, inherit)));
41
41
  --link-fg: var(--container-link-fg, var(--block-link-fg, var(--block-link-fg, inherit)));
42
42
  box-sizing: border-box;
@@ -92,8 +92,8 @@ section :global(h3),
92
92
  section :global(h4),
93
93
  section :global(h5),
94
94
  section :global(h6) {
95
- background: var(--heading-bg, var(--heading-bg, inherit));
96
- color: var(--heading-fg, var(--heading-fg, inherit));
95
+ background: var(--heading-bg, var(--bg, unset));
96
+ color: var(--heading-fg, var(--fg, unset));
97
97
  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
98
98
  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
99
99
  max-width: var(--container-line-width, var(--block-line-width, var(--line-width, unset)));
@@ -155,8 +155,8 @@ section :global(p:first-of-type::first-letter) {
155
155
  text-indent: var(--container-first-letter-indent, var(--block-first-letter-indent, var(--block-first-letter-indent, inherit)));
156
156
  font-variant: var(--container-first-letter-font-variant, var(--block-first-letter-font-variant, var(--block-first-letter-font-variant, inherit)));
157
157
  text-align: var(--container-first-letter-text-align, var(--block-first-letter-text-align, var(--block-first-letter-text-align, inherit)));
158
- background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
159
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
158
+ background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
159
+ color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
160
160
  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
161
161
  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
162
162
  }
package/dist/layout/Hero.svelte CHANGED
@@ -26,8 +26,8 @@ let cssVars = injectVars($$props, "hero", [
26
26
  */
27
27
  .hero {
28
28
  --hero-font-size: calc(var(--font-size) * 2);
29
- background: var(--hero-bg, var(--container-bg, var(--container-bg, inherit)));
30
- color: var(--hero-fg, var(--container-fg, var(--container-fg, inherit)));
29
+ background: var(--hero-bg, var(--container-bg, var(--bg, unset)));
30
+ color: var(--hero-fg, var(--container-fg, var(--fg, unset)));
31
31
  --link-bg: var(--hero-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
32
32
  --link-fg: var(--hero-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
33
33
  max-width: var(--hero-line-width, var(--container-line-width, var(--line-width, unset)));
@@ -73,8 +73,8 @@ let cssVars = injectVars($$props, "hero", [
73
73
  .hero :global(h4),
74
74
  .hero :global(h5),
75
75
  .hero :global(h6) {
76
- background: var(--heading-bg, var(--heading-bg, inherit));
77
- color: var(--heading-fg, var(--heading-fg, inherit));
76
+ background: var(--heading-bg, var(--bg, unset));
77
+ color: var(--heading-fg, var(--fg, unset));
78
78
  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
79
79
  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
80
80
  max-width: var(--hero-line-width, var(--container-line-width, var(--line-width, unset)));
@@ -136,8 +136,8 @@ let cssVars = injectVars($$props, "hero", [
136
136
  text-indent: var(--hero-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
137
137
  font-variant: var(--hero-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
138
138
  text-align: var(--hero-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
139
- background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
140
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
139
+ background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
140
+ color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
141
141
  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
142
142
  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
143
143
  }
package/dist/layout/MenuList.svelte CHANGED
@@ -40,8 +40,8 @@ let style = injectVars($$props, "menu", [
40
40
  list-style: none;
41
41
  /* @include padding-props(menu, container); */
42
42
  padding: 0;
43
- background: var(--menu-bg, var(--container-bg, var(--container-bg, inherit)));
44
- color: var(--menu-fg, var(--container-fg, var(--container-fg, inherit)));
43
+ background: var(--menu-bg, var(--container-bg, var(--bg, unset)));
44
+ color: var(--menu-fg, var(--container-fg, var(--fg, unset)));
45
45
  --link-bg: var(--menu-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
46
46
  --link-fg: var(--menu-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
47
47
  margin-block-start: 0;
@@ -86,8 +86,8 @@ let style = injectVars($$props, "menu", [
86
86
  text-indent: var(--menu-item-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
87
87
  font-variant: var(--menu-item-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
88
88
  text-align: var(--menu-item-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
89
- background: var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--control-bg, inherit))));
90
- color: var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--control-fg, inherit))));
89
+ background: var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
90
+ color: var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
91
91
  --link-bg: var(--menu-item-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
92
92
  --link-fg: var(--menu-item-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
93
93
  box-sizing: border-box;
@@ -101,8 +101,8 @@ let style = injectVars($$props, "menu", [
101
101
  /* @include clickable(menu-item); */
102
102
  }
103
103
  .menu :global(.active) {
104
- background: var(--menu-item-active-bg, var(--primary-bg, var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--container-bg, var(--container-bg, inherit)))))));
105
- color: var(--menu-item-active-fg, var(--primary-fg, var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--container-fg, var(--container-fg, inherit)))))));
104
+ background: var(--menu-item-active-bg, var(--primary-bg, var(--menu-item-bg, var(--button-bg, var(--control-bg, var(--container-bg, var(--bg, unset)))))));
105
+ color: var(--menu-item-active-fg, var(--primary-fg, var(--menu-item-fg, var(--button-fg, var(--control-fg, var(--container-fg, var(--fg, unset)))))));
106
106
  --link-bg: var(--menu-item-active-link-bg, var(--primary-link-bg, var(--menu-item-link-bg, var(--button-link-bg, var(--control-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)))))));
107
107
  --link-fg: var(--menu-item-active-link-fg, var(--primary-link-fg, var(--menu-item-link-fg, var(--button-link-fg, var(--control-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)))))));
108
108
  }
package/dist/layout/Page.svelte CHANGED
@@ -130,10 +130,10 @@ footer {
130
130
  }
131
131
 
132
132
  .page {
133
- background: var(--page-bg, var(--page-bg, inherit));
134
- color: var(--page-fg, var(--page-fg, inherit));
135
- --link-bg: var(--page-link-bg, var(--page-link-bg, inherit));
136
- --link-fg: var(--page-link-fg, var(--page-link-fg, inherit));
133
+ background: var(--page-bg, var(--content-bg, var(--container-bg, var(--bg, unset))));
134
+ color: var(--page-fg, var(--content-fg, var(--container-fg, var(--fg, unset))));
135
+ --link-bg: var(--page-link-bg, var(--content-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
136
+ --link-fg: var(--page-link-fg, var(--content-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
137
137
  border: var(--page-border);
138
138
  height: var(--page-height, 100vh);
139
139
  width: var(--page-width, 100%);
@@ -165,6 +165,10 @@ footer {
165
165
  border-bottom: var(--page-content-border-bottom, var(--border-bottom, var(--page-content-border, var(--border, none))));
166
166
  border-left: var(--page-content-border-left, var(--border-left, var(--page-content-border, var(--border, none))));
167
167
  border-radius: var(--page-content-border-radius, var(--border-radius, none));
168
+ background: var(--page-content-bg, var(--page-bg, var(--container-bg, var(--bg, unset))));
169
+ color: var(--page-content-fg, var(--page-fg, var(--container-fg, var(--fg, unset))));
170
+ --link-bg: var(--page-content-link-bg, var(--page-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
171
+ --link-fg: var(--page-content-link-fg, var(--page-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
168
172
  }
169
173
  .content::-webkit-scrollbar {
170
174
  width: var(--page-content-scrollbar-width, var(--page-scrollbar-width, var(--scrollbar-width, var(--space-md))));
@@ -206,8 +210,6 @@ footer {
206
210
  container-type: size;
207
211
  height: 100%;
208
212
  width: 100%;
209
- background: var(--bg);
210
- color: var(--text);
211
213
  }
212
214
 
213
215
  .page.sticky.freeze :global(*) {
package/dist/layout/Sidebar.svelte CHANGED
@@ -46,8 +46,8 @@ let expandedBar = true;
46
46
  container queries don't get their styles overridden by large media queries.
47
47
  */
48
48
  aside {
49
- background: var(--sidebar-bg, var(--container-bg, var(--container-bg, inherit)));
50
- color: var(--sidebar-fg, var(--container-fg, var(--container-fg, inherit)));
49
+ background: var(--sidebar-bg, var(--container-bg, var(--bg, unset)));
50
+ color: var(--sidebar-fg, var(--container-fg, var(--fg, unset)));
51
51
  --link-bg: var(--sidebar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
52
52
  --link-fg: var(--sidebar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
53
53
  height: 100%;
@@ -57,8 +57,8 @@ aside {
57
57
  }
58
58
 
59
59
  aside .content {
60
- background: var(--sidebar-bg, var(--container-bg, var(--container-bg, inherit)));
61
- color: var(--sidebar-fg, var(--container-fg, var(--container-fg, inherit)));
60
+ background: var(--sidebar-bg, var(--container-bg, var(--bg, unset)));
61
+ color: var(--sidebar-fg, var(--container-fg, var(--fg, unset)));
62
62
  --link-bg: var(--sidebar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
63
63
  --link-fg: var(--sidebar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
64
64
  width: var(--sidebar-width);
@@ -203,8 +203,8 @@ aside .content::-webkit-scrollbar-thumb:hover {
203
203
  height: 100%;
204
204
  opacity: 1;
205
205
  pointer-events: all;
206
- background: var(--sidebar-bg, var(--container-bg, var(--container-bg, inherit)));
207
- color: var(--sidebar-fg, var(--container-fg, var(--container-fg, inherit)));
206
+ background: var(--sidebar-bg, var(--container-bg, var(--bg, unset)));
207
+ color: var(--sidebar-fg, var(--container-fg, var(--fg, unset)));
208
208
  --link-bg: var(--sidebar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
209
209
  --link-fg: var(--sidebar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
210
210
  }
@@ -225,8 +225,8 @@ aside .content::-webkit-scrollbar-thumb:hover {
225
225
  border: var(--mini-button-border);
226
226
  width: var(--icon-size, 32px);
227
227
  height: var(--icon-size, 32px);
228
- background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
229
- color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
228
+ background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
229
+ color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
230
230
  --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
231
231
  --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
232
232
  cursor: var(--mini-button-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
package/dist/layout/TabBar.svelte CHANGED
@@ -38,8 +38,8 @@ function setValue(value) {
38
38
  */
39
39
  div > :global(.bar),
40
40
  div > :global(div > .bar) {
41
- background: var(--tab-bar-bg, var(--bar-bg, var(--container-bg, var(--container-bg, inherit))));
42
- color: var(--tab-bar-fg, var(--bar-fg, var(--container-fg, var(--container-fg, inherit))));
41
+ background: var(--tab-bar-bg, var(--bar-bg, var(--container-bg, var(--bg, unset))));
42
+ color: var(--tab-bar-fg, var(--bar-fg, var(--container-fg, var(--fg, unset))));
43
43
  --link-bg: var(--tab-bar-link-bg, var(--bar-link-bg, var(--container-link-bg, var(--container-link-bg, inherit))));
44
44
  --link-fg: var(--tab-bar-link-fg, var(--bar-link-fg, var(--container-link-fg, var(--container-link-fg, inherit))));
45
45
  justify-content: var(--tab-bar-justify, var(--justify, flex-start));
package/dist/layout/Tile.svelte CHANGED
@@ -54,8 +54,8 @@ $: console.log("Checked=>", checked);
54
54
  )...) */
55
55
  padding: var(--tile-padding, var(--container-padding, var(--padding, 4px)));
56
56
  border-radius: var(--tile-square-radius, var(--container-square-radius, var(--square-radius, 0)));
57
- background: var(--tile-bg, var(--tile-bg, inherit));
58
- color: var(--tile-fg, var(--tile-fg, inherit));
57
+ background: var(--tile-bg, var(--bg, unset));
58
+ color: var(--tile-fg, var(--fg, unset));
59
59
  --link-bg: var(--tile-link-bg, var(--tile-link-bg, inherit));
60
60
  --link-fg: var(--tile-link-fg, var(--tile-link-fg, inherit));
61
61
  max-width: var(--tile-line-width, var(--line-width, unset));
@@ -121,8 +121,8 @@ $: console.log("Checked=>", checked);
121
121
  .tile button :global(h4),
122
122
  .tile button :global(h5),
123
123
  .tile button :global(h6) {
124
- background: var(--heading-bg, var(--heading-bg, inherit));
125
- color: var(--heading-fg, var(--heading-fg, inherit));
124
+ background: var(--heading-bg, var(--bg, unset));
125
+ color: var(--heading-fg, var(--fg, unset));
126
126
  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
127
127
  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
128
128
  max-width: var(--tile-line-width, var(--line-width, unset));
@@ -204,8 +204,8 @@ $: console.log("Checked=>", checked);
204
204
  text-indent: var(--tile-first-letter-indent, var(--tile-first-letter-indent, inherit));
205
205
  font-variant: var(--tile-first-letter-font-variant, var(--tile-first-letter-font-variant, inherit));
206
206
  text-align: var(--tile-first-letter-text-align, var(--tile-first-letter-text-align, inherit));
207
- background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
208
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
207
+ background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
208
+ color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
209
209
  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
210
210
  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
211
211
  }
@@ -227,8 +227,8 @@ label.tile:active {
227
227
  }
228
228
 
229
229
  label.tile {
230
- background: var(--tile-selected-bg, var(--tile-selected-bg, inherit));
231
- color: var(--tile-selected-fg, var(--tile-selected-fg, inherit));
230
+ background: var(--tile-selected-bg, var(--bg, unset));
231
+ color: var(--tile-selected-fg, var(--fg, unset));
232
232
  --link-bg: var(--tile-selected-link-bg, var(--tile-selected-link-bg, inherit));
233
233
  --link-fg: var(--tile-selected-link-fg, var(--tile-selected-link-fg, inherit));
234
234
  font-family: var(--tile-selected-font-family, var(--font-family, unset));
@@ -266,8 +266,8 @@ label.tile {
266
266
  align-items: center;
267
267
  width: var(--tile-checkbox-size, var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em)))));
268
268
  height: var(--tile-checkbox-size, var(--checkbox-size, var(--toggle-size, var(--font-size, var(--size, 1em)))));
269
- background: var(--tile-checkbox-bg, var(--checkbox-bg, var(--toggle-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
270
- color: var(--tile-checkbox-fg, var(--checkbox-fg, var(--toggle-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
269
+ background: var(--tile-checkbox-bg, var(--checkbox-bg, var(--toggle-bg, var(--secondary-bg, var(--bg, unset)))));
270
+ color: var(--tile-checkbox-fg, var(--checkbox-fg, var(--toggle-fg, var(--secondary-fg, var(--fg, unset)))));
271
271
  --link-bg: var(--tile-checkbox-link-bg, var(--checkbox-link-bg, var(--toggle-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
272
272
  --link-fg: var(--tile-checkbox-link-fg, var(--checkbox-link-fg, var(--toggle-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
273
273
  }
@@ -277,8 +277,8 @@ label.tile {
277
277
  }
278
278
 
279
279
  .checkbox:has(input:checked) {
280
- background: var(--tile-checkbox-checked-bg, var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--checkbox-bg, inherit))))));
281
- color: var(--tile-checkbox-checked-fg, var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--checkbox-fg, inherit))))));
280
+ background: var(--tile-checkbox-checked-bg, var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset))))));
281
+ color: var(--tile-checkbox-checked-fg, var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset))))));
282
282
  --link-bg: var(--tile-checkbox-checked-link-bg, var(--checkbox-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--checkbox-link-bg, var(--checkbox-link-bg, inherit))))));
283
283
  --link-fg: var(--tile-checkbox-checked-link-fg, var(--checkbox-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--checkbox-link-fg, var(--checkbox-link-fg, inherit))))));
284
284
  }
package/dist/misc/Code.svelte CHANGED
@@ -1,4 +1,4 @@
1
- <script>import { browser } from '$app/environment';
1
+ <script>const browser = typeof window !== "undefined";
2
2
  export let code;
3
3
  export let inline = false;
4
4
  export let language = "html";
@@ -11,7 +11,7 @@ if (browser) {
11
11
  </script>
12
12
 
13
13
  {#if browser && component}
14
- <svelte:component this={component} {language} {code} />
14
+ <svelte:component this={component} {language} {code} {inline}/>
15
15
  {/if}
16
16
 
17
17
 
package/dist/misc/CodeInner.svelte CHANGED
@@ -32,8 +32,8 @@ div > :global(pre) {
32
32
  .code :global(code[class*="language-"]),
33
33
  .code :global(pre[class*="language-"]) {
34
34
  tab-size: var(--code-tab-size, 2em);
35
- background: var(--code-bg, var(--container-bg, var(--container-bg, inherit)));
36
- color: var(--code-fg, var(--container-fg, var(--container-fg, inherit)));
35
+ background: var(--code-bg, var(--container-bg, var(--bg, unset)));
36
+ color: var(--code-fg, var(--container-fg, var(--fg, unset)));
37
37
  --link-bg: var(--code-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
38
38
  --link-fg: var(--code-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
39
39
  max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
@@ -80,8 +80,8 @@ div > :global(pre) {
80
80
  .code :global(pre[class*="language-"]) :global(h4),
81
81
  .code :global(pre[class*="language-"]) :global(h5),
82
82
  .code :global(pre[class*="language-"]) :global(h6) {
83
- background: var(--heading-bg, var(--heading-bg, inherit));
84
- color: var(--heading-fg, var(--heading-fg, inherit));
83
+ background: var(--heading-bg, var(--bg, unset));
84
+ color: var(--heading-fg, var(--fg, unset));
85
85
  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
86
86
  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
87
87
  max-width: var(--code-line-width, var(--container-line-width, var(--line-width, unset)));
@@ -153,8 +153,8 @@ div > :global(pre) {
153
153
  text-indent: var(--code-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit)));
154
154
  font-variant: var(--code-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
155
155
  text-align: var(--code-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
156
- background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
157
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
156
+ background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
157
+ color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
158
158
  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
159
159
  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
160
160
  }
@@ -171,58 +171,58 @@ div > :global(pre) {
171
171
  .code :global(.token.prolog),
172
172
  .code :global(.token.doctype),
173
173
  .code :global(.token.cdata) {
174
- background: var(--code-comment-bg, var(--secondary-bg, var(--yellow-bg, var(--yellow-bg, inherit))));
175
- color: var(--code-comment-fg, var(--secondary-fg, var(--yellow-fg, var(--yellow-fg, inherit))));
174
+ background: var(--code-comment-bg, var(--secondary-bg, var(--yellow-bg, var(--bg, unset))));
175
+ color: var(--code-comment-fg, var(--secondary-fg, var(--yellow-fg, var(--fg, unset))));
176
176
  --link-bg: var(--code-comment-link-bg, var(--secondary-link-bg, var(--yellow-link-bg, var(--yellow-link-bg, inherit))));
177
177
  --link-fg: var(--code-comment-link-fg, var(--secondary-link-fg, var(--yellow-link-fg, var(--yellow-link-fg, inherit))));
178
178
  }
179
179
 
180
180
  .code :global(.token.string),
181
181
  .code :global(.token.attr-value) {
182
- background: var(--code-string-bg, var(--code-bg, var(--code-bg, inherit)));
183
- color: var(--code-string-fg, var(--code-fg, var(--code-fg, inherit)));
182
+ background: var(--code-string-bg, var(--code-bg, var(--bg, unset)));
183
+ color: var(--code-string-fg, var(--code-fg, var(--fg, unset)));
184
184
  --link-bg: var(--code-string-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
185
185
  --link-fg: var(--code-string-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
186
186
  }
187
187
 
188
188
  .code :global(.token.keyword) {
189
- background: var(--code-keyword-bg, var(--code-keyword-bg, inherit));
190
- color: var(--code-keyword-fg, var(--code-keyword-fg, inherit));
189
+ background: var(--code-keyword-bg, var(--bg, unset));
190
+ color: var(--code-keyword-fg, var(--fg, unset));
191
191
  --link-bg: var(--code-keyword-link-bg, var(--code-keyword-link-bg, inherit));
192
192
  --link-fg: var(--code-keyword-link-fg, var(--code-keyword-link-fg, inherit));
193
193
  }
194
194
 
195
195
  .code :global(.token.attr-name) {
196
- background: var(--code-attr-name-bg, var(--code-attr-name-bg, inherit));
197
- color: var(--code-attr-name-fg, var(--code-attr-name-fg, inherit));
196
+ background: var(--code-attr-name-bg, var(--bg, unset));
197
+ color: var(--code-attr-name-fg, var(--fg, unset));
198
198
  --link-bg: var(--code-attr-name-link-bg, var(--code-attr-name-link-bg, inherit));
199
199
  --link-fg: var(--code-attr-name-link-fg, var(--code-attr-name-link-fg, inherit));
200
200
  }
201
201
 
202
202
  .code :global(.token.tag) {
203
- background: var(--code-tag-bg, var(--code-keyword-bg, var(--code-bg, var(--code-bg, inherit))));
204
- color: var(--code-tag-fg, var(--code-keyword-fg, var(--code-fg, var(--code-fg, inherit))));
203
+ background: var(--code-tag-bg, var(--code-keyword-bg, var(--code-bg, var(--bg, unset))));
204
+ color: var(--code-tag-fg, var(--code-keyword-fg, var(--code-fg, var(--fg, unset))));
205
205
  --link-bg: var(--code-tag-link-bg, var(--code-keyword-link-bg, var(--code-link-bg, var(--code-link-bg, inherit))));
206
206
  --link-fg: var(--code-tag-link-fg, var(--code-keyword-link-fg, var(--code-link-fg, var(--code-link-fg, inherit))));
207
207
  }
208
208
 
209
209
  .code :global(.token.function) {
210
- background: var(--code-function-bg, var(--code-keyword-bg, var(--code-keyword-bg, inherit)));
211
- color: var(--code-function-fg, var(--code-keyword-fg, var(--code-keyword-fg, inherit)));
210
+ background: var(--code-function-bg, var(--code-keyword-bg, var(--bg, unset)));
211
+ color: var(--code-function-fg, var(--code-keyword-fg, var(--fg, unset)));
212
212
  --link-bg: var(--code-function-link-bg, var(--code-keyword-link-bg, var(--code-keyword-link-bg, inherit)));
213
213
  --link-fg: var(--code-function-link-fg, var(--code-keyword-link-fg, var(--code-keyword-link-fg, inherit)));
214
214
  }
215
215
 
216
216
  .code :global(.token.variable) {
217
- background: var(--code-variable-bg, var(--code-bg, var(--code-bg, inherit)));
218
- color: var(--code-variable-fg, var(--code-fg, var(--code-fg, inherit)));
217
+ background: var(--code-variable-bg, var(--code-bg, var(--bg, unset)));
218
+ color: var(--code-variable-fg, var(--code-fg, var(--fg, unset)));
219
219
  --link-bg: var(--code-variable-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
220
220
  --link-fg: var(--code-variable-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
221
221
  }
222
222
 
223
223
  .code :global(.token.operator) {
224
- background: var(--code-operator-bg, var(--code-bg, var(--code-bg, inherit)));
225
- color: var(--code-operator-fg, var(--code-fg, var(--code-fg, inherit)));
224
+ background: var(--code-operator-bg, var(--code-bg, var(--bg, unset)));
225
+ color: var(--code-operator-fg, var(--code-fg, var(--fg, unset)));
226
226
  --link-bg: var(--code-operator-link-bg, var(--code-link-bg, var(--code-link-bg, inherit)));
227
227
  --link-fg: var(--code-operator-link-fg, var(--code-link-fg, var(--code-link-fg, inherit)));
228
228
  }</style>
package/dist/overlays/Dialog.svelte CHANGED
@@ -64,8 +64,8 @@ dialog {
64
64
  border-bottom: var(--dialog-border-bottom, var(--top-border-bottom, var(--container-border-bottom, var(--block-border-bottom, var(--border-bottom, var(--dialog-border, var(--top-border, var(--container-border, var(--block-border, var(--border, none))))))))));
65
65
  border-left: var(--dialog-border-left, var(--top-border-left, var(--container-border-left, var(--block-border-left, var(--border-left, var(--dialog-border, var(--top-border, var(--container-border, var(--block-border, var(--border, none))))))))));
66
66
  border-radius: var(--dialog-border-radius, var(--top-border-radius, var(--container-border-radius, var(--block-border-radius, var(--border-radius, none)))));
67
- background: var(--dialog-bg, var(--top-bg, var(--container-bg, var(--block-bg, var(--block-bg, inherit)))));
68
- color: var(--dialog-fg, var(--top-fg, var(--container-fg, var(--block-fg, var(--block-fg, inherit)))));
67
+ background: var(--dialog-bg, var(--top-bg, var(--container-bg, var(--block-bg, var(--bg, unset)))));
68
+ color: var(--dialog-fg, var(--top-fg, var(--container-fg, var(--block-fg, var(--fg, unset)))));
69
69
  --link-bg: var(--dialog-link-bg, var(--top-link-bg, var(--container-link-bg, var(--block-link-bg, var(--block-link-bg, inherit)))));
70
70
  --link-fg: var(--dialog-link-fg, var(--top-link-fg, var(--container-link-fg, var(--block-link-fg, var(--block-link-fg, inherit)))));
71
71
  box-shadow: var(--dialog-shadow-distance, var(--top-shadow-distance, var(--container-shadow-distance, var(--block-shadow-distance, var(--shadow-distance, var(--space-md)))))) var(--dialog-shadow-distance, var(--top-shadow-distance, var(--container-shadow-distance, var(--block-shadow-distance, var(--shadow-distance, var(--space-md)))))) var(--dialog-shadow-blur, var(--top-shadow-blur, var(--container-shadow-blur, var(--block-shadow-blur, var(--shadow-blur, var(--space)))))) var(--dialog-shadow-color, var(--top-shadow-color, var(--container-shadow-color, var(--block-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))))));
package/dist/overlays/Tooltip.svelte CHANGED
@@ -99,8 +99,8 @@ function showPopover() {
99
99
  position: fixed;
100
100
  margin: 0;
101
101
  overflow: visible;
102
- background: var(--tooltip-bg, var(--secondary-bg, var(--secondary-bg, inherit)));
103
- color: var(--tooltip-fg, var(--secondary-fg, var(--secondary-fg, inherit)));
102
+ background: var(--tooltip-bg, var(--secondary-bg, var(--bg, unset)));
103
+ color: var(--tooltip-fg, var(--secondary-fg, var(--fg, unset)));
104
104
  --link-bg: var(--tooltip-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
105
105
  --link-fg: var(--tooltip-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
106
106
  box-sizing: border-box;
@@ -157,8 +157,8 @@ function showPopover() {
157
157
  .tooltip :global(h4),
158
158
  .tooltip :global(h5),
159
159
  .tooltip :global(h6) {
160
- background: var(--heading-bg, var(--heading-bg, inherit));
161
- color: var(--heading-fg, var(--heading-fg, inherit));
160
+ background: var(--heading-bg, var(--bg, unset));
161
+ color: var(--heading-fg, var(--fg, unset));
162
162
  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
163
163
  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
164
164
  max-width: var(--tooltip-line-width, var(--ui-line-width, var(--line-width, unset)));
@@ -220,8 +220,8 @@ function showPopover() {
220
220
  text-indent: var(--tooltip-first-letter-indent, var(--ui-first-letter-indent, var(--ui-first-letter-indent, inherit)));
221
221
  font-variant: var(--tooltip-first-letter-font-variant, var(--ui-first-letter-font-variant, var(--ui-first-letter-font-variant, inherit)));
222
222
  text-align: var(--tooltip-first-letter-text-align, var(--ui-first-letter-text-align, var(--ui-first-letter-text-align, inherit)));
223
- background: var(--first-letter-bg, var(--first-line-bg, var(--first-line-bg, inherit)));
224
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, inherit)));
223
+ background: var(--first-letter-bg, var(--first-line-bg, var(--bg, unset)));
224
+ color: var(--first-letter-fg, var(--first-line-fg, var(--fg, unset)));
225
225
  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
226
226
  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
227
227
  }
package/dist/sass/_mixins.scss CHANGED
@@ -85,8 +85,8 @@
85
85
  }
86
86
 
87
87
  @mixin color-props ($prefixes...) {
88
- background: vars(bg, $prefixes...);
89
- color: vars(fg, $prefixes...);
88
+ background: var-no-fallbacks(--bg, $prefixes...);
89
+ color: var-no-fallbacks(--fg, $prefixes...);
90
90
  --link-bg: #{vars(link-bg, $prefixes...)};
91
91
  --link-fg: #{vars(link-fg, $prefixes...)};
92
92
  }
package/dist/typography/TextLayout.svelte CHANGED
@@ -61,8 +61,8 @@ div :global(h3),
61
61
  div :global(h4),
62
62
  div :global(h5),
63
63
  div :global(h6) {
64
- background: var(--heading-bg, var(--heading-bg, inherit));
65
- color: var(--heading-fg, var(--heading-fg, inherit));
64
+ background: var(--heading-bg, var(--bg, unset));
65
+ color: var(--heading-fg, var(--fg, unset));
66
66
  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
67
67
  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
68
68
  max-width: var(--body-line-width, var(--text-line-width, var(--line-width, unset)));
@@ -124,8 +124,8 @@ div :global(p:first-of-type::first-letter) {
124
124
  text-indent: var(--body-first-letter-indent, var(--text-first-letter-indent, var(--text-first-letter-indent, inherit)));
125
125
  font-variant: var(--body-first-letter-font-variant, var(--text-first-letter-font-variant, var(--text-first-letter-font-variant, inherit)));
126
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(--first-line-bg, inherit)));
128
- color: var(--first-letter-fg, var(--first-line-fg, var(--first-line-fg, 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
129
  --link-bg: var(--first-letter-link-bg, var(--first-line-link-bg, var(--first-line-link-bg, inherit)));
130
130
  --link-fg: var(--first-letter-link-fg, var(--first-line-link-fg, var(--first-line-link-fg, inherit)));
131
131
  }
package/dist/vars/themes/light.css CHANGED
@@ -1,7 +1,5 @@
1
1
  /* light mode */
2
2
 
3
- @import url("./code-light.css");
4
-
5
3
  :root {
6
4
  --fg: var(--material-color-grey-800);
7
5
  --bg: #fafafa;
package/dist/vars/themes/lightordark.css CHANGED
@@ -2,8 +2,6 @@
2
2
  @media (prefers-color-scheme: light) {
3
3
  /* light mode */
4
4
 
5
- @import url("./code-light.css");
6
-
7
5
  :root {
8
6
  --fg: var(--material-color-grey-800);
9
7
  --bg: #fafafa;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contain-css-svelte",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build-css": "postcss src/lib/vars/defaults.css -o dist/vars/defaults.css",