Add window glass effect for macOS Liquid Glass and Windows Mica

crates/story/src/gallery.rs

@@ -270,6 +270,9 @@ impl Render for Gallery {
                 v_flex()
                     .flex_1()
                     .h_full()
+                    // Content layer: opaque background covers the window glass
+                    // (only the navigation areas reveal it).
+                    .bg(cx.theme().background)
                     .overflow_x_hidden()
                     .child(
                         h_flex()

crates/story/src/lib.rs

@@ -56,7 +56,8 @@ actions!(
         Tab,
         TabPrev,
         ShowPanelInfo,
-        ToggleListActiveHighlight
+        ToggleListActiveHighlight,
+        ToggleWindowGlass
     ]
 );
 

crates/story/src/stories/alert_story.rs

@@ -21,7 +21,11 @@ pub struct AlertStory {
 
 impl AlertStory {
     fn new(_: &mut Window, cx: &mut Context<Self>) -> Self {
-        Self { size: Size::default(), banner_visible: true, focus_handle: cx.focus_handle() }
+        Self {
+            size: Size::default(),
+            banner_visible: true,
+            focus_handle: cx.focus_handle(),
+        }
     }
 
     pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
@@ -67,13 +71,25 @@ impl Render for AlertStory {
                     .outline()
                     .compact()
                     .child(
-                        Button::new("xsmall").label("XSmall").selected(self.size == Size::XSmall),
+                        Button::new("xsmall")
+                            .label("XSmall")
+                            .selected(self.size == Size::XSmall),
                     )
-                    .child(Button::new("small").label("Small").selected(self.size == Size::Small))
                     .child(
-                        Button::new("medium").label("Medium").selected(self.size == Size::Medium),
+                        Button::new("small")
+                            .label("Small")
+                            .selected(self.size == Size::Small),
+                    )
+                    .child(
+                        Button::new("medium")
+                            .label("Medium")
+                            .selected(self.size == Size::Medium),
+                    )
+                    .child(
+                        Button::new("large")
+                            .label("Large")
+                            .selected(self.size == Size::Large),
                     )
-                    .child(Button::new("large").label("Large").selected(self.size == Size::Large))
                     .on_click(cx.listener(|this, selecteds: &Vec<usize>, window, cx| {
                         let size = match selecteds[0] {
                             0 => Size::XSmall,

crates/story/src/stories/badge_story.rs

@@ -3,8 +3,8 @@ use gpui::{
     Styled, Window,
 };
 use gpui_component::{
-    avatar::Avatar, badge::Badge, dock::PanelControl, v_flex, ActiveTheme as _, Icon, IconName,
-    Sizable as _,
+    ActiveTheme as _, Icon, IconName, Sizable as _, avatar::Avatar, badge::Badge,
+    dock::PanelControl, v_flex,
 };
 
 use crate::section;

crates/story/src/stories/combobox_story.rs

@@ -365,7 +365,7 @@ impl ComboboxStory {
     fn new(window: &mut Window, cx: &mut App) -> Entity<Self> {
         let basic = cx.new(|cx| {
             ComboboxState::new(SearchableVec::new(FRAMEWORKS.to_vec()), vec![], window, cx)
-                                .searchable(true)
+                .searchable(true)
         });
 
         let basic_multi = cx.new(|cx| {
@@ -376,7 +376,7 @@ impl ComboboxStory {
 
         let grouped = cx.new(|cx| {
             ComboboxState::new(food_groups(), vec![IndexPath::default()], window, cx)
-                                .searchable(true)
+                .searchable(true)
         });
 
         let disabled_items = cx.new(|cx| {
@@ -387,30 +387,26 @@ impl ComboboxStory {
                 FoodItem::new("Carrots"),
                 FoodItem::new("Broccoli").disabled(),
             ]);
-            ComboboxState::new(items, vec![], window, cx)
-                                .searchable(true)
+            ComboboxState::new(items, vec![], window, cx).searchable(true)
         });
 
-        let with_icon = cx.new(|cx| {
-            ComboboxState::new(industries(), vec![], window, cx)
-                                .searchable(true)
-        });
+        let with_icon =
+            cx.new(|cx| ComboboxState::new(industries(), vec![], window, cx).searchable(true));
 
         let custom_check = cx.new(|cx| {
             ComboboxState::new(SearchableVec::new(FRAMEWORKS.to_vec()), vec![], window, cx)
-                                .searchable(true)
+                .searchable(true)
         });
 
         let with_footer = cx.new(|cx| {
             let items =
                 SearchableVec::new(vec!["Harvard University", "MIT", "Stanford", "Cambridge"]);
-            ComboboxState::new(items, vec![IndexPath::default()], window, cx)
-                                .searchable(true)
+            ComboboxState::new(items, vec![IndexPath::default()], window, cx).searchable(true)
         });
 
         let custom_trigger = cx.new(|cx| {
             ComboboxState::new(SearchableVec::new(FRAMEWORKS.to_vec()), vec![], window, cx)
-                                .searchable(true)
+                .searchable(true)
         });
 
         let multi_badges = cx.new(|cx| {
@@ -442,7 +438,7 @@ impl ComboboxStory {
                 window,
                 cx,
             )
-                        .searchable(true)
+            .searchable(true)
         });
 
         let featured = cx.new(|cx| {
@@ -452,7 +448,7 @@ impl ComboboxStory {
                 window,
                 cx,
             )
-                        .searchable(true)
+            .searchable(true)
         });
 
         let multi_expand = cx.new(|cx| {