colors.rs

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