root: Fix window border and add cx.theme().window_border

Author: huacnlee

crates/story/examples/tiles.rs

@@ -223,12 +223,8 @@ impl Render for StoryTiles {
         let drawer_layer = Root::render_drawer_layer(cx);
         let modal_layer = Root::render_modal_layer(cx);
         let notification_layer = Root::render_notification_layer(cx);
-        let is_linux = cfg!(target_os = "linux");
 
         div()
-            .when(is_linux, |this| {
-                this.border_1().border_color(cx.theme().border)
-            })
             .font_family(".SystemUIFont")
             .relative()
             .size_full()

crates/story/src/main.rs

@@ -451,13 +451,9 @@ impl Render for StoryWorkspace {
         let notification_layer = Root::render_notification_layer(cx);
         let notifications_count = cx.notifications().len();
         let invisible_panels = AppState::global(cx).invisible_panels.clone();
-        let is_linux = cfg!(target_os = "linux");
 
         div()
             .id("story-workspace")
-            .when(is_linux, |this| {
-                this.border_1().border_color(cx.theme().border)
-            })
             .on_action(cx.listener(Self::on_action_add_panel))
             .on_action(cx.listener(Self::on_action_toggle_panel_visible))
             .relative()

crates/ui/src/theme.rs

@@ -155,6 +155,7 @@ pub struct ThemeColor {
     pub accordion_hover: Hsla,
     pub background: Hsla,
     pub border: Hsla,
+    pub window_border: Hsla,
     pub card: Hsla,
     pub card_foreground: Hsla,
     pub destructive: Hsla,
@@ -230,6 +231,7 @@ impl ThemeColor {
             accordion_hover: hsl(240.0, 4.8, 95.9).opacity(0.7),
             background: hsl(0.0, 0.0, 100.),
             border: hsl(240.0, 5.9, 90.0),
+            window_border: hsl(240.0, 5.9, 78.0),
             card: hsl(0.0, 0.0, 100.0),
             card_foreground: hsl(240.0, 10.0, 3.9),
             destructive: hsl(0.0, 84.2, 60.2),
@@ -305,6 +307,7 @@ impl ThemeColor {
             accordion_hover: hsl(240.0, 3.7, 15.9).opacity(0.7),
             background: hsl(0.0, 0.0, 8.0),
             border: hsl(240.0, 3.7, 16.9),
+            window_border: hsl(240.0, 3.7, 28.0),
             card: hsl(0.0, 0.0, 8.0),
             card_foreground: hsl(0.0, 0.0, 78.0),
             destructive: hsl(0.0, 62.8, 30.6),

crates/ui/src/window_border.rs

@@ -6,8 +6,10 @@ use gpui::{
     Point, RenderOnce, ResizeEdge, Size, Styled as _, WindowContext,
 };
 
+use crate::theme::ActiveTheme;
+
 const SHADOW_SIZE: Pixels = Pixels(12.0);
-const BORDER_SIZE: Pixels = Pixels(0.0);
+const BORDER_SIZE: Pixels = Pixels(1.0);
 pub(crate) const BORDER_RADIUS: Pixels = Pixels(0.0);
 
 /// Create a new window border.
@@ -120,6 +122,7 @@ impl RenderOnce for WindowBorder {
                             .when(!(tiling.top || tiling.left), |div| {
                                 div.rounded_tl(BORDER_RADIUS)
                             })
+                            .border_color(cx.theme().window_border)
                             .when(!tiling.top, |div| div.border_t(BORDER_SIZE))
                             .when(!tiling.bottom, |div| div.border_b(BORDER_SIZE))
                             .when(!tiling.left, |div| div.border_l(BORDER_SIZE))