contain-css-svelte 1.1.6 → 1.1.7

package/dist/controls/RadioButton.svelte

@@ -136,10 +136,20 @@ label.radio-item::before {
   content: " ";
   width: var(--radio-button-size, var(--font-size, var(--size, 1em)));
   height: var(--radio-button-size, var(--font-size, var(--size, 1em)));
-  --_background-color: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--radio-button-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--radio-button-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, inherit))));
+  --_bg-mix-color: var(--radio-button-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(--radio-button-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(--radio-button-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(--radio-button-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(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--radio-button-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(--radio-button-border, var(--border, 1px solid var(--border-color)));
@@ -163,10 +173,20 @@ label.radio-item:active::before {
 }
 
 label.radio-item:has(input:checked)::before {
-  --_background-color: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
-  --_color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
   --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, inherit)));
   --link-fg: var(--radio-button-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, inherit)));
+  --_bg-mix-color: var(--radio-button-checked-bg-mix-color, var(--toggle-on-bg-mix-color, var(--primary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--radio-button-checked-bg-mix-amount, var(--toggle-on-bg-mix-amount, var(--primary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--radio-button-checked-fg-mix-color, var(--toggle-on-fg-mix-color, var(--primary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--radio-button-checked-fg-mix-amount, var(--toggle-on-fg-mix-amount, var(--primary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
+  --_fg-base: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-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(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));

package/dist/controls/Select.svelte

@@ -127,10 +127,20 @@ select,
   --_padding: var(--select-padding, var(--input-padding, var(--menu-padding, var(--control-padding, var(--surface-padding, var(--padding, 4px))))));
   padding: var(--_padding);
   border-radius: var(--select-square-radius, var(--input-square-radius, var(--menu-square-radius, var(--control-square-radius, var(--surface-square-radius, var(--square-radius, 0))))));
-  --_background-color: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
-  --_color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--surface-fg, var(--fg, unset))))));
   --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--surface-link-bg, inherit)))));
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--surface-link-fg, inherit)))));
+  --_bg-mix-color: var(--select-bg-mix-color, var(--input-bg-mix-color, var(--menu-bg-mix-color, var(--control-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))))));
+  --_bg-mix-amount: var(--select-bg-mix-amount, var(--input-bg-mix-amount, var(--menu-bg-mix-amount, var(--control-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%))))));
+  --_fg-mix-color: var(--select-fg-mix-color, var(--input-fg-mix-color, var(--menu-fg-mix-color, var(--control-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent))))));
+  --_fg-mix-amount: var(--select-fg-mix-amount, var(--input-fg-mix-amount, var(--menu-fg-mix-amount, var(--control-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%))))));
+  --_bg-base: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
+  --_fg-base: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-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);
   width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100vw))));
@@ -180,10 +190,20 @@ button:focus-visible {
 }
 
 .dropdown-wrapper {
-  --_background-color: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
-  --_color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--surface-fg, var(--fg, unset))))));
   --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--surface-link-bg, inherit)))));
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--surface-link-fg, inherit)))));
+  --_bg-mix-color: var(--select-bg-mix-color, var(--input-bg-mix-color, var(--menu-bg-mix-color, var(--control-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))))));
+  --_bg-mix-amount: var(--select-bg-mix-amount, var(--input-bg-mix-amount, var(--menu-bg-mix-amount, var(--control-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%))))));
+  --_fg-mix-color: var(--select-fg-mix-color, var(--input-fg-mix-color, var(--menu-fg-mix-color, var(--control-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent))))));
+  --_fg-mix-amount: var(--select-fg-mix-amount, var(--input-fg-mix-amount, var(--menu-fg-mix-amount, var(--control-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%))))));
+  --_bg-base: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
+  --_fg-base: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-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);
   --menu-item-justify: var(--select-menu-item-justify, flex-start);

package/dist/controls/TabItem.svelte

@@ -23,10 +23,20 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
 
 .tab > :global(button),
 .tab > :global(div > button) {
-  --_background-color: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
+  --_bg-mix-color: var(--tab-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(--tab-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(--tab-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(--tab-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(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--tab-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);
   box-sizing: border-box;
@@ -75,10 +85,20 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
 
 .tab.active > :global(button),
 .tab.active > :global(div > button) {
-  --_background-color: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
-  --_color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
   --link-bg: var(--tab-active-link-bg, var(--primary-link-bg, var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))))));
   --link-fg: var(--tab-active-link-fg, var(--primary-link-fg, var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))))));
