From c806aaa32312ac7d9a214a559eec4e0b09e33375 Mon Sep 17 00:00:00 2001
From: Ayke Halder <rr-it@users.noreply.github.com>
Date: Sat, 15 Jun 2024 17:50:52 +0200
Subject: [PATCH] Fade disabled buttons into luminance-gray color of current
 plane background

### Before:

Disabled buttons simply used `opacity` and color-cross-fading happened.
E.g. a disabled red button on a blue plane became purple.

### With this change:

Disabled buttons color is mixed with a gray having the identical luminance as the background-color. This results in the following color change of disabled buttons.

#### Lightness:

Lightened on light background and darkened on dark background.

In comparison:
Identical behaviour as before. Buttons lightness is slightly (`fade-percentage`) fading into the background.

#### Saturation:

Slightly desaturated.

In comparison:
On black/white gray background: Identical behaviour as before.
On colorful background: Before there was an unintentional mix between bg-color and button-color saturation. Now the button is simply slightly (`fade-percentage`) desaturated.

#### Hue
Stays identical.

In comparison:
On black/white gray background: Identical behaviour as before.
On colorful background: Before there was an unintentional  cross-fading between bg-color and button-color resulting in unfortunate dyeing of the  button. Now the button keeps its color hue.
---
 scss/_buttons.scss   | 34 ++++++++++++++++++++++++++++++----
 scss/_variables.scss |  1 +
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index caa4518ac8..0eb63159c9 100644
--- a/scss/_buttons.scss
+++ b/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);
+    }
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cfe25b528f..71b069a3f1 100644
--- a/scss/_variables.scss
+++ b/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;