hydrolysis-m3 0.3.0

Material 3 widget theme for WaterUI self-drawn backends
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
use crate::dimensions::{
    BUTTON_LINK_HORIZONTAL_PADDING, BUTTON_LINK_UNDERLINE_BOTTOM_INSET,
    BUTTON_LINK_UNDERLINE_THICKNESS, BUTTON_LINK_VERTICAL_PADDING, BUTTON_MIN_WIDTH,
    BUTTON_TEXT_VERTICAL_PADDING, button_size_tokens,
};
use crate::theme::colors::MaterialColorScheme;
use crate::theme::state_layer;
use crate::{Brush, ButtonMetrics, DrawContext, WidgetInteractionState};
use waterui_controls::button::{ButtonSize, ButtonStyle};
use waterui_graphics::color::Color;

pub fn metrics(style: ButtonStyle, size: ButtonSize) -> ButtonMetrics {
    let tokens = button_size_tokens(size);
    match style {
        ButtonStyle::Automatic
        | ButtonStyle::Bordered
        | ButtonStyle::BorderedProminent
        | ButtonStyle::Plain
        | ButtonStyle::Borderless => ButtonMetrics::new(
            tokens.horizontal_space,
            BUTTON_TEXT_VERTICAL_PADDING,
            BUTTON_MIN_WIDTH,
            tokens.container_height,
        ),
        // A link has no container, so it takes neither the size scale's
        // padding nor its minimum box.
        ButtonStyle::Link => ButtonMetrics::new(
            BUTTON_LINK_HORIZONTAL_PADDING,
            BUTTON_LINK_VERTICAL_PADDING,
            0.0,
            0.0,
        ),
        _ => panic!("hydrolysis ButtonStyle variant is not implemented"),
    }
}

pub fn label_color(colors: &MaterialColorScheme, style: ButtonStyle, disabled: bool) -> Color {
    // MD3 disabled button label: on-surface at the 38% disabled-content
    // opacity, regardless of variant.
    if disabled {
        return colors
            .on_surface
            .view_color()
            .with_opacity(crate::theme::colors::DISABLED_CONTENT_OPACITY);
    }
    match style {
        // `Automatic` is the theme's default button, which in M3 is the
        // filled button — primary container with on-primary content.
        ButtonStyle::Automatic | ButtonStyle::BorderedProminent => colors.on_primary.view_color(),
        ButtonStyle::Bordered
        | ButtonStyle::Plain
        | ButtonStyle::Link
        | ButtonStyle::Borderless => colors.primary.view_color(),
        _ => panic!("hydrolysis ButtonStyle variant is not implemented"),
    }
}

/// A button container is `CornerFull` at every size in the tokens, so its
/// corner radius is half its height rather than a fixed number of dp. Reading
/// it off the bounds keeps a large or extra-large button a capsule, and keeps a
/// button stretched to fill a taller row — a navigation drawer line, say —
/// rounded to match whatever it is sitting on.
fn container_radius(bounds: vello::kurbo::Rect) -> f64 {
    bounds.height() / 2.0
}

pub fn draw_chrome(
    colors: &MaterialColorScheme,
    draw: &mut dyn DrawContext,
    bounds: vello::kurbo::Rect,
    style: ButtonStyle,
    state: WidgetInteractionState,
) {
    // MD3 disabled button: filled/tonal containers drop to on-surface at 12%,
    // the outlined border drops to on-surface at 12%, and the link underline
    // follows the disabled label (on-surface at 38%). Text buttons have no
    // container to dim.
    match style {
        ButtonStyle::Automatic | ButtonStyle::BorderedProminent => {
            let fill = if state.disabled {
                colors.on_surface.peniko_disabled_container()
            } else {
                colors.primary.peniko()
            };
            draw.fill_rounded_rect(bounds, container_radius(bounds).into(), &Brush::from(fill));
        }
        ButtonStyle::Bordered => {
            let border = if state.disabled {
                colors.on_surface.peniko_disabled_container()
            } else if state.focus_visible {
                colors.primary.peniko()
            } else {
                colors.outline.peniko()
            };
            draw.stroke_rounded_rect(
                bounds,
                container_radius(bounds).into(),
                &Brush::from(border),
                1.0,
            );
        }
        ButtonStyle::Link => {
            let underline = if state.disabled {
                colors.on_surface.peniko_disabled_content()
            } else {
                colors.primary.peniko()
            };
            let underline_y = (bounds.y1 - BUTTON_LINK_UNDERLINE_BOTTOM_INSET).max(bounds.y0);
            draw.stroke_line(
                vello::kurbo::Point::new(bounds.x0 + BUTTON_LINK_HORIZONTAL_PADDING, underline_y),
                vello::kurbo::Point::new(bounds.x1 - BUTTON_LINK_HORIZONTAL_PADDING, underline_y),
                &Brush::from(underline),
                BUTTON_LINK_UNDERLINE_THICKNESS,
            );
        }
        ButtonStyle::Plain | ButtonStyle::Borderless => {}
        _ => panic!("hydrolysis ButtonStyle variant is not implemented"),
    }
}

