colors.rs

  1use crate::{PlayerColors, SyntaxTheme};
  2use gpui::Hsla;
  3use refineable::Refineable;
  4use std::sync::Arc;
  5
  6#[derive(Clone)]
  7pub struct SystemColors {
  8    pub transparent: Hsla,
  9    pub mac_os_traffic_light_red: Hsla,
 10    pub mac_os_traffic_light_yellow: Hsla,
 11    pub mac_os_traffic_light_green: Hsla,
 12}
 13
 14#[derive(Refineable, Clone, Debug)]
 15#[refineable(Debug)]
 16pub struct StatusColors {
 17    pub conflict: Hsla,
 18    pub created: Hsla,
 19    pub deleted: Hsla,
 20    pub error: Hsla,
 21    pub hidden: Hsla,
 22    pub ignored: Hsla,
 23    pub info: Hsla,
 24    pub modified: Hsla,
 25    pub renamed: Hsla,
 26    pub success: Hsla,
 27    pub warning: Hsla,
 28}
 29
 30#[derive(Refineable, Clone, Debug)]
 31#[refineable(Debug)]
 32pub struct GitStatusColors {
 33    pub conflict: Hsla,
 34    pub created: Hsla,
 35    pub deleted: Hsla,
 36    pub ignored: Hsla,
 37    pub modified: Hsla,
 38    pub renamed: Hsla,
 39}
 40
 41#[derive(Refineable, Clone, Debug)]
 42#[refineable(Debug, serde::Deserialize)]
 43pub struct ThemeColors {
 44    pub border: Hsla,
 45    /// Border color. Used for deemphasized borders, like a visual divider between two sections
 46    pub border_variant: Hsla,
 47    /// Border color. Used for focused elements, like keyboard focused list item.
 48    pub border_focused: Hsla,
 49    /// Border color. Used for selected elements, like an active search filter or selected checkbox.
 50    pub border_selected: Hsla,
 51    /// Border color. Used for transparent borders. Used for placeholder borders when an element gains a border on state change.
 52    pub border_transparent: Hsla,
 53    /// Border color. Used for disabled elements, like a disabled input or button.
 54    pub border_disabled: Hsla,
 55    /// Border color. Used for elevated surfaces, like a context menu, popup, or dialog.
 56    pub elevated_surface_background: Hsla,
 57    /// Background Color. Used for grounded surfaces like a panel or tab.
 58    pub surface_background: Hsla,
 59    /// Background Color. Used for the app background and blank panels or windows.
 60    pub background: Hsla,
 61    /// Background Color. Used for the background of an element that should have a different background than the surface it's on.
 62    ///
 63    /// Elements might include: Buttons, Inputs, Checkboxes, Radio Buttons...
 64    ///
 65    /// For an element that should have the same background as the surface it's on, use `ghost_element_background`.
 66    pub element_background: Hsla,
 67    /// Background Color. Used for the hover state of an element that should have a different background than the surface it's on.
 68    ///
 69    /// Hover states are triggered by the mouse entering an element, or a finger touching an element on a touch screen.
 70    pub element_hover: Hsla,
 71    /// Background Color. Used for the active state of an element that should have a different background than the surface it's on.
 72    ///
 73    /// Active states are triggered by the mouse button being pressed down on an element, or the Return button or other activator being pressd.
 74    pub element_active: Hsla,
 75    /// Background Color. Used for the selected state of an element that should have a different background than the surface it's on.
 76    ///
 77    /// Selected states are triggered by the element being selected (or "activated") by the user.
 78    ///
 79    /// This could include a selected checkbox, a toggleable button that is toggled on, etc.
 80    pub element_selected: Hsla,
 81    /// Background Color. Used for the disabled state of an element that should have a different background than the surface it's on.
 82    ///
 83    /// Disabled states are shown when a user cannot interact with an element, like a disabled button or input.
 84    pub element_disabled: Hsla,
 85    /// Background Color. Used for the area that shows where a dragged element will be dropped.
 86    pub drop_target_background: Hsla,
 87    /// Border Color. Used to show the area that shows where a dragged element will be dropped.
 88    // pub drop_target_border: Hsla,
 89    /// Used for the background of a ghost element that should have the same background as the surface it's on.
 90    ///
 91    /// Elements might include: Buttons, Inputs, Checkboxes, Radio Buttons...
 92    ///
 93    /// For an element that should have a different background than the surface it's on, use `element_background`.
 94    pub ghost_element_background: Hsla,
 95    /// Background Color. Used for the hover state of a ghost element that should have the same background as the surface it's on.
 96    ///
 97    /// Hover states are triggered by the mouse entering an element, or a finger touching an element on a touch screen.
 98    pub ghost_element_hover: Hsla,
 99    /// Background Color. Used for the active state of a ghost element that should have the same background as the surface it's on.
100    ///
101    /// Active states are triggered by the mouse button being pressed down on an element, or the Return button or other activator being pressd.
102    pub ghost_element_active: Hsla,
103    /// Background Color. Used for the selected state of a ghost element that should have the same background as the surface it's on.
104    ///
105    /// Selected states are triggered by the element being selected (or "activated") by the user.
106    ///
107    /// This could include a selected checkbox, a toggleable button that is toggled on, etc.
108    pub ghost_element_selected: Hsla,
109    /// Background Color. Used for the disabled state of a ghost element that should have the same background as the surface it's on.
110    ///
111    /// Disabled states are shown when a user cannot interact with an element, like a disabled button or input.
112    pub ghost_element_disabled: Hsla,
113    /// Text Color. Default text color used for most text.
114    pub text: Hsla,
115    /// Text Color. Color of muted or deemphasized text. It is a subdued version of the standard text color.
116    pub text_muted: Hsla,
117    /// Text Color. Color of the placeholder text typically shown in input fields to guide the user to enter valid data.
118    pub text_placeholder: Hsla,
119    /// Text Color. Color used for text denoting disabled elements. Typically, the color is faded or grayed out to emphasize the disabled state.
120    pub text_disabled: Hsla,
121    /// Text Color. Color used for emphasis or highlighting certain text, like an active filter or a matched character in a search.
122    pub text_accent: Hsla,
123    /// Fill Color. Used for the default fill color of an icon.
124    pub icon: Hsla,
125    /// Fill Color. Used for the muted or deemphasized fill color of an icon.
126    ///
127    /// This might be used to show an icon in an inactive pane, or to demphasize a series of icons to give them less visual weight.
128    pub icon_muted: Hsla,
129    /// Fill Color. Used for the disabled fill color of an icon.
130    ///
131    /// Disabled states are shown when a user cannot interact with an element, like a icon button.
132    pub icon_disabled: Hsla,
133    /// Fill Color. Used for the placeholder fill color of an icon.
134    ///
135    /// This might be used to show an icon in an input that disappears when the user enters text.
136    pub icon_placeholder: Hsla,
137    /// Fill Color. Used for the accent fill color of an icon.
138    ///
139    /// This might be used to show when a toggleable icon button is selected.
140    pub icon_accent: Hsla,
141
142    // ===
143    // UI Elements
144    // ===
145    pub status_bar_background: Hsla,
146    pub title_bar_background: Hsla,
147    pub toolbar_background: Hsla,
148    pub tab_bar_background: Hsla,
149    pub tab_inactive_background: Hsla,
150    pub tab_active_background: Hsla,
151    // pub panel_background: Hsla,
152    // pub pane_focused_border: Hsla,
153    // /// The color of the scrollbar thumb.
154    // pub scrollbar_thumb_background: Hsla,
155    // /// The color of the scrollbar thumb when hovered over.
156    // pub scrollbar_thumb_hover_background: Hsla,
157    // /// The border color of the scrollbar thumb.
158    // pub scrollbar_thumb_border: Hsla,
159    // /// The background color of the scrollbar track.
160    // pub scrollbar_track_background: Hsla,
161    // /// The border color of the scrollbar track.
162    // pub scrollbar_track_border: Hsla,
163    // /// The opacity of the scrollbar status marks, like diagnostic states and git status..
164    // pub scrollbar_status_opacity: Hsla,
165
166    // ===
167    // Editor
168    // ===
169    pub editor_background: Hsla,
170    // pub editor_inactive_background: Hsla,
171    pub editor_gutter_background: Hsla,
172    pub editor_subheader_background: Hsla,
173    pub editor_active_line_background: Hsla,
174    pub editor_highlighted_line_background: Hsla,
175    /// Text Color. Used for the text of the line number in the editor gutter.
176    pub editor_line_number: Hsla,
177    /// Text Color. Used for the text of the line number in the editor gutter when the line is highlighted.
178    pub editor_active_line_number: Hsla,
179    /// Text Color. Used to mark invisible characters in the editor.
180    ///
181    /// Example: spaces, tabs, carriage returns, etc.
182    pub editor_invisible: Hsla,
183    pub editor_wrap_guide: Hsla,
184    pub editor_active_wrap_guide: Hsla,
185    pub editor_document_highlight_read_background: Hsla,
186    pub editor_document_highlight_write_background: Hsla,
187
188    // ===
189    // Terminal
190    // ===
191    /// Terminal Background Color
192    pub terminal_background: Hsla,
193    /// Bright Black Color for ANSI Terminal
194    pub terminal_ansi_bright_black: Hsla,
195    /// Bright Red Color for ANSI Terminal
196    pub terminal_ansi_bright_red: Hsla,
197    /// Bright Green Color for ANSI Terminal
198    pub terminal_ansi_bright_green: Hsla,
199    /// Bright Yellow Color for ANSI Terminal
200    pub terminal_ansi_bright_yellow: Hsla,
201    /// Bright Blue Color for ANSI Terminal
202    pub terminal_ansi_bright_blue: Hsla,
203    /// Bright Magenta Color for ANSI Terminal
204    pub terminal_ansi_bright_magenta: Hsla,
205    /// Bright Cyan Color for ANSI Terminal
206    pub terminal_ansi_bright_cyan: Hsla,
207    /// Bright White Color for ANSI Terminal
208    pub terminal_ansi_bright_white: Hsla,
209    /// Black Color for ANSI Terminal
210    pub terminal_ansi_black: Hsla,
211    /// Red Color for ANSI Terminal
212    pub terminal_ansi_red: Hsla,
213    /// Green Color for ANSI Terminal
214    pub terminal_ansi_green: Hsla,
215    /// Yellow Color for ANSI Terminal
216    pub terminal_ansi_yellow: Hsla,
217    /// Blue Color for ANSI Terminal
218    pub terminal_ansi_blue: Hsla,
219    /// Magenta Color for ANSI Terminal
220    pub terminal_ansi_magenta: Hsla,
221    /// Cyan Color for ANSI Terminal
222    pub terminal_ansi_cyan: Hsla,
223    /// White Color for ANSI Terminal
224    pub terminal_ansi_white: Hsla,
225    // new colors
226
227    // ===
228    // Elevation
229    // ===
230    // elevation_0_shadow
231    // elevation_0_shadow_color
232    // elevation_1_shadow
233    // elevation_1_shadow_color
234    // elevation_2_shadow
235    // elevation_2_shadow_color
236    // elevation_3_shadow
237    // elevation_3_shadow_color
238    // elevation_4_shadow
239    // elevation_4_shadow_color
240    // elevation_5_shadow
241    // elevation_5_shadow_color
242
243    // ===
244    // UI Text
245    // ===
246    // pub headline: Hsla,
247    // pub paragraph: Hsla,
248    // pub link: Hsla,
249    // pub link_hover: Hsla,
250    // pub code_block_background: Hsla,
251    // pub code_block_border: Hsla,
252}
253
254#[derive(Refineable, Clone)]
255pub struct ThemeStyles {
256    pub system: SystemColors,
257
258    #[refineable]
259    pub colors: ThemeColors,
260    pub status: StatusColors,
261    pub git: GitStatusColors,
262    pub player: PlayerColors,
263    pub syntax: Arc<SyntaxTheme>,
264}
265
266#[cfg(test)]
267mod tests {
268    use serde_json::json;
269
270    use super::*;
271
272    #[test]
273    fn override_a_single_theme_color() {
274        let mut colors = ThemeColors::default_light();
275
276        let magenta: Hsla = gpui::rgb(0xff00ff);
277
278        assert_ne!(colors.text, magenta);
279
280        let overrides = ThemeColorsRefinement {
281            text: Some(magenta),
282            ..Default::default()
283        };
284
285        colors.refine(&overrides);
286
287        assert_eq!(colors.text, magenta);
288    }
289
290    #[test]
291    fn override_multiple_theme_colors() {
292        let mut colors = ThemeColors::default_light();
293
294        let magenta: Hsla = gpui::rgb(0xff00ff);
295        let green: Hsla = gpui::rgb(0x00ff00);
296
297        assert_ne!(colors.text, magenta);
298        assert_ne!(colors.background, green);
299
300        let overrides = ThemeColorsRefinement {
301            text: Some(magenta),
302            background: Some(green),
303            ..Default::default()
304        };
305
306        colors.refine(&overrides);
307
308        assert_eq!(colors.text, magenta);
309        assert_eq!(colors.background, green);
310    }
311
312    #[test]
313    fn deserialize_theme_colors_refinement_from_json() {
314        let colors: ThemeColorsRefinement = serde_json::from_value(json!({
315            "background": "#ff00ff",
316            "text": "#ff0000"
317        }))
318        .unwrap();
319
320        assert_eq!(colors.background, Some(gpui::rgb(0xff00ff)));
321        assert_eq!(colors.text, Some(gpui::rgb(0xff0000)));
322    }
323}