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/controls/RadioButton.svelte CHANGED
@@ -149,7 +149,75 @@ label.radio-item::before {
149
149
  var(--_bg-base),
150
150
  var(--_bg-mix-color) var(--_bg-mix-amount)
151
151
  );
152
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
152
+ --_color: color-mix(
153
+ in srgb,
154
+ var(--_fg-base),
155
+ var(--_fg-mix-color) var(--_fg-mix-amount)
156
+ );
157
+ --muted-color: var(--muted-color-override, var(--_background-color));
158
+ --primary-text-fg: var(
159
+ --primary-text-fg-override,
160
+ color-mix(
161
+ in srgb,
162
+ var(--_color),
163
+ var(--primary-color)
164
+ var(--primary-text-amount, var(--text-amount, 50%))
165
+ )
166
+ );
167
+ --secondary-text-fg: var(
168
+ --secondary-text-fg-override,
169
+ color-mix(
170
+ in srgb,
171
+ var(--_color),
172
+ var(--secondary-color)
173
+ var(--secondary-text-amount, var(--text-amount, 50%))
174
+ )
175
+ );
176
+ --info-text-fg: var(
177
+ --info-text-fg-override,
178
+ color-mix(
179
+ in srgb,
180
+ var(--_color),
181
+ var(--info-color)
182
+ var(--info-text-amount, var(--text-amount, 50%))
183
+ )
184
+ );
185
+ --success-text-fg: var(
186
+ --success-text-fg-override,
187
+ color-mix(
188
+ in srgb,
189
+ var(--_color),
190
+ var(--success-color)
191
+ var(--success-text-amount, var(--text-amount, 50%))
192
+ )
193
+ );
194
+ --warning-text-fg: var(
195
+ --warning-text-fg-override,
196
+ color-mix(
197
+ in srgb,
198
+ var(--_color),
199
+ var(--warning-color)
200
+ var(--warning-text-amount, var(--text-amount, 50%))
201
+ )
202
+ );
203
+ --danger-text-fg: var(
204
+ --danger-text-fg-override,
205
+ color-mix(
206
+ in srgb,
207
+ var(--_color),
208
+ var(--danger-color)
209
+ var(--danger-text-amount, var(--text-amount, 50%))
210
+ )
211
+ );
212
+ --muted-text-fg: var(
213
+ --muted-text-fg-override,
214
+ color-mix(
215
+ in srgb,
216
+ var(--_color),
217
+ var(--muted-color)
218
+ var(--muted-text-amount, var(--text-amount, 50%))
219
+ )
220
+ );
153
221
  background-color: var(--_background-color);
154
222
  color: var(--_color);
155
223
  border: var(--radio-button-border, var(--border, 1px solid var(--border-color)));
@@ -186,7 +254,75 @@ label.radio-item:has(input:checked)::before {
186
254
  var(--_bg-base),
187
255
  var(--_bg-mix-color) var(--_bg-mix-amount)
188
256
  );
189
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
257
+ --_color: color-mix(
258
+ in srgb,
259
+ var(--_fg-base),
260
+ var(--_fg-mix-color) var(--_fg-mix-amount)
261
+ );
262
+ --muted-color: var(--muted-color-override, var(--_background-color));
263
+ --primary-text-fg: var(
264
+ --primary-text-fg-override,
265
+ color-mix(
266
+ in srgb,
267
+ var(--_color),
268
+ var(--primary-color)
269
+ var(--primary-text-amount, var(--text-amount, 50%))
270
+ )
271
+ );
272
+ --secondary-text-fg: var(
273
+ --secondary-text-fg-override,
274
+ color-mix(
275
+ in srgb,
276
+ var(--_color),
277
+ var(--secondary-color)
278
+ var(--secondary-text-amount, var(--text-amount, 50%))
279
+ )
280
+ );
281
+ --info-text-fg: var(
282
+ --info-text-fg-override,
283
+ color-mix(
284
+ in srgb,
285
+ var(--_color),
286
+ var(--info-color)
287
+ var(--info-text-amount, var(--text-amount, 50%))
288
+ )
289
+ );
290
+ --success-text-fg: var(
291
+ --success-text-fg-override,
292
+ color-mix(
293
+ in srgb,
294
+ var(--_color),
295
+ var(--success-color)
296
+ var(--success-text-amount, var(--text-amount, 50%))
297
+ )
298
+ );
299
+ --warning-text-fg: var(
300
+ --warning-text-fg-override,
301
+ color-mix(
302
+ in srgb,
303
+ var(--_color),
304
+ var(--warning-color)
305
+ var(--warning-text-amount, var(--text-amount, 50%))
306
+ )
307
+ );
308
+ --danger-text-fg: var(
309
+ --danger-text-fg-override,
310
+ color-mix(
311
+ in srgb,
312
+ var(--_color),
313
+ var(--danger-color)
314
+ var(--danger-text-amount, var(--text-amount, 50%))
315
+ )
316
+ );
317
+ --muted-text-fg: var(
318
+ --muted-text-fg-override,
319
+ color-mix(
320
+ in srgb,
321
+ var(--_color),
322
+ var(--muted-color)
323
+ var(--muted-text-amount, var(--text-amount, 50%))
324
+ )
325
+ );
190
326
  background-color: var(--_background-color);