pub fn draw_state_layer(
    colors: &MaterialColorScheme,
    draw: &mut dyn DrawContext,
    bounds: vello::kurbo::Rect,
    style: ButtonStyle,
    state: WidgetInteractionState,
) {
    let color = match style {
        ButtonStyle::Automatic | ButtonStyle::BorderedProminent => colors.on_primary.peniko(),
        ButtonStyle::Bordered
        | ButtonStyle::Link
        | ButtonStyle::Plain
        | ButtonStyle::Borderless => colors.primary.peniko(),
        _ => panic!("hydrolysis ButtonStyle variant is not implemented"),
    };
    state_layer::draw_bounded(draw, bounds, container_radius(bounds).into(), color, state);
}

#[cfg(test)]
mod tests {
    use super::{draw_chrome, metrics};
    use crate::dimensions::{
        BUTTON_EXTRA_LARGE, BUTTON_EXTRA_SMALL, BUTTON_LARGE, BUTTON_MEDIUM, BUTTON_MIN_WIDTH,
        BUTTON_SMALL, BUTTON_TEXT_VERTICAL_PADDING,
    };
    use crate::{Brush, DrawContext, MaterialColorScheme};
    use vello::kurbo::{Affine, BezPath, Point, Rect, RoundedRectRadii};
    use waterui_controls::button::{ButtonSize, ButtonStyle};

    fn assert_button_metrics(style: ButtonStyle, expected_padding_x: f64) {
        let metrics = metrics(style, ButtonSize::Small);

        assert_eq!(metrics.padding_x, expected_padding_x);
        assert_eq!(metrics.padding_y, BUTTON_TEXT_VERTICAL_PADDING);
        assert_eq!(metrics.min_width, BUTTON_MIN_WIDTH);
        assert_eq!(metrics.min_height, BUTTON_SMALL.container_height);
    }

    /// The Expressive size scale, from Compose's `ButtonXSmallTokens` through
    /// `ButtonXLargeTokens`. Height, padding, icon size and corner shape all
    /// move together, so a size is checked as a whole token set.
    #[test]
    fn button_size_scale_matches_compose_button_size_tokens() {
        // ButtonXSmallTokens
        assert_eq!(BUTTON_EXTRA_SMALL.container_height, 32.0);
        assert_eq!(BUTTON_EXTRA_SMALL.horizontal_space, 16.0);
        assert_eq!(BUTTON_EXTRA_SMALL.icon_size, 20.0);
        assert_eq!(BUTTON_EXTRA_SMALL.icon_label_space, 8.0);
        // ButtonSmallTokens
        assert_eq!(BUTTON_SMALL.container_height, 40.0);
        assert_eq!(BUTTON_SMALL.icon_size, 20.0);
        // ButtonMediumTokens
        assert_eq!(BUTTON_MEDIUM.container_height, 56.0);
        assert_eq!(BUTTON_MEDIUM.horizontal_space, 24.0);
        assert_eq!(BUTTON_MEDIUM.icon_size, 24.0);
        // ButtonLargeTokens
        assert_eq!(BUTTON_LARGE.container_height, 96.0);
        assert_eq!(BUTTON_LARGE.horizontal_space, 48.0);
        assert_eq!(BUTTON_LARGE.icon_size, 32.0);
        assert_eq!(BUTTON_LARGE.icon_label_space, 12.0);
        assert_eq!(BUTTON_LARGE.outline_width, 2.0);
        // ButtonXLargeTokens
        assert_eq!(BUTTON_EXTRA_LARGE.container_height, 136.0);
        assert_eq!(BUTTON_EXTRA_LARGE.horizontal_space, 64.0);
        assert_eq!(BUTTON_EXTRA_LARGE.icon_size, 40.0);
        assert_eq!(BUTTON_EXTRA_LARGE.icon_label_space, 16.0);

        // The scale is monotonic in every dimension it changes.
        let scale = [
            BUTTON_EXTRA_SMALL,
            BUTTON_SMALL,
            BUTTON_MEDIUM,
            BUTTON_LARGE,
            BUTTON_EXTRA_LARGE,
        ];
        for pair in scale.windows(2) {
            let (smaller, larger) = (pair[0], pair[1]);
            assert!(larger.container_height > smaller.container_height);
            assert!(larger.horizontal_space >= smaller.horizontal_space);
            assert!(larger.icon_size >= smaller.icon_size);
        }
    }

