From df84ba422273c0cccda1118bb0cca9c01d325a3c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 7 Nov 2023 14:04:09 -0500 Subject: [PATCH] Continue documenting theme colors --- crates/theme2/src/colors.rs | 170 +++++++++++++-------- crates/theme2/src/default_colors.rs | 2 - crates/theme_importer/src/theme_printer.rs | 1 - 3 files changed, 110 insertions(+), 63 deletions(-) diff --git a/crates/theme2/src/colors.rs b/crates/theme2/src/colors.rs index 72eba6b76d..8ee4b5fd47 100644 --- a/crates/theme2/src/colors.rs +++ b/crates/theme2/src/colors.rs @@ -71,53 +71,49 @@ pub struct GitStatusColors { #[refineable(debug, deserialize)] pub struct ThemeColors { pub border: Hsla, - /// Border color used for deemphasized borders, like a visual divider between two sections + /// Border color. Used for deemphasized borders, like a visual divider between two sections pub border_variant: Hsla, - /// Border color used for focused elements, like keyboard focused list item. + /// Border color. Used for focused elements, like keyboard focused list item. pub border_focused: Hsla, - /// Border color used for selected elements, like an active search filter or selected checkbox. + /// Border color. Used for selected elements, like an active search filter or selected checkbox. pub border_selected: Hsla, - /// Border color used for transparent borders. Used for placeholder borders when an element gains a border on state change. + /// Border color. Used for transparent borders. Used for placeholder borders when an element gains a border on state change. pub border_transparent: Hsla, - /// Border color used for disabled elements, like a disabled input or button. + /// Border color. Used for disabled elements, like a disabled input or button. pub border_disabled: Hsla, - /// Used for elevated surfaces, like a context menu, popup, or dialog. + /// Border color. Used for elevated surfaces, like a context menu, popup, or dialog. pub elevated_surface_background: Hsla, - /// Used for grounded surfaces like a panel or tab. + /// Background Color. Used for grounded surfaces like a panel or tab. pub surface_background: Hsla, - /// Used the app background and blank panels or windows. + /// Background Color. Used for the app background and blank panels or windows. pub background: Hsla, - /// Used for the background of an element that should have a different background than the surface it's on. + /// Background Color. Used for the background of an element that should have a different background than the surface it's on. /// /// Elements might include: Buttons, Inputs, Checkboxes, Radio Buttons... /// /// For an element that should have the same background as the surface it's on, use `ghost_element_background`. pub element_background: Hsla, - /// Used for the hover state of an element that should have a different background than the surface it's on. + /// Background Color. Used for the hover state of an element that should have a different background than the surface it's on. /// /// Hover states are triggered by the mouse entering an element, or a finger touching an element on a touch screen. pub element_hover: Hsla, - /// Used for the active state of an element that should have a different background than the surface it's on. + /// Background Color. Used for the active state of an element that should have a different background than the surface it's on. /// /// Active states are triggered by the mouse button being pressed down on an element, or the Return button or other activator being pressd. pub element_active: Hsla, - /// Used for the selected state of an element that should have a different background than the surface it's on. + /// Background Color. Used for the selected state of an element that should have a different background than the surface it's on. /// /// Selected states are triggered by the element being selected (or "activated") by the user. /// /// This could include a selected checkbox, a toggleable button that is toggled on, etc. pub element_selected: Hsla, - /// Used for the disabled state of an element that should have a different background than the surface it's on. + /// Background Color. Used for the disabled state of an element that should have a different background than the surface it's on. /// /// Disabled states are shown when a user cannot interact with an element, like a disabled button or input. pub element_disabled: Hsla, - /// Used for the text color of an element that should have a different background than the surface it's on. - /// - /// Example: A input with some default placeholder text. - pub element_placeholder_text: Hsla, - /// Background color of the area that shows where a dragged element will be dropped. + /// Background Color. Used for the area that shows where a dragged element will be dropped. pub drop_target_background: Hsla, - /// Border color of the area that shows where a dragged element will be dropped. + /// Border Color. Used to show the area that shows where a dragged element will be dropped. // pub drop_target_border: Hsla, /// Used for the background of a ghost element that should have the same background as the surface it's on. /// @@ -125,109 +121,163 @@ pub struct ThemeColors { /// /// For an element that should have a different background than the surface it's on, use `element_background`. pub ghost_element_background: Hsla, - /// Used for the hover state of a ghost element that should have the same background as the surface it's on. + /// Background Color. Used for the hover state of a ghost element that should have the same background as the surface it's on. /// /// Hover states are triggered by the mouse entering an element, or a finger touching an element on a touch screen. pub ghost_element_hover: Hsla, - /// Used for the active state of a ghost element that should have the same background as the surface it's on. + /// Background Color. Used for the active state of a ghost element that should have the same background as the surface it's on. /// /// Active states are triggered by the mouse button being pressed down on an element, or the Return button or other activator being pressd. pub ghost_element_active: Hsla, - /// Used for the selected state of a ghost element that should have the same background as the surface it's on. + /// Background Color. Used for the selected state of a ghost element that should have the same background as the surface it's on. /// /// Selected states are triggered by the element being selected (or "activated") by the user. /// /// This could include a selected checkbox, a toggleable button that is toggled on, etc. pub ghost_element_selected: Hsla, - /// Used for the disabled state of a ghost element that should have the same background as the surface it's on. + /// Background Color. Used for the disabled state of a ghost element that should have the same background as the surface it's on. /// /// Disabled states are shown when a user cannot interact with an element, like a disabled button or input. pub ghost_element_disabled: Hsla, + /// Text Color. Default text color used for most text. pub text: Hsla, + /// Text Color. Color of muted or deemphasized text. It is a subdued version of the standard text color. pub text_muted: Hsla, + /// Text Color. Color of the placeholder text typically shown in input fields to guide the user to enter valid data. pub text_placeholder: Hsla, + /// Text Color. Color used for text denoting disabled elements. Typically, the color is faded or grayed out to emphasize the disabled state. pub text_disabled: Hsla, + /// Text Color. Color used for emphasis or highlighting certain text, like an active filter or a matched character in a search. pub text_accent: Hsla, + /// Fill Color. Used for the default fill color of an icon. pub icon: Hsla, + /// Fill Color. Used for the muted or deemphasized fill color of an icon. + /// + /// 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. pub icon_muted: Hsla, + /// Fill Color. Used for the disabled fill color of an icon. + /// + /// Disabled states are shown when a user cannot interact with an element, like a icon button. pub icon_disabled: Hsla, + /// Fill Color. Used for the placeholder fill color of an icon. + /// + /// This might be used to show an icon in an input that disappears when the user enters text. pub icon_placeholder: Hsla, + /// Fill Color. Used for the accent fill color of an icon. + /// + /// This might be used to show when a toggleable icon button is selected. pub icon_accent: Hsla, + + // === + // UI Elements + // === pub status_bar_background: Hsla, pub title_bar_background: Hsla, pub toolbar_background: Hsla, pub tab_bar_background: Hsla, pub tab_inactive_background: Hsla, pub tab_active_background: Hsla, + // pub panel_background: Hsla, + // pub pane_focused_border: Hsla, + // /// The color of the scrollbar thumb. + // pub scrollbar_thumb_background: Hsla, + // /// The color of the scrollbar thumb when hovered over. + // pub scrollbar_thumb_hover_background: Hsla, + // /// The border color of the scrollbar thumb. + // pub scrollbar_thumb_border: Hsla, + // /// The background color of the scrollbar track. + // pub scrollbar_track_background: Hsla, + // /// The border color of the scrollbar track. + // pub scrollbar_track_border: Hsla, + // /// The opacity of the scrollbar status marks, like diagnostic states and git status.. + // pub scrollbar_status_opacity: Hsla, + + // === + // Editor + // === pub editor_background: Hsla, + // pub editor_inactive_background: Hsla, pub editor_gutter_background: Hsla, pub editor_subheader_background: Hsla, pub editor_active_line_background: Hsla, pub editor_highlighted_line_background: Hsla, + /// Text Color. Used for the text of the line number in the editor gutter. pub editor_line_number: Hsla, + /// Text Color. Used for the text of the line number in the editor gutter when the line is highlighted. pub editor_active_line_number: Hsla, + /// Text Color. Used to mark invisible characters in the editor. + /// + /// Example: spaces, tabs, carriage returns, etc. pub editor_invisible: Hsla, pub editor_wrap_guide: Hsla, pub editor_active_wrap_guide: Hsla, pub editor_document_highlight_read_background: Hsla, pub editor_document_highlight_write_background: Hsla, + + // === + // Terminal + // === + /// Terminal Background Color pub terminal_background: Hsla, + /// Bright Black Color for ANSI Terminal pub terminal_ansi_bright_black: Hsla, + /// Bright Red Color for ANSI Terminal pub terminal_ansi_bright_red: Hsla, + /// Bright Green Color for ANSI Terminal pub terminal_ansi_bright_green: Hsla, + /// Bright Yellow Color for ANSI Terminal pub terminal_ansi_bright_yellow: Hsla, + /// Bright Blue Color for ANSI Terminal pub terminal_ansi_bright_blue: Hsla, + /// Bright Magenta Color for ANSI Terminal pub terminal_ansi_bright_magenta: Hsla, + /// Bright Cyan Color for ANSI Terminal pub terminal_ansi_bright_cyan: Hsla, + /// Bright White Color for ANSI Terminal pub terminal_ansi_bright_white: Hsla, + /// Black Color for ANSI Terminal pub terminal_ansi_black: Hsla, + /// Red Color for ANSI Terminal pub terminal_ansi_red: Hsla, + /// Green Color for ANSI Terminal pub terminal_ansi_green: Hsla, + /// Yellow Color for ANSI Terminal pub terminal_ansi_yellow: Hsla, + /// Blue Color for ANSI Terminal pub terminal_ansi_blue: Hsla, + /// Magenta Color for ANSI Terminal pub terminal_ansi_magenta: Hsla, + /// Cyan Color for ANSI Terminal pub terminal_ansi_cyan: Hsla, + /// White Color for ANSI Terminal pub terminal_ansi_white: Hsla, // new colors - // == elevation == - // elevatation_0_shadow - // elevatation_0_shadow_color - // elevatation_1_shadow - // elevatation_1_shadow_color - // elevatation_2_shadow - // elevatation_2_shadow_color - // elevatation_3_shadow - // elevatation_3_shadow_color - // elevatation_4_shadow - // elevatation_4_shadow_color - // elevatation_5_shadow - // elevatation_5_shadow_color + // === + // Elevation + // === + // elevation_0_shadow + // elevation_0_shadow_color + // elevation_1_shadow + // elevation_1_shadow_color + // elevation_2_shadow + // elevation_2_shadow_color + // elevation_3_shadow + // elevation_3_shadow_color + // elevation_4_shadow + // elevation_4_shadow_color + // elevation_5_shadow + // elevation_5_shadow_color - // == rich text == - // headline - // paragraph - // link - // link_hover - // code_block_background - // code_block_border - - // == misc == - // inverted_element_* - // foreground: Overall foreground color. This color is only used if not overridden by a component. - // disabledForeground: Overall foreground for disabled elements. This color is only used if not overridden by a component. - // widget.border: Border color of widgets such as Find/Replace inside the editor. - // widget.shadow: Shadow color of widgets such as Find/Replace inside the editor. - // selection - foreground, background - // active_element_border - // inactive_element_border - // element_seperator - // scrollbar_thumb_background - // scrollbar_thumb_hover_background - // scrollbar_thumb_border - // scrollbar_track_background - // scrollbar_track_border - // scrollbar_status_opacity + // === + // UI Text + // === + // pub headline: Hsla, + // pub paragraph: Hsla, + // pub link: Hsla, + // pub link_hover: Hsla, + // pub code_block_background: Hsla, + // pub code_block_border: Hsla, } #[derive(Refineable, Clone)] diff --git a/crates/theme2/src/default_colors.rs b/crates/theme2/src/default_colors.rs index 9804af234a..7252e82972 100644 --- a/crates/theme2/src/default_colors.rs +++ b/crates/theme2/src/default_colors.rs @@ -220,7 +220,6 @@ impl ThemeColors { element_active: neutral().light().step_5(), element_selected: neutral().light().step_5(), element_disabled: neutral().light_alpha().step_3(), - element_placeholder_text: neutral().light().step_11(), drop_target_background: blue().light_alpha().step_2(), ghost_element_background: system.transparent, ghost_element_hover: neutral().light().step_4(), @@ -293,7 +292,6 @@ impl ThemeColors { element_active: neutral().dark().step_5(), element_selected: neutral().dark().step_5(), element_disabled: neutral().dark_alpha().step_3(), - element_placeholder_text: neutral().dark().step_11(), drop_target_background: blue().dark_alpha().step_2(), ghost_element_background: system.transparent, ghost_element_hover: neutral().dark().step_4(), diff --git a/crates/theme_importer/src/theme_printer.rs b/crates/theme_importer/src/theme_printer.rs index 1857567604..0f20a8d60f 100644 --- a/crates/theme_importer/src/theme_printer.rs +++ b/crates/theme_importer/src/theme_printer.rs @@ -140,7 +140,6 @@ impl<'a> Debug for ThemeColorsRefinementPrinter<'a> { ("element_active", self.0.element_active), ("element_selected", self.0.element_selected), ("element_disabled", self.0.element_disabled), - ("element_placeholder_text", self.0.element_placeholder_text), ("drop_target_background", self.0.drop_target_background), ("ghost_element_background", self.0.ghost_element_background), ("ghost_element_hover", self.0.ghost_element_hover),