theme: Update GPUI and imporve dark color. (#358)

## Before

<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/f4e74cf0-e386-4e91-86d1-05ee75b26471">

## After 

<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/da393ea9-79ee-4535-a46d-68684d7ad738">

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",

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.))
+            this.placement(placement)
-                .placement(placement)
                 .overlay(overlay)
                 .size(px(400.))
                 .title("Drawer Title")

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(|_, _| {}),
         }

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: hsl(240.0, 5.9, 96.9),
-            secondary_hover: hsl(240.0, 5.8, 10.).opacity(0.05),
+            secondary_hover: hsl(240.0, 5.9, 98.),
-            secondary_active: hsl(240.0, 5.9, 10.).opacity(0.1),
+            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.),
+            title_bar_background: hsl(0., 0., 9.7),
-            background: hsl(0.0, 0.0, 6.0),
+            title_bar_border: hsl(240.0, 3.7, 15.9),
-            foreground: hsl(0., 0., 98.),
+            background: hsl(0.0, 0.0, 8.0),
-            card: hsl(299.0, 2., 9.),
+            foreground: hsl(0., 0., 78.),
-            card_foreground: hsl(0.0, 0.0, 98.0),
+            card: hsl(299.0, 2., 11.),
-            popover: hsl(240.0, 10.0, 3.9),
+            card_foreground: hsl(0.0, 0.0, 78.0),
-            popover_foreground: hsl(0.0, 0.0, 98.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: hsl(240.0, 3.7, 17.9),
-            secondary_hover: hsl(240.0, 3.7, 20.9).opacity(0.5),
+            secondary_hover: hsl(240.0, 3.7, 22.9).opacity(0.5),
-            secondary_active: hsl(240.0, 3.7, 20.9).opacity(0.8),
+            secondary_active: hsl(240.0, 3.7, 22.9).opacity(0.8),
-            secondary_foreground: hsl(0.0, 0.0, 98.0),
+            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),
+            accent_foreground: hsl(0.0, 0.0, 78.0),
-            border: hsl(240.0, 3.7, 15.9),
+            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.),
+            panel: hsl(299.0, 2., 11.),
-            tab_bar: hsl(299.0, 2., 9.),
+            tab_bar: hsl(299.0, 0., 5.5),
-            list: hsl(0.0, 0.0, 6.0),
+            list: hsl(0.0, 0.0, 8.0),
-            list_even: hsl(240.0, 3.7, 8.0),
+            list_even: hsl(240.0, 3.7, 10.0),
-            list_active: hsl(240.0, 3.7, 15.0),
+            list_active: hsl(240.0, 3.7, 17.0),
-            list_head: hsl(0.0, 0.0, 6.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 = self.destructive.apply(mask_color);
-        self.destructive_hover = self.destructive_hover.apply(mask_color);
+        // self.destructive_hover = self.destructive_hover.apply(mask_color);
-        self.destructive_active = self.destructive_active.apply(mask_color);
+        // self.destructive_active = self.destructive_active.apply(mask_color);
-        self.destructive_foreground = self.destructive_foreground.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<Colors> 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,

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<AnyElement>,
 }
 
+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()