    /// A button's measured height follows the size it was given.
    #[test]
    fn button_metrics_follow_the_requested_size() {
        for (size, tokens) in [
            (ButtonSize::ExtraSmall, BUTTON_EXTRA_SMALL),
            (ButtonSize::Small, BUTTON_SMALL),
            (ButtonSize::Medium, BUTTON_MEDIUM),
            (ButtonSize::Large, BUTTON_LARGE),
            (ButtonSize::ExtraLarge, BUTTON_EXTRA_LARGE),
        ] {
            let metrics = metrics(ButtonStyle::BorderedProminent, size);
            assert_eq!(metrics.min_height, tokens.container_height, "{size:?}");
            assert_eq!(metrics.padding_x, tokens.horizontal_space, "{size:?}");
        }
    }

    /// Values from `androidx.compose.material3`: `BaselineButtonTokens` for the
    /// container, `ButtonDefaults` for the minimum size and content padding.
    #[test]
    fn button_metrics_match_compose_button_tokens() {
        for style in [
            ButtonStyle::Plain,
            ButtonStyle::Borderless,
            ButtonStyle::Automatic,
            ButtonStyle::Bordered,
            ButtonStyle::BorderedProminent,
        ] {
            assert_button_metrics(style, BUTTON_SMALL.horizontal_space);
        }
        // ButtonSmallTokens.ContainerHeight
        assert_eq!(BUTTON_SMALL.container_height, 40.0);
        // BaselineButtonTokens.ContainerShapeRound is CornerFull, so every size
        // is a capsule and the radius follows the container's own height.
        for size in [
            BUTTON_EXTRA_SMALL,
            BUTTON_SMALL,
            BUTTON_MEDIUM,
            BUTTON_LARGE,
            BUTTON_EXTRA_LARGE,
        ] {
            let bounds = Rect::new(0.0, 0.0, 200.0, size.container_height);
            assert_eq!(super::container_radius(bounds), size.container_height / 2.0);
        }
        // ButtonDefaults.MinWidth
        assert_eq!(BUTTON_MIN_WIDTH, 58.0);
        // BaselineButtonTokens.LeadingSpace / TrailingSpace, which is what
        // `ButtonDefaults.ContentPadding` uses for the default button.
        assert_eq!(BUTTON_SMALL.horizontal_space, 24.0);
        // ButtonDefaults.ContentPadding vertical
        assert_eq!(BUTTON_TEXT_VERTICAL_PADDING, 8.0);
    }

    #[derive(Default)]
    struct RecordingDrawContext {
        rounded_fills: Vec<(Rect, RoundedRectRadii, Brush)>,
        rounded_strokes: Vec<(Rect, RoundedRectRadii, Brush, f64)>,
    }

    impl DrawContext for RecordingDrawContext {
        fn fill_rect(&mut self, _rect: Rect, _brush: &Brush) {}

        fn fill_rounded_rect(&mut self, rect: Rect, radii: RoundedRectRadii, brush: &Brush) {
            self.rounded_fills.push((rect, radii, brush.clone()));
        }

        fn stroke_rect(&mut self, _rect: Rect, _brush: &Brush, _width: f64) {}

        fn stroke_rounded_rect(
            &mut self,
            rect: Rect,
            radii: RoundedRectRadii,
            brush: &Brush,
            width: f64,
        ) {
            self.rounded_strokes
                .push((rect, radii, brush.clone(), width));
        }

        fn stroke_line(&mut self, _from: Point, _to: Point, _brush: &Brush, _width: f64) {}

