Fade disabled buttons into luminance-gray color of current plane background

scss/_buttons.scss

@@ -18,6 +18,7 @@
   --#{$prefix}btn-hover-border-color: transparent;
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-disabled-fade-percentage: #{$btn-disabled-fade-percentage};
   --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
   // scss-docs-end btn-css-vars
 
@@ -112,13 +113,38 @@
   &:disabled,
   &.disabled,
   fieldset:disabled & {
-    color: var(--#{$prefix}btn-disabled-color);
+    --#{$prefix}btn-parent-bg-luminance-gray: lab(from var(--#{$prefix}current-plane-bg) l 0 0);
+
+    color:
+      color-mix(
+        in srgb,
+        var(--#{$prefix}btn-parent-bg-luminance-gray) var(--#{$prefix}btn-disabled-fade-percentage),
+        var(--#{$prefix}btn-disabled-color)
+      );
     pointer-events: none;
-    background-color: var(--#{$prefix}btn-disabled-bg);
+    background-color:
+      color-mix(
+        in srgb,
+        var(--#{$prefix}btn-parent-bg-luminance-gray) var(--#{$prefix}btn-disabled-fade-percentage),
+        var(--#{$prefix}btn-disabled-bg)
+      );
     background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$prefix}btn-disabled-border-color);
-    opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);
+    border-color:
+      color-mix(
+        in srgb,
+        var(--#{$prefix}btn-parent-bg-luminance-gray) var(--#{$prefix}btn-disabled-fade-percentage),
+        var(--#{$prefix}btn-disabled-border-color)
+      );
+
+    &.btn-link {
+      border-color: var(--#{$prefix}btn-disabled-border-color);
+    }
+
+    > * {
+      color: var(--#{$prefix}btn-disabled-color);
+      opacity: var(--#{$prefix}btn-disabled-opacity);
+    }
   }
 }
 

scss/_functions.scss

@@ -48,6 +48,16 @@
   }
 }
 
+@function color-css-var($identifier, $target) {
+  @if $identifier == "body" and $target == "bg" {
+    @return var(--#{$prefix}#{$identifier}-bg);
+  } @if $identifier == "body" and $target == "text" {
+    @return var(--#{$prefix}#{$identifier}-color);
+  } @else {
+    @return var(--#{$prefix}#{$identifier});
+  }
+}
+
 @function map-loop($map, $func, $args...) {
   $_map: ();
 

scss/_modal.scss

@@ -101,6 +101,7 @@
   color: var(--#{$prefix}modal-color);
   pointer-events: auto;
   background-color: var(--#{$prefix}modal-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}modal-bg);
   background-clip: padding-box;
   border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
   @include border-radius(var(--#{$prefix}modal-border-radius));
@@ -161,6 +162,7 @@
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
   background-color: var(--#{$prefix}modal-footer-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}modal-footer-bg);
   border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
   @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
 

scss/_popover.scss

@@ -32,6 +32,7 @@
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
   background-color: var(--#{$prefix}popover-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}popover-bg);
   background-clip: padding-box;
   border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
   @include border-radius(var(--#{$prefix}popover-border-radius));
@@ -182,6 +183,7 @@
   @include font-size(var(--#{$prefix}popover-header-font-size));
   color: var(--#{$prefix}popover-header-color);
   background-color: var(--#{$prefix}popover-header-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}popover-header-bg);
   border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
   @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
 

scss/_reboot.scss

@@ -55,6 +55,7 @@ body {
   color: var(--#{$prefix}body-color);
   text-align: var(--#{$prefix}body-text-align);
   background-color: var(--#{$prefix}body-bg); // 2
+  --#{$prefix}current-plane-bg: var(--#{$prefix}body-bg);
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }

scss/_tables.scss

@@ -35,6 +35,7 @@
     // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
     color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
     background-color: var(--#{$prefix}table-bg);
+    --#{$prefix}current-plane-bg: var(--#{$prefix}table-bg);
     border-bottom-width: $table-border-width;
     box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
   }

scss/_toasts.scss

@@ -23,6 +23,7 @@
   color: var(--#{$prefix}toast-color);
   pointer-events: auto;
   background-color: var(--#{$prefix}toast-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}toast-bg);
   background-clip: padding-box;
   border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
   box-shadow: var(--#{$prefix}toast-box-shadow);
@@ -57,6 +58,7 @@
   padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
   color: var(--#{$prefix}toast-header-color);
   background-color: var(--#{$prefix}toast-header-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}toast-header-bg);
   background-clip: padding-box;
   border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
   @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));

scss/_tooltip.scss

@@ -115,5 +115,6 @@
   color: var(--#{$prefix}tooltip-color);
   text-align: center;
   background-color: var(--#{$prefix}tooltip-bg);
+  --#{$prefix}current-plane-bg: var(--#{$prefix}tooltip-bg);
   @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }

scss/_utilities.scss

@@ -674,6 +674,18 @@ $utilities: map-merge(
         )
       )
     ),
+    "background-color-inherit": (
+      css-var: true,
+      css-variable-name: current-plane-bg,
+      class: bg,
+      values: map-merge(
+        map-loop($utilities-bg, color-css-var, "$key", "bg"),
+        (
+          "body-secondary": var(--#{$prefix}secondary-bg),
+          "body-tertiary": var(--#{$prefix}tertiary-bg),
+        )
+      )
+    ),
     "bg-opacity": (
       css-var: true,
       class: bg-opacity,

scss/_variables.scss

@@ -838,6 +838,7 @@ $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($b
 $btn-focus-width:             $input-btn-focus-width !default;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity:        .65 !default;
+$btn-disabled-fade-percentage: 35% !default;
 $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;