freya_components/theming/
themes.rs

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

freya_components/theming/
themes.rs
