contain-css-svelte 1.1.13 → 1.1.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 (49) hide show
  1. package/README.md +6 -2
  2. package/dist/Card.svelte +345 -5
  3. package/dist/controls/Button.svelte +414 -6
  4. package/dist/controls/ButtonLink.svelte +483 -7
  5. package/dist/controls/Checkbox.svelte +138 -2
  6. package/dist/controls/CircleButton.svelte +483 -7
  7. package/dist/controls/Input.svelte +69 -1
  8. package/dist/controls/RadioButton.svelte +138 -2
  9. package/dist/controls/Select.svelte +138 -2
  10. package/dist/controls/TabItem.svelte +138 -2
  11. package/dist/controls/Toggle.svelte +138 -2
  12. package/dist/dropdowns/DropdownMenu.svelte +276 -4
  13. package/dist/index.d.ts +2 -0
  14. package/dist/index.js +2 -0
  15. package/dist/layout/Accordion.svelte +276 -4
  16. package/dist/layout/Bar.svelte +138 -2
  17. package/dist/layout/Container.svelte +75 -1
  18. package/dist/layout/DataList.svelte +69 -1
  19. package/dist/layout/DataListItem.svelte +69 -1
  20. package/dist/layout/Fieldset.svelte +138 -2
  21. package/dist/layout/Form.svelte +69 -1
  22. package/dist/layout/Hero.svelte +69 -1
  23. package/dist/layout/MenuList.svelte +276 -4
  24. package/dist/layout/Page.svelte +138 -2
  25. package/dist/layout/Sidebar.svelte +345 -5
  26. package/dist/layout/TabBar.svelte +69 -1
  27. package/dist/layout/Table.svelte +345 -5
  28. package/dist/layout/Tile.svelte +276 -4
  29. package/dist/misc/CodeInner.svelte +621 -9
  30. package/dist/misc/Progress.svelte +276 -4
  31. package/dist/misc/Tag.svelte +414 -6
  32. package/dist/overlays/Dialog.svelte +71 -3
  33. package/dist/overlays/Tooltip.svelte +210 -22
  34. package/dist/review/scenarios/IncredibleAppShell.svelte +3 -3
  35. package/dist/review/scenarios/LayoutWorkbench.svelte +2 -2
  36. package/dist/sass/_color.scss +37 -5
  37. package/dist/typography/Text.svelte +54 -0
  38. package/dist/typography/Text.svelte.d.ts +21 -0
  39. package/dist/vars/colors.css +8 -0
  40. package/dist/vars/defaults.css +8 -0
  41. package/dist/vars/themes/bootstrap.css +6 -0
  42. package/dist/vars/themes/canyon.css +6 -0
  43. package/dist/vars/themes/dark.css +6 -0
  44. package/dist/vars/themes/forest.css +6 -0
  45. package/dist/vars/themes/light.css +6 -0
  46. package/dist/vars/themes/material.css +6 -0
  47. package/dist/vars/themes/purple.css +6 -0
  48. package/dist/vars/themes/retro.css +6 -0
  49. package/package.json +1 -1
package/dist/layout/Bar.svelte CHANGED
@@ -56,7 +56,75 @@ const extraStyle = $derived(primary
56
56
  var(--_bg-base),
57
57
  var(--_bg-mix-color) var(--_bg-mix-amount)
58
58
  );
