Extend theme colors (#3587)

[[PR Description]]

Title

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2023-12-11 12:34:06 -05:00 committed by GitHub
commit b9bbc4a698
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 239 additions and 139 deletions

View file

@ -13,73 +13,91 @@ impl ThemeColors {
let system = SystemColors::default();
Self {
background: neutral().light().step_1(),
border: neutral().light().step_6(),
border_variant: neutral().light().step_5(),
border_focused: blue().light().step_5(),
border_disabled: neutral().light().step_3(),
border_focused: blue().light().step_5(),
border_selected: blue().light().step_5(),
border_transparent: system.transparent,
elevated_surface_background: neutral().light().step_2(),
surface_background: neutral().light().step_2(),
background: neutral().light().step_1(),
element_background: neutral().light().step_3(),
element_hover: neutral().light_alpha().step_4(),
element_active: neutral().light_alpha().step_5(),
element_selected: neutral().light_alpha().step_5(),
element_disabled: neutral().light_alpha().step_3(),
border_variant: neutral().light().step_5(),
code_block_background: gpui::transparent_black(),
code_block_border: gpui::transparent_black(),
drop_target_background: blue().light_alpha().step_2(),
ghost_element_background: system.transparent,
ghost_element_hover: neutral().light_alpha().step_3(),
ghost_element_active: neutral().light_alpha().step_4(),
ghost_element_selected: neutral().light_alpha().step_5(),
ghost_element_disabled: neutral().light_alpha().step_3(),
text: neutral().light().step_12(),
text_muted: neutral().light().step_10(),
text_placeholder: neutral().light().step_10(),
text_disabled: neutral().light().step_9(),
text_accent: blue().light().step_11(),
icon: neutral().light().step_11(),
icon_muted: neutral().light().step_10(),
icon_disabled: neutral().light().step_9(),
icon_placeholder: neutral().light().step_10(),
icon_accent: blue().light().step_11(),
status_bar_background: neutral().light().step_2(),
title_bar_background: neutral().light().step_2(),
toolbar_background: neutral().light().step_1(),
tab_bar_background: neutral().light().step_2(),
tab_active_background: neutral().light().step_1(),
tab_inactive_background: neutral().light().step_2(),
search_match_background: neutral().light().step_2(), // todo!(this was inserted by Mikayla)
editor_background: neutral().light().step_1(),
editor_gutter_background: neutral().light().step_1(), // todo!("pick the right colors")
editor_subheader_background: neutral().light().step_2(),
editor_active_line_background: neutral().light_alpha().step_3(),
editor_line_number: neutral().light().step_10(),
editor_active_line_number: neutral().light().step_11(),
editor_highlighted_line_background: neutral().light_alpha().step_3(),
editor_invisible: neutral().light().step_10(),
editor_wrap_guide: neutral().light_alpha().step_7(),
editor_active_wrap_guide: neutral().light_alpha().step_8(), // todo!("pick the right colors")
editor_foreground: neutral().light().step_12(),
editor_background: neutral().light().step_1(),
editor_document_highlight_read_background: neutral().light_alpha().step_3(), // todo!("pick the right colors")
editor_document_highlight_write_background: neutral().light_alpha().step_4(), // todo!("pick the right colors")
terminal_background: neutral().light().step_1(),
editor_gutter_background: neutral().light().step_1(), // todo!("pick the right colors")
editor_highlighted_line_background: neutral().light_alpha().step_3(),
editor_invisible: neutral().light().step_10(),
editor_line_number: neutral().light().step_10(),
editor_subheader_background: neutral().light().step_2(),
editor_wrap_guide: neutral().light_alpha().step_7(),
element_active: neutral().light_alpha().step_5(),
element_background: neutral().light().step_3(),
element_disabled: neutral().light_alpha().step_3(),
element_hover: neutral().light_alpha().step_4(),
element_selected: neutral().light_alpha().step_5(),
elevated_surface_background: neutral().light().step_2(),
emphasis: neutral().light().step_12(),
ghost_element_active: neutral().light_alpha().step_4(),
ghost_element_background: system.transparent,
ghost_element_disabled: neutral().light_alpha().step_3(),
ghost_element_hover: neutral().light_alpha().step_3(),
ghost_element_selected: neutral().light_alpha().step_5(),
headline: blue().light().step_9(),
icon: neutral().light().step_11(),
icon_accent: blue().light().step_11(),
icon_disabled: neutral().light().step_9(),
icon_muted: neutral().light().step_10(),
icon_placeholder: neutral().light().step_10(),
inline_code_background: gpui::transparent_black(),
inline_code_border: gpui::transparent_black(),
link_text: orange().light().step_9(),
link_text_hover: orange().light().step_10(),
link_uri: green().light().step_9(),
pane_focused_border: blue().light().step_5(),
panel_background: neutral().light().step_2(),
panel_focused_border: blue().light().step_5(),
paragraph: neutral().light().step_12(),
scrollbar_thumb_background: neutral().light_alpha().step_3(),
scrollbar_thumb_border: gpui::transparent_black(),
scrollbar_thumb_hover_background: neutral().light_alpha().step_4(),
scrollbar_track_background: gpui::transparent_black(),
scrollbar_track_border: neutral().light().step_5(),
search_match_background: neutral().light().step_2(), // todo!(this was inserted by Mikayla)
status_bar_background: neutral().light().step_2(),
surface_background: neutral().light().step_2(),
tab_active_background: neutral().light().step_1(),
tab_bar_background: neutral().light().step_2(),
tab_inactive_background: neutral().light().step_2(),
terminal_ansi_black: black().light().step_12(),
terminal_ansi_red: red().light().step_11(),
terminal_ansi_green: green().light().step_11(),
terminal_ansi_yellow: yellow().light().step_11(),
terminal_ansi_blue: blue().light().step_11(),
terminal_ansi_magenta: violet().light().step_11(),
terminal_ansi_cyan: cyan().light().step_11(),
terminal_ansi_white: neutral().light().step_12(),
terminal_ansi_bright_black: black().light().step_11(),
terminal_ansi_bright_red: red().light().step_10(),
terminal_ansi_bright_green: green().light().step_10(),
terminal_ansi_bright_yellow: yellow().light().step_10(),
terminal_ansi_bright_blue: blue().light().step_10(),
terminal_ansi_bright_magenta: violet().light().step_10(),
terminal_ansi_bright_cyan: cyan().light().step_10(),
terminal_ansi_bright_green: green().light().step_10(),
terminal_ansi_bright_magenta: violet().light().step_10(),
terminal_ansi_bright_red: red().light().step_10(),
terminal_ansi_bright_white: neutral().light().step_11(),
terminal_ansi_bright_yellow: yellow().light().step_10(),
terminal_ansi_cyan: cyan().light().step_11(),
terminal_ansi_green: green().light().step_11(),
terminal_ansi_magenta: violet().light().step_11(),
terminal_ansi_red: red().light().step_11(),
terminal_ansi_white: neutral().light().step_12(),
terminal_ansi_yellow: yellow().light().step_11(),
terminal_background: neutral().light().step_1(),
text: neutral().light().step_12(),
text_accent: blue().light().step_11(),
text_disabled: neutral().light().step_9(),
text_muted: neutral().light().step_10(),
text_placeholder: neutral().light().step_10(),
title_bar_background: neutral().light().step_2(),
toolbar_background: neutral().light().step_1(),
}
}
@ -87,73 +105,91 @@ impl ThemeColors {
let system = SystemColors::default();
Self {
background: neutral().dark().step_1(),
border: neutral().dark().step_6(),
border_variant: neutral().dark().step_5(),
border_focused: blue().dark().step_5(),
border_disabled: neutral().dark().step_3(),
border_focused: blue().dark().step_5(),
border_selected: blue().dark().step_5(),
border_transparent: system.transparent,
elevated_surface_background: neutral().dark().step_2(),
surface_background: neutral().dark().step_2(),
background: neutral().dark().step_1(),
element_background: neutral().dark().step_3(),
element_hover: neutral().dark_alpha().step_4(),
element_active: neutral().dark_alpha().step_5(),
element_selected: neutral().dark_alpha().step_5(),
element_disabled: neutral().dark_alpha().step_3(),
border_variant: neutral().dark().step_5(),
code_block_background: gpui::transparent_black(),
code_block_border: gpui::transparent_black(),
drop_target_background: blue().dark_alpha().step_2(),
ghost_element_background: system.transparent,
ghost_element_hover: neutral().dark_alpha().step_4(),
ghost_element_active: neutral().dark_alpha().step_5(),
ghost_element_selected: neutral().dark_alpha().step_5(),
ghost_element_disabled: neutral().dark_alpha().step_3(),
text: neutral().dark().step_12(),
text_muted: neutral().dark().step_11(),
text_placeholder: neutral().dark().step_10(),
text_disabled: neutral().dark().step_9(),
text_accent: blue().dark().step_11(),
icon: neutral().dark().step_11(),
icon_muted: neutral().dark().step_10(),
icon_disabled: neutral().dark().step_9(),
icon_placeholder: neutral().dark().step_10(),
icon_accent: blue().dark().step_11(),
status_bar_background: neutral().dark().step_2(),
title_bar_background: neutral().dark().step_2(),
toolbar_background: neutral().dark().step_1(),
tab_bar_background: neutral().dark().step_2(),
tab_active_background: neutral().dark().step_1(),
tab_inactive_background: neutral().dark().step_2(),
search_match_background: neutral().dark().step_2(), // todo!(this was inserted by Mikayla)
editor_background: neutral().dark().step_1(),
editor_gutter_background: neutral().dark().step_1(),
editor_subheader_background: neutral().dark().step_3(),
editor_active_line_background: neutral().dark_alpha().step_3(),
editor_line_number: neutral().dark_alpha().step_10(),
editor_active_line_number: neutral().dark_alpha().step_12(),
editor_highlighted_line_background: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
editor_invisible: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
editor_wrap_guide: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
editor_active_wrap_guide: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
editor_background: neutral().dark().step_1(),
editor_document_highlight_read_background: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
editor_document_highlight_write_background: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
terminal_background: neutral().dark().step_1(),
editor_foreground: neutral().dark().step_12(),
editor_gutter_background: neutral().dark().step_1(),
editor_highlighted_line_background: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
editor_invisible: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
editor_line_number: neutral().dark_alpha().step_10(),
editor_subheader_background: neutral().dark().step_3(),
editor_wrap_guide: neutral().dark_alpha().step_4(), // todo!("pick the right colors")
element_active: neutral().dark_alpha().step_5(),
element_background: neutral().dark().step_3(),
element_disabled: neutral().dark_alpha().step_3(),
element_hover: neutral().dark_alpha().step_4(),
element_selected: neutral().dark_alpha().step_5(),
elevated_surface_background: neutral().dark().step_2(),
emphasis: neutral().dark().step_12(),
ghost_element_active: neutral().dark_alpha().step_5(),
ghost_element_background: system.transparent,
ghost_element_disabled: neutral().dark_alpha().step_3(),
ghost_element_hover: neutral().dark_alpha().step_4(),
ghost_element_selected: neutral().dark_alpha().step_5(),
headline: blue().dark().step_9(),
icon: neutral().dark().step_11(),
icon_accent: blue().dark().step_11(),
icon_disabled: neutral().dark().step_9(),
icon_muted: neutral().dark().step_10(),
icon_placeholder: neutral().dark().step_10(),
inline_code_background: gpui::transparent_black(),
inline_code_border: gpui::transparent_black(),
link_text: orange().dark().step_9(),
link_text_hover: orange().dark().step_10(),
link_uri: green().dark().step_9(),
pane_focused_border: blue().dark().step_5(),
panel_background: neutral().dark().step_2(),
panel_focused_border: blue().dark().step_5(),
paragraph: neutral().dark().step_12(),
scrollbar_thumb_background: neutral().dark_alpha().step_3(),
scrollbar_thumb_border: gpui::transparent_black(),
scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(),
scrollbar_track_background: gpui::transparent_black(),
scrollbar_track_border: neutral().dark().step_5(),
search_match_background: neutral().dark().step_2(), // todo!(this was inserted by Mikayla)
status_bar_background: neutral().dark().step_2(),
surface_background: neutral().dark().step_2(),
tab_active_background: neutral().dark().step_1(),
tab_bar_background: neutral().dark().step_2(),
tab_inactive_background: neutral().dark().step_2(),
terminal_ansi_black: black().dark().step_12(),
terminal_ansi_red: red().dark().step_11(),
terminal_ansi_green: green().dark().step_11(),
terminal_ansi_yellow: yellow().dark().step_11(),
terminal_ansi_blue: blue().dark().step_11(),
terminal_ansi_magenta: violet().dark().step_11(),
terminal_ansi_cyan: cyan().dark().step_11(),
terminal_ansi_white: neutral().dark().step_12(),
terminal_ansi_bright_black: black().dark().step_11(),
terminal_ansi_bright_red: red().dark().step_10(),
terminal_ansi_bright_green: green().dark().step_10(),
terminal_ansi_bright_yellow: yellow().dark().step_10(),
terminal_ansi_bright_blue: blue().dark().step_10(),
terminal_ansi_bright_magenta: violet().dark().step_10(),
terminal_ansi_bright_cyan: cyan().dark().step_10(),
terminal_ansi_bright_green: green().dark().step_10(),
terminal_ansi_bright_magenta: violet().dark().step_10(),
terminal_ansi_bright_red: red().dark().step_10(),
terminal_ansi_bright_white: neutral().dark().step_11(),
terminal_ansi_bright_yellow: yellow().dark().step_10(),
terminal_ansi_cyan: cyan().dark().step_11(),
terminal_ansi_green: green().dark().step_11(),
terminal_ansi_magenta: violet().dark().step_11(),
terminal_ansi_red: red().dark().step_11(),
terminal_ansi_white: neutral().dark().step_12(),
terminal_ansi_yellow: yellow().dark().step_11(),
terminal_background: neutral().dark().step_1(),
text: neutral().dark().step_12(),
text_accent: blue().dark().step_11(),
text_disabled: neutral().dark().step_9(),
text_muted: neutral().dark().step_11(),
text_placeholder: neutral().dark().step_10(),
title_bar_background: neutral().dark().step_2(),
toolbar_background: neutral().dark().step_1(),
}
}
}

