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

freya_components/theming/
themes.rs
