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        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    },
205    floating_tab: FloatingTabThemePreference {
206        background: Preference::Specific(Color::TRANSPARENT),
207        hover_background: Preference::Reference("surface_secondary"),
208        color: Preference::Reference("text_primary"),
209        padding: Preference::Specific(Gaps::new(6., 12., 6., 12.)),
210        width: Preference::Specific(Size::Inner),
211        height: Preference::Specific(Size::Inner),
212    },
213    slider: SliderThemePreference {
214        background: Preference::Reference("surface_primary"),
215        thumb_background: Preference::Reference("secondary"),
216        thumb_inner_background: Preference::Reference("primary"),
217        border_fill: Preference::Reference("surface_primary"),
218    },
219    dropdown: DropdownThemePreference {
220        width: Preference::Specific(Size::Inner),
221        margin: Preference::Specific(Gaps::new_all(0.)),
222        dropdown_background: Preference::Reference("background"),
223        background_button: Preference::Reference("surface_tertiary"),
224        hover_background: Preference::Reference("background"),
225        color: Preference::Reference("text_primary"),
226        border_fill: Preference::Reference("border"),
227        focus_border_fill: Preference::Reference("border_focus"),
228        arrow_fill: Preference::Reference("text_primary"),
229    },
230    dropdown_item: DropdownItemThemePreference {
231        background: Preference::Reference("background"),
232        select_background: Preference::Reference("surface_secondary"),
233        hover_background: Preference::Reference("surface_secondary"),
234        border_fill: Preference::Specific(Color::TRANSPARENT),
235        select_border_fill: Preference::Reference("border_focus"),
236        color: Preference::Reference("text_primary"),
237    },
238    popup: PopupThemePreference {
239        background: Preference::Reference("background"),
240        color: Preference::Reference("text_primary"),
241    },
242    table: TableThemePreference {
243        background: Preference::Reference("background"),
244        arrow_fill: Preference::Reference("text_primary"),
245        row_background: Preference::Specific(Color::TRANSPARENT),
246        hover_row_background: Preference::Reference("surface_secondary"),
247        divider_fill: Preference::Reference("surface_primary"),
248        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
249        color: Preference::Reference("text_primary"),
250    },
251    chip: ChipThemePreference {
252        background: Preference::Reference("background"),
253        hover_background: Preference::Reference("tertiary"),
254        selected_background: Preference::Reference("primary"),
255        border_fill: Preference::Reference("border"),
256        hover_border_fill: Preference::Reference("tertiary"),
257        selected_border_fill: Preference::Reference("primary"),
258        focus_border_fill: Preference::Reference("secondary"),
259        padding: Preference::Specific(Gaps::new(8., 14., 8., 14.)),
260        margin: Preference::Specific(0.),
261        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
262        width: Preference::Specific(Size::Inner),
263        height: Preference::Specific(Size::Inner),
264        color: Preference::Reference("text_primary"),
265        hover_color: Preference::Reference("text_inverse"),
266        selected_color: Preference::Reference("text_inverse"),
267        selected_icon_fill: Preference::Reference("secondary"),
268        hover_icon_fill: Preference::Reference("secondary"),
269    },
270    menu_item: MenuItemThemePreference {
271        hover_background: Preference::Reference("surface_secondary"),
272        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
273        color: Preference::Reference("text_primary"),
274    },
275    menu_container: MenuContainerThemePreference {
276        background: Preference::Reference("background"),
277        padding: Preference::Specific(Gaps::new_all(4.)),
278        shadow: Preference::Reference("shadow"),
279        border_fill: Preference::Reference("surface_primary"),
280        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
281    },
282};
283
284pub const LIGHT_THEME: Theme = Theme {
285    name: "light",
286    colors: ColorsSheet {
287        // Brand & Accent
288        primary: Color::from_rgb(103, 80, 164),
289        secondary: Color::from_rgb(202, 193, 227),
290        tertiary: Color::from_rgb(79, 61, 130),
291
292        // Status
293        success: Color::from_rgb(76, 175, 80),
294        warning: Color::from_rgb(255, 193, 7),
295        error: Color::from_rgb(244, 67, 54),
296        info: Color::from_rgb(33, 150, 243),
297
298        // Surfaces
299        background: Color::from_rgb(250, 250, 250),
300        surface_primary: Color::from_rgb(210, 210, 210),
301        surface_secondary: Color::from_rgb(225, 225, 225),
302        surface_tertiary: Color::from_rgb(245, 245, 245),
303        surface_inverse: Color::from_rgb(125, 125, 125),
304        surface_inverse_secondary: Color::from_rgb(110, 110, 110),
305        surface_inverse_tertiary: Color::from_rgb(90, 90, 90),
306
307        // Borders
308        border: Color::from_rgb(210, 210, 210),
309        border_focus: Color::from_rgb(180, 180, 180),
310        border_disabled: Color::from_rgb(210, 210, 210),
311
312        // Text
313        text_primary: Color::from_rgb(10, 10, 10),
314        text_secondary: Color::from_rgb(100, 100, 100),
315        text_placeholder: Color::from_rgb(150, 150, 150),
316        text_inverse: Color::WHITE,
317        text_highlight: Color::from_rgb(38, 89, 170),
318
319        // States
320        hover: Color::from_rgb(235, 235, 235),
321        focus: Color::from_rgb(225, 225, 255),
322        active: Color::from_rgb(200, 200, 200),
323        disabled: Color::from_rgb(210, 210, 210),
324
325        // Utility
326        overlay: Color::from_af32rgb(0.5, 0, 0, 0),
327        shadow: Color::from_af32rgb(0.2, 0, 0, 0),
328    },
329    ..BASE_THEME
330};
331
332pub const DARK_THEME: Theme = Theme {
333    name: "dark",
334    colors: ColorsSheet {
335        // Brand & Accent
336        primary: Color::from_rgb(103, 80, 164),
337        secondary: Color::from_rgb(202, 193, 227),
338        tertiary: Color::from_rgb(79, 61, 130),
339
340        // Status
341        success: Color::from_rgb(129, 199, 132),
342        warning: Color::from_rgb(255, 213, 79),
343        error: Color::from_rgb(229, 115, 115),
344        info: Color::from_rgb(100, 181, 246),
345
346        // Surfaces
347        background: Color::from_rgb(20, 20, 20),
348        surface_primary: Color::from_rgb(60, 60, 60),
349        surface_secondary: Color::from_rgb(45, 45, 45),
350        surface_tertiary: Color::from_rgb(25, 25, 25),
351        surface_inverse: Color::from_rgb(135, 135, 135),
352        surface_inverse_secondary: Color::from_rgb(150, 150, 150),
353        surface_inverse_tertiary: Color::from_rgb(170, 170, 170),
354
355        // Borders
356        border: Color::from_rgb(60, 60, 60),
357        border_focus: Color::from_rgb(110, 110, 110),
358        border_disabled: Color::from_rgb(80, 80, 80),
359
360        // Text
361        text_primary: Color::from_rgb(250, 250, 250),
362        text_secondary: Color::from_rgb(210, 210, 210),
363        text_placeholder: Color::from_rgb(150, 150, 150),
364        text_inverse: Color::BLACK,
365        text_highlight: Color::from_rgb(96, 145, 224),
366
367        // States
368        hover: Color::from_rgb(80, 80, 80),
369        focus: Color::from_rgb(100, 100, 120),
370        active: Color::from_rgb(70, 70, 70),
371        disabled: Color::from_rgb(50, 50, 50),
372
373        // Utility
374        overlay: Color::from_af32rgb(0.2, 255, 255, 255),
375        shadow: Color::from_af32rgb(0.6, 0, 0, 0),
376    },
377    ..BASE_THEME
378};
freya_components/theming/themes.rs

freya_components/theming/
themes.rs