View file

@ -1,5 +1,7 @@
use std::sync::Arc;
use crate::prelude::*;
use crate::{
default_color_scales,
one_themes::{one_dark, one_family},
@ -18,6 +20,21 @@ fn zed_pro_daylight() -> Theme {
status: StatusColors::light(),
player: PlayerColors::light(),
syntax: Arc::new(SyntaxTheme::light()),
accents: vec![
blue().light().step_9(),
orange().light().step_9(),
pink().light().step_9(),
lime().light().step_9(),
purple().light().step_9(),
amber().light().step_9(),
jade().light().step_9(),
tomato().light().step_9(),
cyan().light().step_9(),
gold().light().step_9(),
grass().light().step_9(),
indigo().light().step_9(),
iris().light().step_9(),
],
},
}
}
@ -33,6 +50,21 @@ pub(crate) fn zed_pro_moonlight() -> Theme {
status: StatusColors::dark(),
player: PlayerColors::dark(),
syntax: Arc::new(SyntaxTheme::dark()),
accents: vec![
blue().dark().step_9(),
orange().dark().step_9(),
pink().dark().step_9(),
lime().dark().step_9(),
purple().dark().step_9(),
amber().dark().step_9(),
jade().dark().step_9(),
tomato().dark().step_9(),
cyan().dark().step_9(),
gold().dark().step_9(),
grass().dark().step_9(),
indigo().dark().step_9(),
iris().dark().step_9(),
],
},
}
}

