contain-css-svelte 1.1.6 → 1.1.8

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 (32) hide show
  1. package/dist/Card.svelte +60 -10
  2. package/dist/controls/Button.svelte +72 -12
  3. package/dist/controls/ButtonLink.svelte +84 -14
  4. package/dist/controls/Checkbox.svelte +24 -4
  5. package/dist/controls/Input.svelte +12 -2
  6. package/dist/controls/MiniButton.svelte +84 -14
  7. package/dist/controls/RadioButton.svelte +24 -4
  8. package/dist/controls/Select.svelte +24 -4
  9. package/dist/controls/TabItem.svelte +24 -4
  10. package/dist/controls/Toggle.svelte +24 -4
  11. package/dist/dropdowns/DropdownMenu.svelte +36 -6
  12. package/dist/layout/Accordion.svelte +48 -8
  13. package/dist/layout/Bar.svelte +35 -4
  14. package/dist/layout/Container.svelte +12 -2
  15. package/dist/layout/DataList.svelte +23 -2
  16. package/dist/layout/DataListItem.svelte +12 -2
  17. package/dist/layout/Fieldset.svelte +24 -4
  18. package/dist/layout/Form.svelte +322 -2
  19. package/dist/layout/Hero.svelte +12 -2
  20. package/dist/layout/MenuList.svelte +48 -8
  21. package/dist/layout/Page.svelte +35 -4
  22. package/dist/layout/Sidebar.svelte +71 -10
  23. package/dist/layout/TabBar.svelte +23 -2
  24. package/dist/layout/Table.svelte +60 -10
  25. package/dist/layout/Tile.svelte +48 -8
  26. package/dist/misc/CodeInner.svelte +108 -18
  27. package/dist/misc/Progress.svelte +48 -8
  28. package/dist/misc/Tag.svelte +88 -22
  29. package/dist/overlays/Dialog.svelte +322 -2
  30. package/dist/overlays/Tooltip.svelte +12 -2
  31. package/dist/sass/_color.scss +46 -2
  32. package/package.json +2 -1
package/dist/Card.svelte CHANGED
@@ -49,10 +49,20 @@ let hasFooter = $derived(Boolean(footer));
49
49
  margin: var(--card-margin, var(--margin, 16px));
50
50
  border-radius: var(--card-border-radius, var(--surface-border-radius, var(--border-radius, 0)));
51
51
  border: var(--card-border, var(--surface-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
52
- --_background-color: var(--card-bg, var(--surface-bg, var(--bg, unset)));
53
- --_color: var(--card-fg, var(--surface-fg, var(--fg, unset)));
54
52
  --link-bg: var(--card-link-bg, var(--surface-link-bg, inherit));
55
53
  --link-fg: var(--card-link-fg, var(--surface-link-fg, inherit));
54
+ --_bg-mix-color: var(--card-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
55
+ --_bg-mix-amount: var(--card-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
56
+ --_fg-mix-color: var(--card-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
57
+ --_fg-mix-amount: var(--card-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
58
+ --_bg-base: var(--card-bg, var(--surface-bg, var(--bg, unset)));
59
+ --_fg-base: var(--card-fg, var(--surface-fg, var(--fg, unset)));
60
+ --_background-color: color-mix(
61
+ in srgb,
62
+ var(--_bg-base),
63
+ var(--_bg-mix-color) var(--_bg-mix-amount)
64
+ );
65
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
56
66
  background-color: var(--_background-color);
57
67
  color: var(--_color);
58
68
  --_box-shadow:
@@ -110,10 +120,20 @@ section {
110
120
  }
111
121
 
112
122
  header {
113
- --_background-color: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
114
- --_color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
115
123
  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, inherit));
116
124
  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, inherit));
125
+ --_bg-mix-color: var(--card-header-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)));
126
+ --_bg-mix-amount: var(--card-header-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)));
127
+ --_fg-mix-color: var(--card-header-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)));
128
+ --_fg-mix-amount: var(--card-header-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)));
129
+ --_bg-base: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
130
+ --_fg-base: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
131
+ --_background-color: color-mix(
132
+ in srgb,
133
+ var(--_bg-base),
134
+ var(--_bg-mix-color) var(--_bg-mix-amount)
135
+ );
136
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
117
137
  background-color: var(--_background-color);
