LibGfx+Base: Add Tray/TrayText theme colors and Gfx::ButtonStyle::Tray

A "Tray" is a sunken container area for widgets. The first intended
client of this style is the GUI::FilePicker's common locations frame.

Thanks to @nvella for coming up with the term "Tray" :^)

Base/res/themes/Basalt.ini

@@ -66,6 +66,8 @@ SyntaxPreprocessorStatement=#ffafff
 SyntaxPreprocessorValue=orange
 Tooltip=#1f1f1f
 TooltipText=white
+Tray=#171717
+TrayText=white
 
 [Metrics]
 TitleHeight=24

Base/res/themes/Coffee.ini

@@ -62,6 +62,8 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=#ffffe1
 TooltipText=black
+Tray=#9397a5
+TrayText=white
 
 [Metrics]
 TitleButtonWidth=17

Base/res/themes/Dark.ini

@@ -58,3 +58,5 @@ SyntaxPreprocessorStatement=darkgray
 SyntaxPreprocessorValue=orange
 Tooltip=#444444
 TooltipText=white
+Tray=#323232
+TrayText=white

Base/res/themes/Default.ini

@@ -66,6 +66,8 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=#ffffe1
 TooltipText=black
+Tray=#808080
+TrayText=#ffffff
 
 [Metrics]
 TitleHeight=19

Base/res/themes/Desert.ini

@@ -66,6 +66,8 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=white
 TooltipText=black
+Tray=#a28d68
+TrayText=white
 
 [Metrics]
 TitleHeight=19

Base/res/themes/Faux Pas.ini

@@ -58,3 +58,5 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=#ffffe1
 TooltipText=black
+Tray=#282828
+TrayText=white

Base/res/themes/Nord.ini

@@ -58,3 +58,5 @@ SyntaxPreprocessorStatement=#ffafff
 SyntaxPreprocessorValue=orange
 Tooltip=#4c566a
 TooltipText=white
+Tray=#3b4252
+TrayText=white

Base/res/themes/Redmond 2000.ini

@@ -62,6 +62,8 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=#ffffe1
 TooltipText=black
+Tray=#808080
+TrayText=white
 
 [Metrics]
 TitleButtonWidth=17

Base/res/themes/Redmond.ini

@@ -62,6 +62,8 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=#ffffe1
 TooltipText=black
+Tray=#808080
+TrayText=white
 
 [Metrics]
 TitleButtonWidth=17

Base/res/themes/Silver.ini

@@ -58,3 +58,5 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=#ffffe1
 TooltipText=black
+Tray=#3b3b3b
+TrayText=white

Base/res/themes/Sunshine.ini

@@ -62,6 +62,8 @@ SyntaxPreprocessorStatement=#008080
 SyntaxPreprocessorValue=#800000
 Tooltip=#ffffe1
 TooltipText=black
+Tray=#9397a5
+TrayText=white
 
 [Paths]
 TitleButtonIcons=/res/icons/themes/Sunshine/16x16/

Userland/Libraries/LibGfx/ClassicStylePainter.cpp

@@ -170,7 +170,7 @@ void ClassicStylePainter::paint_button(Painter& painter, const IntRect& rect, co
 
     Color button_color = palette.button();
     Color highlight_color = palette.threed_highlight();
-    Color shadow_color = palette.threed_shadow1();
+    Color shadow_color = button_style == ButtonStyle::CoolBar ? palette.threed_shadow1() : palette.threed_shadow2();
 
     PainterStateSaver saver(painter);
     painter.translate(rect.location());
@@ -178,11 +178,13 @@ void ClassicStylePainter::paint_button(Painter& painter, const IntRect& rect, co
     if (pressed || checked) {
         // Base
         IntRect base_rect { 1, 1, rect.width() - 2, rect.height() - 2 };
+        if (button_style == ButtonStyle::CoolBar) {
             if (checked && !pressed) {
-            painter.fill_rect_with_dither_pattern(base_rect, palette.button().lightened(1.3f), palette.button());
+                painter.fill_rect_with_dither_pattern(base_rect, palette.button().lightened(1.3f), Color());
             } else {
                 painter.fill_rect(base_rect, button_color);
             }
+        }
 
         // Sunken shadow
         painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color);
@@ -191,9 +193,11 @@ void ClassicStylePainter::paint_button(Painter& painter, const IntRect& rect, co
         // Bottom highlight
         painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, highlight_color);
         painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, highlight_color);
-    } else if (button_style == ButtonStyle::CoolBar && hovered) {
+    } else if (hovered) {
+        if (button_style == ButtonStyle::CoolBar) {
             // Base
             painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
+        }
 
         // Top highlight
         painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, highlight_color);

Userland/Libraries/LibGfx/StylePainter.h

@@ -33,7 +33,8 @@ namespace Gfx {
 
 enum class ButtonStyle {
     Normal,
-    CoolBar
+    CoolBar,
+    Tray,
 };
 enum class FrameShadow {
     Plain,

Userland/Libraries/LibGfx/SystemTheme.h

@@ -99,6 +99,8 @@ namespace Gfx {
     C(ThreedShadow2)               \
     C(Tooltip)                     \
     C(TooltipText)                 \
+    C(Tray)                        \
+    C(TrayText)                    \
     C(VisitedLink)                 \
     C(Window)                      \
     C(WindowText)