feat: add native material backgrounds

crates/layout/src/dock.rs

@@ -1078,8 +1078,10 @@ fn render_pane(
                 .w_full()
                 .h(titlebar.height)
                 .items_center()
-                .when(titlebar.traffic_light_pad, |bar| {
-                    bar.pl(px(TRAFFIC_LIGHT_PAD))
+                .pl(if titlebar.traffic_light_pad {
+                    px(TRAFFIC_LIGHT_PAD)
+                } else {
+                    padding_x
                 })
                 .pr(padding_x)
                 .child(tabs)

crates/layout/src/shell.rs

@@ -178,9 +178,11 @@ impl RenderOnce for Shell {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
         let theme = cx.theme();
         let metrics = theme.sizes.resolve(Size::default());
+        let background = theme.colors.background;
+        let titlebar_height = theme.titlebar_height;
 
-        let state = self.state;
         let id = self.id.clone();
+        let state = self.state;
 
         let mut left = self.left_sidebar;
         let mut right = self.right_sidebar;
@@ -188,6 +190,9 @@ impl RenderOnce for Shell {
 
         let left_visible = state.read(cx).is_left_sidebar_visible();
         let right_visible = state.read(cx).is_right_sidebar_visible();
+        let left_material = left
+            .as_ref()
+            .is_some_and(|sidebar| sidebar.is_transparent());
 
         let layout = div()
             .flex()
@@ -204,8 +209,9 @@ impl RenderOnce for Shell {
                             .map(|sidebar| sidebar.into_any_element())
                             .unwrap_or_else(|| div().into_any_element()),
                         Side::Left,
+                        left_material,
                         &state,
-                        metrics.strip_height,
+                        titlebar_height,
                         metrics.dense_padding_x,
                         window,
                         cx,
@@ -223,6 +229,7 @@ impl RenderOnce for Shell {
                     .h_full()
                     .min_w_0()
                     .overflow_hidden()
+                    .bg(background)
                     .child(center.take().unwrap_or_else(|| div().into_any_element())),
             )
             .when(right_visible && right.is_some(), |layout| {
@@ -238,8 +245,9 @@ impl RenderOnce for Shell {
                         width,
                         right.take().unwrap_or_else(|| div().into_any_element()),
                         Side::Right,
+                        false,
                         &state,
-                        metrics.strip_height,
+                        titlebar_height,
                         metrics.dense_padding_x,
                         window,
                         cx,
@@ -257,17 +265,26 @@ fn sidebar_region(
     width: Pixels,
     content: AnyElement,
     side: Side,
+    material: bool,
     state: &Entity<LayoutState>,
     strip_height: Pixels,
     padding_x: Pixels,
     window: &mut Window,
     cx: &mut App,
 ) -> AnyElement {
+    let theme = cx.theme();
+    let background = theme.colors.background;
+    let strip_background = match (side, material) {
+        (Side::Left, true) => theme.material.background,
+        _ => theme.colors.background,
+    };
+
     let strip = h_flex()
         .id(SharedString::from(format!("sidebar-strip-{}", side.name())))
         .debug_selector(move || format!("sidebar-strip-{}", side.name()))
         .flex_none()
         .h(strip_height)
+        .bg(strip_background)
         .items_center()
         .justify_end()
         .map(|strip| titlebar_strip(strip, window, cx))
@@ -305,6 +322,13 @@ fn sidebar_region(
         .h_full()
         .overflow_hidden()
         .child(strip)
-        .child(div().flex_1().min_h_0().overflow_hidden().child(content))
+        .child(
+            div()
+                .flex_1()
+                .min_h_0()
+                .overflow_hidden()
+                .when(!material, |content| content.bg(background))
+                .child(content),
+        )
         .into_any_element()
 }