118
138
  color: var(--_color);
119
139
  box-sizing: border-box;
@@ -148,19 +168,39 @@ footer :global(h5),
148
168
  footer :global(h6) {
149
169
  margin-block-start: 0 !important;
150
170
  margin-block-end: 0 !important;
151
- --_background-color: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
152
- --_color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
153
171
  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, inherit));
154
172
  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, inherit));
173
+ --_bg-mix-color: var(--card-header-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)));
174
+ --_bg-mix-amount: var(--card-header-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)));
175
+ --_fg-mix-color: var(--card-header-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)));
176
+ --_fg-mix-amount: var(--card-header-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)));
177
+ --_bg-base: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
178
+ --_fg-base: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
179
+ --_background-color: color-mix(
180
+ in srgb,
181
+ var(--_bg-base),
182
+ var(--_bg-mix-color) var(--_bg-mix-amount)
183
+ );
184
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
155
185
  background-color: var(--_background-color);
156
186
  color: var(--_color);
157
187
  }
158
188
 
159
189
  footer {
160
- --_background-color: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
161
- --_color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
162
190
  --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, inherit));
163
191
  --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, inherit));
192
+ --_bg-mix-color: var(--card-footer-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)));
193
+ --_bg-mix-amount: var(--card-footer-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)));
194
+ --_fg-mix-color: var(--card-footer-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)));
195
+ --_fg-mix-amount: var(--card-footer-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)));
196
+ --_bg-base: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
197
+ --_fg-base: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
198
+ --_background-color: color-mix(
199
+ in srgb,
200
+ var(--_bg-base),
201
+ var(--_bg-mix-color) var(--_bg-mix-amount)
202
+ );
203
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
164
204
  background-color: var(--_background-color);
165
205
  color: var(--_color);
166
206
  box-sizing: border-box;
@@ -185,10 +225,20 @@ section {
185
225
  max-width: var(--line-width);
186
226
  width: 100%;
187
227
  box-sizing: border-box;
188
- --_background-color: var(--card-content-bg, var(--surface-bg, var(--bg, unset)));
189
- --_color: var(--card-content-fg, var(--surface-fg, var(--fg, unset)));
190
228
  --link-bg: var(--card-content-link-bg, var(--surface-link-bg, inherit));
191
229
  --link-fg: var(--card-content-link-fg, var(--surface-link-fg, inherit));
230
+ --_bg-mix-color: var(--card-content-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
231
+ --_bg-mix-amount: var(--card-content-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
232
+ --_fg-mix-color: var(--card-content-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
233
+ --_fg-mix-amount: var(--card-content-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
234
+ --_bg-base: var(--card-content-bg, var(--surface-bg, var(--bg, unset)));
235
+ --_fg-base: var(--card-content-fg, var(--surface-fg, var(--fg, unset)));
236
+ --_background-color: color-mix(
237
+ in srgb,
238
+ var(--_bg-base),
239
+ var(--_bg-mix-color) var(--_bg-mix-amount)
240
+ );
241
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
192
242
  background-color: var(--_background-color);
193
243
  color: var(--_color);
194
244
  box-sizing: border-box;
package/dist/controls/Button.svelte CHANGED
@@ -58,10 +58,20 @@ button {
58
58
  border-right: var(--button-border-right, var(--border-right, var(--button-border, var(--border, none))));
59
59
  border-bottom: var(--button-border-bottom, var(--border-bottom, var(--button-border, var(--border, none))));
60
60
  border-left: var(--button-border-left, var(--border-left, var(--button-border, var(--border, none))));
61
- --_background-color: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
62
- --_color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
63
61
  --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)));
64
62
  --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)));
