egui-cha-ds 0.6.0

Design System for egui-cha (Atoms, Molecules, Theme)
Documentation 
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

//! Badge atom

use egui::{Color32, RichText, Ui};

use crate::Theme;

/// Badge variant
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum BadgeVariant {
    #[default]
    Default,
    Success,
    Warning,
    Error,
    Info,
}

/// A badge/tag component
pub struct Badge<'a> {
    text: &'a str,
    variant: BadgeVariant,
}

impl<'a> Badge<'a> {
    pub fn new(text: &'a str) -> Self {
        Self {
            text,
            variant: BadgeVariant::Default,
        }
    }

    pub fn success(text: &'a str) -> Self {
        Self::new(text).variant(BadgeVariant::Success)
    }

    pub fn warning(text: &'a str) -> Self {
        Self::new(text).variant(BadgeVariant::Warning)
    }

    pub fn error(text: &'a str) -> Self {
        Self::new(text).variant(BadgeVariant::Error)
    }

    pub fn info(text: &'a str) -> Self {
        Self::new(text).variant(BadgeVariant::Info)
    }

    pub fn variant(mut self, variant: BadgeVariant) -> Self {
        self.variant = variant;
        self
    }

    pub fn show(self, ui: &mut Ui) {
        let theme = Theme::current(ui.ctx());
        let (bg_color, text_color) = self.variant_colors(&theme);

        egui::Frame::new()
            .fill(bg_color)
            .corner_radius(theme.radius_sm)
            .inner_margin(egui::Margin::symmetric(
                theme.spacing_sm as i8,
                (theme.spacing_xs / 2.0) as i8,
            ))
            .show(ui, |ui| {
                ui.label(
                    RichText::new(self.text)
                        .color(text_color)
                        .size(theme.font_size_xs),
                );
            });
    }

    /// Get badge colors from theme
    /// Note: Badge uses "subtle" style (light bg, dark text) unlike buttons
    fn variant_colors(&self, theme: &Theme) -> (Color32, Color32) {
        let is_dark = theme.variant == crate::ThemeVariant::Dark;

        match self.variant {
            BadgeVariant::Default => (theme.bg_tertiary, theme.text_secondary),
            BadgeVariant::Success => {
                // Subtle style: light green bg, dark green text
                if is_dark {
                    (
                        darken(theme.state_success, 0.3),
                        lighten(theme.state_success, 0.7),
                    )
                } else {
                    (
                        lighten(theme.state_success, 0.85),
                        darken(theme.state_success, 0.3),
                    )
                }
            }
            BadgeVariant::Warning => {
                if is_dark {
                    (
                        darken(theme.state_warning, 0.3),
                        lighten(theme.state_warning, 0.7),
                    )
                } else {
                    (
                        lighten(theme.state_warning, 0.85),
                        darken(theme.state_warning, 0.4),
                    )
                }
            }
            BadgeVariant::Error => {
                if is_dark {
                    (
                        darken(theme.state_danger, 0.3),
                        lighten(theme.state_danger, 0.7),
                    )
                } else {
                    (
                        lighten(theme.state_danger, 0.85),
                        darken(theme.state_danger, 0.3),
                    )
                }
            }
            BadgeVariant::Info => {
                if is_dark {
                    (
                        darken(theme.state_info, 0.3),
                        lighten(theme.state_info, 0.7),
                    )
                } else {
                    (
                        lighten(theme.state_info, 0.85),
                        darken(theme.state_info, 0.3),
                    )
                }
            }
        }
    }
}

/// Lighten a color by mixing with white
fn lighten(color: Color32, amount: f32) -> Color32 {
    let [r, g, b, a] = color.to_array();
    Color32::from_rgba_unmultiplied(
        (r as f32 + (255.0 - r as f32) * amount) as u8,
        (g as f32 + (255.0 - g as f32) * amount) as u8,
        (b as f32 + (255.0 - b as f32) * amount) as u8,
        a,
    )
}

/// Darken a color by mixing with black
fn darken(color: Color32, amount: f32) -> Color32 {
    let [r, g, b, a] = color.to_array();
    Color32::from_rgba_unmultiplied(
        (r as f32 * (1.0 - amount)) as u8,
        (g as f32 * (1.0 - amount)) as u8,
        (b as f32 * (1.0 - amount)) as u8,
        a,
    )
}