material_ui_rs/design/style/
text_input.rs

1use iced_widget::core::{Background, Border, Color};
2use iced_widget::text_input::{Catalog, Status, Style, StyleFn};
3
4use crate::Theme;
5use crate::tokens;
6use crate::utils::{disabled_text, state_layer};
7
8impl Catalog for Theme {
9    type Class<'a> = StyleFn<'a, Self>;
10
11    fn default<'a>() -> Self::Class<'a> {
12        Box::new(default)
13    }
14
15    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
16        class(self, status)
17    }
18}
19
20pub fn default(theme: &Theme, status: Status) -> Style {
21    let surface = theme.colors().surface;
22    let primary = theme.colors().primary;
23
24    let active = Style {
25        background: Background::Color(Color::TRANSPARENT),
26        border: Border {
27            color: theme.colors().outline.color,
28            width: tokens::component::text_field::OUTLINE_WIDTH,
29            radius: tokens::component::text_field::CONTAINER_SHAPE.into(),
30        },
31        icon: surface.text_variant,
32        placeholder: surface.text_variant,
33        value: surface.text,
34        selection: disabled_text(primary.color),
35    };
36
37    match status {
38        Status::Active => active,
39        Status::Hovered => Style {
40            border: active.border.color(surface.text),
41            ..active
42        },
43        Status::Disabled => Style {
44            background: Color::TRANSPARENT.into(),
45            border: Border {
46                color: state_layer(
47                    surface.text,
48                    tokens::component::text_field::DISABLED_OUTLINE_OPACITY,
49                ),
50                ..active.border
51            },
52            icon: state_layer(
53                surface.text,
54                tokens::component::text_field::DISABLED_LEADING_ICON_OPACITY,
55            ),
56            placeholder: state_layer(
57                surface.text,
58                tokens::component::text_field::DISABLED_INPUT_TEXT_OPACITY,
59            ),
60            value: state_layer(
61                surface.text,
62                tokens::component::text_field::DISABLED_INPUT_TEXT_OPACITY,
63            ),
64            selection: disabled_text(surface.text),
65        },
66        Status::Focused { .. } => Style {
67            border: Border {
68                color: primary.color,
69                width: tokens::component::text_field::FOCUS_OUTLINE_WIDTH,
70                ..active.border
71            },
72            ..active
73        },
74    }
75}
76
77#[cfg(test)]
78#[path = "../../../tests/design/style/text_input.rs"]
79mod tests;
material_ui_rs/design/style/text_input.rs

material_ui_rs/design/style/
text_input.rs
