freya_components/theming/
themes.rs

1use freya_core::prelude::*;
2#[cfg(feature = "titlebar")]
3use torin::prelude::Length;
4use torin::{
5    gaps::Gaps,
6    size::Size,
7};
8
9#[cfg(feature = "calendar")]
10use crate::theming::component_themes::CalendarThemePreference;
11#[cfg(feature = "router")]
12use crate::theming::component_themes::LinkThemePreference;
13#[cfg(feature = "markdown")]
14use crate::theming::component_themes::MarkdownViewerThemePreference;
15#[cfg(feature = "titlebar")]
16use crate::theming::component_themes::TitlebarButtonThemePreference;
17use crate::theming::{
18    component_themes::{
19        AccordionThemePreference,
20        ButtonColorsThemePreference,
21        ButtonLayoutThemePreference,
22        ButtonSegmentThemePreference,
23        CardColorsThemePreference,
24        CardLayoutThemePreference,
25        CheckboxThemePreference,
26        ChipThemePreference,
27        CircularLoaderThemePreference,
28        ColorPickerThemePreference,
29        ColorsSheet,
30        FloatingTabThemePreference,
31        InputColorsThemePreference,
32        InputLayoutThemePreference,
33        MenuContainerThemePreference,
34        MenuItemThemePreference,
35        PopupThemePreference,
36        ProgressBarThemePreference,
37        RadioItemThemePreference,
38        ResizableHandleThemePreference,
39        ScrollBarThemePreference,
40        SegmentedButtonThemePreference,
41        SelectThemePreference,
42        SideBarItemThemePreference,
43        SideBarThemePreference,
44        SliderThemePreference,
45        SwitchThemePreference,
46        TableThemePreference,
47        Theme,
48        TooltipThemePreference,
49    },
50    macros::Preference,
51};
52
53pub const BASE_THEME: Theme = Theme {
54    name: "base",
55    colors: ColorsSheet {
56        // Brand & Accent
57        primary: Color::TRANSPARENT,
58        secondary: Color::TRANSPARENT,
59        tertiary: Color::TRANSPARENT,
60
61        // Status
62        success: Color::TRANSPARENT,
63        warning: Color::TRANSPARENT,
64        error: Color::TRANSPARENT,
65        info: Color::TRANSPARENT,
66
67        // Surfaces
68        background: Color::TRANSPARENT,
69        surface_primary: Color::TRANSPARENT,
70        surface_secondary: Color::TRANSPARENT,
71        surface_tertiary: Color::TRANSPARENT,
72        surface_inverse: Color::TRANSPARENT,
73        surface_inverse_secondary: Color::TRANSPARENT,
74        surface_inverse_tertiary: Color::TRANSPARENT,
75
76        // Borders
77        border: Color::TRANSPARENT,
78        border_focus: Color::TRANSPARENT,
79        border_disabled: Color::TRANSPARENT,
80
81        // Text
82        text_primary: Color::TRANSPARENT,
83        text_secondary: Color::TRANSPARENT,
84        text_placeholder: Color::TRANSPARENT,
85        text_inverse: Color::TRANSPARENT,
86        text_highlight: Color::TRANSPARENT,
87
88        // States
89        hover: Color::TRANSPARENT,
90        focus: Color::TRANSPARENT,
91        active: Color::TRANSPARENT,
92        disabled: Color::TRANSPARENT,
93
94        // Utility
95        overlay: Color::TRANSPARENT,
96        shadow: Color::TRANSPARENT,
97    },
98    button_layout: ButtonLayoutThemePreference {
99        padding: Preference::Specific(Gaps::new(6., 12., 6., 12.)),
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    compact_button_layout: ButtonLayoutThemePreference {
106        padding: Preference::Specific(Gaps::new(3., 6., 3., 6.)),
107        margin: Preference::Specific(Gaps::new_all(0.)),
108        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
109        width: Preference::Specific(Size::Inner),
110        height: Preference::Specific(Size::Inner),
111    },
112    expanded_button_layout: ButtonLayoutThemePreference {
113        padding: Preference::Specific(Gaps::new(10., 16., 10., 16.)),
114        margin: Preference::Specific(Gaps::new_all(0.)),
115        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
116        width: Preference::Specific(Size::Inner),
117        height: Preference::Specific(Size::Inner),
118    },
119    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("border_focus"),
124        color: Preference::Reference("text_primary"),
125    },
126    filled_button: ButtonColorsThemePreference {
127        background: Preference::Reference("primary"),
128        hover_background: Preference::Reference("tertiary"),
129        border_fill: Preference::Specific(Color::TRANSPARENT),
130        focus_border_fill: Preference::Reference("secondary"),
131        color: Preference::Reference("text_inverse"),
132    },
133    outline_button: ButtonColorsThemePreference {
134        background: Preference::Reference("surface_tertiary"),
135        hover_background: Preference::Reference("hover"),
136        border_fill: Preference::Reference("border"),
137        focus_border_fill: Preference::Reference("secondary"),
138        color: Preference::Reference("primary"),
139    },
140    flat_button: ButtonColorsThemePreference {
141        background: Preference::Specific(Color::TRANSPARENT),
142        hover_background: Preference::Reference("surface_tertiary"),
143        border_fill: Preference::Specific(Color::TRANSPARENT),
144        focus_border_fill: Preference::Reference("border"),
145        color: Preference::Reference("text_primary"),
146    },
147    card_layout: CardLayoutThemePreference {
148        padding: Preference::Specific(Gaps::new(16., 16., 16., 16.)),
149        corner_radius: Preference::Specific(CornerRadius::new_all(8.)),
150    },
151    compact_card_layout: CardLayoutThemePreference {
152        padding: Preference::Specific(Gaps::new(8., 12., 8., 12.)),
153        corner_radius: Preference::Specific(CornerRadius::new_all(8.)),
154    },
155    filled_card: CardColorsThemePreference {
156        background: Preference::Reference("primary"),
157        hover_background: Preference::Reference("tertiary"),
158        border_fill: Preference::Specific(Color::TRANSPARENT),
159        color: Preference::Reference("text_inverse"),
160        shadow: Preference::Reference("shadow"),
161    },
162    outline_card: CardColorsThemePreference {
163        background: Preference::Reference("surface_tertiary"),
164        hover_background: Preference::Reference("hover"),
165        border_fill: Preference::Reference("border"),
166        color: Preference::Reference("text_primary"),
167        shadow: Preference::Reference("shadow"),
168    },
169    accordion: AccordionThemePreference {
170        color: Preference::Reference("text_primary"),
171        background: Preference::Reference("surface_tertiary"),
172        border_fill: Preference::Reference("border"),
173    },
174    switch: SwitchThemePreference {
175        margin: Preference::Specific(Gaps::new_all(0.)),
176        background: Preference::Reference("surface_secondary"),
177        thumb_background: Preference::Reference("surface_inverse"),
178        toggled_background: Preference::Reference("secondary"),
179        toggled_thumb_background: Preference::Reference("primary"),
180        focus_border_fill: Preference::Reference("border_focus"),
181    },
182    scrollbar: ScrollBarThemePreference {
183        background: Preference::Reference("surface_primary"),
184        thumb_background: Preference::Reference("surface_inverse"),
185        hover_thumb_background: Preference::Reference("surface_inverse_secondary"),
186        active_thumb_background: Preference::Reference("surface_inverse_tertiary"),
187        size: Preference::Specific(15.),
188    },
189    progressbar: ProgressBarThemePreference {
190        color: Preference::Reference("text_inverse"),
191        background: Preference::Reference("surface_primary"),
192        progress_background: Preference::Reference("primary"),
193        height: Preference::Specific(20.),
194    },
195    sidebar: SideBarThemePreference {
196        color: Preference::Reference("text_primary"),
197        background: Preference::Reference("surface_tertiary"),
198        padding: Preference::Specific(Gaps::new_all(8.)),
199        spacing: Preference::Specific(4.),
200    },
201    sidebar_item: SideBarItemThemePreference {
202        color: Preference::Reference("text_primary"),
203        background: Preference::Reference("surface_tertiary"),
204        active_background: Preference::Reference("surface_secondary"),
205        hover_background: Preference::Reference("hover"),
206        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
207        margin: Preference::Specific(Gaps::new_all(0.)),
208        padding: Preference::Specific(Gaps::new(8., 12., 8., 12.)),
209    },
210    #[cfg(feature = "router")]
211    link: LinkThemePreference {
212        color: Preference::Reference("text_highlight"),
213    },
214    tooltip: TooltipThemePreference {
215        background: Preference::Reference("surface_tertiary"),
216        color: Preference::Reference("text_primary"),
217        border_fill: Preference::Reference("surface_primary"),
218    },
219    circular_loader: CircularLoaderThemePreference {
220        primary_color: Preference::Reference("surface_primary"),
221        inversed_color: Preference::Reference("surface_inverse"),
222    },
223    input_layout: InputLayoutThemePreference {
224        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
225        inner_margin: Preference::Specific(Gaps::new(8., 8., 8., 8.)),
226    },
227    compact_input_layout: InputLayoutThemePreference {
228        corner_radius: Preference::Specific(CornerRadius::new_all(4.)),
229        inner_margin: Preference::Specific(Gaps::new(4., 6., 4., 6.)),
230    },
231    expanded_input_layout: InputLayoutThemePreference {
232        corner_radius: Preference::Specific(CornerRadius::new_all(8.)),
233        inner_margin: Preference::Specific(Gaps::new(12., 12., 12., 12.)),
234    },
235    input: InputColorsThemePreference {
236        background: Preference::Reference("surface_tertiary"),
237        hover_background: Preference::Reference("background"),
238        color: Preference::Reference("text_primary"),
239        placeholder_color: Preference::Reference("text_secondary"),
240        border_fill: Preference::Reference("border"),
241        focus_border_fill: Preference::Reference("border_focus"),
242    },
243    filled_input: InputColorsThemePreference {
244        background: Preference::Reference("primary"),
245        hover_background: Preference::Reference("tertiary"),
246        color: Preference::Reference("text_inverse"),
247        placeholder_color: Preference::Reference("text_inverse"),
248        border_fill: Preference::Specific(Color::TRANSPARENT),
249        focus_border_fill: Preference::Reference("secondary"),
250    },
251    flat_input: InputColorsThemePreference {
252        background: Preference::Specific(Color::TRANSPARENT),
253        hover_background: Preference::Reference("surface_tertiary"),
254        color: Preference::Reference("text_primary"),
255        placeholder_color: Preference::Reference("text_secondary"),
256        border_fill: Preference::Specific(Color::TRANSPARENT),
257        focus_border_fill: Preference::Reference("border"),
258    },
259    radio: RadioItemThemePreference {
260        unselected_fill: Preference::Reference("surface_inverse_tertiary"),
261        selected_fill: Preference::Reference("primary"),
262        border_fill: Preference::Reference("surface_primary"),
263    },
264    checkbox: CheckboxThemePreference {
265        unselected_fill: Preference::Reference("surface_inverse_tertiary"),
266        selected_fill: Preference::Reference("primary"),
267        selected_icon_fill: Preference::Reference("secondary"),
268        border_fill: Preference::Reference("surface_primary"),
269    },
270    resizable_handle: ResizableHandleThemePreference {
271        background: Preference::Reference("surface_secondary"),
272        hover_background: Preference::Reference("surface_primary"),
273        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
274    },
275    floating_tab: FloatingTabThemePreference {
276        background: Preference::Specific(Color::TRANSPARENT),
277        hover_background: Preference::Reference("surface_secondary"),
278        color: Preference::Reference("text_primary"),
279        padding: Preference::Specific(Gaps::new(6., 12., 6., 12.)),
280        width: Preference::Specific(Size::Inner),
281        height: Preference::Specific(Size::Inner),
282    },
283    slider: SliderThemePreference {
284        background: Preference::Reference("surface_primary"),
285        thumb_background: Preference::Reference("secondary"),
286        thumb_inner_background: Preference::Reference("primary"),
287        border_fill: Preference::Reference("surface_primary"),
288    },
289    color_picker: ColorPickerThemePreference {
290        background: Preference::Reference("surface_tertiary"),
291        border_fill: Preference::Reference("border"),
292        color: Preference::Reference("text_primary"),
293    },
294    select: SelectThemePreference {
295        width: Preference::Specific(Size::Inner),
296        margin: Preference::Specific(Gaps::new_all(0.)),
297        select_background: Preference::Reference("background"),
298        background_button: Preference::Reference("surface_tertiary"),
299        hover_background: Preference::Reference("hover"),
300        color: Preference::Reference("text_primary"),
301        border_fill: Preference::Reference("border"),
302        focus_border_fill: Preference::Reference("border_focus"),
303        arrow_fill: Preference::Reference("text_primary"),
304    },
305    popup: PopupThemePreference {
306        background: Preference::Reference("background"),
307        color: Preference::Reference("text_primary"),
308    },
309    table: TableThemePreference {
310        background: Preference::Reference("background"),
311        arrow_fill: Preference::Reference("text_primary"),
312        row_background: Preference::Specific(Color::TRANSPARENT),
313        hover_row_background: Preference::Reference("surface_secondary"),
314        divider_fill: Preference::Reference("surface_primary"),
315        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
316        color: Preference::Reference("text_primary"),
317    },
318
319    #[cfg(feature = "markdown")]
320    markdown_viewer: MarkdownViewerThemePreference {
321        color: Preference::Reference("text_primary"),
322        background_code: Preference::Reference("surface_tertiary"),
323        color_code: Preference::Reference("text_primary"),
324        background_blockquote: Preference::Reference("surface_tertiary"),
325        border_blockquote: Preference::Reference("surface_primary"),
326        background_divider: Preference::Reference("border"),
327        heading_h1: Preference::Specific(32.0),
328        heading_h2: Preference::Specific(28.0),
329        heading_h3: Preference::Specific(24.0),
330        heading_h4: Preference::Specific(20.0),
331        heading_h5: Preference::Specific(18.0),
332        heading_h6: Preference::Specific(16.0),
333        paragraph_size: Preference::Specific(16.0),
334        code_font_size: Preference::Specific(14.0),
335        table_font_size: Preference::Specific(14.0),
336    },
337    chip: ChipThemePreference {
338        background: Preference::Reference("background"),
339        hover_background: Preference::Reference("tertiary"),
340        selected_background: Preference::Reference("primary"),
341        border_fill: Preference::Reference("border"),
342        hover_border_fill: Preference::Reference("tertiary"),
343        selected_border_fill: Preference::Reference("primary"),
344        focus_border_fill: Preference::Reference("secondary"),
345        padding: Preference::Specific(Gaps::new(8., 14., 8., 14.)),
346        margin: Preference::Specific(0.),
347        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
348        width: Preference::Specific(Size::Inner),
349        height: Preference::Specific(Size::Inner),
350        color: Preference::Reference("text_primary"),
351        hover_color: Preference::Reference("text_inverse"),
352        selected_color: Preference::Reference("text_inverse"),
353        selected_icon_fill: Preference::Reference("secondary"),
354        hover_icon_fill: Preference::Reference("secondary"),
355    },
356    menu_item: MenuItemThemePreference {
357        background: Preference::Reference("background"),
358        hover_background: Preference::Reference("surface_secondary"),
359        select_background: Preference::Reference("surface_secondary"),
360        border_fill: Preference::Specific(Color::TRANSPARENT),
361        select_border_fill: Preference::Reference("border_focus"),
362        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
363        color: Preference::Reference("text_primary"),
364    },
365    menu_container: MenuContainerThemePreference {
366        background: Preference::Reference("background"),
367        padding: Preference::Specific(Gaps::new_all(4.)),
368        shadow: Preference::Reference("shadow"),
369        border_fill: Preference::Reference("surface_primary"),
370        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
371    },
372    button_segment: ButtonSegmentThemePreference {
373        background: Preference::Reference("surface_tertiary"),
374        hover_background: Preference::Reference("hover"),
375        disabled_background: Preference::Reference("disabled"),
376        selected_background: Preference::Reference("hover"),
377        focus_background: Preference::Reference("surface_secondary"),
378        padding: Preference::Specific(Gaps::new(8., 16., 8., 16.)),
379        selected_padding: Preference::Specific(Gaps::new(8., 12., 8., 12.)),
380        width: Preference::Specific(Size::Inner),
381        height: Preference::Specific(Size::Inner),
382        color: Preference::Reference("text_primary"),
383        selected_icon_fill: Preference::Reference("primary"),
384    },
385    segmented_button: SegmentedButtonThemePreference {
386        background: Preference::Reference("surface_tertiary"),
387        border_fill: Preference::Reference("border"),
388        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
389    },
390    #[cfg(feature = "calendar")]
391    calendar: CalendarThemePreference {
392        background: Preference::Reference("surface_tertiary"),
393        day_background: Preference::Specific(Color::TRANSPARENT),
394        day_hover_background: Preference::Reference("hover"),
395        day_selected_background: Preference::Reference("surface_primary"),
396        color: Preference::Reference("text_primary"),
397        day_other_month_color: Preference::Reference("text_placeholder"),
398        header_color: Preference::Reference("text_primary"),
399        corner_radius: Preference::Specific(CornerRadius::new_all(8.)),
400        padding: Preference::Specific(Gaps::new_all(12.)),
401        day_corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
402        nav_button_hover_background: Preference::Reference("hover"),
403    },
404    #[cfg(feature = "titlebar")]
405    titlebar_button: TitlebarButtonThemePreference {
406        background: Preference::Specific(Color::TRANSPARENT),
407        hover_background: Preference::Reference("hover"),
408        corner_radius: Preference::Specific(CornerRadius::new_all(0.0)),
409        width: Preference::Specific(Size::Pixels(Length::new(46.0))),
410        height: Preference::Specific(Size::Fill),
411    },
412};
413
414pub const LIGHT_THEME: Theme = Theme {
415    name: "light",
416    colors: ColorsSheet {
417        // Brand & Accent
418        primary: Color::from_rgb(103, 80, 164),
419        secondary: Color::from_rgb(202, 193, 227),
420        tertiary: Color::from_rgb(79, 61, 130),
421
422        // Status
423        success: Color::from_rgb(76, 175, 80),
424        warning: Color::from_rgb(255, 193, 7),
425        error: Color::from_rgb(244, 67, 54),
426        info: Color::from_rgb(33, 150, 243),
427
428        // Surfaces
429        background: Color::from_rgb(250, 250, 250),
430        surface_primary: Color::from_rgb(210, 210, 210),
431        surface_secondary: Color::from_rgb(225, 225, 225),
432        surface_tertiary: Color::from_rgb(245, 245, 245),
433        surface_inverse: Color::from_rgb(125, 125, 125),
434        surface_inverse_secondary: Color::from_rgb(110, 110, 110),
435        surface_inverse_tertiary: Color::from_rgb(90, 90, 90),
436
437        // Borders
438        border: Color::from_rgb(210, 210, 210),
439        border_focus: Color::from_rgb(180, 180, 180),
440        border_disabled: Color::from_rgb(210, 210, 210),
441
442        // Text
443        text_primary: Color::from_rgb(10, 10, 10),
444        text_secondary: Color::from_rgb(100, 100, 100),
445        text_placeholder: Color::from_rgb(150, 150, 150),
446        text_inverse: Color::WHITE,
447        text_highlight: Color::from_rgb(38, 89, 170),
448
449        // States
450        hover: Color::from_rgb(235, 235, 235),
451        focus: Color::from_rgb(225, 225, 255),
452        active: Color::from_rgb(200, 200, 200),
453        disabled: Color::from_rgb(210, 210, 210),
454
455        // Utility
456        overlay: Color::from_af32rgb(0.5, 0, 0, 0),
457        shadow: Color::from_af32rgb(0.2, 0, 0, 0),
458    },
459    ..BASE_THEME
460};
461
462pub const DARK_THEME: Theme = Theme {
463    name: "dark",
464    colors: ColorsSheet {
465        // Brand & Accent
466        primary: Color::from_rgb(103, 80, 164),
467        secondary: Color::from_rgb(202, 193, 227),
468        tertiary: Color::from_rgb(79, 61, 130),
469
470        // Status
471        success: Color::from_rgb(129, 199, 132),
472        warning: Color::from_rgb(255, 213, 79),
473        error: Color::from_rgb(229, 115, 115),
474        info: Color::from_rgb(100, 181, 246),
475
476        // Surfaces
477        background: Color::from_rgb(20, 20, 20),
478        surface_primary: Color::from_rgb(60, 60, 60),
479        surface_secondary: Color::from_rgb(45, 45, 45),
480        surface_tertiary: Color::from_rgb(25, 25, 25),
481        surface_inverse: Color::from_rgb(135, 135, 135),
482        surface_inverse_secondary: Color::from_rgb(150, 150, 150),
483        surface_inverse_tertiary: Color::from_rgb(170, 170, 170),
484
485        // Borders
486        border: Color::from_rgb(60, 60, 60),
487        border_focus: Color::from_rgb(110, 110, 110),
488        border_disabled: Color::from_rgb(80, 80, 80),
489
490        // Text
491        text_primary: Color::from_rgb(250, 250, 250),
492        text_secondary: Color::from_rgb(210, 210, 210),
493        text_placeholder: Color::from_rgb(150, 150, 150),
494        text_inverse: Color::BLACK,
495        text_highlight: Color::from_rgb(96, 145, 224),
496
497        // States
498        hover: Color::from_rgb(80, 80, 80),
499        focus: Color::from_rgb(100, 100, 120),
500        active: Color::from_rgb(70, 70, 70),
501        disabled: Color::from_rgb(50, 50, 50),
502
503        // Utility
504        overlay: Color::from_af32rgb(0.2, 255, 255, 255),
505        shadow: Color::from_af32rgb(0.6, 0, 0, 0),
506    },
507    ..BASE_THEME
508};
freya_components/theming/themes.rs

freya_components/theming/
themes.rs