191
327
  color: var(--_color);
192
328
  border: var(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));
package/dist/controls/Select.svelte CHANGED
@@ -163,7 +163,75 @@ select,
163
163
  var(--_bg-base),
164
164
  var(--_bg-mix-color) var(--_bg-mix-amount)
165
165
  );
166
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
166
+ --_color: color-mix(
167
+ in srgb,
168
+ var(--_fg-base),
169
+ var(--_fg-mix-color) var(--_fg-mix-amount)
170
+ );
171
+ --muted-color: var(--muted-color-override, var(--_background-color));
172
+ --primary-text-fg: var(
173
+ --primary-text-fg-override,
174
+ color-mix(
175
+ in srgb,
176
+ var(--_color),
177
+ var(--primary-color)
178
+ var(--primary-text-amount, var(--text-amount, 50%))
179
+ )
180
+ );
181
+ --secondary-text-fg: var(
182
+ --secondary-text-fg-override,
183
+ color-mix(
184
+ in srgb,
185
+ var(--_color),
186
+ var(--secondary-color)
187
+ var(--secondary-text-amount, var(--text-amount, 50%))
188
+ )
189
+ );
190
+ --info-text-fg: var(
191
+ --info-text-fg-override,
192
+ color-mix(
193
+ in srgb,
194
+ var(--_color),
195
+ var(--info-color)
196
+ var(--info-text-amount, var(--text-amount, 50%))
197
+ )
198
+ );
199
+ --success-text-fg: var(
200
+ --success-text-fg-override,
201
+ color-mix(
202
+ in srgb,
203
+ var(--_color),
204
+ var(--success-color)
205
+ var(--success-text-amount, var(--text-amount, 50%))
206
+ )
207
+ );
208
+ --warning-text-fg: var(
209
+ --warning-text-fg-override,
210
+ color-mix(
211
+ in srgb,
212
+ var(--_color),
213
+ var(--warning-color)
214
+ var(--warning-text-amount, var(--text-amount, 50%))
215
+ )
216
+ );
217
+ --danger-text-fg: var(
218
+ --danger-text-fg-override,
219
+ color-mix(
220
+ in srgb,
221
+ var(--_color),
222
+ var(--danger-color)
223
+ var(--danger-text-amount, var(--text-amount, 50%))
224
+ )
225
+ );
226
+ --muted-text-fg: var(
227
+ --muted-text-fg-override,
228
+ color-mix(
229
+ in srgb,
230
+ var(--_color),
231
+ var(--muted-color)
232
+ var(--muted-text-amount, var(--text-amount, 50%))
233
+ )
234
+ );
167
235
  background-color: var(--_background-color);
168
236
  color: var(--_color);
169
237
  width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100vw))));
@@ -226,7 +294,75 @@ button:focus-visible {
226
294
  var(--_bg-base),
227
295
  var(--_bg-mix-color) var(--_bg-mix-amount)
228
296
  );
229
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
297
+ --_color: color-mix(
298
+ in srgb,
299
+ var(--_fg-base),
300
+ var(--_fg-mix-color) var(--_fg-mix-amount)
301
+ );
302
+ --muted-color: var(--muted-color-override, var(--_background-color));
303
+ --primary-text-fg: var(
304
+ --primary-text-fg-override,
305
+ color-mix(
306
+ in srgb,
307
+ var(--_color),
308
+ var(--primary-color)
309
+ var(--primary-text-amount, var(--text-amount, 50%))
310
+ )
311
+ );
312
+ --secondary-text-fg: var(
313
+ --secondary-text-fg-override,
314
+ color-mix(
315
+ in srgb,
316
+ var(--_color),
317
+ var(--secondary-color)
318
+ var(--secondary-text-amount, var(--text-amount, 50%))
319
+ )
320
+ );
321
+ --info-text-fg: var(
322
+ --info-text-fg-override,
323
+ color-mix(
324
+ in srgb,
325
+ var(--_color),
326
+ var(--info-color)
327
+ var(--info-text-amount, var(--text-amount, 50%))
328
+ )
329
+ );
330
+ --success-text-fg: var(
331
+ --success-text-fg-override,
332
+ color-mix(
333
+ in srgb,
334
+ var(--_color),
335
+ var(--success-color)
336
+ var(--success-text-amount, var(--text-amount, 50%))
337
+ )
338
+ );
339
+ --warning-text-fg: var(
340
+ --warning-text-fg-override,
341
+ color-mix(
342
+ in srgb,
343
+ var(--_color),
344
+ var(--warning-color)
345
+ var(--warning-text-amount, var(--text-amount, 50%))
346
+ )
347
+ );
348
+ --danger-text-fg: var(
349
+ --danger-text-fg-override,
350
+ color-mix(
351
+ in srgb,
352
+ var(--_color),
353
+ var(--danger-color)
354
+ var(--danger-text-amount, var(--text-amount, 50%))
355
+ )
356
+ );
357
+ --muted-text-fg: var(
358
+ --muted-text-fg-override,
359
+ color-mix(
360
+ in srgb,
361
+ var(--_color),
362
+ var(--muted-color)
363
+ var(--muted-text-amount, var(--text-amount, 50%))
364
+ )
365
+ );
230
366
  background-color: var(--_background-color);
