contain-css-svelte 1.1.4 → 1.1.7

package/dist/Card.svelte

@@ -49,10 +49,20 @@ let hasFooter = $derived(Boolean(footer));
   margin: var(--card-margin, var(--margin, 16px));
   border-radius: var(--card-border-radius, var(--surface-border-radius, var(--border-radius, 0)));
   border: var(--card-border, var(--surface-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
-  --_background-color: var(--card-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--card-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--card-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--card-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--card-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--card-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--card-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--card-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--card-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--card-fg, var(--surface-fg, var(--fg, unset)));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   --_box-shadow:
@@ -110,10 +120,20 @@ section {
 }
 
 header {
-  --_background-color: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
-  --_color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, inherit));
   --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, inherit));
+  --_bg-mix-color: var(--card-header-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--card-header-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--card-header-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--card-header-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
+  --_fg-base: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   box-sizing: border-box;
@@ -148,19 +168,39 @@ footer :global(h5),
 footer :global(h6) {
   margin-block-start: 0 !important;
   margin-block-end: 0 !important;
-  --_background-color: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
-  --_color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, inherit));
   --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, inherit));
+  --_bg-mix-color: var(--card-header-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--card-header-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--card-header-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--card-header-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
+  --_fg-base: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }
 
 footer {
-  --_background-color: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
-  --_color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, inherit));
   --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, inherit));
