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