59
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
59
+ --_color: color-mix(
60
+ in srgb,
61
+ var(--_fg-base),
62
+ var(--_fg-mix-color) var(--_fg-mix-amount)
63
+ );
64
+ --muted-color: var(--muted-color-override, var(--_background-color));
65
+ --primary-text-fg: var(
66
+ --primary-text-fg-override,
67
+ color-mix(
68
+ in srgb,
69
+ var(--_color),
70
+ var(--primary-color)
71
+ var(--primary-text-amount, var(--text-amount, 50%))
72
+ )
73
+ );
74
+ --secondary-text-fg: var(
75
+ --secondary-text-fg-override,
76
+ color-mix(
77
+ in srgb,
78
+ var(--_color),
79
+ var(--secondary-color)
80
+ var(--secondary-text-amount, var(--text-amount, 50%))
81
+ )
82
+ );
83
+ --info-text-fg: var(
84
+ --info-text-fg-override,
85
+ color-mix(
86
+ in srgb,
87
+ var(--_color),
88
+ var(--info-color)
89
+ var(--info-text-amount, var(--text-amount, 50%))
90
+ )
91
+ );
92
+ --success-text-fg: var(
93
+ --success-text-fg-override,
94
+ color-mix(
95
+ in srgb,
96
+ var(--_color),
97
+ var(--success-color)
98
+ var(--success-text-amount, var(--text-amount, 50%))
99
+ )
100
+ );
101
+ --warning-text-fg: var(
102
+ --warning-text-fg-override,
103
+ color-mix(
104
+ in srgb,
105
+ var(--_color),
106
+ var(--warning-color)
107
+ var(--warning-text-amount, var(--text-amount, 50%))
108
+ )
109
+ );
110
+ --danger-text-fg: var(
111
+ --danger-text-fg-override,
112
+ color-mix(
113
+ in srgb,
114
+ var(--_color),
115
+ var(--danger-color)
116
+ var(--danger-text-amount, var(--text-amount, 50%))
117
+ )
118
+ );
119
+ --muted-text-fg: var(
120
+ --muted-text-fg-override,
121
+ color-mix(
122
+ in srgb,
123
+ var(--_color),
124
+ var(--muted-color)
125
+ var(--muted-text-amount, var(--text-amount, 50%))
126
+ )
127
+ );
60
128
  background-color: var(--_background-color);
61
129
  color: var(--_color);
62
130
  font-family: var(--bar-font-family, var(--surface-font-family, inherit));
@@ -97,7 +165,75 @@ const extraStyle = $derived(primary
97
165
  var(--_bg-base),
98
166
  var(--_bg-mix-color) var(--_bg-mix-amount)
99
167
  );
100
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
168
+ --_color: color-mix(
169
+ in srgb,
170
+ var(--_fg-base),
171
+ var(--_fg-mix-color) var(--_fg-mix-amount)
172
+ );
173
+ --muted-color: var(--muted-color-override, var(--_background-color));
174
+ --primary-text-fg: var(
175
+ --primary-text-fg-override,
176
+ color-mix(
177
+ in srgb,
178
+ var(--_color),
179
+ var(--primary-color)
180
+ var(--primary-text-amount, var(--text-amount, 50%))
181
+ )
182
+ );
183
+ --secondary-text-fg: var(
184
+ --secondary-text-fg-override,
185
+ color-mix(
186
+ in srgb,
187
+ var(--_color),
188
+ var(--secondary-color)
189
+ var(--secondary-text-amount, var(--text-amount, 50%))
190
+ )
191
+ );
192
+ --info-text-fg: var(
193
+ --info-text-fg-override,
194
+ color-mix(
195
+ in srgb,
196
+ var(--_color),
197
+ var(--info-color)
198
+ var(--info-text-amount, var(--text-amount, 50%))
199
+ )
200
+ );
201
+ --success-text-fg: var(
202
+ --success-text-fg-override,
203
+ color-mix(
204
+ in srgb,
205
+ var(--_color),
206
+ var(--success-color)
207
+ var(--success-text-amount, var(--text-amount, 50%))
208
+ )
209
+ );
210
+ --warning-text-fg: var(
211
+ --warning-text-fg-override,
212
+ color-mix(
213
+ in srgb,
214
+ var(--_color),
215
+ var(--warning-color)
216
+ var(--warning-text-amount, var(--text-amount, 50%))
217
+ )
218
+ );
219
+ --danger-text-fg: var(
220
+ --danger-text-fg-override,
221
+ color-mix(
222
+ in srgb,
223
+ var(--_color),
224
+ var(--danger-color)
225
+ var(--danger-text-amount, var(--text-amount, 50%))
226
+ )
227
+ );
228
+ --muted-text-fg: var(
229
+ --muted-text-fg-override,
230
+ color-mix(
231
+ in srgb,
232
+ var(--_color),
233
+ var(--muted-color)
234
+ var(--muted-text-amount, var(--text-amount, 50%))
235
+ )
236
+ );
101
237
  background-color: var(--_background-color);
