mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-30 22:34:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Update default theme player colors and add players story (#3263)

Browse source 
[[PR Description]]

- Update the default theme player colors for `Zed Pro Moonlight` and
`Zed Pro Daylight`
- Adds the ability to create stories in the `theme2` crate


![image](https://github.com/zed-industries/zed/assets/1714999/61fca222-1512-43b1-a229-fae1080d07fa)

You can see them by running:
- `cargo run -p storybook2 -- components/players --theme "Zed Pro
Daylight"`
- `cargo run -p storybook2 -- components/players --theme`

The player colors crisscross back and forth on the color wheel so that
the colors are as distinct as possible.


![image](https://github.com/zed-industries/zed/assets/1714999/255c9fd2-34da-4f75-9aad-0dd02f7009bf)

We do have room to add additional players if needed. Just let me know if
we feel like the default 8 aren't cutting it.


Release Notes:

- N/A
This commit is contained in:
Nate Butler 2023-11-07 22:00:49 -05:00 committed by GitHub
commit 776338d27a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 338 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Cargo.lock generated
View file

@ -9005,6 +9005,7 @@ dependencies = [
"fs2",
"gpui2",
"indexmap 1.9.3",
"itertools 0.11.0",
"parking_lot 0.11.2",
"refineable",
"schemars",

2
crates/storybook2/src/story_selector.rs
View file

@ -38,6 +38,7 @@ pub enum ComponentStory {
Palette,
Panel,
ProjectPanel,
Players,
RecentProjects,
Scroll,
Tab,
@ -79,6 +80,7 @@ impl ComponentStory {
Self::MultiBuffer => cx.build_view(|_| ui::MultiBufferStory).into(),
Self::NotificationsPanel => cx.build_view(|cx| ui::NotificationsPanelStory).into(),
Self::Palette => cx.build_view(|cx| ui::PaletteStory).into(),
Self::Players => cx.build_view(|_| theme2::PlayerStory).into(),
Self::Panel => cx.build_view(|cx| ui::PanelStory).into(),
Self::ProjectPanel => cx.build_view(|_| ui::ProjectPanelStory).into(),
Self::RecentProjects => cx.build_view(|_| ui::RecentProjectsStory).into(),

3
crates/theme2/Cargo.toml
View file

@ -5,6 +5,8 @@ edition = "2021"
publish = false
[features]
default = ["stories"]
stories = ["dep:itertools"]
test-support = [
"gpui/test-support",
"fs/test-support",
@ -30,6 +32,7 @@ settings = { package = "settings2", path = "../settings2" }
toml.workspace = true
uuid.workspace = true
util = { path = "../util" }
itertools = { version = "0.11.0", optional = true }
[dev-dependencies]
gpui = { package = "gpui2", path = "../gpui2", features = ["test-support"] }

29
crates/theme2/src/colors.rs
View file

@ -3,7 +3,7 @@ use std::sync::Arc;
use gpui::Hsla;
use refineable::Refineable;
use crate::SyntaxTheme;
use crate::{PlayerColors, SyntaxTheme};
#[derive(Clone)]
pub struct SystemColors {
@ -13,33 +13,6 @@ pub struct SystemColors {
pub mac_os_traffic_light_green: Hsla,
}
#[derive(Debug, Clone, Copy)]
pub struct PlayerColor {
pub cursor: Hsla,
pub background: Hsla,
pub selection: Hsla,
}
#[derive(Clone)]
pub struct PlayerColors(pub Vec<PlayerColor>);
impl PlayerColors {
pub fn local(&self) -> PlayerColor {
// todo!("use a valid color");
*self.0.first().unwrap()
}
pub fn absent(&self) -> PlayerColor {
// todo!("use a valid color");
*self.0.last().unwrap()
}
pub fn color_for_participant(&self, participant_index: u32) -> PlayerColor {
let len = self.0.len() - 1;
self.0[(participant_index as usize % len) + 1]
}
}
#[derive(Refineable, Clone, Debug)]
#[refineable(debug)]
pub struct StatusColors {

159
crates/theme2/src/default_colors.rs
View file

@ -3,12 +3,106 @@ use std::num::ParseIntError;
use gpui::{hsla, Hsla, Rgba};
use crate::{
colors::{GitStatusColors, PlayerColor, PlayerColors, StatusColors, SystemColors, ThemeColors},
colors::{GitStatusColors, StatusColors, SystemColors, ThemeColors},
scale::{ColorScaleSet, ColorScales},
syntax::SyntaxTheme,
ColorScale,
ColorScale, PlayerColor, PlayerColors,
};
impl Default for PlayerColors {
fn default() -> Self {
Self(vec![
PlayerColor {
cursor: blue().dark().step_9(),
background: blue().dark().step_5(),
selection: blue().dark().step_3(),
},
PlayerColor {
cursor: orange().dark().step_9(),
background: orange().dark().step_5(),
selection: orange().dark().step_3(),
},
PlayerColor {
cursor: pink().dark().step_9(),
background: pink().dark().step_5(),
selection: pink().dark().step_3(),
},
PlayerColor {
cursor: lime().dark().step_9(),
background: lime().dark().step_5(),
selection: lime().dark().step_3(),
},
PlayerColor {
cursor: purple().dark().step_9(),
background: purple().dark().step_5(),
selection: purple().dark().step_3(),
},
PlayerColor {
cursor: amber().dark().step_9(),
background: amber().dark().step_5(),
selection: amber().dark().step_3(),
},
PlayerColor {
cursor: jade().dark().step_9(),
background: jade().dark().step_5(),
selection: jade().dark().step_3(),
},
PlayerColor {
cursor: red().dark().step_9(),
background: red().dark().step_5(),
selection: red().dark().step_3(),
},
])
}
}
impl PlayerColors {
pub fn default_light() -> Self {
Self(vec![
PlayerColor {
cursor: blue().light().step_9(),
background: blue().light().step_4(),
selection: blue().light().step_3(),
},
PlayerColor {
cursor: orange().light().step_9(),
background: orange().light().step_4(),
selection: orange().light().step_3(),
},
PlayerColor {
cursor: pink().light().step_9(),
background: pink().light().step_4(),
selection: pink().light().step_3(),
},
PlayerColor {
cursor: lime().light().step_9(),
background: lime().light().step_4(),
selection: lime().light().step_3(),
},
PlayerColor {
cursor: purple().light().step_9(),
background: purple().light().step_4(),
selection: purple().light().step_3(),
},
PlayerColor {
cursor: amber().light().step_9(),
background: amber().light().step_4(),
selection: amber().light().step_3(),
},
PlayerColor {
cursor: jade().light().step_9(),
background: jade().light().step_4(),
selection: jade().light().step_3(),
},
PlayerColor {
cursor: red().light().step_9(),
background: red().light().step_4(),
selection: red().light().step_3(),
},
])
}
}
fn neutral() -> ColorScaleSet {
slate()
}
@ -27,17 +121,17 @@ impl Default for SystemColors {
impl Default for StatusColors {
fn default() -> Self {
Self {
conflict: red().dark().step_11(),
created: grass().dark().step_11(),
deleted: red().dark().step_11(),
error: red().dark().step_11(),
hidden: neutral().dark().step_11(),
ignored: neutral().dark().step_11(),
info: blue().dark().step_11(),
modified: yellow().dark().step_11(),
renamed: blue().dark().step_11(),
success: grass().dark().step_11(),
warning: yellow().dark().step_11(),
conflict: red().dark().step_9(),
created: grass().dark().step_9(),
deleted: red().dark().step_9(),
error: red().dark().step_9(),
hidden: neutral().dark().step_9(),
ignored: neutral().dark().step_9(),
info: blue().dark().step_9(),
modified: yellow().dark().step_9(),
renamed: blue().dark().step_9(),
success: grass().dark().step_9(),
warning: yellow().dark().step_9(),
}
}
}
@ -45,43 +139,16 @@ impl Default for StatusColors {
impl Default for GitStatusColors {
fn default() -> Self {
Self {
conflict: orange().dark().step_11(),
created: grass().dark().step_11(),
deleted: red().dark().step_11(),
ignored: neutral().dark().step_11(),
modified: yellow().dark().step_11(),
renamed: blue().dark().step_11(),
conflict: orange().dark().step_9(),
created: grass().dark().step_9(),
deleted: red().dark().step_9(),
ignored: neutral().dark().step_9(),
modified: yellow().dark().step_9(),
renamed: blue().dark().step_9(),
}
}
}
impl Default for PlayerColors {
fn default() -> Self {
Self(vec![
PlayerColor {
cursor: hsla(0.0, 0.0, 0.0, 1.0),
background: hsla(0.0, 0.0, 0.0, 1.0),
selection: hsla(0.0, 0.0, 0.0, 1.0),
},
PlayerColor {
cursor: hsla(0.0, 0.0, 0.0, 1.0),
background: hsla(0.0, 0.0, 0.0, 1.0),
selection: hsla(0.0, 0.0, 0.0, 1.0),
},
PlayerColor {
cursor: hsla(0.0, 0.0, 0.0, 1.0),
background: hsla(0.0, 0.0, 0.0, 1.0),
selection: hsla(0.0, 0.0, 0.0, 1.0),
},
PlayerColor {
cursor: hsla(0.0, 0.0, 0.0, 1.0),
background: hsla(0.0, 0.0, 0.0, 1.0),
selection: hsla(0.0, 0.0, 0.0, 1.0),
},
])
}
}
impl SyntaxTheme {
pub fn default_light() -> Self {
Self {

6
crates/theme2/src/default_theme.rs
View file

@ -1,8 +1,8 @@
use std::sync::Arc;
use crate::{
colors::{GitStatusColors, PlayerColors, StatusColors, SystemColors, ThemeColors, ThemeStyles},
default_color_scales, Appearance, SyntaxTheme, Theme, ThemeFamily,
colors::{GitStatusColors, StatusColors, SystemColors, ThemeColors, ThemeStyles},
default_color_scales, Appearance, PlayerColors, SyntaxTheme, Theme, ThemeFamily,
};
fn zed_pro_daylight() -> Theme {
@ -15,7 +15,7 @@ fn zed_pro_daylight() -> Theme {
colors: ThemeColors::default_light(),
status: StatusColors::default(),
git: GitStatusColors::default(),
player: PlayerColors::default(),
player: PlayerColors::default_light(),
syntax: Arc::new(SyntaxTheme::default_light()),
},
}

170
crates/theme2/src/players.rs Normal file
View file

@ -0,0 +1,170 @@
use gpui::Hsla;
#[derive(Debug, Clone, Copy)]
pub struct PlayerColor {
pub cursor: Hsla,
pub background: Hsla,
pub selection: Hsla,
}
/// A collection of colors that are used to color players in the editor.
///
/// The first color is always the local player's color, usually a blue.
///
/// The rest of the default colors crisscross back and forth on the
/// color wheel so that the colors are as distinct as possible.
#[derive(Clone)]
pub struct PlayerColors(pub Vec<PlayerColor>);
impl PlayerColors {
pub fn local(&self) -> PlayerColor {
// todo!("use a valid color");
*self.0.first().unwrap()
}
pub fn absent(&self) -> PlayerColor {
// todo!("use a valid color");
*self.0.last().unwrap()
}
pub fn color_for_participant(&self, participant_index: u32) -> PlayerColor {
let len = self.0.len() - 1;
self.0[(participant_index as usize % len) + 1]
}
}
#[cfg(feature = "stories")]
pub use stories::*;
#[cfg(feature = "stories")]
mod stories {
use super::*;
use crate::{ActiveTheme, Story};
use gpui::{div, img, px, Div, ParentElement, Render, Styled, ViewContext};
pub struct PlayerStory;
impl Render for PlayerStory {
type Element = Div<Self>;
fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
Story::container(cx).child(
div()
.flex()
.flex_col()
.gap_4()
.child(Story::title_for::<_, PlayerColors>(cx))
.child(Story::label(cx, "Player Colors"))
.child(
div()
.flex()
.flex_col()
.gap_1()
.child(
div().flex().gap_1().children(
cx.theme().players().0.clone().iter_mut().map(|player| {
div().w_8().h_8().rounded_md().bg(player.cursor)
}),
),
)
.child(div().flex().gap_1().children(
cx.theme().players().0.clone().iter_mut().map(|player| {
div().w_8().h_8().rounded_md().bg(player.background)
}),
))
.child(div().flex().gap_1().children(
cx.theme().players().0.clone().iter_mut().map(|player| {
div().w_8().h_8().rounded_md().bg(player.selection)
}),
)),
)
.child(Story::label(cx, "Avatar Rings"))
.child(div().flex().gap_1().children(
cx.theme().players().0.clone().iter_mut().map(|player| {
div()
.my_1()
.rounded_full()
.border_2()
.border_color(player.cursor)
.child(
img()
.rounded_full()
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
.size_6()
.bg(gpui::red()),
)
}),
))
.child(Story::label(cx, "Player Backgrounds"))
.child(div().flex().gap_1().children(
cx.theme().players().0.clone().iter_mut().map(|player| {
div()
.my_1()
.rounded_xl()
.flex()
.items_center()
.h_8()
.py_0p5()
.px_1p5()
.bg(player.background)
.child(
div().relative().neg_mx_1().rounded_full().z_index(3)
.border_2()
.border_color(player.background)
.size(px(28.))
.child(
img()
.rounded_full()
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
.size(px(24.))
.bg(gpui::red()),
),
).child(
div().relative().neg_mx_1().rounded_full().z_index(2)
.border_2()
.border_color(player.background)
.size(px(28.))
.child(
img()
.rounded_full()
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
.size(px(24.))
.bg(gpui::red()),
),
).child(
div().relative().neg_mx_1().rounded_full().z_index(1)
.border_2()
.border_color(player.background)
.size(px(28.))
.child(
img()
.rounded_full()
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
.size(px(24.))
.bg(gpui::red()),
),
)
}),
))
.child(Story::label(cx, "Player Selections"))
.child(div().flex().flex_col().gap_px().children(
cx.theme().players().0.clone().iter_mut().map(|player| {
div()
.flex()
.child(
div()
.flex()
.flex_none()
.rounded_sm()
.px_0p5()
.text_color(cx.theme().colors().text)
.bg(player.selection)
.child("The brown fox jumped over the lazy dog."),
)
.child(div().flex_1())
}),
)),
)
}
}
}

38
crates/theme2/src/story.rs Normal file
View file

@ -0,0 +1,38 @@
use gpui::{div, Component, Div, ParentElement, Styled, ViewContext};
use crate::ActiveTheme;
pub struct Story {}
impl Story {
pub fn container<V: 'static>(cx: &mut ViewContext<V>) -> Div<V> {
div()
.size_full()
.flex()
.flex_col()
.pt_2()
.px_4()
.font("Zed Mono")
.bg(cx.theme().colors().background)
}
pub fn title<V: 'static>(cx: &mut ViewContext<V>, title: &str) -> impl Component<V> {
div()
.text_xl()
.text_color(cx.theme().colors().text)
.child(title.to_owned())
}
pub fn title_for<V: 'static, T>(cx: &mut ViewContext<V>) -> impl Component<V> {
Self::title(cx, std::any::type_name::<T>())
}
pub fn label<V: 'static>(cx: &mut ViewContext<V>, label: &str) -> impl Component<V> {
div()
.mt_4()
.mb_2()
.text_xs()
.text_color(cx.theme().colors().text)
.child(label.to_owned())
}
}

7
crates/theme2/src/theme2.rs
View file

@ -1,6 +1,7 @@
mod colors;
mod default_colors;
mod default_theme;
mod players;
mod registry;
mod scale;
mod settings;
@ -14,6 +15,7 @@ use ::settings::Settings;
pub use colors::*;
pub use default_colors::*;
pub use default_theme::*;
pub use players::*;
pub use registry::*;
pub use scale::*;
pub use settings::*;
@ -120,3 +122,8 @@ pub struct DiagnosticStyle {
pub hint: Hsla,
pub ignored: Hsla,
}
#[cfg(feature = "stories")]
mod story;
#[cfg(feature = "stories")]
pub use story::*;