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

freya_components/theming/
themes.rs