102
238
  color: var(--_color);
103
239
  }</style>
package/dist/layout/Container.svelte CHANGED
@@ -40,7 +40,75 @@ section {
40
40
  var(--_bg-base),
41
41
  var(--_bg-mix-color) var(--_bg-mix-amount)
42
42
  );
43
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
43
+ --_color: color-mix(
44
+ in srgb,
45
+ var(--_fg-base),
46
+ var(--_fg-mix-color) var(--_fg-mix-amount)
47
+ );
48
+ --muted-color: var(--muted-color-override, var(--_background-color));
49
+ --primary-text-fg: var(
50
+ --primary-text-fg-override,
51
+ color-mix(
52
+ in srgb,
53
+ var(--_color),
54
+ var(--primary-color)
55
+ var(--primary-text-amount, var(--text-amount, 50%))
56
+ )
57
+ );
58
+ --secondary-text-fg: var(
59
+ --secondary-text-fg-override,
60
+ color-mix(
61
+ in srgb,
62
+ var(--_color),
63
+ var(--secondary-color)
64
+ var(--secondary-text-amount, var(--text-amount, 50%))
65
+ )
66
+ );
67
+ --info-text-fg: var(
68
+ --info-text-fg-override,
69
+ color-mix(
70
+ in srgb,
71
+ var(--_color),
72
+ var(--info-color)
73
+ var(--info-text-amount, var(--text-amount, 50%))
74
+ )
75
+ );
76
+ --success-text-fg: var(
77
+ --success-text-fg-override,
78
+ color-mix(
79
+ in srgb,
80
+ var(--_color),
81
+ var(--success-color)
82
+ var(--success-text-amount, var(--text-amount, 50%))
83
+ )
84
+ );
85
+ --warning-text-fg: var(
86
+ --warning-text-fg-override,
87
+ color-mix(
88
+ in srgb,
89
+ var(--_color),
90
+ var(--warning-color)
91
+ var(--warning-text-amount, var(--text-amount, 50%))
92
+ )
93
+ );
94
+ --danger-text-fg: var(
95
+ --danger-text-fg-override,
96
+ color-mix(
97
+ in srgb,
98
+ var(--_color),
99
+ var(--danger-color)
100
+ var(--danger-text-amount, var(--text-amount, 50%))
101
+ )
102
+ );
103
+ --muted-text-fg: var(
104
+ --muted-text-fg-override,
105
+ color-mix(
106
+ in srgb,
107
+ var(--_color),
108
+ var(--muted-color)
109
+ var(--muted-text-amount, var(--text-amount, 50%))
110
+ )
111
+ );
44
112
  background-color: var(--_background-color);
45
113
  color: var(--_color);
46
114
  box-sizing: border-box;