View file

@ -23,6 +23,7 @@ pub(crate) fn one_dark() -> Theme {
let elevated_surface = hsla(225. / 360., 12. / 100., 17. / 100., 1.);
let blue = hsla(207.8 / 360., 81. / 100., 66. / 100., 1.0);
let light_gray = hsla(218.8 / 360., 14. / 100., 71. / 100., 1.0);
let gray = hsla(218.8 / 360., 10. / 100., 40. / 100., 1.0);
let green = hsla(95. / 360., 38. / 100., 62. / 100., 1.0);
let orange = hsla(29. / 360., 54. / 100., 61. / 100., 1.0);
@ -113,6 +114,25 @@ pub(crate) fn one_dark() -> Theme {
terminal_ansi_bright_magenta: crate::violet().dark().step_10(),
terminal_ansi_bright_cyan: crate::cyan().dark().step_10(),
terminal_ansi_bright_white: crate::neutral().dark().step_11(),
panel_background: bg,
panel_focused_border: blue,
pane_focused_border: blue,
scrollbar_thumb_background: gpui::transparent_black(),
scrollbar_thumb_hover_background: hsla(225.0 / 360., 11.8 / 100., 26.7 / 100., 1.0),
scrollbar_thumb_border: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
scrollbar_track_background: gpui::transparent_black(),
scrollbar_track_border: hsla(228. / 360., 8. / 100., 25. / 100., 1.),
editor_foreground: hsla(218. / 360., 14. / 100., 71. / 100., 1.),
headline: hsla(355. / 360., 65. / 100., 65. / 100., 1.),
paragraph: light_gray,
link_text: blue,
link_text_hover: blue,
link_uri: teal,
inline_code_background: gpui::transparent_black(),
inline_code_border: gpui::transparent_black(),
code_block_background: gpui::transparent_black(),
code_block_border: gpui::transparent_black(),
emphasis: orange,
},
status: StatusColors {
conflict: yellow,
@ -195,6 +215,7 @@ pub(crate) fn one_dark() -> Theme {
("variant".into(), HighlightStyle::default()),
],
}),
accents: vec![blue, orange, purple, teal],
},
}
}

