1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 22:57:44 +00:00

LibGUI+LibDraw: Add "Palette" concept for scoped color theming

GApplication now has a palette. This palette contains all the system
theme colors by default, and is inherited by a new top-level GWidget.
New child widgets inherit their parents palette.

It is possible to override the GApplication palette, and the palette
of any GWidget.

The Palette object contains a bunch of colors, each corresponding to
a ColorRole. Each role has a convenience getter as well.

Each GWidget now has a background_role() and foreground_role(), which
are then looked up in their current palette when painting. This means
that you no longer alter the background color of a widget by setting
it directly, rather you alter either its background role, or the
widget's palette.
This commit is contained in:
Andreas Kling 2019-12-24 20:57:54 +01:00
parent cb4e51a7a5
commit a79bac428b
62 changed files with 448 additions and 410 deletions

View file

@ -4,94 +4,6 @@
#include <ctype.h>
#include <stdio.h>
Color::Color(SystemColor system_color)
{
auto& theme = current_system_theme();
switch (system_color) {
case SystemColor::Window:
m_value = theme.window.value();
break;
case SystemColor::WindowText:
m_value = theme.window_text.value();
break;
case SystemColor::Base:
m_value = theme.base.value();
break;
case SystemColor::ThreedShadow1:
m_value = theme.threed_shadow1.value();
break;
case SystemColor::ThreedShadow2:
m_value = theme.threed_shadow2.value();
break;
case SystemColor::ThreedHighlight:
m_value = theme.threed_highlight.value();
break;
case SystemColor::Button:
m_value = theme.button.value();
break;
case SystemColor::ButtonText:
m_value = theme.button_text.value();
break;
case SystemColor::HoverHighlight:
m_value = theme.hover_highlight.value();
break;
case SystemColor::Selection:
m_value = theme.selection.value();
break;
case SystemColor::SelectionText:
m_value = theme.selection_text.value();
break;
case SystemColor::DesktopBackground:
m_value = theme.desktop_background.value();
break;
case SystemColor::ActiveWindowBorder1:
m_value = theme.active_window_border1.value();
break;
case SystemColor::ActiveWindowBorder2:
m_value = theme.active_window_border2.value();
break;
case SystemColor::ActiveWindowTitle:
m_value = theme.active_window_title.value();
break;
case SystemColor::InactiveWindowBorder1:
m_value = theme.inactive_window_border1.value();
break;
case SystemColor::InactiveWindowBorder2:
m_value = theme.inactive_window_border2.value();
break;
case SystemColor::InactiveWindowTitle:
m_value = theme.inactive_window_title.value();
break;
case SystemColor::MovingWindowBorder1:
m_value = theme.moving_window_border1.value();
break;
case SystemColor::MovingWindowBorder2:
m_value = theme.moving_window_border2.value();
break;
case SystemColor::MovingWindowTitle:
m_value = theme.moving_window_title.value();
break;
case SystemColor::HighlightWindowBorder1:
m_value = theme.highlight_window_border1.value();
break;
case SystemColor::HighlightWindowBorder2:
m_value = theme.highlight_window_border2.value();
break;
case SystemColor::HighlightWindowTitle:
m_value = theme.highlight_window_title.value();
break;
case SystemColor::MenuStripe:
m_value = theme.menu_stripe.value();
break;
case SystemColor::MenuBase:
m_value = theme.menu_base.value();
break;
case SystemColor::MenuSelection:
m_value = theme.menu_selection.value();
break;
}
}
Color::Color(NamedColor named)
{
struct {

View file

@ -4,6 +4,7 @@
#include <AK/String.h>
#include <AK/Types.h>
enum class ColorRole;
typedef u32 RGBA32;
inline constexpr u32 make_rgb(u8 r, u8 g, u8 b)
@ -11,38 +12,6 @@ inline constexpr u32 make_rgb(u8 r, u8 g, u8 b)
return ((r << 16) | (g << 8) | b);
}
enum class SystemColor {
DesktopBackground,
ActiveWindowBorder1,
ActiveWindowBorder2,
ActiveWindowTitle,
InactiveWindowBorder1,
InactiveWindowBorder2,
InactiveWindowTitle,
MovingWindowBorder1,
MovingWindowBorder2,
MovingWindowTitle,
HighlightWindowBorder1,
HighlightWindowBorder2,
HighlightWindowTitle,
MenuStripe,
MenuBase,
MenuSelection,
Window,
WindowText,
Button,
ButtonText,
Base,
ThreedHighlight,
ThreedShadow1,
ThreedShadow2,
HoverHighlight,
Selection,
SelectionText,
DisabledText = ThreedShadow1,
};
class Color {
public:
enum NamedColor {
@ -71,7 +40,6 @@ public:
Color() {}
Color(NamedColor);
Color(SystemColor);
Color(u8 r, u8 g, u8 b)
: m_value(0xff000000 | (r << 16) | (g << 8) | b)
{

View file

@ -11,6 +11,7 @@ OBJS = \
Rect.o \
StylePainter.o \
SystemTheme.o \
Palette.o \
Emoji.o
LIBRARY = libdraw.a

View file

@ -0,0 +1,26 @@
#include <LibDraw/Palette.h>
NonnullRefPtr<Palette> Palette::create_with_shared_buffer(SharedBuffer& buffer)
{
return adopt(*new Palette(buffer));
}
Palette::Palette(SharedBuffer& buffer)
: m_theme_buffer(buffer)
{
}
Palette::~Palette()
{
}
const SystemTheme& Palette::theme() const
{
return *(const SystemTheme*)m_theme_buffer->data();
}
Color Palette::color(ColorRole role) const
{
ASSERT((int)role < (int)ColorRole::__Count);
return theme().color[(int)role];
}

View file

@ -0,0 +1,51 @@
#pragma once
#include <AK/Badge.h>
#include <LibDraw/SystemTheme.h>
class GApplication;
class Palette : public RefCounted<Palette> {
public:
static NonnullRefPtr<Palette> create_with_shared_buffer(SharedBuffer&);
~Palette();
Color window() const { return color(ColorRole::Window); }
Color window_text() const { return color(ColorRole::WindowText); }
Color selection() const { return color(ColorRole::Selection); }
Color selection_text() const { return color(ColorRole::SelectionText); }
Color desktop_background() const { return color(ColorRole::DesktopBackground); }
Color active_window_border1() const { return color(ColorRole::ActiveWindowBorder1); }
Color active_window_border2() const { return color(ColorRole::ActiveWindowBorder2); }
Color active_window_title() const { return color(ColorRole::ActiveWindowTitle); }
Color inactive_window_border1() const { return color(ColorRole::InactiveWindowBorder1); }
Color inactive_window_border2() const { return color(ColorRole::InactiveWindowBorder2); }
Color inactive_window_title() const { return color(ColorRole::InactiveWindowTitle); }
Color moving_window_border1() const { return color(ColorRole::MovingWindowBorder1); }
Color moving_window_border2() const { return color(ColorRole::MovingWindowBorder2); }
Color moving_window_title() const { return color(ColorRole::MovingWindowTitle); }
Color highlight_window_border1() const { return color(ColorRole::HighlightWindowBorder1); }
Color highlight_window_border2() const { return color(ColorRole::HighlightWindowBorder2); }
Color highlight_window_title() const { return color(ColorRole::HighlightWindowTitle); }
Color menu_stripe() const { return color(ColorRole::MenuStripe); }
Color menu_base() const { return color(ColorRole::MenuBase); }
Color menu_selection() const { return color(ColorRole::MenuSelection); }
Color base() const { return color(ColorRole::Base); }
Color button() const { return color(ColorRole::Button); }
Color button_text() const { return color(ColorRole::ButtonText); }
Color threed_highlight() const { return color(ColorRole::ThreedHighlight); }
Color threed_shadow1() const { return color(ColorRole::ThreedShadow1); }
Color threed_shadow2() const { return color(ColorRole::ThreedShadow2); }
Color hover_highlight() const { return color(ColorRole::ThreedHighlight); }
Color color(ColorRole) const;
const SystemTheme& theme() const;
void replace_internal_buffer(Badge<GApplication>, SharedBuffer& buffer) { m_theme_buffer = buffer; }
private:
explicit Palette(SharedBuffer&);
RefPtr<SharedBuffer> m_theme_buffer;
};

View file

@ -1,15 +1,16 @@
#include <LibDraw/Painter.h>
#include <LibDraw/Palette.h>
#include <LibDraw/StylePainter.h>
void StylePainter::paint_tab_button(Painter& painter, const Rect& rect, bool active, bool hovered, bool enabled)
void StylePainter::paint_tab_button(Painter& painter, const Rect& rect, const Palette& palette, bool active, bool hovered, bool enabled)
{
Color base_color = SystemColor::Button;
Color highlight_color2 = SystemColor::ThreedHighlight;
Color shadow_color1 = SystemColor::ThreedShadow1;
Color shadow_color2 = SystemColor::ThreedShadow2;
Color base_color = palette.button();
Color highlight_color2 = palette.threed_highlight();
Color shadow_color1 = palette.threed_shadow1();
Color shadow_color2 = palette.threed_shadow2();
if (hovered && enabled && !active)
base_color = StylePainter::hover_highlight_color();
base_color = palette.hover_highlight();
PainterStateSaver saver(painter);
painter.translate(rect.location());
@ -42,20 +43,20 @@ void StylePainter::paint_tab_button(Painter& painter, const Rect& rect, bool act
shadow_color2);
}
static void paint_button_new(Painter& painter, const Rect& rect, bool pressed, bool checked, bool hovered, bool enabled)
static void paint_button_new(Painter& painter, const Rect& rect, const Palette& palette, bool pressed, bool checked, bool hovered, bool enabled)
{
Color button_color = SystemColor::Button;
Color highlight_color2 = SystemColor::ThreedHighlight;
Color shadow_color1 = SystemColor::ThreedShadow1;
Color shadow_color2 = SystemColor::ThreedShadow2;
Color button_color = palette.button();
Color highlight_color2 = palette.threed_highlight();
Color shadow_color1 = palette.threed_shadow1();
Color shadow_color2 = palette.threed_shadow2();
if (checked && enabled) {
if (hovered)
button_color = SystemColor::HoverHighlight;
button_color = palette.hover_highlight();
else
button_color = SystemColor::Button;
button_color = palette.button();
} else if (hovered && enabled)
button_color = StylePainter::hover_highlight_color();
button_color = palette.hover_highlight();
PainterStateSaver saver(painter);
painter.translate(rect.location());
@ -87,14 +88,14 @@ static void paint_button_new(Painter& painter, const Rect& rect, bool pressed, b
}
}
void StylePainter::paint_button(Painter& painter, const Rect& rect, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled)
void StylePainter::paint_button(Painter& painter, const Rect& rect, const Palette& palette, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled)
{
if (button_style == ButtonStyle::Normal)
return paint_button_new(painter, rect, pressed, checked, hovered, enabled);
return paint_button_new(painter, rect, palette, pressed, checked, hovered, enabled);
Color button_color = SystemColor::Button;
Color highlight_color = SystemColor::ThreedHighlight;
Color shadow_color = Color(96, 96, 96);
Color button_color = palette.button();
Color highlight_color = palette.threed_highlight();
Color shadow_color = palette.threed_shadow1();
if (button_style == ButtonStyle::CoolBar && !enabled)
return;
@ -127,27 +128,27 @@ void StylePainter::paint_button(Painter& painter, const Rect& rect, ButtonStyle
}
}
void StylePainter::paint_surface(Painter& painter, const Rect& rect, bool paint_vertical_lines, bool paint_top_line)
void StylePainter::paint_surface(Painter& painter, const Rect& rect, const Palette& palette, bool paint_vertical_lines, bool paint_top_line)
{
painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, SystemColor::Button);
painter.draw_line(rect.top_left(), rect.top_right(), paint_top_line ? SystemColor::ThreedHighlight : SystemColor::Button);
painter.draw_line(rect.bottom_left(), rect.bottom_right(), SystemColor::ThreedShadow1);
painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, palette.button());
painter.draw_line(rect.top_left(), rect.top_right(), paint_top_line ? palette.threed_highlight() : palette.button());
painter.draw_line(rect.bottom_left(), rect.bottom_right(), palette.threed_shadow1());
if (paint_vertical_lines) {
painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), SystemColor::ThreedHighlight);
painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), SystemColor::ThreedShadow1);
painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), palette.threed_highlight());
painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), palette.threed_shadow1());
}
}
void StylePainter::paint_frame(Painter& painter, const Rect& rect, FrameShape shape, FrameShadow shadow, int thickness, bool skip_vertical_lines)
void StylePainter::paint_frame(Painter& painter, const Rect& rect, const Palette& palette, FrameShape shape, FrameShadow shadow, int thickness, bool skip_vertical_lines)
{
Color top_left_color;
Color bottom_right_color;
Color dark_shade = SystemColor::ThreedShadow1;
Color light_shade = SystemColor::ThreedHighlight;
Color dark_shade = palette.threed_shadow1();
Color light_shade = palette.threed_highlight();
if (shape == FrameShape::Container && thickness >= 2) {
if (shadow == FrameShadow::Raised) {
dark_shade = SystemColor::ThreedShadow2;
dark_shade = palette.threed_shadow2();
}
}
@ -175,10 +176,10 @@ void StylePainter::paint_frame(Painter& painter, const Rect& rect, FrameShape sh
if (shape == FrameShape::Container && thickness >= 2) {
Color top_left_color;
Color bottom_right_color;
Color dark_shade = SystemColor::ThreedShadow2;
Color light_shade = SystemColor::Button;
Color dark_shade = palette.threed_shadow2();
Color light_shade = palette.button();
if (shadow == FrameShadow::Raised) {
dark_shade = SystemColor::ThreedShadow1;
dark_shade = palette.threed_shadow1();
top_left_color = light_shade;
bottom_right_color = dark_shade;
} else if (shadow == FrameShadow::Sunken) {
@ -205,12 +206,12 @@ void StylePainter::paint_frame(Painter& painter, const Rect& rect, FrameShape sh
}
}
void StylePainter::paint_window_frame(Painter& painter, const Rect& rect)
void StylePainter::paint_window_frame(Painter& painter, const Rect& rect, const Palette& palette)
{
Color base_color = SystemColor::Button;
Color dark_shade = SystemColor::ThreedShadow2;
Color mid_shade = SystemColor::ThreedShadow1;
Color light_shade = SystemColor::ThreedHighlight;
Color base_color = palette.button();
Color dark_shade = palette.threed_shadow2();
Color mid_shade = palette.threed_shadow1();
Color light_shade = palette.threed_highlight();
painter.draw_line(rect.top_left(), rect.top_right(), base_color);
painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left(), base_color);
@ -227,7 +228,7 @@ void StylePainter::paint_window_frame(Painter& painter, const Rect& rect)
painter.draw_line(rect.bottom_left().translated(2, -2), rect.bottom_right().translated(-2, -2), base_color);
}
void StylePainter::paint_progress_bar(Painter& painter, const Rect& rect, int min, int max, int value, const StringView& text)
void StylePainter::paint_progress_bar(Painter& painter, const Rect& rect, const Palette& palette, int min, int max, int value, const StringView& text)
{
// First we fill the entire widget with the gradient. This incurs a bit of
// overdraw but ensures a consistent look throughout the progression.
@ -249,7 +250,7 @@ void StylePainter::paint_progress_bar(Painter& painter, const Rect& rect, int mi
Rect hole_rect { (int)progress_width, 0, (int)(rect.width() - progress_width), rect.height() };
hole_rect.move_by(rect.location());
PainterStateSaver saver(painter);
painter.fill_rect(hole_rect, Color::White);
painter.fill_rect(hole_rect, palette.base());
painter.add_clip_rect(hole_rect);
if (!text.is_null())

View file

@ -3,6 +3,7 @@
#include <LibDraw/Color.h>
class Painter;
class Palette;
class Rect;
enum class ButtonStyle {
@ -25,12 +26,10 @@ enum class FrameShape {
class StylePainter {
public:
static void paint_button(Painter&, const Rect&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true);
static void paint_tab_button(Painter&, const Rect&, bool active, bool hovered, bool enabled);
static void paint_surface(Painter&, const Rect&, bool paint_vertical_lines = true, bool paint_top_line = true);
static void paint_frame(Painter&, const Rect&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false);
static void paint_window_frame(Painter&, const Rect&);
static void paint_progress_bar(Painter&, const Rect&, int min, int max, int value, const StringView& text = {});
static Color hover_highlight_color() { return SystemColor::HoverHighlight; }
static void paint_button(Painter&, const Rect&, const Palette&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true);
static void paint_tab_button(Painter&, const Rect&, const Palette&, bool active, bool hovered, bool enabled);
static void paint_surface(Painter&, const Rect&, const Palette&, bool paint_vertical_lines = true, bool paint_top_line = true);
static void paint_frame(Painter&, const Rect&, const Palette&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false);
static void paint_window_frame(Painter&, const Rect&, const Palette&);
static void paint_progress_bar(Painter&, const Rect&, const Palette&, int min, int max, int value, const StringView& text = {});
};

View file

@ -41,34 +41,37 @@ RefPtr<SharedBuffer> load_system_theme(const String& path)
return color.value();
};
data->desktop_background = get("DesktopBackground");
data->threed_highlight = get("ThreedHighlight");
data->threed_shadow1 = get("ThreedShadow1");
data->threed_shadow2 = get("ThreedShadow2");
data->hover_highlight = get("HoverHighlight");
data->selection = get("Selection");
data->selection_text = get("SelectionText");
data->window = get("Window");
data->window_text = get("WindowText");
data->base = get("Base");
data->button = get("Button");
data->button_text = get("ButtonText");
data->desktop_background = get("DesktopBackground");
data->active_window_border1 = get("ActiveWindowBorder1");
data->active_window_border2 = get("ActiveWindowBorder2");
data->active_window_title = get("ActiveWindowTitle");
data->inactive_window_border1 = get("InactiveWindowBorder1");
data->inactive_window_border2 = get("InactiveWindowBorder2");
data->inactive_window_title = get("InactiveWindowTitle");
data->moving_window_border1 = get("MovingWindowBorder1");
data->moving_window_border2 = get("MovingWindowBorder2");
data->moving_window_title = get("MovingWindowTitle");
data->highlight_window_border1 = get("HighlightWindowBorder1");
data->highlight_window_border2 = get("HighlightWindowBorder2");
data->highlight_window_title = get("HighlightWindowTitle");
data->menu_stripe = get("MenuStripe");
data->menu_base = get("MenuBase");
data->menu_selection = get("MenuSelection");
#define DO_COLOR(x) \
data->color[(int)ColorRole::x] = get(#x)
DO_COLOR(DesktopBackground);
DO_COLOR(ThreedHighlight);
DO_COLOR(ThreedShadow1);
DO_COLOR(ThreedShadow2);
DO_COLOR(HoverHighlight);
DO_COLOR(Selection);
DO_COLOR(SelectionText);
DO_COLOR(Window);
DO_COLOR(WindowText);
DO_COLOR(Base);
DO_COLOR(Button);
DO_COLOR(ButtonText);
DO_COLOR(DesktopBackground);
DO_COLOR(ActiveWindowBorder1);
DO_COLOR(ActiveWindowBorder2);
DO_COLOR(ActiveWindowTitle);
DO_COLOR(InactiveWindowBorder1);
DO_COLOR(InactiveWindowBorder2);
DO_COLOR(InactiveWindowTitle);
DO_COLOR(MovingWindowBorder1);
DO_COLOR(MovingWindowBorder2);
DO_COLOR(MovingWindowTitle);
DO_COLOR(HighlightWindowBorder1);
DO_COLOR(HighlightWindowBorder2);
DO_COLOR(HighlightWindowTitle);
DO_COLOR(MenuStripe);
DO_COLOR(MenuBase);
DO_COLOR(MenuSelection);
buffer->seal();
buffer->share_globally();

View file

@ -4,43 +4,43 @@
#include <LibC/SharedBuffer.h>
#include <LibDraw/Color.h>
enum class ColorRole {
NoRole,
DesktopBackground,
ActiveWindowBorder1,
ActiveWindowBorder2,
ActiveWindowTitle,
InactiveWindowBorder1,
InactiveWindowBorder2,
InactiveWindowTitle,
MovingWindowBorder1,
MovingWindowBorder2,
MovingWindowTitle,
HighlightWindowBorder1,
HighlightWindowBorder2,
HighlightWindowTitle,
MenuStripe,
MenuBase,
MenuSelection,
Window,
WindowText,
Button,
ButtonText,
Base,
ThreedHighlight,
ThreedShadow1,
ThreedShadow2,
HoverHighlight,
Selection,
SelectionText,
__Count,
DisabledText = ThreedShadow1,
};
struct SystemTheme {
Color desktop_background;
Color active_window_border1;
Color active_window_border2;
Color active_window_title;
Color inactive_window_border1;
Color inactive_window_border2;
Color inactive_window_title;
Color moving_window_border1;
Color moving_window_border2;
Color moving_window_title;
Color highlight_window_border1;
Color highlight_window_border2;
Color highlight_window_title;
Color menu_stripe;
Color menu_base;
Color menu_selection;
Color window;
Color window_text;
Color base;
Color button;
Color button_text;
Color threed_highlight;
Color threed_shadow1;
Color threed_shadow2;
Color hover_highlight;
Color selection;
Color selection_text;
Color color[(int)ColorRole::__Count];
};
const SystemTheme& current_system_theme();