widgetry/style/
mod.rs

Help
1use crate::{Color, Text};
2
3pub mod button_style;
4pub use button_style::ButtonStyle;
5
6#[derive(Clone)]
7pub struct Style {
8    pub panel_bg: Color,
9    pub field_bg: Color,
10    pub dropdown_border: Color,
11    pub icon_fg: Color,
12    pub primary_fg: Color,
13    pub text_primary_color: Color,
14    pub text_secondary_color: Color,
15    pub text_tooltip_color: Color,
16    pub text_hotkey_color: Color,
17    pub text_destructive_color: Color,
18    pub loading_tips: Text,
19    pub section_bg: Color,
20    pub section_outline: OutlineStyle,
21    pub btn_plain: ButtonStyle,
22    pub btn_outline: ButtonStyle,
23    pub btn_floating: ButtonStyle,
24    pub btn_solid: ButtonStyle,
25    pub btn_tab: ButtonStyle,
26    pub btn_solid_destructive: ButtonStyle,
27    pub btn_plain_destructive: ButtonStyle,
28    pub btn_solid_primary: ButtonStyle,
29    pub btn_plain_primary: ButtonStyle,
30}
31
32pub type OutlineStyle = (f64, Color);
33
34pub static DEFAULT_OUTLINE_THICKNESS: f64 = 2.0;
35
36// This is #EE702E, called "ab_orange_1" in Figma
37const AB_ORANGE_1: Color = Color::rgb_f(0.933, 0.439, 0.18);
38
39// Some ButtonStyles are shared across Styles
40impl ButtonStyle {
41    pub fn solid_dark_fg() -> Self {
42        ButtonStyle {
43            fg: hex("#4C4C4C"),
44            fg_disabled: hex("#4C4C4C").alpha(0.3),
45            bg: Color::WHITE.alpha(0.8),
46            bg_hover: Color::WHITE,
47            bg_disabled: Color::grey(0.8),
48            outline: (DEFAULT_OUTLINE_THICKNESS, Color::WHITE.alpha(0.6)),
49        }
50    }
51
52    pub fn outline_dark_fg() -> Self {
53        ButtonStyle {
54            fg: hex("#4C4C4C"),
55            fg_disabled: hex("#4C4C4C").alpha(0.3),
56            bg: Color::CLEAR,
57            bg_hover: hex("#4C4C4C").alpha(0.1),
58            bg_disabled: Color::CLEAR,
59            outline: (DEFAULT_OUTLINE_THICKNESS, hex("#4C4C4C")),
60        }
61    }
62
63    pub fn plain_dark_fg() -> Self {
64        ButtonStyle {
65            fg: hex("#4C4C4C"),
66            fg_disabled: hex("#4C4C4C").alpha(0.3),
67            bg: Color::CLEAR,
68            bg_hover: hex("#4C4C4C").alpha(0.1),
69            bg_disabled: Color::CLEAR,
70            outline: (0.0, Color::CLEAR),
71        }
72    }
73
74    pub fn solid_light_fg() -> Self {
75        ButtonStyle {
76            fg: hex("#F2F2F2"),
77            fg_disabled: hex("#F2F2F2").alpha(0.3),
78            bg: hex("#003046").alpha(0.8),
79            bg_hover: hex("#003046"),
80            bg_disabled: Color::grey(0.1),
81            outline: (DEFAULT_OUTLINE_THICKNESS, hex("#003046").alpha(0.6)),
82        }
83    }
84
85    pub fn outline_light_fg() -> Self {
86        ButtonStyle {
87            fg: hex("#F2F2F2"),
88            fg_disabled: hex("#F2F2F2").alpha(0.3),
89            bg: Color::CLEAR,
90            bg_hover: hex("#F2F2F2").alpha(0.1),
91            bg_disabled: Color::CLEAR,
92            outline: (DEFAULT_OUTLINE_THICKNESS, hex("#F2F2F2")),
93        }
94    }
95
96    pub fn plain_light_fg() -> Self {
97        ButtonStyle {
98            fg: hex("#F2F2F2"),
99            fg_disabled: hex("#F2F2F2").alpha(0.3),
100            bg: Color::CLEAR,
101            bg_hover: hex("#F2F2F2").alpha(0.1),
102            bg_disabled: Color::CLEAR,
103            outline: (0.0, Color::CLEAR),
104        }
105    }
106
107    pub fn solid_primary() -> Self {
108        Self {
109            fg: hex("#F2F2F2"),
110            fg_disabled: hex("#F2F2F2"),
111            bg: AB_ORANGE_1.tint(0.1),
112            bg_hover: AB_ORANGE_1,
113            bg_disabled: AB_ORANGE_1.tint(0.3),
114            outline: (DEFAULT_OUTLINE_THICKNESS, AB_ORANGE_1.alpha(0.6)),
115        }
116    }
117
118    pub fn plain_primary() -> Self {
119        Self {
120            fg: AB_ORANGE_1,
121            fg_disabled: AB_ORANGE_1.tint(0.3),
122            bg: Color::CLEAR,
123            bg_hover: AB_ORANGE_1.tint(0.1),
124            bg_disabled: Color::CLEAR,
125            outline: (0.0, Color::CLEAR),
126        }
127    }
128
129    fn solid_destructive() -> Self {
130        Self {
131            fg: hex("#F2F2F2"),
132            fg_disabled: hex("#F2F2F2").alpha(0.3),
133            bg: hex("#FF5E5E").alpha(0.8),
134            bg_hover: hex("#FF5E5E"),
135            bg_disabled: Color::grey(0.1),
136            outline: (DEFAULT_OUTLINE_THICKNESS, hex("#FF5E5E").alpha(0.6)),
137        }
138    }
139
140    fn plain_destructive() -> ButtonStyle {
141        Self {
142            fg: hex("#FF5E5E"),
143            fg_disabled: hex("#FF5E5E").alpha(0.3),
144            bg: Color::CLEAR,
145            bg_hover: hex("#FF5E5E").alpha(0.1),
146            bg_disabled: Color::CLEAR,
147            outline: (0.0, Color::CLEAR),
148        }
149    }
150}
151
152impl Style {
153    pub fn light_bg() -> Style {
154        Style {
155            // shade panel_bg a bit to increase contrast vs. the section_bg, otherwise
156            // the section (and tabs) can be hard to distinguish
157            panel_bg: Color::WHITE.shade(0.03).alpha(0.95),
158            field_bg: hex("#F2F2F2"),
159            dropdown_border: hex("#4C4C4C"),
160            // TODO: replace inner_panel_bg with this
161            section_bg: Color::WHITE,
162            section_outline: (2.0, Color::WHITE.shade(0.1)),
163            loading_tips: Text::new(),
164            icon_fg: hex("#4C4C4C"),
165            primary_fg: AB_ORANGE_1,
166            text_primary_color: hex("#4C4C4C"),
167            text_secondary_color: hex("#4C4C4C").tint(0.2),
168            text_hotkey_color: AB_ORANGE_1,
169            text_tooltip_color: Color::WHITE,
170            text_destructive_color: hex("#FF5E5E"),
171            btn_outline: ButtonStyle::outline_dark_fg(),
172            btn_solid: ButtonStyle::solid_light_fg(),
173            btn_plain: ButtonStyle::plain_dark_fg(),
174            btn_tab: ButtonStyle {
175                fg: hex("#4C4C4C").tint(0.2),
176                fg_disabled: hex("#4C4C4C"),
177                bg: Color::CLEAR,
178                bg_hover: hex("#4C4C4C").alpha(0.1),
179                bg_disabled: Color::WHITE,
180                outline: (0.0, Color::CLEAR),
181            },
182            btn_floating: ButtonStyle::solid_dark_fg(),
183            btn_solid_destructive: ButtonStyle::solid_destructive(),
184            btn_plain_destructive: ButtonStyle::plain_destructive(),
185            btn_solid_primary: ButtonStyle::solid_primary(),
186            btn_plain_primary: ButtonStyle::plain_primary(),
187        }
188    }
189
190    pub fn dark_bg() -> Style {
191        let navy = hex("#003046");
192        Style {
193            // tint panel_bg a bit to increase contrast vs. the section_bg, otherwise
194            // the section (and tabs) can be hard to distinguish
195            panel_bg: navy.tint(0.05).alpha(0.9),
196            field_bg: navy.shade(0.2),
197            dropdown_border: Color::WHITE,
198            // TODO: replace inner_panel_bg with this
199            section_bg: navy,
200            section_outline: (DEFAULT_OUTLINE_THICKNESS, navy.shade(0.2)),
201            loading_tips: Text::new(),
202            icon_fg: Color::WHITE,
203            primary_fg: AB_ORANGE_1,
204            text_primary_color: Color::WHITE,
205            text_secondary_color: Color::WHITE.shade(0.2),
206            text_hotkey_color: Color::GREEN,
207            text_tooltip_color: Color::WHITE,
208            text_destructive_color: hex("#FF5E5E"),
209            btn_outline: ButtonStyle::outline_light_fg(),
210            btn_solid: ButtonStyle::solid_dark_fg(),
211            btn_plain: ButtonStyle::plain_light_fg(),
212            btn_tab: ButtonStyle {
213                fg: hex("#F2F2F2").shade(0.4),
214                fg_disabled: hex("#F2F2F2"),
215                bg: Color::CLEAR,
216                bg_hover: hex("#F2F2F2").alpha(0.1),
217                bg_disabled: navy,
218                outline: (0.0, Color::CLEAR),
219            },
220            btn_floating: ButtonStyle::solid_light_fg(),
221            btn_solid_destructive: ButtonStyle::solid_destructive(),
222            btn_plain_destructive: ButtonStyle::plain_destructive(),
223            btn_solid_primary: ButtonStyle::solid_primary(),
224            btn_plain_primary: ButtonStyle::plain_primary(),
225        }
226    }
227}
228
229// Convenience
230fn hex(x: &str) -> Color {
231    Color::hex(x)
232}
widgetry/style/mod.rs

widgetry/style/
mod.rs
