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    },
276    slider: SliderThemePreference {
277        background: Preference::Reference("surface_primary"),
278        thumb_background: Preference::Reference("secondary"),
279        thumb_inner_background: Preference::Reference("primary"),
280        border_fill: Preference::Reference("surface_primary"),
281    },
282    color_picker: ColorPickerThemePreference {
283        background: Preference::Reference("surface_tertiary"),
284        border_fill: Preference::Reference("border"),
285        color: Preference::Reference("text_primary"),
286    },
287    select: SelectThemePreference {
288        width: Preference::Specific(Size::Inner),
289        margin: Preference::Specific(Gaps::new_all(0.)),
290        select_background: Preference::Reference("background"),
291        background_button: Preference::Reference("surface_tertiary"),
292        hover_background: Preference::Reference("hover"),
293        color: Preference::Reference("text_primary"),
294        border_fill: Preference::Reference("border"),
295        focus_border_fill: Preference::Reference("border_focus"),
296        arrow_fill: Preference::Reference("text_primary"),
297    },
298    popup: PopupThemePreference {
299        background: Preference::Reference("background"),
300        color: Preference::Reference("text_primary"),
301    },
302    table: TableThemePreference {
303        background: Preference::Reference("background"),
304        arrow_fill: Preference::Reference("text_primary"),
305        row_background: Preference::Specific(Color::TRANSPARENT),
306        hover_row_background: Preference::Reference("surface_secondary"),
307        divider_fill: Preference::Reference("surface_primary"),
308        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
309        color: Preference::Reference("text_primary"),
310    },
311
312    #[cfg(feature = "markdown")]
313    markdown_viewer: MarkdownViewerThemePreference {
314        color: Preference::Reference("text_primary"),
315        background_code: Preference::Reference("surface_tertiary"),
316        color_code: Preference::Reference("text_primary"),
317        background_blockquote: Preference::Reference("surface_tertiary"),
318        border_blockquote: Preference::Reference("surface_primary"),
319        background_divider: Preference::Reference("border"),
320        heading_h1: Preference::Specific(32.0),
321        heading_h2: Preference::Specific(28.0),
322        heading_h3: Preference::Specific(24.0),
323        heading_h4: Preference::Specific(20.0),
324        heading_h5: Preference::Specific(18.0),
325        heading_h6: Preference::Specific(16.0),
326        paragraph_size: Preference::Specific(16.0),
327        code_font_size: Preference::Specific(14.0),
328        table_font_size: Preference::Specific(14.0),
329    },
330    chip: ChipThemePreference {
331        background: Preference::Reference("background"),
332        hover_background: Preference::Reference("tertiary"),
333        selected_background: Preference::Reference("primary"),
334        border_fill: Preference::Reference("border"),
335        hover_border_fill: Preference::Reference("tertiary"),
336        selected_border_fill: Preference::Reference("primary"),
337        focus_border_fill: Preference::Reference("secondary"),
338        padding: Preference::Specific(Gaps::new(8., 14., 8., 14.)),
339        margin: Preference::Specific(0.),
340        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
341        width: Preference::Specific(Size::Inner),
342        height: Preference::Specific(Size::Inner),
343        color: Preference::Reference("text_primary"),
344        hover_color: Preference::Reference("text_inverse"),
345        selected_color: Preference::Reference("text_inverse"),
346        selected_icon_fill: Preference::Reference("secondary"),
347        hover_icon_fill: Preference::Reference("secondary"),
348    },
349    menu_item: MenuItemThemePreference {
350        background: Preference::Reference("background"),
351        hover_background: Preference::Reference("surface_secondary"),
352        select_background: Preference::Reference("surface_secondary"),
353        border_fill: Preference::Specific(Color::TRANSPARENT),
354        select_border_fill: Preference::Reference("border_focus"),
355        corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
356        color: Preference::Reference("text_primary"),
357    },
358    menu_container: MenuContainerThemePreference {
359        background: Preference::Reference("background"),
360        padding: Preference::Specific(Gaps::new_all(4.)),
361        shadow: Preference::Reference("shadow"),
362        border_fill: Preference::Reference("surface_primary"),
363        corner_radius: Preference::Specific(CornerRadius::new_all(8.)),
364    },
365    button_segment: ButtonSegmentThemePreference {
366        background: Preference::Reference("surface_tertiary"),
367        hover_background: Preference::Reference("hover"),
368        disabled_background: Preference::Reference("disabled"),
369        selected_background: Preference::Reference("hover"),
370        focus_background: Preference::Reference("surface_secondary"),
371        padding: Preference::Specific(Gaps::new(8., 16., 8., 16.)),
372        selected_padding: Preference::Specific(Gaps::new(8., 12., 8., 12.)),
373        width: Preference::Specific(Size::Inner),
374        height: Preference::Specific(Size::Inner),
375        color: Preference::Reference("text_primary"),
376        selected_icon_fill: Preference::Reference("primary"),
377    },
378    segmented_button: SegmentedButtonThemePreference {
379        background: Preference::Reference("surface_tertiary"),
380        border_fill: Preference::Reference("border"),
381        corner_radius: Preference::Specific(CornerRadius::new_all(99.)),
382    },
383    #[cfg(feature = "calendar")]
384    calendar: CalendarThemePreference {
385        background: Preference::Reference("surface_tertiary"),
386        day_background: Preference::Specific(Color::TRANSPARENT),
387        day_hover_background: Preference::Reference("hover"),
388        day_selected_background: Preference::Reference("surface_primary"),
389        color: Preference::Reference("text_primary"),
390        day_other_month_color: Preference::Reference("text_placeholder"),
391        header_color: Preference::Reference("text_primary"),
392        corner_radius: Preference::Specific(CornerRadius::new_all(8.)),
393        padding: Preference::Specific(Gaps::new_all(12.)),
394        day_corner_radius: Preference::Specific(CornerRadius::new_all(6.)),
395        nav_button_hover_background: Preference::Reference("hover"),
396    },
397    #[cfg(feature = "titlebar")]
398    titlebar_button: TitlebarButtonThemePreference {
399        background: Preference::Specific(Color::TRANSPARENT),
400        hover_background: Preference::Reference("hover"),
401        corner_radius: Preference::Specific(CornerRadius::new_all(0.0)),
402        width: Preference::Specific(Size::Pixels(Length::new(46.0))),
403        height: Preference::Specific(Size::Fill),
404    },
405};
406
407pub const LIGHT_THEME: Theme = Theme {
408    name: "light",
409    colors: ColorsSheet {
410        // Brand & Accent
411        primary: Color::from_rgb(103, 80, 164),
412        secondary: Color::from_rgb(202, 193, 227),
413        tertiary: Color::from_rgb(79, 61, 130),
414
415        // Status
416        success: Color::from_rgb(76, 175, 80),
417        warning: Color::from_rgb(255, 193, 7),
418        error: Color::from_rgb(244, 67, 54),
419        info: Color::from_rgb(33, 150, 243),
420
421        // Surfaces
422        background: Color::from_rgb(250, 250, 250),
423        surface_primary: Color::from_rgb(210, 210, 210),
424        surface_secondary: Color::from_rgb(225, 225, 225),
425        surface_tertiary: Color::from_rgb(245, 245, 245),
426        surface_inverse: Color::from_rgb(125, 125, 125),
427        surface_inverse_secondary: Color::from_rgb(110, 110, 110),
428        surface_inverse_tertiary: Color::from_rgb(90, 90, 90),
429
430        // Borders
431        border: Color::from_rgb(210, 210, 210),
432        border_focus: Color::from_rgb(180, 180, 180),
433        border_disabled: Color::from_rgb(210, 210, 210),
434
435        // Text
436        text_primary: Color::from_rgb(10, 10, 10),
437        text_secondary: Color::from_rgb(100, 100, 100),
438        text_placeholder: Color::from_rgb(150, 150, 150),
439        text_inverse: Color::WHITE,
440        text_highlight: Color::from_rgb(38, 89, 170),
441
442        // States
443        hover: Color::from_rgb(235, 235, 235),
444        focus: Color::from_rgb(225, 225, 255),
445        active: Color::from_rgb(200, 200, 200),
446        disabled: Color::from_rgb(210, 210, 210),
447
448        // Utility
449        overlay: Color::from_af32rgb(0.5, 0, 0, 0),
450        shadow: Color::from_af32rgb(0.2, 0, 0, 0),
451    },
452    ..BASE_THEME
453};
454
455pub const DARK_THEME: Theme = Theme {
456    name: "dark",
457    colors: ColorsSheet {
458        // Brand & Accent
459        primary: Color::from_rgb(103, 80, 164),
460        secondary: Color::from_rgb(202, 193, 227),
461        tertiary: Color::from_rgb(79, 61, 130),
462
463        // Status
464        success: Color::from_rgb(129, 199, 132),
465        warning: Color::from_rgb(255, 213, 79),
466        error: Color::from_rgb(229, 115, 115),
467        info: Color::from_rgb(100, 181, 246),
468
469        // Surfaces
470        background: Color::from_rgb(20, 20, 20),
471        surface_primary: Color::from_rgb(60, 60, 60),
472        surface_secondary: Color::from_rgb(45, 45, 45),
473        surface_tertiary: Color::from_rgb(25, 25, 25),
474        surface_inverse: Color::from_rgb(135, 135, 135),
475        surface_inverse_secondary: Color::from_rgb(150, 150, 150),
476        surface_inverse_tertiary: Color::from_rgb(170, 170, 170),
477
478        // Borders
479        border: Color::from_rgb(60, 60, 60),
480        border_focus: Color::from_rgb(110, 110, 110),
481        border_disabled: Color::from_rgb(80, 80, 80),
482
483        // Text
484        text_primary: Color::from_rgb(250, 250, 250),
485        text_secondary: Color::from_rgb(210, 210, 210),
486        text_placeholder: Color::from_rgb(150, 150, 150),
487        text_inverse: Color::BLACK,
488        text_highlight: Color::from_rgb(96, 145, 224),
489
490        // States
491        hover: Color::from_rgb(80, 80, 80),
492        focus: Color::from_rgb(100, 100, 120),
493        active: Color::from_rgb(70, 70, 70),
494        disabled: Color::from_rgb(50, 50, 50),
495
496        // Utility
497        overlay: Color::from_af32rgb(0.2, 255, 255, 255),
498        shadow: Color::from_af32rgb(0.6, 0, 0, 0),
499    },
500    ..BASE_THEME
501};
freya_components/theming/themes.rs

freya_components/theming/
themes.rs
