Base+LibGUI+LibGfx: Improve disabled text readability

Currently, disabled text colors are hardcoded. They look good in Default
and light themes, but no so good in dark ones. This PR adds new
variables for all themes to correctly display disabled text.

Base/res/themes/Basalt.ini

@@ -34,6 +34,8 @@ Button=#1f1f1f
 ButtonText=white
 Base=#1f1f1f
 BaseText=white
+DisabledTextFront=#4f4f4f
+DisabledTextBack=#000000
 ThreedHighlight=#2f2f2f
 ThreedShadow1=#171717
 ThreedShadow2=#0f0f0f

Base/res/themes/Coffee.ini

@@ -30,6 +30,8 @@ Button=#e6e6e6
 ButtonText=black
 Base=white
 BaseText=black
+DisabledTextFront=#808080
+DisabledTextBack=white
 ThreedHighlight=white
 ThreedShadow1=#9397a5
 ThreedShadow2=#5d6069

Base/res/themes/Cupertino.ini

@@ -31,6 +31,8 @@ Button=#212121
 ButtonText=#fcfcfc
 Base=#292929
 BaseText=#fcfcfc
+DisabledTextFront=#606060
+DisabledTextBack=#000000
 ThreedHighlight=#363636
 ThreedShadow1=#363636
 ThreedShadow2=#363636

Base/res/themes/Dark.ini

@@ -26,6 +26,8 @@ Button=#555555
 ButtonText=white
 Base=#424242
 BaseText=white
+DisabledTextFront=#a0a0a0
+DisabledTextBack=#14141a
 ThreedHighlight=#6f6f6f
 ThreedShadow1=#3d3e40
 ThreedShadow2=#2e2f30

Base/res/themes/Default.ini

@@ -34,6 +34,8 @@ Button=#d4d0c8
 ButtonText=black
 Base=white
 BaseText=black
+DisabledTextFront=#808080
+DisabledTextBack=white
 ThreedHighlight=white
 ThreedShadow1=#808080
 ThreedShadow2=#404040

Base/res/themes/Desert.ini

@@ -34,6 +34,8 @@ Button=#d5ccbb
 ButtonText=black
 Base=white
 BaseText=black
+DisabledTextFront=#808080
+DisabledTextBack=#e1e8e0
 ThreedHighlight=#eae6dd
 ThreedShadow1=#a28d68
 ThreedShadow2=#000000

Base/res/themes/Faux Pas.ini

@@ -26,6 +26,8 @@ Button=#a0a0a0
 ButtonText=black
 Base=#a0a0a0
 BaseText=black
+DisabledTextFront=#707070
+DisabledTextBack=white
 ThreedHighlight=white
 ThreedShadow1=#282828
 ThreedShadow2=#282828

Base/res/themes/Gruvbox Dark.ini

@@ -26,6 +26,8 @@ Button=#32302f
 ButtonText=#ebdbb2
 Base=#3c3836
 BaseText=#ebdbb2
+DisabledTextFront=#665c54
+DisabledTextBack=#1d2021
 ThreedHighlight=#504945
 ThreedShadow1=#282828
 ThreedShadow2=#1d2021

Base/res/themes/Light.ini

@@ -34,6 +34,8 @@ Button=#e3e3e3
 ButtonText=#4b4b4b
 Base=white
 BaseText=#4b4b4b
+DisabledTextFront=#ababab
+DisabledTextBack=white
 ThreedHighlight=#e3e3e3
 ThreedShadow1=#ababab
 ThreedShadow2=#6b6b6b

Base/res/themes/Nord.ini

@@ -26,6 +26,8 @@ Button=#434c5e
 ButtonText=white
 Base=#4c566a
 BaseText=white
+DisabledTextFront=#95adc5
+DisabledTextBack=#2e3440
 ThreedHighlight=#4c566a
 ThreedShadow1=#3b4252
 ThreedShadow2=#2e3440

Base/res/themes/Olive.ini

@@ -36,6 +36,8 @@ Button=#c1cbb5ff
 MenuSelectionText=#000000ff
 SelectionText=#ffffffff
 BaseText=#000000ff
+DisabledTextFront=#747d74ff
+DisabledTextBack=#e3ffb9ff
 SyntaxPreprocessorStatement=#00a0a0ff
 Accent=#619910ff
 Base=#ffffffff

Base/res/themes/Plum.ini

@@ -34,6 +34,8 @@ Button=#a89890
 ButtonText=black
 Base=#d8d0c8
 BaseText=black
+DisabledTextFront=#808080
+DisabledTextBack=#d8d0c8
 ThreedHighlight=#d8d0c8
 ThreedShadow1=#786058
 ThreedShadow2=#201a18

Base/res/themes/Pumpkin.ini

@@ -36,6 +36,8 @@ Button=#c7c2b0ff
 MenuSelectionText=#f3f3f3ff
 SelectionText=#ffffffff
 BaseText=#000000ff
+DisabledTextFront=#808080
+DisabledTextBack=#e4d6beff
 SyntaxPreprocessorStatement=#00a0a0ff
 Accent=#6f517bff
 Base=#ffffffff

