freya_components/theming/
themes.rs

1use freya_core::prelude::*;
2use torin::{
3    gaps::Gaps,
4    size::Size,
5};
6
7#[cfg(feature = "router")]
8use crate::theming::component_themes::LinkThemePreference;
9use crate::theming::{
10    component_themes::{
11        AccordionThemePreference,
12        ButtonColorsThemePreference,
13        ButtonLayoutThemePreference,
14        CheckboxThemePreference,
15        ChipThemePreference,
16        CircularLoaderThemePreference,
17        ColorsSheet,
18        DropdownItemThemePreference,
19        DropdownThemePreference,
20        FloatingTabThemePreference,
21        InputThemePreference,
22        MenuContainerThemePreference,
23        MenuItemThemePreference,
24        PopupThemePreference,
25        ProgressBarThemePreference,
26        RadioItemThemePreference,
27        ResizableHandleThemePreference,
28        ScrollBarThemePreference,
29        SideBarItemThemePreference,
30        SideBarThemePreference,
31        SliderThemePreference,
32        SwitchThemePreference,
33        TableThemePreference,
34        Theme,
35        TooltipThemePreference,
36    },
37    macros::Preference,
38};
39
40pub(crate) const BASE_THEME: Theme = Theme {
41    name: "base",
42    colors: ColorsSheet {
43        // Brand & Accent
44        primary: Color::TRANSPARENT,
45        secondary: Color::TRANSPARENT,
46        tertiary: Color::TRANSPARENT,
47
48        // Status
49        success: Color::TRANSPARENT,
50        warning: Color::TRANSPARENT,
51        error: Color::TRANSPARENT,
52        info: Color::TRANSPARENT,
53
54        // Surfaces
55        background: Color::TRANSPARENT,
56        surface_primary: Color::TRANSPARENT,
57        surface_secondary: Color::TRANSPARENT,
58        surface_tertiary: Color::TRANSPARENT,
59        surface_inverse: Color::TRANSPARENT,
60        surface_inverse_secondary: Color::TRANSPARENT,
61        surface_inverse_tertiary: Color::TRANSPARENT,
62
63        // Borders
64        border: Color::TRANSPARENT,
65        border_focus: Color::TRANSPARENT,
66        border_disabled: Color::TRANSPARENT,
67
68        // Text
69        text_primary: Color::TRANSPARENT,
70        text_secondary: Color::TRANSPARENT,
71        text_placeholder: Color::TRANSPARENT,
72        text_inverse: Color::TRANSPARENT,
73        text_highlight: Color::TRANSPARENT,
74
75        // States
76        hover: Color::TRANSPARENT,
77        focus: Color::TRANSPARENT,
78        active: Color::TRANSPARENT,
79        disabled: Color::TRANSPARENT,
80
81        // Utility
82        overlay: Color::TRANSPARENT,
83        shadow: Color::TRANSPARENT,
84    },
85    button_layout: ButtonLayoutThemePreference {
86        padding: Preference::Specific(Gaps::new(6., 12., 6., 12.)),
87        margin: Preference::Specific(Gaps::new_all(0.)),
88        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
89        width: Preference::Specific(Size::Inner),
90        height: Preference::Specific(Size::Inner),
91    },
92    compact_button_layout: ButtonLayoutThemePreference {
93        padding: Preference::Specific(Gaps::new(3., 6., 3., 6.)),
94        margin: Preference::Specific(Gaps::new_all(0.)),
95        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
96        width: Preference::Specific(Size::Inner),
97        height: Preference::Specific(Size::Inner),
98    },
99    expanded_button_layout: ButtonLayoutThemePreference {
100        padding: Preference::Specific(Gaps::new(10., 16., 10., 16.)),
101        margin: Preference::Specific(Gaps::new_all(0.)),
102        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
103        width: Preference::Specific(Size::Inner),
104        height: Preference::Specific(Size::Inner),
105    },
106    button: ButtonColorsThemePreference {
107        background: Preference::Reference("surface_tertiary"),
108        hover_background: Preference::Reference("hover"),
109        border_fill: Preference::Reference("border"),
110        focus_border_fill: Preference::Reference("border_focus"),
111        color: Preference::Reference("text_primary"),
112    },
113    filled_button: ButtonColorsThemePreference {
114        background: Preference::Reference("primary"),
115        hover_background: Preference::Reference("tertiary"),
116        border_fill: Preference::Specific(Color::TRANSPARENT),
117        focus_border_fill: Preference::Reference("secondary"),
118        color: Preference::Reference("text_inverse"),
119    },
120    outline_button: ButtonColorsThemePreference {
121        background: Preference::Reference("surface_tertiary"),
122        hover_background: Preference::Reference("hover"),
123        border_fill: Preference::Reference("border"),
124        focus_border_fill: Preference::Reference("secondary"),
125        color: Preference::Reference("primary"),
126    },
127    accordion: AccordionThemePreference {
128        color: Preference::Reference("text_primary"),
129        background: Preference::Reference("surface_tertiary"),
130        border_fill: Preference::Reference("border"),
131    },
132    switch: SwitchThemePreference {
133        margin: Preference::Specific(Gaps::new_all(0.)),
134        background: Preference::Reference("surface_secondary"),
135        thumb_background: Preference::Reference("surface_inverse"),
136        toggled_background: Preference::Reference("secondary"),
137        toggled_thumb_background: Preference::Reference("primary"),
138        focus_border_fill: Preference::Reference("border_focus"),
139    },
140    scrollbar: ScrollBarThemePreference {
141        background: Preference::Reference("surface_primary"),
142        thumb_background: Preference::Reference("surface_inverse"),
143        hover_thumb_background: Preference::Reference("surface_inverse_secondary"),
144        active_thumb_background: Preference::Reference("surface_inverse_tertiary"),
145        size: Preference::Specific(15.),
146    },
147    progressbar: ProgressBarThemePreference {
148        color: Preference::Reference("text_inverse"),
149        background: Preference::Reference("surface_primary"),
150        progress_background: Preference::Reference("primary"),
151        height: Preference::Specific(20.),
152    },
153    sidebar: SideBarThemePreference {
154        color: Preference::Reference("text_primary"),
155        background: Preference::Reference("surface_tertiary"),
156        padding: Preference::Specific(Gaps::new_all(8.)),
157        spacing: Preference::Specific(4.),
158    },
159    sidebar_item: SideBarItemThemePreference {
160        color: Preference::Reference("text_primary"),
161        background: Preference::Reference("surface_tertiary"),
162        active_background: Preference::Reference("surface_secondary"),
163        hover_background: Preference::Reference("hover"),
164        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
165        margin: Preference::Specific(Gaps::new_all(0.)),
166        padding: Preference::Specific(Gaps::new(8., 12., 8., 12.)),
167    },
168    #[cfg(feature = "router")]
169    link: LinkThemePreference {
170        color: Preference::Reference("text_highlight"),
171    },
172    tooltip: TooltipThemePreference {
173        background: Preference::Reference("surface_tertiary"),
174        color: Preference::Reference("text_primary"),
175        border_fill: Preference::Reference("surface_primary"),
176    },
177    circular_loader: CircularLoaderThemePreference {
178        primary_color: Preference::Reference("surface_primary"),
179        inversed_color: Preference::Reference("surface_inverse"),
180    },
181    input: InputThemePreference {
182        background: Preference::Reference("surface_tertiary"),
183        hover_background: Preference::Reference("background"),
184        color: Preference::Reference("text_primary"),
185        placeholder_color: Preference::Reference("text_secondary"),
186        border_fill: Preference::Reference("border"),
187        focus_border_fill: Preference::Reference("border_focus"),
188        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
189        inner_margin: Preference::Specific(Gaps::new(8., 8., 8., 8.)),
190    },
191    radio: RadioItemThemePreference {
192        unselected_fill: Preference::Reference("surface_inverse_tertiary"),
193        selected_fill: Preference::Reference("primary"),
194        border_fill: Preference::Reference("surface_primary"),
195    },
196    checkbox: CheckboxThemePreference {
197        unselected_fill: Preference::Reference("surface_inverse_tertiary"),
198        selected_fill: Preference::Reference("primary"),
199        selected_icon_fill: Preference::Reference("secondary"),
200        border_fill: Preference::Reference("surface_primary"),
201    },
202    resizable_handle: ResizableHandleThemePreference {
203        background: Preference::Reference("surface_secondary"),
204        hover_background: Preference::Reference("surface_primary"),
205        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
206    },
207    floating_tab: FloatingTabThemePreference {
208        background: Preference::Specific(Color::TRANSPARENT),
209        hover_background: Preference::Reference("surface_secondary"),
210        color: Preference::Reference("text_primary"),
211        padding: Preference::Specific(Gaps::new(6., 12., 6., 12.)),
212        width: Preference::Specific(Size::Inner),
213        height: Preference::Specific(Size::Inner),
214    },
215    slider: SliderThemePreference {
216        background: Preference::Reference("surface_primary"),
217        thumb_background: Preference::Reference("secondary"),
218        thumb_inner_background: Preference::Reference("primary"),
219        border_fill: Preference::Reference("surface_primary"),
220    },
221    dropdown: DropdownThemePreference {
222        width: Preference::Specific(Size::Inner),
223        margin: Preference::Specific(Gaps::new_all(0.)),
224        dropdown_background: Preference::Reference("background"),
225        background_button: Preference::Reference("surface_tertiary"),
226        hover_background: Preference::Reference("hover"),
227        color: Preference::Reference("text_primary"),
228        border_fill: Preference::Reference("border"),
229        focus_border_fill: Preference::Reference("border_focus"),
230        arrow_fill: Preference::Reference("text_primary"),
231    },
232    dropdown_item: DropdownItemThemePreference {
233        background: Preference::Reference("background"),
234        select_background: Preference::Reference("surface_secondary"),
235        hover_background: Preference::Reference("hover"),
236        border_fill: Preference::Specific(Color::TRANSPARENT),
237        select_border_fill: Preference::Reference("border_focus"),
238        color: Preference::Reference("text_primary"),
239    },
240    popup: PopupThemePreference {
241        background: Preference::Reference("background"),
242        color: Preference::Reference("text_primary"),
243    },
244    table: TableThemePreference {
245        background: Preference::Reference("background"),
246        arrow_fill: Preference::Reference("text_primary"),
247        row_background: Preference::Specific(Color::TRANSPARENT),
248        hover_row_background: Preference::Reference("surface_secondary"),
249        divider_fill: Preference::Reference("surface_primary"),
250        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
251        color: Preference::Reference("text_primary"),
252    },
253    chip: ChipThemePreference {
254        background: Preference::Reference("background"),
255        hover_background: Preference::Reference("tertiary"),
256        selected_background: Preference::Reference("primary"),
257        border_fill: Preference::Reference("border"),
258        hover_border_fill: Preference::Reference("tertiary"),
259        selected_border_fill: Preference::Reference("primary"),
260        focus_border_fill: Preference::Reference("secondary"),
261        padding: Preference::Specific(Gaps::new(8., 14., 8., 14.)),
262        margin: Preference::Specific(0.),
263        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
264        width: Preference::Specific(Size::Inner),
265        height: Preference::Specific(Size::Inner),
266        color: Preference::Reference("text_primary"),
267        hover_color: Preference::Reference("text_inverse"),
268        selected_color: Preference::Reference("text_inverse"),
269        selected_icon_fill: Preference::Reference("secondary"),
270        hover_icon_fill: Preference::Reference("secondary"),
271    },
272    menu_item: MenuItemThemePreference {
273        hover_background: Preference::Reference("surface_secondary"),
274        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
275        color: Preference::Reference("text_primary"),
276    },
277    menu_container: MenuContainerThemePreference {
278        background: Preference::Reference("background"),
279        padding: Preference::Specific(Gaps::new_all(4.)),
280        shadow: Preference::Reference("shadow"),
281        border_fill: Preference::Reference("surface_primary"),
282        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
283    },
284};
285
286pub const LIGHT_THEME: Theme = Theme {
287    name: "light",
288    colors: ColorsSheet {
289        // Brand & Accent
290        primary: Color::from_rgb(103, 80, 164),
291        secondary: Color::from_rgb(202, 193, 227),
292        tertiary: Color::from_rgb(79, 61, 130),
293
294        // Status
295        success: Color::from_rgb(76, 175, 80),
296        warning: Color::from_rgb(255, 193, 7),
297        error: Color::from_rgb(244, 67, 54),
298        info: Color::from_rgb(33, 150, 243),
299
300        // Surfaces
301        background: Color::from_rgb(250, 250, 250),
302        surface_primary: Color::from_rgb(210, 210, 210),
303        surface_secondary: Color::from_rgb(225, 225, 225),
304        surface_tertiary: Color::from_rgb(245, 245, 245),
305        surface_inverse: Color::from_rgb(125, 125, 125),
306        surface_inverse_secondary: Color::from_rgb(110, 110, 110),
307        surface_inverse_tertiary: Color::from_rgb(90, 90, 90),
308
309        // Borders
310        border: Color::from_rgb(210, 210, 210),
311        border_focus: Color::from_rgb(180, 180, 180),
312        border_disabled: Color::from_rgb(210, 210, 210),
313
314        // Text
315        text_primary: Color::from_rgb(10, 10, 10),
316        text_secondary: Color::from_rgb(100, 100, 100),
317        text_placeholder: Color::from_rgb(150, 150, 150),
318        text_inverse: Color::WHITE,
319        text_highlight: Color::from_rgb(38, 89, 170),
320
321        // States
322        hover: Color::from_rgb(235, 235, 235),
323        focus: Color::from_rgb(225, 225, 255),
324        active: Color::from_rgb(200, 200, 200),
325        disabled: Color::from_rgb(210, 210, 210),
326
327        // Utility
328        overlay: Color::from_af32rgb(0.5, 0, 0, 0),
329        shadow: Color::from_af32rgb(0.2, 0, 0, 0),
330    },
331    ..BASE_THEME
332};
333
334pub const DARK_THEME: Theme = Theme {
335    name: "dark",
336    colors: ColorsSheet {
337        // Brand & Accent
338        primary: Color::from_rgb(103, 80, 164),
339        secondary: Color::from_rgb(202, 193, 227),
340        tertiary: Color::from_rgb(79, 61, 130),
341
342        // Status
343        success: Color::from_rgb(129, 199, 132),
344        warning: Color::from_rgb(255, 213, 79),
345        error: Color::from_rgb(229, 115, 115),
346        info: Color::from_rgb(100, 181, 246),
347
348        // Surfaces
349        background: Color::from_rgb(20, 20, 20),
350        surface_primary: Color::from_rgb(60, 60, 60),
351        surface_secondary: Color::from_rgb(45, 45, 45),
352        surface_tertiary: Color::from_rgb(25, 25, 25),
353        surface_inverse: Color::from_rgb(135, 135, 135),
354        surface_inverse_secondary: Color::from_rgb(150, 150, 150),
355        surface_inverse_tertiary: Color::from_rgb(170, 170, 170),
356
357        // Borders
358        border: Color::from_rgb(60, 60, 60),
359        border_focus: Color::from_rgb(110, 110, 110),
360        border_disabled: Color::from_rgb(80, 80, 80),
361
362        // Text
363        text_primary: Color::from_rgb(250, 250, 250),
364        text_secondary: Color::from_rgb(210, 210, 210),
365        text_placeholder: Color::from_rgb(150, 150, 150),
366        text_inverse: Color::BLACK,
367        text_highlight: Color::from_rgb(96, 145, 224),
368
369        // States
370        hover: Color::from_rgb(80, 80, 80),
371        focus: Color::from_rgb(100, 100, 120),
372        active: Color::from_rgb(70, 70, 70),
373        disabled: Color::from_rgb(50, 50, 50),
374
375        // Utility
376        overlay: Color::from_af32rgb(0.2, 255, 255, 255),
377        shadow: Color::from_af32rgb(0.6, 0, 0, 0),
378    },
379    ..BASE_THEME
380};
freya_components/theming/themes.rs

freya_components/theming/
themes.rs
