From 3b3a31b461b9c543697e9b8cb45c39430e9c8555 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Feb 2020 23:43:56 +0200
Subject: [PATCH] improve the display of disabled buttons

---
 src/App.scss                         | 16 ++++++++++++++--
 src/services/theme_data/pleromafe.js |  8 ++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 7dfbdb7d..89aa3215 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -104,7 +104,11 @@ button {
     color: $fallback--text;
     color: var(--btnPressedText, $fallback--text);
     background-color: $fallback--fg;
-    background-color: var(--btnPressed, $fallback--fg)
+    background-color: var(--btnPressed, $fallback--fg);
+    i {
+      color: $fallback--text;
+      color: var(--btnPressedText, $fallback--text);
+    }
   }
 
   &:disabled {
@@ -112,7 +116,11 @@ button {
     color: $fallback--text;
     color: var(--btnDisabledText, $fallback--text);
     background-color: $fallback--fg;
-    background-color: var(--btnDisabled, $fallback--fg)
+    background-color: var(--btnDisabled, $fallback--fg);
+    i {
+      color: $fallback--text;
+      color: var(--btnDisabledText, $fallback--text);
+    }
   }
 
   &.toggled {
@@ -122,6 +130,10 @@ button {
     background-color: var(--btnToggled, $fallback--fg);
     box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
+    i {
+      color: $fallback--text;
+      color: var(--btnToggledText, $fallback--text);
+    }
   }
 
   &.danger {
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 6d4f583b..33a2ed57 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -509,25 +509,25 @@ export const SLOT_INHERITANCE = {
   // Buttons: disabled
   btnDisabled: {
     depends: ['btn', 'bg'],
-    color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
+    color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg)
   },
   btnDisabledText: {
     depends: ['btnText', 'btnDisabled'],
     layer: 'btn',
     variant: 'btnDisabled',
-    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
+    color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
   },
   btnDisabledPanelText: {
     depends: ['btnPanelText', 'btnDisabled'],
     layer: 'btnPanel',
     variant: 'btnDisabled',
-    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
+    color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
   },
   btnDisabledTopBarText: {
     depends: ['btnTopBarText', 'btnDisabled'],
     layer: 'btnTopBar',
     variant: 'btnDisabled',
-    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
+    color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
   },
 
   // Input fields