egui-components-theme 0.1.0

Theme tokens for egui, ported from longbridge/gpui-component
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173

//! Semantic color tokens (light + dark) mirroring `gpui-component`'s
//! `default-theme.json` gpui-component default preset.

use crate::palette::*;
use egui::Color32;

/// Semantic color tokens consumed by the components.
///
/// Field naming follows `gpui-component`'s `ThemeColor` (e.g. `primary_foreground`
/// for `primary.foreground` in the upstream JSON), so cross-referencing the
/// original sources stays easy.
#[derive(Clone, Copy, Debug)]
pub struct ThemeColor {
    // Base surface
    pub background: Color32,
    pub foreground: Color32,
    pub border: Color32,
    pub ring: Color32,
    pub overlay: Color32,
    pub caret: Color32,
    pub selection_background: Color32,

    // Primary
    pub primary_background: Color32,
    pub primary_foreground: Color32,
    pub primary_hover_background: Color32,
    pub primary_active_background: Color32,

    // Secondary
    pub secondary_background: Color32,
    pub secondary_foreground: Color32,
    pub secondary_hover_background: Color32,
    pub secondary_active_background: Color32,

    // Accent (used by ghost / outline hover)
    pub accent_background: Color32,
    pub accent_foreground: Color32,

    // Muted (subdued text/surfaces)
    pub muted_background: Color32,
    pub muted_foreground: Color32,

    // Danger / Success / Warning / Info
    pub danger_background: Color32,
    pub danger_foreground: Color32,
    pub success_background: Color32,
    pub success_foreground: Color32,
    pub warning_background: Color32,
    pub warning_foreground: Color32,
    pub info_background: Color32,
    pub info_foreground: Color32,

    // Inputs
    pub input_border: Color32,

    // Popover
    pub popover_background: Color32,
    pub popover_foreground: Color32,

    // Slider / Switch
    pub slider_bar_background: Color32,
    pub slider_thumb_background: Color32,
    pub switch_background: Color32,

    // Link
    pub link_foreground: Color32,
    pub link_hover_foreground: Color32,
    pub link_active_foreground: Color32,
}

impl ThemeColor {
    /// Light preset — matches `Default Light` in `default-theme.json`.
    pub const fn light() -> Self {
        Self {
            background: WHITE,
            foreground: NEUTRAL.get(950),
            border: NEUTRAL.get(200),
            ring: NEUTRAL.get(950),
            overlay: Color32::from_rgba_premultiplied(0, 0, 0, 0x0d),
            caret: Color32::from_rgb(0x0a, 0x0a, 0x0a),
            selection_background: Color32::from_rgb(0x55, 0xa0, 0xfc),

            primary_background: NEUTRAL.get(900),
            primary_foreground: NEUTRAL.get(50),
            primary_hover_background: NEUTRAL.get(800),
            primary_active_background: NEUTRAL.get(950),

            secondary_background: NEUTRAL.get(200),
            secondary_foreground: NEUTRAL.get(900),
            secondary_hover_background: NEUTRAL.get(200),
            secondary_active_background: NEUTRAL.get(300),

            accent_background: NEUTRAL.get(100),
            accent_foreground: NEUTRAL.get(900),

            muted_background: NEUTRAL.get(100),
            muted_foreground: NEUTRAL.get(500),

            danger_background: RED.get(500),
            danger_foreground: NEUTRAL.get(50),
            success_background: GREEN.get(500),
            success_foreground: NEUTRAL.get(50),
            warning_background: YELLOW.get(500),
            warning_foreground: NEUTRAL.get(50),
            info_background: CYAN.get(500),
            info_foreground: NEUTRAL.get(50),

            input_border: NEUTRAL.get(200),

            popover_background: WHITE,
            popover_foreground: NEUTRAL.get(950),

            slider_bar_background: Color32::from_rgb(0x17, 0x17, 0x17),
            slider_thumb_background: WHITE,
            switch_background: Color32::from_rgb(0xd4, 0xd4, 0xd4),

            link_foreground: Color32::from_rgb(0x0a, 0x0a, 0x0a),
            link_hover_foreground: Color32::from_rgb(0x40, 0x40, 0x40),
            link_active_foreground: Color32::from_rgb(0x0a, 0x0a, 0x0a),
        }
    }

    /// Dark preset — matches `Default Dark` in `default-theme.json`.
    pub const fn dark() -> Self {
        Self {
            background: NEUTRAL.get(950),
            foreground: NEUTRAL.get(50),
            border: NEUTRAL.get(800),
            ring: NEUTRAL.get(300),
            overlay: Color32::from_rgba_premultiplied(0, 0, 0, 0x33),
            caret: Color32::from_rgb(0xfa, 0xfa, 0xfa),
            selection_background: Color32::from_rgb(0x1d, 0x4e, 0xd8),

            primary_background: NEUTRAL.get(50),
            primary_foreground: NEUTRAL.get(900),
            primary_hover_background: NEUTRAL.get(100),
            primary_active_background: NEUTRAL.get(200),

            secondary_background: NEUTRAL.get(800),
            secondary_foreground: NEUTRAL.get(50),
            secondary_hover_background: Color32::from_rgb(0x29, 0x29, 0x29),
            secondary_active_background: Color32::from_rgb(0x21, 0x21, 0x21),

            accent_background: NEUTRAL.get(800),
            accent_foreground: NEUTRAL.get(50),

            muted_background: NEUTRAL.get(800),
            muted_foreground: NEUTRAL.get(400),

            danger_background: RED.get(400),
            danger_foreground: RED.get(600),
            success_background: GREEN.get(400),
            success_foreground: GREEN.get(600),
            warning_background: YELLOW.get(400),
            warning_foreground: YELLOW.get(600),
            info_background: CYAN.get(400),
            info_foreground: CYAN.get(600),

            input_border: Color32::from_rgb(0x2f, 0x2f, 0x2f),

            popover_background: NEUTRAL.get(950),
            popover_foreground: NEUTRAL.get(50),

            slider_bar_background: Color32::from_rgb(0xfa, 0xfa, 0xfa),
            slider_thumb_background: Color32::from_rgb(0x0a, 0x0a, 0x0a),
            switch_background: Color32::from_rgb(0x40, 0x40, 0x40),

            link_foreground: Color32::from_rgb(0xfa, 0xfa, 0xfa),
            link_hover_foreground: Color32::from_rgb(0xff, 0xff, 0xff),
            link_active_foreground: Color32::from_rgb(0xd4, 0xd4, 0xd4),
        }
    }
}