Base/res/themes/Redmond 2000.ini

@@ -30,6 +30,8 @@ Button=#d4d0c8
 ButtonText=black
 Base=white
 BaseText=black
+DisabledTextFront=#808080
+DisabledTextBack=white
 ThreedHighlight=white
 ThreedShadow1=#808080
 ThreedShadow2=#404040

Base/res/themes/Redmond.ini

@@ -30,6 +30,8 @@ Button=#bfb8bf
 ButtonText=black
 Base=white
 BaseText=black
+DisabledTextFront=#7f787f
+DisabledTextBack=#fff8ff
 ThreedHighlight=#fff8ff
 ThreedShadow1=#7f787f
 ThreedShadow2=#000000

Base/res/themes/Scarlett.ini

@@ -39,6 +39,8 @@ BaseText=#000000ff
 SyntaxPreprocessorStatement=#00a0a0ff
 Accent=#970e0eff
 Base=#ffffffff
+DisabledTextFront=#808080ff
+DisabledTextBack=#ffe1e1ff
 InactiveWindowTitle=#d5c7c7ff
 HighlightWindowTitle=#ffffffff
 MovingWindowTitleShadow=#601e07ff

Base/res/themes/Silver.ini

@@ -42,6 +42,8 @@ BaseText=#000000ff
 SyntaxPreprocessorStatement=#008080ff
 Accent=#63639cff
 Base=#f3f3f3ff
+DisabledTextFront=#808080ff
+DisabledTextBack=white
 InactiveWindowTitle=#696969ff
 HighlightWindowTitle=#000000ff
 MovingWindowTitleShadow=#000000ff

Base/res/themes/Sunshine.ini

@@ -30,6 +30,8 @@ Button=#aeb2c3
 ButtonText=black
 Base=white
 BaseText=black
+DisabledTextFront=#9397a5
+DisabledTextBack=white
 ThreedHighlight=white
 ThreedShadow1=#9397a5
 ThreedShadow2=#5d6069

Userland/Libraries/LibGUI/AbstractButton.cpp

@@ -226,8 +226,8 @@ void AbstractButton::paint_text(Painter& painter, const Gfx::IntRect& rect, cons
     auto clipped_rect = rect.intersected(this->rect());
 
     if (!is_enabled()) {
-        painter.draw_text(clipped_rect.translated(1, 1), text(), font, text_alignment, Color::White, Gfx::TextElision::Right, text_wrapping);
+        painter.draw_text(clipped_rect.translated(1, 1), text(), font, text_alignment, palette().disabled_text_back(), Gfx::TextElision::Right, text_wrapping);
-        painter.draw_text(clipped_rect, text(), font, text_alignment, Color::from_rgb(0x808080), Gfx::TextElision::Right, text_wrapping);
+        painter.draw_text(clipped_rect, text(), font, text_alignment, palette().disabled_text_front(), Gfx::TextElision::Right, text_wrapping);
         return;
     }
 

Userland/Libraries/LibGUI/Label.cpp

@@ -104,8 +104,8 @@ void Label::paint_event(PaintEvent& event)
     if (is_enabled()) {
         painter.draw_text(text_rect, text(), text_alignment(), palette().color(foreground_role()), Gfx::TextElision::Right, text_wrapping());
     } else {
-        painter.draw_text(text_rect.translated(1, 1), text(), font(), text_alignment(), Color::White, Gfx::TextElision::Right, text_wrapping());
+        painter.draw_text(text_rect.translated(1, 1), text(), font(), text_alignment(), palette().disabled_text_back(), Gfx::TextElision::Right, text_wrapping());
-        painter.draw_text(text_rect, text(), font(), text_alignment(), Color::from_rgb(0x808080), Gfx::TextElision::Right, text_wrapping());
+        painter.draw_text(text_rect, text(), font(), text_alignment(), palette().disabled_text_front(), Gfx::TextElision::Right, text_wrapping());
     }
 }
 

Userland/Libraries/LibGfx/Palette.h

@@ -99,6 +99,8 @@ public:
     Color menu_selection_text() const { return color(ColorRole::MenuSelectionText); }
     Color base() const { return color(ColorRole::Base); }
     Color base_text() const { return color(ColorRole::BaseText); }
+    Color disabled_text_front() const { return color(ColorRole::DisabledTextFront); }
+    Color disabled_text_back() const { return color(ColorRole::DisabledTextBack); }
     Color button() const { return color(ColorRole::Button); }
     Color button_text() const { return color(ColorRole::ButtonText); }
     Color threed_highlight() const { return color(ColorRole::ThreedHighlight); }

Userland/Libraries/LibGfx/SystemTheme.h

@@ -30,6 +30,8 @@ namespace Gfx {
     C(BaseText)                    \
     C(Button)                      \
     C(ButtonText)                  \
+    C(DisabledTextFront)           \
+    C(DisabledTextBack)            \
     C(DesktopBackground)           \
     C(FocusOutline)                \
     C(Gutter)                      \