kael_ui 0.2.0

Professional shadcn-inspired UI component library for Kael. 100+ accessible components for building beautiful, performant desktop applications.
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

use kael::*;

pub trait StyledExt: Styled + Sized {
    fn center(self) -> Self {
        self.flex().items_center().justify_center()
    }

    fn stack(self) -> Self {
        self.flex().flex_col()
    }

    fn row(self) -> Self {
        self.flex().flex_row()
    }

    fn glass(self, opacity: f32) -> Self {
        let bg_color = hsla(0.0, 0.0, 1.0, 0.08 * opacity);
        let border_color = hsla(0.0, 0.0, 1.0, 0.12 * opacity);
        self.bg(bg_color).border_1().border_color(border_color)
    }

    fn elevated(self, level: u8) -> Self {
        let shadow = match level {
            0 => return self,
            1 => BoxShadow {
                offset: point(px(0.0), px(1.0)),
                blur_radius: px(2.0),
                spread_radius: px(0.0),
                inset: false,
                color: hsla(0.0, 0.0, 0.0, 0.05),
            },
            2 => BoxShadow {
                offset: point(px(0.0), px(1.0)),
                blur_radius: px(3.0),
                spread_radius: px(0.0),
                inset: false,
                color: hsla(0.0, 0.0, 0.0, 0.1),
            },
            3 => BoxShadow {
                offset: point(px(0.0), px(4.0)),
                blur_radius: px(6.0),
                spread_radius: px(-1.0),
                inset: false,
                color: hsla(0.0, 0.0, 0.0, 0.1),
            },
            4 => BoxShadow {
                offset: point(px(0.0), px(10.0)),
                blur_radius: px(15.0),
                spread_radius: px(-3.0),
                inset: false,
                color: hsla(0.0, 0.0, 0.0, 0.1),
            },
            _ => BoxShadow {
                offset: point(px(0.0), px(20.0)),
                blur_radius: px(25.0),
                spread_radius: px(-5.0),
                inset: false,
                color: hsla(0.0, 0.0, 0.0, 0.1),
            },
        };
        self.shadow(smallvec::smallvec![shadow])
    }

    fn ring(self, color: Hsla, width: Pixels) -> Self {
        let shadow = BoxShadow {
            offset: point(px(0.0), px(0.0)),
            blur_radius: px(0.0),
            spread_radius: width,
            inset: false,
            color,
        };
        self.shadow(smallvec::smallvec![shadow])
    }
}

impl<T: Styled + Sized> StyledExt for T {}