231
367
  color: var(--_color);
232
368
  --menu-item-justify: var(--select-menu-item-justify, flex-start);
package/dist/controls/TabItem.svelte CHANGED
@@ -36,7 +36,75 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
36
36
  var(--_bg-base),
37
37
  var(--_bg-mix-color) var(--_bg-mix-amount)
38
38
  );
39
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
39
+ --_color: color-mix(
40
+ in srgb,
41
+ var(--_fg-base),
42
+ var(--_fg-mix-color) var(--_fg-mix-amount)
43
+ );
44
+ --muted-color: var(--muted-color-override, var(--_background-color));
45
+ --primary-text-fg: var(
46
+ --primary-text-fg-override,
47
+ color-mix(
48
+ in srgb,
49
+ var(--_color),
50
+ var(--primary-color)
51
+ var(--primary-text-amount, var(--text-amount, 50%))
52
+ )
53
+ );
54
+ --secondary-text-fg: var(
55
+ --secondary-text-fg-override,
56
+ color-mix(
57
+ in srgb,
58
+ var(--_color),
59
+ var(--secondary-color)
60
+ var(--secondary-text-amount, var(--text-amount, 50%))
61
+ )
62
+ );
63
+ --info-text-fg: var(
64
+ --info-text-fg-override,
65
+ color-mix(
66
+ in srgb,
67
+ var(--_color),
68
+ var(--info-color)
69
+ var(--info-text-amount, var(--text-amount, 50%))
70
+ )
71
+ );
72
+ --success-text-fg: var(
73
+ --success-text-fg-override,
74
+ color-mix(
75
+ in srgb,
76
+ var(--_color),
77
+ var(--success-color)
78
+ var(--success-text-amount, var(--text-amount, 50%))
79
+ )
80
+ );
81
+ --warning-text-fg: var(
82
+ --warning-text-fg-override,
83
+ color-mix(
84
+ in srgb,
85
+ var(--_color),
86
+ var(--warning-color)
87
+ var(--warning-text-amount, var(--text-amount, 50%))
88
+ )
89
+ );
90
+ --danger-text-fg: var(
91
+ --danger-text-fg-override,
92
+ color-mix(
93
+ in srgb,
94
+ var(--_color),
95
+ var(--danger-color)
96
+ var(--danger-text-amount, var(--text-amount, 50%))
97
+ )
98
+ );
99
+ --muted-text-fg: var(
100
+ --muted-text-fg-override,
101
+ color-mix(
102
+ in srgb,
103
+ var(--_color),
104
+ var(--muted-color)
105
+ var(--muted-text-amount, var(--text-amount, 50%))
106
+ )
107
+ );
40
108
  background-color: var(--_background-color);
41
109
  color: var(--_color);
42
110
  box-sizing: border-box;
@@ -97,7 +165,75 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
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
  font-family: var(--tab-active-font-family, var(--tab-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--secondary-font-family, var(--font-family, unset)))))));
package/dist/controls/Toggle.svelte CHANGED
@@ -92,7 +92,75 @@ const effectiveOnLabel = $derived(onLabel || children);
92
92
  var(--_bg-base),
93
93
  var(--_bg-mix-color) var(--_bg-mix-amount)
94
94
  );
