Skip to main content

zest_theme/theme/
light.rs

1//! Light theme — warm-inverse of the website palette with contrast-adjusted accent.
2
3use crate::{Component, Container, CornerRadii, Palette, Spacing, Theme};
4use embedded_graphics::{mono_font::MonoFont, pixelcolor::Rgb888};
5
6const BG: Rgb888 = Rgb888::new(0xf7, 0xf6, 0xf2);
7const SURFACE: Rgb888 = Rgb888::new(0xef, 0xee, 0xe8);
8const ELEVATED: Rgb888 = Rgb888::new(0xe6, 0xe4, 0xdc);
9const TEXT: Rgb888 = Rgb888::new(0x1a, 0x1a, 0x1a);
10const TEXT_MUTED: Rgb888 = Rgb888::new(0x5a, 0x58, 0x4f);
11const TEXT_FAINT: Rgb888 = Rgb888::new(0x98, 0x94, 0x88);
12const BORDER: Rgb888 = Rgb888::new(0xc8, 0xc5, 0xb8);
13const BORDER_LIGHT: Rgb888 = Rgb888::new(0xdc, 0xd9, 0xcf);
14const ACCENT: Rgb888 = Rgb888::new(0xc2, 0x5e, 0x1e);
15const ACCENT_PRESSED: Rgb888 = Rgb888::new(0x8a, 0x3f, 0x0e);
16const SUCCESS: Rgb888 = Rgb888::new(0x3e, 0x8e, 0x41);
17const SUCCESS_HOVER: Rgb888 = Rgb888::new(0x2e, 0x6b, 0x30);
18const DESTRUCTIVE: Rgb888 = Rgb888::new(0xb8, 0x30, 0x2a);
19const DESTRUCTIVE_HOVER: Rgb888 = Rgb888::new(0x9b, 0x26, 0x1f);
20const WARNING: Rgb888 = Rgb888::new(0xc2, 0x68, 0x0e);
21const WARNING_HOVER: Rgb888 = Rgb888::new(0x9e, 0x54, 0x09);
22const BLUE: Rgb888 = Rgb888::new(0x00, 0x66, 0xb3);
23const GREEN: Rgb888 = Rgb888::new(0x3e, 0x8e, 0x41);
24const RED: Rgb888 = Rgb888::new(0xb8, 0x30, 0x2a);
25const YELLOW: Rgb888 = Rgb888::new(0xc2, 0x68, 0x0e);
26
27const DEFAULT_FONT: &MonoFont<'static> = &crate::font::FONT_ZEST_MONO;
28
29/// Light theme.
30pub const THEME: Theme<'static, Rgb888> = Theme {
31    background: Container {
32        base: BG,
33        on_base: TEXT,
34        divider: BORDER_LIGHT,
35    },
36    primary: Container {
37        base: SURFACE,
38        on_base: TEXT,
39        divider: BORDER,
40    },
41    secondary: Container {
42        base: ELEVATED,
43        on_base: TEXT,
44        divider: BORDER,
45    },
46    accent: Component {
47        base: ACCENT,
48        pressed: ACCENT_PRESSED,
49        disabled: TEXT_FAINT,
50        on_base: BG,
51        border: ACCENT,
52    },
53    button: Component {
54        base: ELEVATED,
55        pressed: SURFACE,
56        disabled: SURFACE,
57        on_base: TEXT,
58        border: BORDER,
59    },
60    destructive: Component {
61        base: DESTRUCTIVE,
62        pressed: DESTRUCTIVE_HOVER,
63        disabled: TEXT_FAINT,
64        on_base: BG,
65        border: DESTRUCTIVE,
66    },
67    success: Component {
68        base: SUCCESS,
69        pressed: SUCCESS_HOVER,
70        disabled: TEXT_FAINT,
71        on_base: BG,
72        border: SUCCESS,
73    },
74    warning: Component {
75        base: WARNING,
76        pressed: WARNING_HOVER,
77        disabled: TEXT_FAINT,
78        on_base: BG,
79        border: WARNING,
80    },
81    text_button: Component {
82        base: BG,
83        pressed: ELEVATED,
84        disabled: BG,
85        on_base: ACCENT,
86        border: BG,
87    },
88    icon_button: Component {
89        base: BG,
90        pressed: ELEVATED,
91        disabled: BG,
92        on_base: TEXT_MUTED,
93        border: BG,
94    },
95    palette: Palette {
96        neutral_0: TEXT,
97        neutral_2: TEXT_MUTED,
98        neutral_4: TEXT_MUTED,
99        neutral_5: TEXT_FAINT,
100        neutral_6: TEXT_FAINT,
101        neutral_8: BORDER,
102        neutral_10: BG,
103        accent_blue: BLUE,
104        accent_green: GREEN,
105        accent_red: RED,
106        accent_yellow: YELLOW,
107        black: Rgb888::new(0x00, 0x00, 0x00),
108        white: Rgb888::new(0xff, 0xff, 0xff),
109    },
110    spacing: Spacing::default_small(),
111    corner_radii: CornerRadii::default_small(),
112    typography: crate::Typography::new(
113        &crate::font::FONT_ZEST_MONO_DISPLAY,
114        &crate::font::FONT_ZEST_MONO_HEADING,
115        DEFAULT_FONT,
116        &crate::font::FONT_ZEST_MONO_CAPTION,
117    ),
118    is_dark: false,
119    is_high_contrast: false,
120};