+  --_bg-mix-color: var(--tab-active-bg-mix-color, var(--primary-bg-mix-color, var(--tab-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(--tab-active-bg-mix-amount, var(--primary-bg-mix-amount, var(--tab-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(--tab-active-fg-mix-color, var(--primary-fg-mix-color, var(--tab-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(--tab-active-fg-mix-amount, var(--primary-fg-mix-amount, var(--tab-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(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
+  --_fg-base: var(--tab-active-fg, var(--primary-fg, var(--tab-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(--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

@@ -79,10 +79,20 @@ const effectiveOnLabel = $derived(onLabel || children);
 }
 
 .toggle-track {
-  --_background-color: var(--toggle-bg, var(--toggle-off-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--toggle-fg, var(--toggle-off-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--toggle-link-bg, var(--toggle-off-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--toggle-link-fg, var(--toggle-off-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, inherit))));
+  --_bg-mix-color: var(--toggle-bg-mix-color, var(--toggle-off-bg-mix-color, var(--inactive-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--toggle-bg-mix-amount, var(--toggle-off-bg-mix-amount, var(--inactive-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--toggle-fg-mix-color, var(--toggle-off-fg-mix-color, var(--inactive-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--toggle-fg-mix-amount, var(--toggle-off-fg-mix-amount, var(--inactive-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--toggle-bg, var(--toggle-off-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--toggle-fg, var(--toggle-off-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);
   display: block;
@@ -138,10 +148,20 @@ input[type=checkbox] {
 }
 
 .toggle:has(input:checked) .toggle-track {
-  --_background-color: var(--toggle-on-bg, var(--primary-bg, var(--toggle-bg, var(--bg, unset))));
-  --_color: var(--toggle-on-fg, var(--primary-fg, var(--toggle-fg, var(--fg, unset))));
   --link-bg: var(--toggle-on-link-bg, var(--primary-link-bg, var(--toggle-link-bg, inherit)));
   --link-fg: var(--toggle-on-link-fg, var(--primary-link-fg, var(--toggle-link-fg, inherit)));
+  --_bg-mix-color: var(--toggle-on-bg-mix-color, var(--primary-bg-mix-color, var(--toggle-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--toggle-on-bg-mix-amount, var(--primary-bg-mix-amount, var(--toggle-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--toggle-on-fg-mix-color, var(--primary-fg-mix-color, var(--toggle-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--toggle-on-fg-mix-amount, var(--primary-fg-mix-amount, var(--toggle-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--toggle-on-bg, var(--primary-bg, var(--toggle-bg, var(--bg, unset))));
+  --_fg-base: var(--toggle-on-fg, var(--primary-fg, var(--toggle-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(--toggle-on-border, var(--toggle-border, var(--border, 1px solid transparent)));

package/dist/dropdowns/DropdownMenu.svelte

@@ -180,10 +180,20 @@ let popoverDiv = $state();
   */
 /* Convenience groupings */
 button {
-  --_background-color: var(--menu-trigger-bg, var(--menu-bg, var(--button-bg, var(--surface-bg, var(--bg, unset)))));
-  --_color: var(--menu-trigger-fg, var(--menu-fg, var(--button-fg, var(--surface-fg, var(--fg, unset)))));
   --link-bg: var(--menu-trigger-link-bg, var(--menu-link-bg, var(--button-link-bg, var(--surface-link-bg, inherit))));
   --link-fg: var(--menu-trigger-link-fg, var(--menu-link-fg, var(--button-link-fg, var(--surface-link-fg, inherit))));
+  --_bg-mix-color: var(--menu-trigger-bg-mix-color, var(--menu-bg-mix-color, var(--button-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--menu-trigger-bg-mix-amount, var(--menu-bg-mix-amount, var(--button-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--menu-trigger-fg-mix-color, var(--menu-fg-mix-color, var(--button-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--menu-trigger-fg-mix-amount, var(--menu-fg-mix-amount, var(--button-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--menu-trigger-bg, var(--menu-bg, var(--button-bg, var(--surface-bg, var(--bg, unset)))));
+  --_fg-base: var(--menu-trigger-fg, var(--menu-fg, var(--button-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;
@@ -235,10 +245,20 @@ button {
 }
 
 .dropdown-content :global(.menu) {
-  --_background-color: var(--menu-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--menu-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--menu-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--menu-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--menu-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--menu-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--menu-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--menu-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--menu-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--menu-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);
   font-family: var(--menu-font-family, var(--surface-font-family, var(--font-family, unset)));
@@ -363,10 +383,20 @@ button {
 .dropdown-content {
   width: max(var(--dropdown-menu-min-width, 12em), var(--dropdown-menu-width, 12em));
   min-width: var(--dropdown-menu-min-width, 12em);
-  --_background-color: var(--dropdown-menu-bg, var(--menu-bg, var(--surface-bg, var(--bg, unset))));
-  --_color: var(--dropdown-menu-fg, var(--menu-fg, var(--surface-fg, var(--fg, unset))));
   --link-bg: var(--dropdown-menu-link-bg, var(--menu-link-bg, var(--surface-link-bg, inherit)));
   --link-fg: var(--dropdown-menu-link-fg, var(--menu-link-fg, var(--surface-link-fg, inherit)));
+  --_bg-mix-color: var(--dropdown-menu-bg-mix-color, var(--menu-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--dropdown-menu-bg-mix-amount, var(--menu-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--dropdown-menu-fg-mix-color, var(--menu-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--dropdown-menu-fg-mix-amount, var(--menu-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--dropdown-menu-bg, var(--menu-bg, var(--surface-bg, var(--bg, unset))));
+  --_fg-base: var(--dropdown-menu-fg, var(--menu-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:

package/dist/layout/Accordion.svelte

@@ -46,10 +46,20 @@ function onAccordionClicked(e) {
   */
 /* Convenience groupings */
 div {
-  --_background-color: var(--accordion-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--accordion-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--accordion-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--accordion-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--accordion-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--accordion-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--accordion-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--accordion-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--accordion-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--accordion-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);
   font-family: var(--accordion-font-family, var(--header-font-family, var(--font-family, unset)));
@@ -87,10 +97,20 @@ div {
 }
 
 div :global(details > summary) {
-  --_background-color: var(--accordion-summary-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
-  --_color: var(--accordion-summary-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--accordion-summary-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--accordion-summary-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)));
+  --_bg-mix-color: var(--accordion-summary-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--accordion-summary-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--accordion-summary-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--accordion-summary-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--accordion-summary-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
+  --_fg-base: var(--accordion-summary-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-sizing: border-box;
@@ -153,10 +173,20 @@ div :global(details > summary) {
 }
 
 div :global(details[open] > summary) {
-  --_background-color: var(--accordion-summary-open-bg, var(--primary-bg, var(--bg, unset)));
-  --_color: var(--accordion-summary-open-fg, var(--primary-fg, var(--fg, unset)));
   --link-bg: var(--accordion-summary-open-link-bg, var(--primary-link-bg, inherit));
   --link-fg: var(--accordion-summary-open-link-fg, var(--primary-link-fg, inherit));
+  --_bg-mix-color: var(--accordion-summary-open-bg-mix-color, var(--primary-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--accordion-summary-open-bg-mix-amount, var(--primary-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--accordion-summary-open-fg-mix-color, var(--primary-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--accordion-summary-open-fg-mix-amount, var(--primary-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--accordion-summary-open-bg, var(--primary-bg, var(--bg, unset)));
+  --_fg-base: var(--accordion-summary-open-fg, var(--primary-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(--accordion-summary-open-font-family, var(--accordion-summary-font-family, var(--ui-font-family, var(--control-font-family, inherit))));
@@ -195,10 +225,20 @@ div :global(details::placeholder) {
 
 div :global(summary) {
   list-style: var(--details-list-style, none);
-  --_background-color: var(--accordion-summary-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
-  --_color: var(--accordion-summary-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--accordion-summary-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--accordion-summary-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)));
+  --_bg-mix-color: var(--accordion-summary-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--accordion-summary-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--accordion-summary-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--accordion-summary-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--accordion-summary-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
+  --_fg-base: var(--accordion-summary-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-sizing: border-box;

package/dist/layout/Bar.svelte

@@ -43,10 +43,20 @@ const extraStyle = $derived(primary
   min-height: var(--bar-min-height, var(--bar-height, 3em));
   height: var(--bar-height, auto);
   max-height: var(--bar-max-height);
-  --_background-color: var(--bar-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--bar-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--bar-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--bar-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--bar-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--bar-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--bar-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--bar-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--bar-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--bar-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);
   gap: var(--bar-gap, var(--gap, 8px));
@@ -63,10 +73,20 @@ const extraStyle = $derived(primary
 .bar :global(h6) {
   margin-block-start: 0 !important;
   margin-block-end: 0 !important;
-  --_background-color: var(--bar-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--bar-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--bar-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--bar-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--bar-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--bar-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--bar-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--bar-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--bar-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--bar-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);
 }</style>

package/dist/layout/Container.svelte

@@ -27,10 +27,20 @@ section {
   margin: auto;
   box-sizing: border-box;
   padding: var(--container-padding, var(--surface-padding, var(--padding, 8px)));
-  --_background-color: var(--container-bg, var(--surface-bg, var(--block-bg, var(--bg, unset))));
-  --_color: var(--container-fg, var(--surface-fg, var(--block-fg, var(--fg, unset))));
   --link-bg: var(--container-link-bg, var(--surface-link-bg, var(--block-link-bg, inherit)));
   --link-fg: var(--container-link-fg, var(--surface-link-fg, var(--block-link-fg, inherit)));
+  --_bg-mix-color: var(--container-bg-mix-color, var(--surface-bg-mix-color, var(--block-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--container-bg-mix-amount, var(--surface-bg-mix-amount, var(--block-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--container-fg-mix-color, var(--surface-fg-mix-color, var(--block-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--container-fg-mix-amount, var(--surface-fg-mix-amount, var(--block-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--container-bg, var(--surface-bg, var(--block-bg, var(--bg, unset))));
+  --_fg-base: var(--container-fg, var(--surface-fg, var(--block-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/layout/DataList.svelte

@@ -44,10 +44,20 @@ const style = $derived(injectVars(restProps, "data-list", [
   */
 /* Convenience groupings */
 .data-list {
-  --_background-color: var(--data-list-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--data-list-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--data-list-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--data-list-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--data-list-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--data-list-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--data-list-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--data-list-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--data-list-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--data-list-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/layout/DataListItem.svelte

@@ -124,10 +124,20 @@ function handleKeydown(event) {
   */
 /* Convenience groupings */
 .data-list-item {
-  --_background-color: var(--data-list-item-bg, var(--data-list-bg, var(--surface-bg, var(--bg, unset))));
-  --_color: var(--data-list-item-fg, var(--data-list-fg, var(--surface-fg, var(--fg, unset))));
   --link-bg: var(--data-list-item-link-bg, var(--data-list-link-bg, var(--surface-link-bg, inherit)));
   --link-fg: var(--data-list-item-link-fg, var(--data-list-link-fg, var(--surface-link-fg, inherit)));
+  --_bg-mix-color: var(--data-list-item-bg-mix-color, var(--data-list-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--data-list-item-bg-mix-amount, var(--data-list-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--data-list-item-fg-mix-color, var(--data-list-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--data-list-item-fg-mix-amount, var(--data-list-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--data-list-item-bg, var(--data-list-bg, var(--surface-bg, var(--bg, unset))));
+  --_fg-base: var(--data-list-item-fg, var(--data-list-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);
   max-width: var(--data-list-item-line-width, var(--data-list-line-width, var(--surface-line-width, var(--line-width, unset))));

package/dist/layout/Fieldset.svelte

@@ -54,10 +54,20 @@ const style = $derived(injectVars({
   */
 /* Convenience groupings */
 fieldset {
-  --_background-color: var(--fieldset-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--fieldset-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--fieldset-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--fieldset-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--fieldset-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--fieldset-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--fieldset-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--fieldset-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--fieldset-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--fieldset-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;
@@ -100,10 +110,20 @@ legend {
   text-indent: var(--legend-indent, var(--fieldset-indent, var(--ui-indent, var(--indent, unset))));
   font-variant: var(--legend-font-variant, var(--fieldset-font-variant, var(--ui-font-variant, var(--font-variant, unset))));
   text-align: var(--legend-text-align, var(--fieldset-text-align, var(--ui-text-align, var(--text-align, unset))));
-  --_background-color: var(--legend-bg, var(--fieldset-bg, var(--bg, unset)));
-  --_color: var(--legend-fg, var(--fieldset-fg, var(--fg, unset)));
   --link-bg: var(--legend-link-bg, var(--fieldset-link-bg, inherit));
   --link-fg: var(--legend-link-fg, var(--fieldset-link-fg, inherit));
+  --_bg-mix-color: var(--legend-bg-mix-color, var(--fieldset-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--legend-bg-mix-amount, var(--fieldset-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--legend-fg-mix-color, var(--fieldset-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--legend-fg-mix-amount, var(--fieldset-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--legend-bg, var(--fieldset-bg, var(--bg, unset)));
+  --_fg-base: var(--legend-fg, var(--fieldset-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);
   padding: var(--legend-padding, var(--padding, 0 var(--space-sm)));

package/dist/layout/Form.svelte

@@ -51,10 +51,20 @@ const style = $derived(injectVars({
   */
 /* Convenience groupings */
 form {
-  --_background-color: var(--form-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--form-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--form-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--form-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--form-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--form-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--form-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--form-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--form-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--form-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/layout/Hero.svelte

@@ -30,10 +30,20 @@ const style = $derived(injectVars(restProps, "hero", [
 .hero {
   --hero-font-size: calc(var(--font-size) * 2);
   --hero-first-letter-fg: var(--hero-fg, var(--surface-fg, var(--fg)));
-  --_background-color: var(--hero-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--hero-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--hero-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--hero-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--hero-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--hero-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--hero-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--hero-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--hero-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--hero-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);
   max-width: var(--hero-line-width, var(--surface-line-width, var(--line-width, unset)));