+  --_bg-mix-color: var(--card-footer-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--card-footer-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--card-footer-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--card-footer-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
+  --_fg-base: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   box-sizing: border-box;
@@ -185,10 +225,20 @@ section {
   max-width: var(--line-width);
   width: 100%;
   box-sizing: border-box;
-  --_background-color: var(--card-content-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--card-content-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--card-content-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--card-content-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--card-content-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--card-content-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--card-content-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--card-content-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--card-content-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--card-content-fg, var(--surface-fg, var(--fg, unset)));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   box-sizing: border-box;

package/dist/controls/Button.svelte

@@ -58,10 +58,20 @@ button {
   border-right: var(--button-border-right, var(--border-right, var(--button-border, var(--border, none))));
   border-bottom: var(--button-border-bottom, var(--border-bottom, var(--button-border, var(--border, none))));
   border-left: var(--button-border-left, var(--border-left, var(--button-border, var(--border, none))));
-  --_background-color: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
-  --_color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)));
+  --_bg-mix-color: var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
+  --_fg-base: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   --_box-shadow:
@@ -115,10 +125,20 @@ button {
 }
 
 button.primary {
-  --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   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 {
 }
 
 button.warning {
-  --_background-color: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--warning-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--warning-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--warning-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--warning-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   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 {
 }
 
 button.danger {
-  --_background-color: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--danger-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--danger-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--danger-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--danger-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   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 {
 }
 
 button.success {
-  --_background-color: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--success-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--success-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--success-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--success-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   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 {
 }
 
 button.info {
-  --_background-color: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--info-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--info-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--info-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--info-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--info-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));

package/dist/controls/ButtonLink.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">import { injectVars } from "../util";
 let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, href = "#", id = null, icon, children, ...restProps } = $props();
-const { style: inlineStyle, ...elementProps } = restProps;
+const inlineStyle = $derived(restProps.style);
+const elementProps = $derived.by(() => {
+    const { style: _, ...rest } = restProps;
+    return rest;
+});
 const style = $derived(`${injectVars(elementProps, "button", [
     "bg",
     "fg",
@@ -68,10 +72,20 @@ a[role=button] {
   border-right: var(--button-border-right, var(--border-right, var(--button-border, var(--border, none))));
   border-bottom: var(--button-border-bottom, var(--border-bottom, var(--button-border, var(--border, none))));
   border-left: var(--button-border-left, var(--border-left, var(--button-border, var(--border, none))));
-  --_background-color: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
-  --_color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)));
+  --_bg-mix-color: var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
+  --_fg-base: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   --_box-shadow:
@@ -133,19 +147,39 @@ a[role=button]:hover {
 }
 
 a.primary[role=button]:hover {
-  --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
+  --_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)))));
+  --_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%)))));
+  --_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)))));
+  --_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%)))));
+  --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }
 
 a.primary {
-  --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
+  --_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)))));
+  --_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%)))));
+  --_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)))));
+  --_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%)))));
+  --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--primary-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -162,10 +196,20 @@ a.primary {
 }
 
 a.warning {
-  --_background-color: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--warning-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--warning-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--warning-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--warning-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--warning-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--warning-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--warning-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -182,10 +226,20 @@ a.warning {
 }
 
 a.danger {
-  --_background-color: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--danger-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--danger-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--danger-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--danger-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--danger-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--danger-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--danger-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -202,10 +256,20 @@ a.danger {
 }
 
 a.success {
-  --_background-color: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--success-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--success-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--success-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--success-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--success-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--success-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--success-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -222,10 +286,20 @@ a.success {
 }
 
 a.info {
-  --_background-color: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--info-link-bg, var(--a-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--info-link-fg, var(--a-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--info-bg-mix-color, var(--a-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--info-bg-mix-amount, var(--a-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--info-fg-mix-color, var(--a-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--info-fg-mix-amount, var(--a-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--info-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, inherit))));

package/dist/controls/Checkbox.svelte

@@ -157,10 +157,20 @@ label::before {
   content: " ";
   width: var(--checkbox-size, var(--font-size, var(--size, 1em)));
   height: var(--checkbox-size, var(--font-size, var(--size, 1em)));
-  --_background-color: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--checkbox-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, inherit))));
+  --_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)))));
+  --_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%)))));
+  --_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)))));
+  --_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%)))));
+  --_bg-base: var(--checkbox-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--checkbox-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
@@ -183,10 +193,20 @@ label:active::before {
 }
 
 label:has(input:checked)::before {
-  --_background-color: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
-  --_color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
   --link-bg: var(--checkbox-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--checkbox-link-bg, inherit))));
   --link-fg: var(--checkbox-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--checkbox-link-fg, inherit))));
+  --_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)))));
+  --_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%)))));
+  --_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)))));
+  --_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%)))));
+  --_bg-base: var(--checkbox-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--checkbox-bg, var(--bg, unset)))));
+  --_fg-base: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--checkbox-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   border: var(--checkbox-checked-border, var(--toggle-on-border, var(--border, checkbox)));

package/dist/controls/Input.svelte

@@ -41,10 +41,20 @@ input {
   border-bottom: var(--input-border-bottom, var(--ui-border-bottom, var(--border-bottom, var(--input-border, var(--ui-border, var(--border, none))))));
   border-left: var(--input-border-left, var(--ui-border-left, var(--border-left, var(--input-border, var(--ui-border, var(--border, none))))));
   border-radius: var(--input-border-radius, var(--ui-border-radius, var(--border-radius, none)));
-  --_background-color: var(--input-bg, var(--ui-bg, var(--bg, unset)));
-  --_color: var(--input-fg, var(--ui-fg, var(--fg, unset)));
   --link-bg: var(--input-link-bg, var(--ui-link-bg, inherit));
   --link-fg: var(--input-link-fg, var(--ui-link-fg, inherit));
+  --_bg-mix-color: var(--input-bg-mix-color, var(--ui-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--input-bg-mix-amount, var(--ui-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--input-fg-mix-color, var(--ui-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--input-fg-mix-amount, var(--ui-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--input-bg, var(--ui-bg, var(--bg, unset)));
+  --_fg-base: var(--input-fg, var(--ui-fg, var(--fg, unset)));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   width: var(--input-width);

package/dist/controls/Input.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 type Props = {
-    value?: string;
+    value?: string | number;
     placeholder?: string;
 } & HTMLInputAttributes;
 declare const Input: import("svelte").Component<Props, {}, "value">;