View file

@ -0,0 +1,6 @@
#[allow(unused)]
pub(crate) use crate::default_colors::{
amber, black, blue, bronze, brown, crimson, cyan, gold, grass, gray, green, indigo, iris, jade,
lime, mauve, mint, olive, orange, pink, plum, purple, red, ruby, sage, sand, sky, slate, teal,
tomato, violet, white, yellow,
};

View file

@ -87,6 +87,7 @@ impl ThemeRegistry {
Appearance::Dark => PlayerColors::dark(),
},
syntax: Arc::new(syntax_colors),
accents: Vec::new(),
},
}
}));

View file

@ -115,24 +115,26 @@ pub struct ThemeColors {
pub tab_inactive_background: Hsla,
pub tab_active_background: Hsla,
pub search_match_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 panel_background: Hsla,
pub panel_focused_border: 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_foreground: Hsla,
pub editor_background: Hsla,
// pub editor_inactive_background: Hsla,
pub editor_gutter_background: Hsla,
@ -149,7 +151,17 @@ pub struct ThemeColors {
pub editor_invisible: Hsla,
pub editor_wrap_guide: Hsla,
pub editor_active_wrap_guide: Hsla,
/// Read-access of a symbol, like reading a variable.
///
/// A document highlight is a range inside a text document which deserves
/// special attention. Usually a document highlight is visualized by changing
/// the background color of its range.
pub editor_document_highlight_read_background: Hsla,
/// Read-access of a symbol, like reading a variable.
///
/// A document highlight is a range inside a text document which deserves
/// special attention. Usually a document highlight is visualized by changing
/// the background color of its range.
pub editor_document_highlight_write_background: Hsla,
// ===
@ -189,38 +201,29 @@ pub struct ThemeColors {
pub terminal_ansi_cyan: Hsla,
/// White Color for ANSI Terminal
pub terminal_ansi_white: Hsla,
// new colors
// ===
// Elevation
// UI/Rich Text
// ===
// 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
// ===
// 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,
pub headline: Hsla,
pub paragraph: Hsla,
pub link_text: Hsla,
pub link_text_hover: Hsla,
pub link_uri: Hsla,
pub inline_code_background: Hsla,
pub inline_code_border: Hsla,
pub code_block_background: Hsla,
pub code_block_border: Hsla,
pub emphasis: Hsla,
}
#[derive(Refineable, Clone)]
pub struct ThemeStyles {
pub system: SystemColors,
/// An array of colors used for theme elements that iterrate through a series of colors.
///
/// Example: Player colors, rainbow brackets and indent guides, etc.
pub accents: Vec<Hsla>,
#[refineable]
pub colors: ThemeColors,

View file

@ -1,6 +1,7 @@
mod default_colors;
mod default_theme;
mod one_themes;
pub mod prelude;
mod registry;
mod scale;
mod settings;