63
+ --_bg-mix-color: var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
64
+ --_bg-mix-amount: var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
65
+ --_fg-mix-color: var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
66
+ --_fg-mix-amount: var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
67
+ --_bg-base: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
68
+ --_fg-base: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
69
+ --_background-color: color-mix(
70
+ in srgb,
71
+ var(--_bg-base),
72
+ var(--_bg-mix-color) var(--_bg-mix-amount)
73
+ );
74
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
65
75
  background-color: var(--_background-color);
66
76
  color: var(--_color);
67
77
  --_box-shadow:
@@ -115,10 +125,20 @@ button {
115
125
  }
116
126
 
117
127
  button.primary {
118
- --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
119
- --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
120
128
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
121
129
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
130
+ --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
131
+ --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
132
+ --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
133
+ --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
134
+ --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
135
+ --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
136
+ --_background-color: color-mix(
137
+ in srgb,
138
+ var(--_bg-base),
139
+ var(--_bg-mix-color) var(--_bg-mix-amount)
140
+ );
141
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
122
142
  background-color: var(--_background-color);
123
143
  color: var(--_color);
124
144
  font-family: var(--primary-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -159,10 +179,20 @@ button.primary:disabled {
159
179
  }
160
180
 
161
181
  button.warning {
162
- --_background-color: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
163
- --_color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
164
182
  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
165
183
  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
184
+ --_bg-mix-color: var(--warning-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
185
+ --_bg-mix-amount: var(--warning-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
186
+ --_fg-mix-color: var(--warning-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
187
+ --_fg-mix-amount: var(--warning-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
188
+ --_bg-base: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
189
+ --_fg-base: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
190
+ --_background-color: color-mix(
191
+ in srgb,
192
+ var(--_bg-base),
193
+ var(--_bg-mix-color) var(--_bg-mix-amount)
194
+ );
195
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
166
196
  background-color: var(--_background-color);
167
197
  color: var(--_color);
168
198
  font-family: var(--warning-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -203,10 +233,20 @@ button.warning:disabled {
203
233
  }
204
234
 
205
235
  button.danger {
206
- --_background-color: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
207
- --_color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
208
236
  --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
209
237
  --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
238
+ --_bg-mix-color: var(--danger-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
239
+ --_bg-mix-amount: var(--danger-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
240
+ --_fg-mix-color: var(--danger-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
241
+ --_fg-mix-amount: var(--danger-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
242
+ --_bg-base: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
243
+ --_fg-base: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
244
+ --_background-color: color-mix(
245
+ in srgb,
246
+ var(--_bg-base),
247
+ var(--_bg-mix-color) var(--_bg-mix-amount)
248
+ );
249
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
210
250
  background-color: var(--_background-color);
211
251
  color: var(--_color);
212
252
  font-family: var(--danger-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -247,10 +287,20 @@ button.danger:disabled {
247
287
  }
248
288
 
249
289
  button.success {
250
- --_background-color: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
251
- --_color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
252
290
  --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
253
291
  --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
292
+ --_bg-mix-color: var(--success-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
293
+ --_bg-mix-amount: var(--success-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
294
+ --_fg-mix-color: var(--success-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
295
+ --_fg-mix-amount: var(--success-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
296
+ --_bg-base: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
297
+ --_fg-base: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
298
+ --_background-color: color-mix(
299
+ in srgb,
300
+ var(--_bg-base),
301
+ var(--_bg-mix-color) var(--_bg-mix-amount)
302
+ );
303
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
254
304
  background-color: var(--_background-color);
255
305
  color: var(--_color);
256
306
  font-family: var(--success-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -291,10 +341,20 @@ button.success:disabled {
291
341
  }
292
342
 
293
343
  button.info {
294
- --_background-color: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
295
- --_color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
296
344
  --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
297
345
  --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
346
+ --_bg-mix-color: var(--info-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
347
+ --_bg-mix-amount: var(--info-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
348
+ --_fg-mix-color: var(--info-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
349
+ --_fg-mix-amount: var(--info-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
350
+ --_bg-base: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
351
+ --_fg-base: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
352
+ --_background-color: color-mix(
353
+ in srgb,
354
+ var(--_bg-base),
355
+ var(--_bg-mix-color) var(--_bg-mix-amount)
356
+ );
357
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
298
358
  background-color: var(--_background-color);
299
359
  color: var(--_color);
300
360
  font-family: var(--info-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
package/dist/controls/ButtonLink.svelte CHANGED
@@ -72,10 +72,20 @@ a[role=button] {
72
72
  border-right: var(--button-border-right, var(--border-right, var(--button-border, var(--border, none))));
73
73
  border-bottom: var(--button-border-bottom, var(--border-bottom, var(--button-border, var(--border, none))));
74
74
  border-left: var(--button-border-left, var(--border-left, var(--button-border, var(--border, none))));
75
- --_background-color: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
76
- --_color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
77
75
  --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)));
78
76
  --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)));
77
+ --_bg-mix-color: var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
78
+ --_bg-mix-amount: var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
79
+ --_fg-mix-color: var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
80
+ --_fg-mix-amount: var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
81
+ --_bg-base: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
82
+ --_fg-base: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
83
+ --_background-color: color-mix(
84
+ in srgb,
85
+ var(--_bg-base),
86
+ var(--_bg-mix-color) var(--_bg-mix-amount)
87
+ );
88
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
79
89
  background-color: var(--_background-color);
80
90
  color: var(--_color);
81
91
  --_box-shadow:
@@ -137,19 +147,39 @@ a[role=button]:hover {
137
147
  }
138
148
 
139
149
  a.primary[role=button]:hover {
140
- --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
141
- --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
142
150
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
143
151
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
152
+ --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
153
+ --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
154
+ --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
155
+ --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
156
+ --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
157
+ --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
158
+ --_background-color: color-mix(
159
+ in srgb,
160
+ var(--_bg-base),
161
+ var(--_bg-mix-color) var(--_bg-mix-amount)
162
+ );
163
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
144
164
  background-color: var(--_background-color);
145
165
  color: var(--_color);
146
166
  }
147
167
 
148
168
  a.primary {
149
- --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
150
- --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
151
169
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
152
170
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
171
+ --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
172
+ --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
173
+ --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
174
+ --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
175
+ --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
176
+ --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
177
+ --_background-color: color-mix(
178
+ in srgb,
179
+ var(--_bg-base),
180
+ var(--_bg-mix-color) var(--_bg-mix-amount)
181
+ );
182
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
153
183
  background-color: var(--_background-color);
154
184
  color: var(--_color);
155
185
  font-family: var(--primary-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -166,10 +196,20 @@ a.primary {
166
196
  }
167
197
 
168
198
  a.warning {
169
- --_background-color: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
170
- --_color: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
171
199
  --link-bg: var(--warning-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
172
200
  --link-fg: var(--warning-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
201
+ --_bg-mix-color: var(--warning-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
202
+ --_bg-mix-amount: var(--warning-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
203
+ --_fg-mix-color: var(--warning-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
204
+ --_fg-mix-amount: var(--warning-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
205
+ --_bg-base: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
206
+ --_fg-base: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
207
+ --_background-color: color-mix(
208
+ in srgb,
209
+ var(--_bg-base),
210
+ var(--_bg-mix-color) var(--_bg-mix-amount)
211
+ );
212
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
173
213
  background-color: var(--_background-color);
174
214
  color: var(--_color);
175
215
  font-family: var(--warning-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -186,10 +226,20 @@ a.warning {
186
226
  }
187
227
 
188
228
  a.danger {
189
- --_background-color: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
190
- --_color: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
191
229
  --link-bg: var(--danger-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
192
230
  --link-fg: var(--danger-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
231
+ --_bg-mix-color: var(--danger-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
232
+ --_bg-mix-amount: var(--danger-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
233
+ --_fg-mix-color: var(--danger-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
234
+ --_fg-mix-amount: var(--danger-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
235
+ --_bg-base: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
236
+ --_fg-base: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
237
+ --_background-color: color-mix(
238
+ in srgb,
239
+ var(--_bg-base),
240
+ var(--_bg-mix-color) var(--_bg-mix-amount)
241
+ );
242
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
193
243
  background-color: var(--_background-color);
194
244
  color: var(--_color);
195
245
  font-family: var(--danger-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -206,10 +256,20 @@ a.danger {
206
256
  }
207
257
 
208
258
  a.success {
209
- --_background-color: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
210
- --_color: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
211
259
  --link-bg: var(--success-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
212
260
  --link-fg: var(--success-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
261
+ --_bg-mix-color: var(--success-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
262
+ --_bg-mix-amount: var(--success-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
263
+ --_fg-mix-color: var(--success-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
264
+ --_fg-mix-amount: var(--success-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
265
+ --_bg-base: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
266
+ --_fg-base: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
267
+ --_background-color: color-mix(
268
+ in srgb,
269
+ var(--_bg-base),
270
+ var(--_bg-mix-color) var(--_bg-mix-amount)
271
+ );
272
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
213
273
  background-color: var(--_background-color);
214
274
  color: var(--_color);
215
275
  font-family: var(--success-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -226,10 +286,20 @@ a.success {
226
286
  }
227
287
 
228
288
  a.info {
229
- --_background-color: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
230
- --_color: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
231
289
  --link-bg: var(--info-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
232
290
  --link-fg: var(--info-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
291
+ --_bg-mix-color: var(--info-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
292
+ --_bg-mix-amount: var(--info-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
293
+ --_fg-mix-color: var(--info-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
294
+ --_fg-mix-amount: var(--info-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
295
+ --_bg-base: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
296
+ --_fg-base: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
297
+ --_background-color: color-mix(
298
+ in srgb,
299
+ var(--_bg-base),
300
+ var(--_bg-mix-color) var(--_bg-mix-amount)
301
+ );
302
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
233
303
  background-color: var(--_background-color);
234
304
  color: var(--_color);
235
305
  font-family: var(--info-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
package/dist/controls/Checkbox.svelte CHANGED
@@ -157,10 +157,20 @@ label::before {
157
157
  content: " ";
158
158
  width: var(--checkbox-size, var(--font-size, var(--size, 1em)));
159
159
  height: var(--checkbox-size, var(--font-size, var(--size, 1em)));
160
- --_background-color: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
161
- --_color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
162
160
  --link-bg: var(--checkbox-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));
163
161
  --link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, inherit))));
162
+ --_bg-mix-color: var(--checkbox-bg-mix-color, var(--toggle-bg-mix-color, var(--inactive-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
163
+ --_bg-mix-amount: var(--checkbox-bg-mix-amount, var(--toggle-bg-mix-amount, var(--inactive-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
164
+ --_fg-mix-color: var(--checkbox-fg-mix-color, var(--toggle-fg-mix-color, var(--inactive-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
165
+ --_fg-mix-amount: var(--checkbox-fg-mix-amount, var(--toggle-fg-mix-amount, var(--inactive-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
166
+ --_bg-base: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
167
+ --_fg-base: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
168
+ --_background-color: color-mix(
169
+ in srgb,
170
+ var(--_bg-base),
171
+ var(--_bg-mix-color) var(--_bg-mix-amount)
172
+ );
173
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
164
174
  background-color: var(--_background-color);
165
175
  color: var(--_color);
166
176
  border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
@@ -183,10 +193,20 @@ label:active::before {
183
193
  }
184
194
 
185
195
  label:has(input:checked)::before {
186
- --_background-color: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
187
- --_color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
188
196
  --link-bg: var(--checkbox-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--checkbox-link-bg, inherit))));
189
197
  --link-fg: var(--checkbox-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--checkbox-link-fg, inherit))));
198
+ --_bg-mix-color: var(--checkbox-checked-bg-mix-color, var(--toggle-on-bg-mix-color, var(--primary-bg-mix-color, var(--checkbox-bg-mix-color, var(--bg-mix-color, transparent)))));
199
+ --_bg-mix-amount: var(--checkbox-checked-bg-mix-amount, var(--toggle-on-bg-mix-amount, var(--primary-bg-mix-amount, var(--checkbox-bg-mix-amount, var(--bg-mix-amount, 0%)))));
200
+ --_fg-mix-color: var(--checkbox-checked-fg-mix-color, var(--toggle-on-fg-mix-color, var(--primary-fg-mix-color, var(--checkbox-fg-mix-color, var(--fg-mix-color, transparent)))));
201
+ --_fg-mix-amount: var(--checkbox-checked-fg-mix-amount, var(--toggle-on-fg-mix-amount, var(--primary-fg-mix-amount, var(--checkbox-fg-mix-amount, var(--fg-mix-amount, 0%)))));
202
+ --_bg-base: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
203
+ --_fg-base: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
204
+ --_background-color: color-mix(
205
+ in srgb,
206
+ var(--_bg-base),
207
+ var(--_bg-mix-color) var(--_bg-mix-amount)
208
+ );
209
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
190
210
  background-color: var(--_background-color);
191
211
  color: var(--_color);
192
212
  border: var(--checkbox-checked-border, var(--toggle-on-border, var(--border, checkbox)));
package/dist/controls/Input.svelte CHANGED
@@ -41,10 +41,20 @@ input {
41
41
  border-bottom: var(--input-border-bottom, var(--ui-border-bottom, var(--border-bottom, var(--input-border, var(--ui-border, var(--border, none))))));
42
42
  border-left: var(--input-border-left, var(--ui-border-left, var(--border-left, var(--input-border, var(--ui-border, var(--border, none))))));
43
43
  border-radius: var(--input-border-radius, var(--ui-border-radius, var(--border-radius, none)));
44
- --_background-color: var(--input-bg, var(--ui-bg, var(--bg, unset)));
45
- --_color: var(--input-fg, var(--ui-fg, var(--fg, unset)));
46
44
  --link-bg: var(--input-link-bg, var(--ui-link-bg, inherit));
47
45
  --link-fg: var(--input-link-fg, var(--ui-link-fg, inherit));
46
+ --_bg-mix-color: var(--input-bg-mix-color, var(--ui-bg-mix-color, var(--bg-mix-color, transparent)));
47
+ --_bg-mix-amount: var(--input-bg-mix-amount, var(--ui-bg-mix-amount, var(--bg-mix-amount, 0%)));
48
+ --_fg-mix-color: var(--input-fg-mix-color, var(--ui-fg-mix-color, var(--fg-mix-color, transparent)));
49
+ --_fg-mix-amount: var(--input-fg-mix-amount, var(--ui-fg-mix-amount, var(--fg-mix-amount, 0%)));
50
+ --_bg-base: var(--input-bg, var(--ui-bg, var(--bg, unset)));
51
+ --_fg-base: var(--input-fg, var(--ui-fg, var(--fg, unset)));
52
+ --_background-color: color-mix(
53
+ in srgb,
54
+ var(--_bg-base),
55
+ var(--_bg-mix-color) var(--_bg-mix-amount)
56
+ );
57
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
48
58
  background-color: var(--_background-color);
49
59
  color: var(--_color);
50
60
  width: var(--input-width);
package/dist/controls/MiniButton.svelte CHANGED
@@ -30,10 +30,20 @@ const style = $derived(injectVars(restProps, "mini-button", [
30
30
  */
31
31
  /* Convenience groupings */
32
32
  button.primary {
33
- --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
34
- --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
35
33
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
36
34
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
35
+ --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
36
+ --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
37
+ --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
38
+ --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
39
+ --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
40
+ --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
41
+ --_background-color: color-mix(
42
+ in srgb,
43
+ var(--_bg-base),
44
+ var(--_bg-mix-color) var(--_bg-mix-amount)
45
+ );
46
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
37
47
  background-color: var(--_background-color);
38
48
  color: var(--_color);
39
49
  }
@@ -56,10 +66,20 @@ button {
56
66
  text-indent: var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
57
67
  font-variant: var(--mini-button-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
58
68
  text-align: var(--mini-button-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
59
- --_background-color: 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
69
  --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
62
70
  --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
71
+ --_bg-mix-color: var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
72
+ --_bg-mix-amount: var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
73
+ --_fg-mix-color: var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
74
+ --_fg-mix-amount: var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
75
+ --_bg-base: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
76
+ --_fg-base: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
77
+ --_background-color: color-mix(
78
+ in srgb,
79
+ var(--_bg-base),
80
+ var(--_bg-mix-color) var(--_bg-mix-amount)
81
+ );
82
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
63
83
  background-color: var(--_background-color);
64
84
  color: var(--_color);
65
85
  cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
@@ -116,46 +136,96 @@ button {
116
136
  }
117
137
 
118
138
  button.primary {
119
- --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
120
- --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
121
139
  --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
122
140
  --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
141
+ --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
142
+ --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
143
+ --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
144
+ --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
145
+ --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
146
+ --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
147
+ --_background-color: color-mix(
148
+ in srgb,
149
+ var(--_bg-base),
150
+ var(--_bg-mix-color) var(--_bg-mix-amount)
151
+ );
152
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
123
153
  background-color: var(--_background-color);
124
154
  color: var(--_color);
125
155
  }
126
156
 
127
157
  button.warning {
128
- --_background-color: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
129
- --_color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
130
158
  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
131
159
  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
160
+ --_bg-mix-color: var(--warning-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
161
+ --_bg-mix-amount: var(--warning-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
162
+ --_fg-mix-color: var(--warning-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
163
+ --_fg-mix-amount: var(--warning-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
164
+ --_bg-base: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
165
+ --_fg-base: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
166
+ --_background-color: color-mix(
167
+ in srgb,
168
+ var(--_bg-base),
169
+ var(--_bg-mix-color) var(--_bg-mix-amount)
170
+ );
171
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
132
172
  background-color: var(--_background-color);
133
173
  color: var(--_color);
134
174
  }
135
175
 
136
176
  button.danger {
137
- --_background-color: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
138
- --_color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
139
177
  --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
140
178
  --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
179
+ --_bg-mix-color: var(--danger-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
180
+ --_bg-mix-amount: var(--danger-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
181
+ --_fg-mix-color: var(--danger-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
182
+ --_fg-mix-amount: var(--danger-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
183
+ --_bg-base: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
184
+ --_fg-base: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
185
+ --_background-color: color-mix(
186
+ in srgb,
187
+ var(--_bg-base),
188
+ var(--_bg-mix-color) var(--_bg-mix-amount)
189
+ );
190
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
141
191
  background-color: var(--_background-color);
142
192
  color: var(--_color);
143
193
  }
144
194
 
145
195
  button.success {
146
- --_background-color: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
147
- --_color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
148
196
  --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
149
197
  --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
198
+ --_bg-mix-color: var(--success-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
199
+ --_bg-mix-amount: var(--success-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
200
+ --_fg-mix-color: var(--success-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
201
+ --_fg-mix-amount: var(--success-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
202
+ --_bg-base: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
203
+ --_fg-base: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
204
+ --_background-color: color-mix(
205
+ in srgb,
206
+ var(--_bg-base),
207
+ var(--_bg-mix-color) var(--_bg-mix-amount)
208
+ );
209
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
150
210
  background-color: var(--_background-color);
151
211
  color: var(--_color);
152
212
  }
153
213
 
154
214
  button.info {
155
- --_background-color: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
156
- --_color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
157
215
  --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
158
216
  --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
217
+ --_bg-mix-color: var(--info-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
218
+ --_bg-mix-amount: var(--info-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
219
+ --_fg-mix-color: var(--info-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
220
+ --_fg-mix-amount: var(--info-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
221
+ --_bg-base: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
222
+ --_fg-base: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
223
+ --_background-color: color-mix(
224
+ in srgb,
225
+ var(--_bg-base),
226
+ var(--_bg-mix-color) var(--_bg-mix-amount)
227
+ );
228
+ --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
159
229
  background-color: var(--_background-color);
160
230
  color: var(--_color);
161
231
  }</style>