cranpose_liquid/
theme.rs

1//! Liquid theme: semantic colors, the iOS-style type ramp, and glass defaults,
2//! provided to the subtree through composition locals — the analogue of
3//! `MaterialTheme`.
4
5use std::cell::OnceCell;
6
7use cranpose_core::{CompositionLocal, CompositionLocalProvider, compositionLocalOf};
8use cranpose_macros::composable;
9use cranpose_services::isSystemInDarkTheme;
10use cranpose_ui::text::{FontWeight, SpanStyle, TextStyle, TextUnit};
11use cranpose_ui_graphics::Color;
12
13use crate::appearance::GlassTintAmount;
14
15/// Whether the theme follows the OS appearance or is pinned.
16#[derive(Clone, Copy, Debug, PartialEq, Eq, Default)]
17pub enum SchemeMode {
18    /// Follow [`cranpose_services::isSystemInDarkTheme`] live.
19    #[default]
20    Auto,
21    Light,
22    Dark,
23}
24
25/// Semantic color palette mirroring the iOS system palette.
26#[derive(Clone, Copy, Debug, PartialEq)]
27pub struct LiquidColors {
28    /// True when this is the dark palette (drives glass exposure/tints).
29    pub is_dark: bool,
30    /// Primary text.
31    pub label: Color,
32    /// Secondary text (subtitles, captions).
33    pub secondary_label: Color,
34    /// Tertiary text (placeholders, disabled).
35    pub tertiary_label: Color,
36    /// Hairline separators.
37    pub separator: Color,
38    /// Filled control track (chips, search fields).
39    pub fill: Color,
40    /// Lighter fill for nested controls.
41    pub secondary_fill: Color,
42    /// Resting tint of a glass surface pane (cards, planks): the surface
43    /// role at pane translucency, so the backdrop transmits through it.
44    pub surface_glass: Color,
45    /// Window background (grouped style).
46    pub background: Color,
47    /// Elevated surface (cards, list sections).
48    pub surface: Color,
49    /// Pressed surface wash.
50    pub surface_pressed: Color,
51    /// Accent (interactive) color.
52    pub accent: Color,
53    /// Content on accent fills.
54    pub on_accent: Color,
55    /// Destructive action color.
56    pub destructive: Color,
57    /// Success color.
58    pub success: Color,
59    /// Active switch track.
60    pub toggle_on: Color,
61    /// Inactive switch track.
62    pub toggle_off: Color,
63    /// Warning color.
64    pub warning: Color,
65    /// Tint mixed over glass materials.
66    pub glass_tint: Color,
67    /// Hairline stroke drawn around glass shapes.
68    pub glass_stroke: Color,
69}
70
71impl LiquidColors {
72    pub fn light(accent: Color) -> Self {
73        Self {
74            is_dark: false,
75            label: Color::BLACK,
76            secondary_label: Color::from_rgba_u8(60, 60, 67, 153),
77            tertiary_label: Color::from_rgba_u8(60, 60, 67, 76),
78            separator: Color::from_rgba_u8(60, 60, 60, 30),
79            fill: Color::from_rgba_u8(120, 120, 128, 40),
80            secondary_fill: Color::from_rgba_u8(120, 120, 128, 28),
81            surface_glass: Color::from_rgba_u8(255, 255, 255, 191),
82            background: Color::from_rgb_u8(242, 242, 247),
83            surface: Color::WHITE,
84            surface_pressed: Color::from_rgb_u8(226, 226, 231),
85            accent,
86            on_accent: Color::WHITE,
87            destructive: Color::from_rgb_u8(255, 59, 48),
88            success: Color::from_rgb_u8(52, 199, 89),
89            toggle_on: accent,
90            toggle_off: Color::from_rgba_u8(60, 60, 67, 76),
91            warning: Color::from_rgb_u8(255, 149, 0),
92            glass_tint: Color::from_rgba_u8(255, 255, 255, 18),
93            glass_stroke: Color::from_rgba_u8(255, 255, 255, 120),
94        }
95    }
96
97    pub fn dark(accent: Color) -> Self {
98        Self {
99            is_dark: true,
100            label: Color::WHITE,
101            secondary_label: Color::from_rgba_u8(235, 235, 245, 153),
102            tertiary_label: Color::from_rgba_u8(235, 235, 245, 76),
103            separator: Color::from_rgba_u8(84, 84, 88, 128),
104            fill: Color::from_rgba_u8(120, 120, 128, 70),
105            secondary_fill: Color::from_rgba_u8(120, 120, 128, 50),
106            surface_glass: Color::from_rgba_u8(28, 28, 30, 184),
107            background: Color::from_rgb_u8(10, 10, 12),
108            surface: Color::from_rgb_u8(28, 28, 30),
109            surface_pressed: Color::from_rgb_u8(44, 44, 46),
110            accent,
111            on_accent: Color::WHITE,
112            destructive: Color::from_rgb_u8(255, 69, 58),
113            success: Color::from_rgb_u8(48, 209, 88),
114            toggle_on: accent,
115            toggle_off: Color::from_rgba_u8(235, 235, 245, 76),
116            warning: Color::from_rgb_u8(255, 159, 10),
117            glass_tint: Color::from_rgba_u8(20, 20, 24, 40),
118            glass_stroke: Color::from_rgba_u8(255, 255, 255, 46),
119        }
120    }
121}
122
123/// The iOS text-style ramp as ready-to-use [`TextStyle`]s (colors come from
124/// [`LiquidColors::label`] by default at the call site).
125impl LiquidColors {
126    /// The palette for a person who asked the system for more contrast: the
127    /// secondary and tertiary labels, the separator, the fills and the glass
128    /// edge move toward the label color, and the off toggle darkens.
129    pub fn with_more_contrast(mut self) -> Self {
130        self.secondary_label = self.secondary_label.with_alpha(0.9);
131        self.tertiary_label = self.tertiary_label.with_alpha(0.7);
132        self.separator = self.separator.with_alpha(0.6);
133        self.fill = self.fill.with_alpha(0.32);
134        self.secondary_fill = self.secondary_fill.with_alpha(0.24);
135        self.glass_stroke = self.glass_stroke.with_alpha(0.9);
136        self.toggle_off = if self.is_dark {
137            Color::from_rgb_u8(142, 142, 147)
138        } else {
139            Color::from_rgb_u8(99, 99, 108)
140        };
141        self
142    }
143}
144
145#[derive(Clone, Debug, PartialEq)]
146pub struct LiquidTypography {
147    pub large_title: TextStyle,
148    pub title1: TextStyle,
149    pub title2: TextStyle,
150    pub title3: TextStyle,
151    pub headline: TextStyle,
152    pub body: TextStyle,
153    pub callout: TextStyle,
154    pub subheadline: TextStyle,
155    pub footnote: TextStyle,
156    pub caption1: TextStyle,
157    pub caption2: TextStyle,
158}
159
160fn ramp_style(size_sp: f32, weight: FontWeight) -> TextStyle {
161    TextStyle {
162        span_style: SpanStyle {
163            font_size: TextUnit::Sp(size_sp),
164            font_weight: Some(weight),
165            ..Default::default()
166        },
167        ..Default::default()
168    }
169}
170
171impl LiquidTypography {
172    /// The ramp for a person who asked the system for bold text: every style
173    /// gains two hundred of weight, so body text reads semi bold and titles
174    /// extra bold.
175    pub fn bolder(self) -> Self {
176        Self {
177            large_title: bolder(self.large_title),
178            title1: bolder(self.title1),
179            title2: bolder(self.title2),
180            title3: bolder(self.title3),
181            headline: bolder(self.headline),
182            body: bolder(self.body),
183            callout: bolder(self.callout),
184            subheadline: bolder(self.subheadline),
185            footnote: bolder(self.footnote),
186            caption1: bolder(self.caption1),
187            caption2: bolder(self.caption2),
188        }
189    }
190}
191
192fn bolder(mut style: TextStyle) -> TextStyle {
193    let weight = style.span_style.font_weight.unwrap_or(FontWeight::NORMAL);
194    style.span_style.font_weight = Some(FontWeight((weight.0 + 200).min(900)));
195    style
196}
197
198impl Default for LiquidTypography {
199    fn default() -> Self {
200        Self {
201            large_title: ramp_style(34.0, FontWeight::BOLD),
202            title1: ramp_style(28.0, FontWeight::BOLD),
203            title2: ramp_style(22.0, FontWeight::BOLD),
204            title3: ramp_style(20.0, FontWeight::SEMI_BOLD),
205            headline: ramp_style(17.0, FontWeight::SEMI_BOLD),
206            body: ramp_style(17.0, FontWeight::NORMAL),
207            callout: ramp_style(16.0, FontWeight::NORMAL),
208            subheadline: ramp_style(15.0, FontWeight::NORMAL),
209            footnote: ramp_style(13.0, FontWeight::NORMAL),
210            caption1: ramp_style(12.0, FontWeight::NORMAL),
211            caption2: ramp_style(11.0, FontWeight::NORMAL),
212        }
213    }
214}
215
216/// Theme configuration passed to [`LiquidTheme`].
217#[derive(Clone, Debug, PartialEq)]
218pub struct LiquidThemeSpec {
219    pub scheme: SchemeMode,
220    /// Accent color (iOS system blue by default).
221    pub accent: Color,
222    pub typography: LiquidTypography,
223    /// Tint amount used by the floating navigation surfaces.
224    pub glass_tint_amount: GlassTintAmount,
225}
226
227impl Default for LiquidThemeSpec {
228    fn default() -> Self {
229        Self {
230            scheme: SchemeMode::Auto,
231            accent: Color::from_rgb_u8(0, 122, 255),
232            typography: LiquidTypography::default(),
233            glass_tint_amount: GlassTintAmount::default(),
234        }
235    }
236}
237
238struct ThemeLocals {
239    colors: OnceCell<CompositionLocal<LiquidColors>>,
240    typography: OnceCell<CompositionLocal<LiquidTypography>>,
241    glass_tint: OnceCell<CompositionLocal<GlassTintAmount>>,
242}
243
244thread_local! {
245    static LOCALS: ThemeLocals = const { ThemeLocals {
246        colors: OnceCell::new(),
247        typography: OnceCell::new(),
248        glass_tint: OnceCell::new(),
249    } };
250}
251
252fn theme_local<T: Clone + PartialEq + 'static>(
253    cell: impl FnOnce(&ThemeLocals) -> &OnceCell<CompositionLocal<T>>,
254    default: fn() -> T,
255) -> CompositionLocal<T> {
256    LOCALS.with(|locals| {
257        cell(locals)
258            .get_or_init(|| compositionLocalOf(default))
259            .clone()
260    })
261}
262
263fn local_liquid_colors() -> CompositionLocal<LiquidColors> {
264    theme_local(
265        |locals| &locals.colors,
266        || LiquidColors::light(LiquidThemeSpec::default().accent),
267    )
268}
269
270fn local_liquid_typography() -> CompositionLocal<LiquidTypography> {
271    theme_local(|locals| &locals.typography, LiquidTypography::default)
272}
273
274fn local_liquid_glass_tint_amount() -> CompositionLocal<GlassTintAmount> {
275    theme_local(|locals| &locals.glass_tint, GlassTintAmount::default)
276}
277
278/// The active navigation surface tint amount, defaulting to 25 percent.
279#[composable]
280pub fn liquid_glass_tint_amount() -> GlassTintAmount {
281    local_liquid_glass_tint_amount().current()
282}
283
284/// The active semantic palette (light defaults outside a [`LiquidTheme`]).
285#[composable]
286pub fn liquid_colors() -> LiquidColors {
287    local_liquid_colors().current()
288}
289
290/// The active type ramp.
291#[composable]
292pub fn liquid_typography() -> LiquidTypography {
293    local_liquid_typography().current()
294}
295
296/// Provides the Liquid design system (colors, typography) to `content`.
297///
298/// `SchemeMode::Auto` follows the OS light/dark appearance live. The scheme
299/// also sets [`cranpose_ui::local_on_light_surface`], so the text selection
300/// menu over a light scheme draws dark labels.
301#[composable]
302pub fn LiquidTheme(spec: LiquidThemeSpec, content: impl FnOnce()) {
303    let options = cranpose_services::local_accessibility_options().current();
304    let dark = match spec.scheme {
305        SchemeMode::Auto => isSystemInDarkTheme(),
306        SchemeMode::Light => false,
307        SchemeMode::Dark => true,
308    } != options.invert_colors;
309    let colors = if dark {
310        LiquidColors::dark(spec.accent)
311    } else {
312        LiquidColors::light(spec.accent)
313    };
314    let colors = if options.increase_contrast {
315        colors.with_more_contrast()
316    } else {
317        colors
318    };
319    let typography = if options.bold_text {
320        spec.typography.clone().bolder()
321    } else {
322        spec.typography.clone()
323    };
324    CompositionLocalProvider(
325        [
326            local_liquid_colors().provides(colors),
327            local_liquid_typography().provides(typography),
328            local_liquid_glass_tint_amount().provides(spec.glass_tint_amount),
329            cranpose_ui::local_on_light_surface().provides(!dark),
330        ],
331        move || {
332            content();
333        },
334    );
335}
336
337#[cfg(test)]
338#[path = "tests/theme_tests.rs"]
339mod tests;
340
341#[cfg(test)]
342#[path = "tests/theme_option_tests.rs"]
343mod option_tests;
cranpose_liquid/theme.rs

cranpose_liquid/
theme.rs
