gpui-cn 0.3.0

shadcn-style components for GPUI, built on gpui-base.
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

use gpui_kit::{Hsla, SharedString};

use super::color::hex;

/// The inputs a theme is built from. Every token components read is derived
/// from these, so this is the whole customization surface for colors.
///
/// A surface, an ink, a brand accent, and a contrast that says how far
/// secondary surfaces and borders move from the surface toward the ink.
#[derive(Clone, Debug, PartialEq)]
#[non_exhaustive]
pub struct ThemeConfig {
    /// The window background.
    pub surface: Hsla,
    /// Text and strong strokes.
    pub ink: Hsla,
    /// The brand color: focus ring, links, toggles, sliders, selection.
    pub accent: Hsla,
    /// `0..=100`. 50 gives the shadcn neutral ratios.
    pub contrast: u8,
    /// Font families. `None` uses the platform default.
    pub fonts: ThemeFonts,
    /// Colors that carry a meaning of their own.
    pub semantic: SemanticColors,
}

/// Font families for a theme. `None` means the platform default.
#[derive(Clone, Debug, PartialEq)]
#[non_exhaustive]
pub struct ThemeFonts {
    /// Interface text.
    pub ui: Option<SharedString>,
    /// Code, identifiers, and aligned numbers.
    pub code: Option<SharedString>,
}

impl Default for ThemeFonts {
    /// The platform interface font, and the bundled code font when one
    /// ships (see [`super::fonts`]).
    fn default() -> Self {
        Self {
            ui: None,
            code: super::fonts::default_code_font(),
        }
    }
}

/// Colors with a fixed meaning, independent of surface and ink.
#[derive(Clone, Debug, PartialEq)]
#[non_exhaustive]
pub struct SemanticColors {
    /// Completed, added, positive.
    pub success: Hsla,
    /// Destructive actions, removed, errors.
    pub destructive: Hsla,
    /// Needs attention but not an error.
    pub warning: Hsla,
    /// Neutral information.
    pub info: Hsla,
    /// Skills, plugins, and other extension surfaces.
    pub skill: Hsla,
}

impl Default for ThemeConfig {
    fn default() -> Self {
        Self::light()
    }
}

impl Default for SemanticColors {
    fn default() -> Self {
        Self::light()
    }
}

impl ThemeConfig {
    /// The built-in light theme.
    pub fn light() -> Self {
        Self {
            surface: hex("#ffffff"),
            ink: hex("#1a1c1f"),
            accent: hex("#339cff"),
            contrast: 45,
            fonts: ThemeFonts::default(),
            semantic: SemanticColors::light(),
        }
    }

    /// The built-in dark theme.
    pub fn dark() -> Self {
        Self {
            surface: hex("#181818"),
            ink: hex("#ffffff"),
            // The reference lifts its accent on a dark surface: its
            // toggles and checkboxes sample as #539af8, not #339cff.
            accent: hex("#539af8"),
            contrast: 60,
            fonts: ThemeFonts::default(),
            semantic: SemanticColors::dark(),
        }
    }
}

impl SemanticColors {
    /// The built-in light values.
    pub fn light() -> Self {
        Self {
            success: hex("#00a240"),
            destructive: hex("#ba2623"),
            warning: hex("#b45309"),
            info: hex("#2563eb"),
            skill: hex("#924ff7"),
        }
    }

    /// The built-in dark values.
    pub fn dark() -> Self {
        Self {
            success: hex("#40c977"),
            destructive: hex("#fa423e"),
            warning: hex("#f59e0b"),
            info: hex("#60a5fa"),
            skill: hex("#ad7bf9"),
        }
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn light_and_dark_differ_in_surface_and_accent() {
        let light = ThemeConfig::light();
        let dark = ThemeConfig::dark();
        assert_ne!(light.accent, dark.accent);
        assert_ne!(light.surface, dark.surface);
        assert_eq!(light.contrast, 45);
        assert_eq!(dark.contrast, 60);
        assert_eq!(ThemeConfig::default(), light);
    }
}