95
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
95
+ --_color: color-mix(
96
+ in srgb,
97
+ var(--_fg-base),
98
+ var(--_fg-mix-color) var(--_fg-mix-amount)
99
+ );
100
+ --muted-color: var(--muted-color-override, var(--_background-color));
101
+ --primary-text-fg: var(
102
+ --primary-text-fg-override,
103
+ color-mix(
104
+ in srgb,
105
+ var(--_color),
106
+ var(--primary-color)
107
+ var(--primary-text-amount, var(--text-amount, 50%))
108
+ )
109
+ );
110
+ --secondary-text-fg: var(
111
+ --secondary-text-fg-override,
112
+ color-mix(
113
+ in srgb,
114
+ var(--_color),
115
+ var(--secondary-color)
116
+ var(--secondary-text-amount, var(--text-amount, 50%))
117
+ )
118
+ );
119
+ --info-text-fg: var(
120
+ --info-text-fg-override,
121
+ color-mix(
122
+ in srgb,
123
+ var(--_color),
124
+ var(--info-color)
125
+ var(--info-text-amount, var(--text-amount, 50%))
126
+ )
127
+ );
128
+ --success-text-fg: var(
129
+ --success-text-fg-override,
130
+ color-mix(
131
+ in srgb,
132
+ var(--_color),
133
+ var(--success-color)
134
+ var(--success-text-amount, var(--text-amount, 50%))
135
+ )
136
+ );
137
+ --warning-text-fg: var(
138
+ --warning-text-fg-override,
139
+ color-mix(
140
+ in srgb,
141
+ var(--_color),
142
+ var(--warning-color)
143
+ var(--warning-text-amount, var(--text-amount, 50%))
144
+ )
145
+ );
146
+ --danger-text-fg: var(
147
+ --danger-text-fg-override,
148
+ color-mix(
149
+ in srgb,
150
+ var(--_color),
151
+ var(--danger-color)
152
+ var(--danger-text-amount, var(--text-amount, 50%))
153
+ )
154
+ );
155
+ --muted-text-fg: var(
156
+ --muted-text-fg-override,
157
+ color-mix(
158
+ in srgb,
159
+ var(--_color),
160
+ var(--muted-color)
161
+ var(--muted-text-amount, var(--text-amount, 50%))
162
+ )
163
+ );
96
164
  background-color: var(--_background-color);
97
165
  color: var(--_color);
98
166
  display: block;
@@ -161,7 +229,75 @@ input[type=checkbox] {
161
229
  var(--_bg-base),
162
230
  var(--_bg-mix-color) var(--_bg-mix-amount)
163
231
  );
164
- --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
232
+ --_color: color-mix(
233
+ in srgb,
234
+ var(--_fg-base),
235
+ var(--_fg-mix-color) var(--_fg-mix-amount)
236
+ );
237
+ --muted-color: var(--muted-color-override, var(--_background-color));
238
+ --primary-text-fg: var(
239
+ --primary-text-fg-override,
240
+ color-mix(
241
+ in srgb,
242
+ var(--_color),
243
+ var(--primary-color)
244
+ var(--primary-text-amount, var(--text-amount, 50%))
245
+ )
246
+ );
247
+ --secondary-text-fg: var(
248
+ --secondary-text-fg-override,
249
+ color-mix(
250
+ in srgb,
251
+ var(--_color),
252
+ var(--secondary-color)
253
+ var(--secondary-text-amount, var(--text-amount, 50%))
254
+ )
255
+ );
256
+ --info-text-fg: var(
257
+ --info-text-fg-override,
258
+ color-mix(
259
+ in srgb,
260
+ var(--_color),
261
+ var(--info-color)
262
+ var(--info-text-amount, var(--text-amount, 50%))
263
+ )
264
+ );
265
+ --success-text-fg: var(
266
+ --success-text-fg-override,
267
+ color-mix(
268
+ in srgb,
269
+ var(--_color),
270
+ var(--success-color)
271
+ var(--success-text-amount, var(--text-amount, 50%))
272
+ )
273
+ );
274
+ --warning-text-fg: var(
275
+ --warning-text-fg-override,
276
+ color-mix(
277
+ in srgb,
278
+ var(--_color),
279
+ var(--warning-color)
280
+ var(--warning-text-amount, var(--text-amount, 50%))
281
+ )
282
+ );
283
+ --danger-text-fg: var(
284
+ --danger-text-fg-override,
285
+ color-mix(
286
+ in srgb,
287
+ var(--_color),
288
+ var(--danger-color)
289
+ var(--danger-text-amount, var(--text-amount, 50%))
290
+ )
291
+ );
292
+ --muted-text-fg: var(
293
+ --muted-text-fg-override,
294
+ color-mix(
295
+ in srgb,
296
+ var(--_color),
297
+ var(--muted-color)
298
+ var(--muted-text-amount, var(--text-amount, 50%))
299
+ )
300
+ );
165
301
  background-color: var(--_background-color);
166
302
  color: var(--_color);
167
303
  border: var(--toggle-on-border, var(--toggle-border, var(--border, 1px solid transparent)));