        fn stroke_circle(&mut self, _center: Point, _radius: f64, _brush: &Brush, _width: f64) {}

        fn fill_circle(&mut self, _center: Point, _radius: f64, _brush: &Brush) {}

        fn fill_path(&mut self, _path: &BezPath, _brush: &Brush) {}

        fn stroke_path(&mut self, _path: &BezPath, _brush: &Brush, _width: f64) {}
        fn draw_shadow(
            &mut self,
            _rect: Rect,
            _radii: RoundedRectRadii,
            _offset: vello::kurbo::Vec2,
            _blur: f64,
            _color: vello::peniko::Color,
        ) {
        }

        fn push_layer(&mut self, _alpha: f32, _clip: Option<&Rect>) {}

        fn pop_layer(&mut self) {}

        fn push_transform(&mut self, _affine: Affine) {}

        fn pop_transform(&mut self) {}
    }

    #[test]
    fn disabled_outlined_button_uses_disabled_border() {
        // MD3 disabled outlined button: the border drops to on-surface at 12%.
        let colors = MaterialColorScheme::baseline_light();
        let mut draw = RecordingDrawContext::default();

        draw_chrome(
            &colors,
            &mut draw,
            Rect::new(0.0, 0.0, 120.0, BUTTON_SMALL.container_height),
            ButtonStyle::Bordered,
            crate::WidgetInteractionState {
                disabled: true,
                ..crate::WidgetInteractionState::NONE
            },
        );

        assert_eq!(draw.rounded_strokes.len(), 1);
        assert!(matches!(
            &draw.rounded_strokes[0].2,
            Brush::Solid(color) if *color == colors.on_surface.peniko_disabled_container()
        ));
    }

    #[test]
    fn disabled_button_label_color_is_on_surface_38() {
        // MD3 disabled button label: on-surface at 38% for every variant.
        use waterui_core::Signal as _;
        let colors = MaterialColorScheme::baseline_light();
        for style in [
            ButtonStyle::Automatic,
            ButtonStyle::Bordered,
            ButtonStyle::BorderedProminent,
            ButtonStyle::Plain,
        ] {
            let color = super::label_color(&colors, style, true);
            let resolved = color.resolve(&waterui_core::Environment::new()).get();
            let expected = colors
                .on_surface
                .view_color()
                .with_opacity(crate::theme::colors::DISABLED_CONTENT_OPACITY)
                .resolve(&waterui_core::Environment::new())
                .get();
            assert_eq!(
                (
                    resolved.red,
                    resolved.green,
                    resolved.blue,
                    resolved.opacity
                ),
                (
                    expected.red,
                    expected.green,
                    expected.blue,
                    expected.opacity
                ),
                "style {style:?}"
            );
        }
    }

    /// `Automatic` is the theme's default button; in M3 that is the filled
    /// button — a primary container with on-primary content, identical to the
    /// prominent style.
    #[test]
    fn automatic_button_renders_filled() {
        let colors = MaterialColorScheme::baseline_light();
        for style in [ButtonStyle::Automatic, ButtonStyle::BorderedProminent] {
            let mut draw = RecordingDrawContext::default();

            draw_chrome(
                &colors,
                &mut draw,
                Rect::new(0.0, 0.0, 120.0, BUTTON_SMALL.container_height),
                style,
                crate::WidgetInteractionState::NONE,
            );

            assert_eq!(draw.rounded_fills.len(), 1, "style {style:?}");
            assert!(
                matches!(
                    &draw.rounded_fills[0].2,
                    Brush::Solid(color) if *color == colors.primary.peniko()
                ),
                "style {style:?}"
            );
        }
    }

    #[test]
    fn outlined_button_uses_latest_material_outline_role() {
        let colors = MaterialColorScheme::baseline_light();
        let mut draw = RecordingDrawContext::default();

        draw_chrome(
            &colors,
            &mut draw,
            Rect::new(0.0, 0.0, 120.0, BUTTON_SMALL.container_height),
            ButtonStyle::Bordered,
            crate::WidgetInteractionState::NONE,
        );

        assert_eq!(draw.rounded_strokes.len(), 1);
        assert!(matches!(
            &draw.rounded_strokes[0].2,
            Brush::Solid(color) if *color == colors.outline.peniko()
        ));
        assert_eq!(draw.rounded_strokes[0].3, 1.0);
    }
}