From f35db249a6de19a447be3e10b8da0c55f7463ce4 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Thu, 17 Oct 2024 19:14:42 +0800 Subject: [PATCH] theme: Update GPUI and imporve dark color. (#358) ## Before image ## After image --- Cargo.lock | 24 ++++++------- crates/story/src/modal_story.rs | 3 +- crates/ui/src/drawer.rs | 3 +- crates/ui/src/theme.rs | 60 ++++++++++++++++++--------------- crates/ui/src/title_bar.rs | 9 +++-- 5 files changed, 54 insertions(+), 45 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 2b8d30dd..be2a874f 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -474,7 +474,7 @@ dependencies = [ "bitflags 2.6.0", "cexpr", "clang-sys", - "itertools 0.13.0", + "itertools 0.11.0", "log", "prettyplease", "proc-macro2", @@ -947,7 +947,7 @@ dependencies = [ [[package]] name = "collections" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "rustc-hash", ] @@ -1282,7 +1282,7 @@ dependencies = [ [[package]] name = "derive_refineable" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "proc-macro2", "quote", @@ -2223,7 +2223,7 @@ dependencies = [ [[package]] name = "gpui" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "anyhow", "as-raw-xcb-connection", @@ -2322,7 +2322,7 @@ dependencies = [ [[package]] name = "gpui_macros" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "proc-macro2", "quote", @@ -2506,7 +2506,7 @@ dependencies = [ [[package]] name = "http_client" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "anyhow", "bytes", @@ -3023,7 +3023,7 @@ dependencies = [ [[package]] name = "media" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "anyhow", "bindgen", @@ -3325,7 +3325,7 @@ version = "0.7.3" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "af1844ef2428cc3e1cb900be36181049ef3d3193c63e43026cfe202983b27a56" dependencies = [ - "proc-macro-crate 3.1.0", + "proc-macro-crate 1.3.1", "proc-macro2", "quote", "syn 2.0.71", @@ -4288,7 +4288,7 @@ dependencies = [ [[package]] name = "refineable" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "derive_refineable", ] @@ -4591,7 +4591,7 @@ checksum = "d369a96f978623eb3dc28807c4852d6cc617fed53da5d3c400feff1ef34a714a" [[package]] name = "semantic_version" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "anyhow", "serde", @@ -5008,7 +5008,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292" [[package]] name = "sum_tree" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "arrayvec", "log", @@ -5616,7 +5616,7 @@ checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9" [[package]] name = "util" version = "0.1.0" -source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#e681a4bad2503f0cd8dec16d29591318a344a06a" +source = "git+https://github.com/huacnlee/zed.git?branch=export-platform-window#d048d70f8d4349dddbae0bea280d3264d87ba22f" dependencies = [ "anyhow", "async-fs 1.6.0", diff --git a/crates/story/src/modal_story.rs b/crates/story/src/modal_story.rs index fe5982f6..5e1955a8 100644 --- a/crates/story/src/modal_story.rs +++ b/crates/story/src/modal_story.rs @@ -289,8 +289,7 @@ impl ModalStory { let overlay = self.modal_overlay; cx.open_drawer(move |this, cx| { - this.margin_top(px(33.)) - .placement(placement) + this.placement(placement) .overlay(overlay) .size(px(400.)) .title("Drawer Title") diff --git a/crates/ui/src/drawer.rs b/crates/ui/src/drawer.rs index 04af6257..afcfb055 100644 --- a/crates/ui/src/drawer.rs +++ b/crates/ui/src/drawer.rs @@ -14,6 +14,7 @@ use crate::{ root::ContextModal as _, scroll::ScrollbarAxis, theme::ActiveTheme, + title_bar::TITLE_BAR_HEIGHT, v_flex, IconName, Placement, Sizable, StyledExt as _, }; @@ -48,7 +49,7 @@ impl Drawer { title: None, footer: None, content: v_flex(), - margin_top: px(0.), + margin_top: TITLE_BAR_HEIGHT, overlay: true, on_close: Rc::new(|_, _| {}), } diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index e0078957..d86cf062 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -144,6 +144,7 @@ impl Colorize for Hsla { #[derive(Debug, Clone, Copy)] struct Colors { pub title_bar_background: Hsla, + pub title_bar_border: Hsla, pub background: Hsla, pub foreground: Hsla, pub card: Hsla, @@ -186,6 +187,7 @@ impl Colors { fn light() -> Colors { Colors { title_bar_background: hsl(0.0, 0.0, 100.), + title_bar_border: hsl(240.0, 5.9, 90.0), background: hsl(0.0, 0.0, 100.), foreground: hsl(240.0, 10., 3.9), card: hsl(0.0, 0.0, 100.0), @@ -196,9 +198,9 @@ impl Colors { primary_hover: hsl(223.0, 5.9, 15.0), primary_active: hsl(223.0, 1.9, 25.0), primary_foreground: hsl(223.0, 0.0, 98.0), - secondary: hsl(240.0, 4.8, 95.9), - secondary_hover: hsl(240.0, 5.8, 10.).opacity(0.05), - secondary_active: hsl(240.0, 5.9, 10.).opacity(0.1), + secondary: hsl(240.0, 5.9, 96.9), + secondary_hover: hsl(240.0, 5.9, 98.), + secondary_active: hsl(240.0, 5.9, 93.), secondary_foreground: hsl(240.0, 59.0, 10.), destructive: hsl(0.0, 84.2, 60.2), destructive_hover: hsl(0.0, 84.2, 65.0), @@ -227,41 +229,42 @@ impl Colors { fn dark() -> Colors { Colors { - title_bar_background: hsl(0., 0., 12.), - background: hsl(0.0, 0.0, 6.0), - foreground: hsl(0., 0., 98.), - card: hsl(299.0, 2., 9.), - card_foreground: hsl(0.0, 0.0, 98.0), - popover: hsl(240.0, 10.0, 3.9), - popover_foreground: hsl(0.0, 0.0, 98.0), + title_bar_background: hsl(0., 0., 9.7), + title_bar_border: hsl(240.0, 3.7, 15.9), + background: hsl(0.0, 0.0, 8.0), + foreground: hsl(0., 0., 78.), + card: hsl(299.0, 2., 11.), + card_foreground: hsl(0.0, 0.0, 78.0), + popover: hsl(0.0, 0.0, 10.), + popover_foreground: hsl(0.0, 0.0, 78.0), primary: hsl(223.0, 0.0, 98.0), primary_hover: hsl(223.0, 0.0, 90.0), primary_active: hsl(223.0, 0.0, 80.0), primary_foreground: hsl(223.0, 5.9, 10.0), - secondary: hsl(240.0, 3.7, 15.9), - secondary_hover: hsl(240.0, 3.7, 20.9).opacity(0.5), - secondary_active: hsl(240.0, 3.7, 20.9).opacity(0.8), - secondary_foreground: hsl(0.0, 0.0, 98.0), + secondary: hsl(240.0, 3.7, 17.9), + secondary_hover: hsl(240.0, 3.7, 22.9).opacity(0.5), + secondary_active: hsl(240.0, 3.7, 22.9).opacity(0.8), + secondary_foreground: hsl(0.0, 0.0, 78.0), destructive: hsl(0.0, 62.8, 30.6), destructive_hover: hsl(0.0, 62.8, 35.6), destructive_active: hsl(0.0, 62.8, 20.6), - destructive_foreground: hsl(0.0, 0.0, 98.0), + destructive_foreground: hsl(0.0, 0.0, 78.0), muted: hsl(240.0, 3.7, 15.9), muted_foreground: hsl(240.0, 5.0, 64.9), accent: hsl(240.0, 3.7, 15.9), - accent_foreground: hsl(0.0, 0.0, 98.0), - border: hsl(240.0, 3.7, 15.9), + accent_foreground: hsl(0.0, 0.0, 78.0), + border: hsl(240.0, 3.7, 16.9), input: hsl(240.0, 3.7, 15.9), ring: hsl(240.0, 4.9, 83.9), selection: hsl(211.0, 97.0, 22.0), scrollbar: hsl(240., 1., 15.).opacity(0.3), scrollbar_thumb: hsl(0., 0., 68.), - panel: hsl(299.0, 2., 9.), - tab_bar: hsl(299.0, 2., 9.), - list: hsl(0.0, 0.0, 6.0), - list_even: hsl(240.0, 3.7, 8.0), - list_active: hsl(240.0, 3.7, 15.0), - list_head: hsl(0.0, 0.0, 6.0), + panel: hsl(299.0, 2., 11.), + tab_bar: hsl(299.0, 0., 5.5), + list: hsl(0.0, 0.0, 8.0), + list_even: hsl(240.0, 3.7, 10.0), + list_active: hsl(240.0, 3.7, 17.0), + list_head: hsl(0.0, 0.0, 8.0), link: hsl(221.0, 83.0, 53.0), drop_target: hsl(235.0, 30., 44.0).opacity(0.1), } @@ -273,6 +276,7 @@ pub struct Theme { pub mode: ThemeMode, pub transparent: Hsla, pub title_bar_background: Hsla, + pub title_bar_border: Hsla, /// Basic font size pub font_size: f32, pub font_family: SharedString, @@ -348,6 +352,7 @@ impl Theme { pub fn apply_color(&mut self, mask_color: Hsla) { self.title_bar_background = self.title_bar_background.apply(mask_color); + self.title_bar_border = self.title_bar_border.apply(mask_color); self.background = self.background.apply(mask_color); self.foreground = self.foreground.apply(mask_color); self.card = self.card.apply(mask_color); @@ -362,10 +367,10 @@ impl Theme { self.secondary_hover = self.secondary_hover.apply(mask_color); self.secondary_active = self.secondary_active.apply(mask_color); self.secondary_foreground = self.secondary_foreground.apply(mask_color); - self.destructive = self.destructive.apply(mask_color); - self.destructive_hover = self.destructive_hover.apply(mask_color); - self.destructive_active = self.destructive_active.apply(mask_color); - self.destructive_foreground = self.destructive_foreground.apply(mask_color); + // self.destructive = self.destructive.apply(mask_color); + // self.destructive_hover = self.destructive_hover.apply(mask_color); + // self.destructive_active = self.destructive_active.apply(mask_color); + // self.destructive_foreground = self.destructive_foreground.apply(mask_color); self.muted = self.muted.apply(mask_color); self.muted_foreground = self.muted_foreground.apply(mask_color); self.accent = self.accent.apply(mask_color); @@ -424,6 +429,7 @@ impl From for Theme { radius: 4.0, shadow: true, title_bar_background: colors.title_bar_background, + title_bar_border: colors.title_bar_border, background: colors.background, foreground: colors.foreground, card: colors.card, diff --git a/crates/ui/src/title_bar.rs b/crates/ui/src/title_bar.rs index 73c596e3..4f44c497 100644 --- a/crates/ui/src/title_bar.rs +++ b/crates/ui/src/title_bar.rs @@ -1,7 +1,7 @@ use crate::{h_flex, theme::ActiveTheme, Icon, IconName, InteractiveElementExt as _, Sizable as _}; use gpui::{ div, prelude::FluentBuilder as _, px, AnyElement, Hsla, InteractiveElement as _, IntoElement, - ParentElement, RenderOnce, StatefulInteractiveElement as _, Styled, WindowContext, + ParentElement, Pixels, RenderOnce, StatefulInteractiveElement as _, Styled, WindowContext, }; /// TitleBar used to customize the appearance of the title bar. @@ -12,6 +12,8 @@ pub struct TitleBar { children: Vec, } +pub const TITLE_BAR_HEIGHT: Pixels = px(35.); + impl TitleBar { pub fn new() -> Self { Self { @@ -120,7 +122,7 @@ impl RenderOnce for ControlIcon { .id(self.id()) .flex() .cursor_pointer() - .w(px(35.)) + .w(TITLE_BAR_HEIGHT) .h_full() .justify_center() .content_center() @@ -189,7 +191,8 @@ impl RenderOnce for TitleBar { this.when_some(macos_pl, |this, pl| this.pl(pl)) }) .border_b_1() - .border_color(cx.theme().border) + .border_color(cx.theme().title_bar_border) + .bg(cx.theme().title_bar_background) .on_double_click(|_, cx| cx.zoom_window()) .child( h_flex()