@@ -406,6 +474,12 @@ section:hover::-webkit-scrollbar-thumb:hover {
406
474
  background: var(--container-scrollbar-thumb-hover-bg, var(--surface-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
407
475
  }
408
476
 
477
+ section {
478
+ /* Make container take up its width if possible: this fixes a bug where container would
479
+ shrink enormously if it ended up nested inside e.g. a <SplitPane> */
480
+ width: var(--container-width, 100%);
481
+ }
482
+
409
483
  .border {
410
484
  border: var(--container-border, var(--surface-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
411
485
  }</style>
package/dist/layout/DataList.svelte CHANGED
@@ -57,7 +57,75 @@ const style = $derived(injectVars(restProps, "data-list", [
57
57
  var(--_bg-base),
58
58
  var(--_bg-mix-color) var(--_bg-mix-amount)
59
59
  );
60
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
60
+ --_color: color-mix(
61
+ in srgb,
62
+ var(--_fg-base),
63
+ var(--_fg-mix-color) var(--_fg-mix-amount)
64
+ );
65
+ --muted-color: var(--muted-color-override, var(--_background-color));
66
+ --primary-text-fg: var(
67
+ --primary-text-fg-override,
68
+ color-mix(
69
+ in srgb,
70
+ var(--_color),
71
+ var(--primary-color)
72
+ var(--primary-text-amount, var(--text-amount, 50%))
73
+ )
74
+ );
75
+ --secondary-text-fg: var(
76
+ --secondary-text-fg-override,
77
+ color-mix(
78
+ in srgb,
79
+ var(--_color),
80
+ var(--secondary-color)
81
+ var(--secondary-text-amount, var(--text-amount, 50%))
82
+ )
83
+ );
84
+ --info-text-fg: var(
85
+ --info-text-fg-override,
86
+ color-mix(
87
+ in srgb,
88
+ var(--_color),
89
+ var(--info-color)
90
+ var(--info-text-amount, var(--text-amount, 50%))
91
+ )
92
+ );
93
+ --success-text-fg: var(
94
+ --success-text-fg-override,
95
+ color-mix(
96
+ in srgb,
97
+ var(--_color),
98
+ var(--success-color)
99
+ var(--success-text-amount, var(--text-amount, 50%))
100
+ )
101
+ );
102
+ --warning-text-fg: var(
103
+ --warning-text-fg-override,
104
+ color-mix(
105
+ in srgb,
106
+ var(--_color),
107
+ var(--warning-color)
108
+ var(--warning-text-amount, var(--text-amount, 50%))
109
+ )
110
+ );
111
+ --danger-text-fg: var(
112
+ --danger-text-fg-override,
113
+ color-mix(
114
+ in srgb,
115
+ var(--_color),
116
+ var(--danger-color)
117
+ var(--danger-text-amount, var(--text-amount, 50%))
118
+ )
119
+ );
120
+ --muted-text-fg: var(
121
+ --muted-text-fg-override,
122
+ color-mix(
123
+ in srgb,
124
+ var(--_color),
125
+ var(--muted-color)
126
+ var(--muted-text-amount, var(--text-amount, 50%))
127
+ )
128
+ );
61
129
  background-color: var(--_background-color);
62
130
  color: var(--_color);
63
131
  font-family: var(--data-list-font-family, var(--surface-font-family, inherit));
package/dist/layout/DataListItem.svelte CHANGED
@@ -137,7 +137,75 @@ function handleKeydown(event) {
137
137
  var(--_bg-base),
138
138
  var(--_bg-mix-color) var(--_bg-mix-amount)
139
139
  );
140
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
140
+ --_color: color-mix(
141
+ in srgb,
142
+ var(--_fg-base),
143
+ var(--_fg-mix-color) var(--_fg-mix-amount)
144
+ );
145
+ --muted-color: var(--muted-color-override, var(--_background-color));
146
+ --primary-text-fg: var(
147
+ --primary-text-fg-override,
148
+ color-mix(
149
+ in srgb,
150
+ var(--_color),
151
+ var(--primary-color)
152
+ var(--primary-text-amount, var(--text-amount, 50%))
153
+ )
154
+ );
155
+ --secondary-text-fg: var(
156
+ --secondary-text-fg-override,
157
+ color-mix(
158
+ in srgb,
159
+ var(--_color),
160
+ var(--secondary-color)
161
+ var(--secondary-text-amount, var(--text-amount, 50%))
162
+ )
163
+ );
164
+ --info-text-fg: var(
165
+ --info-text-fg-override,
166
+ color-mix(
167
+ in srgb,
168
+ var(--_color),
169
+ var(--info-color)
170
+ var(--info-text-amount, var(--text-amount, 50%))
171
+ )
172
+ );
173
+ --success-text-fg: var(
174
+ --success-text-fg-override,
175
+ color-mix(
176
+ in srgb,
177
+ var(--_color),
178
+ var(--success-color)
179
+ var(--success-text-amount, var(--text-amount, 50%))
180
+ )
181
+ );
182
+ --warning-text-fg: var(
183
+ --warning-text-fg-override,
184
+ color-mix(
185
+ in srgb,
186
+ var(--_color),
187
+ var(--warning-color)
188
+ var(--warning-text-amount, var(--text-amount, 50%))
189
+ )
190
+ );
191
+ --danger-text-fg: var(
192
+ --danger-text-fg-override,
193
+ color-mix(
194
+ in srgb,
195
+ var(--_color),
196
+ var(--danger-color)
197
+ var(--danger-text-amount, var(--text-amount, 50%))
198
+ )
199
+ );
200
+ --muted-text-fg: var(
201
+ --muted-text-fg-override,
202
+ color-mix(
203
+ in srgb,
204
+ var(--_color),
205
+ var(--muted-color)
206
+ var(--muted-text-amount, var(--text-amount, 50%))
207
+ )
208
+ );
141
209
  background-color: var(--_background-color);
142
210
  color: var(--_color);
143
211
  max-width: var(--data-list-item-line-width, var(--data-list-line-width, var(--surface-line-width, var(--line-width, unset))));
package/dist/layout/Fieldset.svelte CHANGED
@@ -67,7 +67,75 @@ fieldset {
67
67
  var(--_bg-base),
68
68
  var(--_bg-mix-color) var(--_bg-mix-amount)
69
69
  );
70
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
70
+ --_color: color-mix(
71
+ in srgb,
72
+ var(--_fg-base),
73
+ var(--_fg-mix-color) var(--_fg-mix-amount)
74
+ );
75
+ --muted-color: var(--muted-color-override, var(--_background-color));
76
+ --primary-text-fg: var(
77
+ --primary-text-fg-override,
78
+ color-mix(
79
+ in srgb,
80
+ var(--_color),
81
+ var(--primary-color)
82
+ var(--primary-text-amount, var(--text-amount, 50%))
83
+ )
84
+ );
85
+ --secondary-text-fg: var(
86
+ --secondary-text-fg-override,
87
+ color-mix(
88
+ in srgb,
89
+ var(--_color),
90
+ var(--secondary-color)
91
+ var(--secondary-text-amount, var(--text-amount, 50%))
92
+ )
93
+ );
94
+ --info-text-fg: var(
95
+ --info-text-fg-override,
96
+ color-mix(
97
+ in srgb,
98
+ var(--_color),
99
+ var(--info-color)
100
+ var(--info-text-amount, var(--text-amount, 50%))
101
+ )
102
+ );
103
+ --success-text-fg: var(
104
+ --success-text-fg-override,
105
+ color-mix(
106
+ in srgb,
107
+ var(--_color),
108
+ var(--success-color)
109
+ var(--success-text-amount, var(--text-amount, 50%))
110
+ )
111
+ );
112
+ --warning-text-fg: var(
113
+ --warning-text-fg-override,
114
+ color-mix(
115
+ in srgb,
116
+ var(--_color),
117
+ var(--warning-color)
118
+ var(--warning-text-amount, var(--text-amount, 50%))
119
+ )
120
+ );
121
+ --danger-text-fg: var(
122
+ --danger-text-fg-override,
123
+ color-mix(
124
+ in srgb,
125
+ var(--_color),
126
+ var(--danger-color)
127
+ var(--danger-text-amount, var(--text-amount, 50%))
128
+ )
129
+ );
130
+ --muted-text-fg: var(
131
+ --muted-text-fg-override,
132
+ color-mix(
133
+ in srgb,
134
+ var(--_color),
135
+ var(--muted-color)
136
+ var(--muted-text-amount, var(--text-amount, 50%))
137
+ )
138
+ );
71
139
  background-color: var(--_background-color);
72
140
  color: var(--_color);
73
141
  box-sizing: border-box;
@@ -123,7 +191,75 @@ legend {
123
191
  var(--_bg-base),
124
192
  var(--_bg-mix-color) var(--_bg-mix-amount)
125
193
  );
126
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
194
+ --_color: color-mix(
195
+ in srgb,
196
+ var(--_fg-base),
197
+ var(--_fg-mix-color) var(--_fg-mix-amount)
198
+ );
199
+ --muted-color: var(--muted-color-override, var(--_background-color));
200
+ --primary-text-fg: var(
201
+ --primary-text-fg-override,
202
+ color-mix(
203
+ in srgb,
204
+ var(--_color),
205
+ var(--primary-color)
206
+ var(--primary-text-amount, var(--text-amount, 50%))
207
+ )
208
+ );
209
+ --secondary-text-fg: var(
210
+ --secondary-text-fg-override,
211
+ color-mix(
212
+ in srgb,
213
+ var(--_color),
214
+ var(--secondary-color)
215
+ var(--secondary-text-amount, var(--text-amount, 50%))
216
+ )
217
+ );
218
+ --info-text-fg: var(
219
+ --info-text-fg-override,
220
+ color-mix(
221
+ in srgb,
222
+ var(--_color),
223
+ var(--info-color)
224
+ var(--info-text-amount, var(--text-amount, 50%))
225
+ )
226
+ );
227
+ --success-text-fg: var(
228
+ --success-text-fg-override,
229
+ color-mix(
230
+ in srgb,
231
+ var(--_color),
232
+ var(--success-color)
233
+ var(--success-text-amount, var(--text-amount, 50%))
234
+ )
235
+ );
236
+ --warning-text-fg: var(
237
+ --warning-text-fg-override,
238
+ color-mix(
239
+ in srgb,
240
+ var(--_color),
241
+ var(--warning-color)
242
+ var(--warning-text-amount, var(--text-amount, 50%))
243
+ )
244
+ );
245
+ --danger-text-fg: var(
246
+ --danger-text-fg-override,
247
+ color-mix(
248
+ in srgb,
249
+ var(--_color),
250
+ var(--danger-color)
251
+ var(--danger-text-amount, var(--text-amount, 50%))
252
+ )
253
+ );
254
+ --muted-text-fg: var(
255
+ --muted-text-fg-override,
256
+ color-mix(
257
+ in srgb,
258
+ var(--_color),
259
+ var(--muted-color)
260
+ var(--muted-text-amount, var(--text-amount, 50%))
261
+ )
262
+ );
127
263
  background-color: var(--_background-color);
128
264
  color: var(--_color);
129
265
  padding: var(--legend-padding, var(--padding, 0 var(--space-sm)));
package/dist/layout/Form.svelte CHANGED
@@ -64,7 +64,75 @@ form {
64
64
  var(--_bg-base),
65
65
  var(--_bg-mix-color) var(--_bg-mix-amount)
66
66
  );
67
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
67
+ --_color: color-mix(
68
+ in srgb,
69
+ var(--_fg-base),
70
+ var(--_fg-mix-color) var(--_fg-mix-amount)
71
+ );
72
+ --muted-color: var(--muted-color-override, var(--_background-color));
73
+ --primary-text-fg: var(
74
+ --primary-text-fg-override,
75
+ color-mix(
76
+ in srgb,
77
+ var(--_color),
78
+ var(--primary-color)
79
+ var(--primary-text-amount, var(--text-amount, 50%))
80
+ )
81
+ );
82
+ --secondary-text-fg: var(
83
+ --secondary-text-fg-override,
84
+ color-mix(
85
+ in srgb,
86
+ var(--_color),
87
+ var(--secondary-color)
88
+ var(--secondary-text-amount, var(--text-amount, 50%))
89
+ )
90
+ );
91
+ --info-text-fg: var(
92
+ --info-text-fg-override,
93
+ color-mix(
94
+ in srgb,
95
+ var(--_color),
96
+ var(--info-color)
97
+ var(--info-text-amount, var(--text-amount, 50%))
98
+ )
99
+ );
100
+ --success-text-fg: var(
101
+ --success-text-fg-override,
102
+ color-mix(
103
+ in srgb,
104
+ var(--_color),
105
+ var(--success-color)
106
+ var(--success-text-amount, var(--text-amount, 50%))
107
+ )
108
+ );
109
+ --warning-text-fg: var(
110
+ --warning-text-fg-override,
111
+ color-mix(
112
+ in srgb,
113
+ var(--_color),
114
+ var(--warning-color)
115
+ var(--warning-text-amount, var(--text-amount, 50%))
116
+ )
117
+ );
118
+ --danger-text-fg: var(
119
+ --danger-text-fg-override,
120
+ color-mix(
121
+ in srgb,
122
+ var(--_color),
123
+ var(--danger-color)
124
+ var(--danger-text-amount, var(--text-amount, 50%))
125
+ )
126
+ );
127
+ --muted-text-fg: var(
128
+ --muted-text-fg-override,
129
+ color-mix(
130
+ in srgb,
131
+ var(--_color),
132
+ var(--muted-color)
133
+ var(--muted-text-amount, var(--text-amount, 50%))
134
+ )
135
+ );
68
136
  background-color: var(--_background-color);
69
137
  color: var(--_color);
70
138
  max-width: var(--form-line-width, var(--surface-line-width, var(--line-width, unset)));
package/dist/layout/Hero.svelte CHANGED
@@ -43,7 +43,75 @@ const style = $derived(injectVars(restProps, "hero", [
43
43
  var(--_bg-base),
44
44
  var(--_bg-mix-color) var(--_bg-mix-amount)
45
45
  );
46
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
46
+ --_color: color-mix(
47
+ in srgb,
48
+ var(--_fg-base),
49
+ var(--_fg-mix-color) var(--_fg-mix-amount)
50
+ );
51
+ --muted-color: var(--muted-color-override, var(--_background-color));
52
+ --primary-text-fg: var(
53
+ --primary-text-fg-override,
54
+ color-mix(
55
+ in srgb,
56
+ var(--_color),
57
+ var(--primary-color)
58
+ var(--primary-text-amount, var(--text-amount, 50%))
59
+ )
60
+ );
61
+ --secondary-text-fg: var(
62
+ --secondary-text-fg-override,
63
+ color-mix(
64
+ in srgb,
65
+ var(--_color),
66
+ var(--secondary-color)
67
+ var(--secondary-text-amount, var(--text-amount, 50%))
68
+ )
69
+ );
70
+ --info-text-fg: var(
71
+ --info-text-fg-override,
72
+ color-mix(
73
+ in srgb,
74
+ var(--_color),
75
+ var(--info-color)
76
+ var(--info-text-amount, var(--text-amount, 50%))
77
+ )
78
+ );
79
+ --success-text-fg: var(
80
+ --success-text-fg-override,
81
+ color-mix(
82
+ in srgb,
83
+ var(--_color),
84
+ var(--success-color)
85
+ var(--success-text-amount, var(--text-amount, 50%))
86
+ )
87
+ );
88
+ --warning-text-fg: var(
89
+ --warning-text-fg-override,
90
+ color-mix(
91
+ in srgb,
92
+ var(--_color),
93
+ var(--warning-color)
94
+ var(--warning-text-amount, var(--text-amount, 50%))
95
+ )
96
+ );
97
+ --danger-text-fg: var(
98
+ --danger-text-fg-override,
99
+ color-mix(
100
+ in srgb,
101
+ var(--_color),
102
+ var(--danger-color)
103
+ var(--danger-text-amount, var(--text-amount, 50%))
104
+ )
105
+ );
106
+ --muted-text-fg: var(
107
+ --muted-text-fg-override,
108
+ color-mix(
109
+ in srgb,
110
+ var(--_color),
111
+ var(--muted-color)
112
+ var(--muted-text-amount, var(--text-amount, 50%))
113
+ )
114
+ );
47
115
  background-color: var(--_background-color);
48
116
  color: var(--_color);
49
117
  max-width: var(--hero-line-width, var(--surface-line-width, var(--line-width, unset)));