english

crates/assistant/src/assistant_panel.rs

@@ -4985,7 +4985,7 @@ impl WorkflowAssist {
 }
 
 impl Render for ContextHistory {
-    fn render(&mut self, _: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
         div().size_full().child(self.picker.clone())
     }
 }

crates/collab_ui/src/notifications/stories/collab_notification.rs

@@ -7,11 +7,11 @@ use crate::notifications::collab_notification::CollabNotification;
 pub struct CollabNotificationStory;
 
 impl Render for CollabNotificationStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let window_container = |width, height| div().w(px(width)).h(px(height));
 
-        Story::container()
-            .child(Story::title_for::<CollabNotification>())
+        Story::container(cx)
+            .child(Story::title_for::<CollabNotification>(cx))
             .child(
                 StorySection::new().child(StoryItem::new(
                     "Incoming Call Notification",

crates/gpui/src/app.rs

@@ -28,10 +28,12 @@ pub use test_context::*;
 use util::ResultExt;
 
 use crate::{
-    current_platform, hash, init_app_menus, Action, ActionRegistry, Any, AnyView, AnyWindowHandle,
-    Asset, AssetSource, BackgroundExecutor, ClipboardItem, Context, DispatchPhase, DisplayId,
-    Entity, EventEmitter, ForegroundExecutor, Global, KeyBinding, Keymap, Keystroke, LayoutId,
-    Menu, MenuItem, OwnedMenu, PathPromptOptions, Pixels, Platform, PlatformDisplay, Point,
+    current_platform,
+    default_style::{default_style, DefaultStyle},
+    hash, init_app_menus, Action, ActionRegistry, Any, AnyView, AnyWindowHandle, Asset,
+    AssetSource, BackgroundExecutor, ClipboardItem, Context, DispatchPhase, DisplayId, Entity,
+    EventEmitter, ForegroundExecutor, Global, KeyBinding, Keymap, Keystroke, LayoutId, Menu,
+    MenuItem, OwnedMenu, PathPromptOptions, Pixels, Platform, PlatformDisplay, Point,
     PromptBuilder, PromptHandle, PromptLevel, Render, RenderablePromptHandle, Reservation,
     SharedString, SubscriberSet, Subscription, SvgRenderer, Task, TextSystem, View, ViewContext,
     Window, WindowAppearance, WindowContext, WindowHandle, WindowId,
@@ -555,6 +557,11 @@ impl AppContext {
         self.platform.window_appearance()
     }
 
+    /// Returns the default style, including base colors, font sizes, etc.
+    pub fn default_style(&self) -> DefaultStyle {
+        default_style(self.window_appearance())
+    }
+
     /// Writes data to the primary selection buffer.
     /// Only available on Linux.
     #[cfg(target_os = "linux")]

crates/gpui/src/default_style.rs

@@ -0,0 +1,133 @@
+use crate::{rgb, Rgba, WindowAppearance};
+
+/// The default style for GPUI elements.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct DefaultStyle {
+    /// The default colors for the style.
+    pub color: DefaultColors,
+}
+
+impl Default for DefaultStyle {
+    fn default() -> Self {
+        Self {
+            color: DefaultColors::light(),
+        }
+    }
+}
+
+/// Returns the default style for the given appearance.
+pub fn default_style(appearance: WindowAppearance) -> DefaultStyle {
+    DefaultStyle {
+        color: colors(appearance.into()),
+    }
+}
+
+/// Returns the default colors for the given appearance.
+pub fn colors(appearance: WindowAppearance) -> DefaultColors {
+    match appearance {
+        WindowAppearance::Light | WindowAppearance::VibrantLight => DefaultColors::light(),
+        WindowAppearance::Dark | WindowAppearance::VibrantDark => DefaultColors::dark(),
+    }
+}
+
+/// Returns a list of all the colors in the given appearance.
+pub fn colors_iter(appearance: WindowAppearance) -> Vec<Rgba> {
+    let colors = colors(appearance);
+    vec![
+        colors.background,
+        colors.background_activated,
+        colors.background_selected,
+        colors.border,
+        colors.border_deemphasized,
+        colors.border_focused,
+        colors.container,
+        colors.foreground,
+        colors.foreground_deemphasized,
+        colors.foreground_disabled,
+        colors.foreground_placeholder,
+        colors.foreground_selected,
+        colors.separator,
+    ]
+}
+
+/// The default colors for GPUI components.
+///
+/// NOTE: Default colors are in active development and will
+/// likely change frequently, including breaking changes,
+/// until stabilized. Use with caution!
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct DefaultColors {
+    /// Default color for backgrounds.
+    pub background: Rgba,
+    /// Default color for activated backgrounds, such as when a button is pressed.
+    pub background_activated: Rgba,
+    /// Default color for selected backgrounds, such as when a list item is selected,
+    /// or a checkbox is checked.
+    pub background_selected: Rgba,
+    /// Default color for borders.
+    pub border: Rgba,
+    /// Default color for deemphasized borders.
+    pub border_deemphasized: Rgba,
+    /// Default color for focused borders.
+    pub border_focused: Rgba,
+    /// Default color for containers.
+    pub container: Rgba,
+    /// Default color for text, icons, and other foreground elements.
+    pub foreground: Rgba,
+    /// Default color for deemphasized text, icons, and other foreground elements.
+    pub foreground_deemphasized: Rgba,
+    /// Default color for disabled text, icons, and other foreground elements.
+    pub foreground_disabled: Rgba,
+    /// Default color for placeholder text, icons, and other foreground elements.
+    pub foreground_placeholder: Rgba,
+    /// Default color for selected text, icons, and other foreground elements.
+    pub foreground_selected: Rgba,
+    /// Default color for separators.
+    pub separator: Rgba,
+}
+
+impl Default for DefaultColors {
+    fn default() -> Self {
+        Self::light()
+    }
+}
+
+impl DefaultColors {
+    /// Returns the default dark colors.
+    pub fn dark() -> Self {
+        Self {
+            background: rgb(0x222222),
+            background_activated: rgb(0x4B4B4B),
+            background_selected: rgb(0x2457ca),
+            border: rgb(0x000000),
+            border_deemphasized: rgb(0x313131),
+            border_focused: rgb(0x316e99),
+            container: rgb(0x262626),
+            foreground: rgb(0xffffff),
+            foreground_deemphasized: rgb(0xAEAEAE),
+            foreground_disabled: rgb(0x565656),
+            foreground_placeholder: rgb(0x6e6f6f),
+            foreground_selected: rgb(0xffffff),
+            separator: rgb(0x3d3d3d),
+        }
+    }
+
+    /// Returns the default light colors.
+    pub fn light() -> Self {
+        Self {
+            background: rgb(0xffffff),
+            background_activated: rgb(0x0f0f0f),
+            background_selected: rgb(0x0164e1),
+            border: rgb(0xd9d9d9),
+            border_deemphasized: rgb(0xe6e6e6),
+            border_focused: rgb(0x85acf4),
+            container: rgb(0xf4f5f5),
+            foreground: rgb(0x252525),
+            foreground_deemphasized: rgb(0x7b7b7b),
+            foreground_disabled: rgb(0xb0b0b0),
+            foreground_placeholder: rgb(0xababab),
+            foreground_selected: rgb(0xffffff),
+            separator: rgb(0xe6e6e6),
+        }
+    }
+}

crates/gpui/src/elements/common.rs

@@ -1,115 +0,0 @@
-use crate::{rgb, Hsla, Rgba, WindowAppearance};
-
-/// The appearance of the base GPUI colors, used to style GPUI elements
-///
-/// Varies based on the system's current [`WindowAppearance`].
-#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
-pub enum DefaultThemeAppearance {
-    /// Use the set of colors for light appearances.
-    #[default]
-    Light,
-    /// Use the set of colors for dark appearances.
-    Dark,
-}
-
-impl From<WindowAppearance> for DefaultThemeAppearance {
-    fn from(appearance: WindowAppearance) -> Self {
-        match appearance {
-            WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,
-            WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,
-        }
-    }
-}
-
-/// Returns the default colors for the given appearance.
-pub fn colors(appearance: DefaultThemeAppearance) -> DefaultColors {
-    match appearance {
-        DefaultThemeAppearance::Light => DefaultColors::light(),
-        DefaultThemeAppearance::Dark => DefaultColors::dark(),
-    }
-}
-
-/// A collection of colors.
-#[derive(Debug, Clone, Copy, PartialEq)]
-pub struct DefaultColors {
-    text: Rgba,
-    selected_text: Rgba,
-    background: Rgba,
-    disabled: Rgba,
-    selected: Rgba,
-    border: Rgba,
-    separator: Rgba,
-    container: Rgba,
-}
-
-impl DefaultColors {
-    /// Returns the default dark colors.
-    pub fn dark() -> Self {
-        Self {
-            text: rgb(0xffffff),
-            selected_text: rgb(0xffffff),
-            disabled: rgb(0x565656),
-            selected: rgb(0x2457ca),
-            background: rgb(0x222222),
-            border: rgb(0x000000),
-            separator: rgb(0xd9d9d9),
-            container: rgb(0x262626),
-        }
-    }
-
-    /// Returns the default light colors.
-    pub fn light() -> Self {
-        Self {
-            text: rgb(0x252525),
-            selected_text: rgb(0xffffff),
-            background: rgb(0xffffff),
-            disabled: rgb(0xb0b0b0),
-            selected: rgb(0x2a63d9),
-            border: rgb(0xd9d9d9),
-            separator: rgb(0xe6e6e6),
-            container: rgb(0xf4f5f5),
-        }
-    }
-}
-
-/// A default GPUI color.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, strum::EnumIter)]
-pub enum DefaultColor {
-    /// Text color
-    Text,
-    /// Selected text color
-    SelectedText,
-    /// Background color
-    Background,
-    /// Disabled color
-    Disabled,
-    /// Selected color
-    Selected,
-    /// Border color
-    Border,
-    /// Separator color
-    Separator,
-    /// Container color
-    Container,
-}
-
-impl DefaultColor {
-    /// Returns the RGBA color for the given color type.
-    pub fn color(&self, colors: &DefaultColors) -> Rgba {
-        match self {
-            DefaultColor::Text => colors.text,
-            DefaultColor::SelectedText => colors.selected_text,
-            DefaultColor::Background => colors.background,
-            DefaultColor::Disabled => colors.disabled,
-            DefaultColor::Selected => colors.selected,
-            DefaultColor::Border => colors.border,
-            DefaultColor::Separator => colors.separator,
-            DefaultColor::Container => colors.container,
-        }
-    }
-
-    /// Returns the HSLA color for the given color type.
-    pub fn hsla(&self, colors: &DefaultColors) -> Hsla {
-        self.color(colors).into()
-    }
-}

crates/gpui/src/elements/mod.rs

@@ -1,7 +1,6 @@
 mod anchored;
 mod animation;
 mod canvas;
-mod common;
 mod deferred;
 mod div;
 mod img;
@@ -14,7 +13,6 @@ mod uniform_list;
 pub use anchored::*;
 pub use animation::*;
 pub use canvas::*;
-pub use common::*;
 pub use deferred::*;
 pub use div::*;
 pub use img::*;

crates/gpui/src/gpui.rs

@@ -73,6 +73,8 @@ mod asset_cache;
 mod assets;
 mod bounds_tree;
 mod color;
+/// Defines the default style for GPUI elements.
+pub mod default_style;
 mod element;
 mod elements;
 mod executor;

crates/story/src/story.rs

@@ -1,15 +1,12 @@
-use gpui::{
-    div, prelude::*, px, rems, AnyElement, DefaultColor, DefaultColors, Div, SharedString,
-    WindowContext,
-};
+use gpui::{div, prelude::*, px, rems, AnyElement, Div, SharedString, WindowContext};
 use itertools::Itertools;
 use smallvec::SmallVec;
 
 pub struct Story {}
 
 impl Story {
-    pub fn container() -> gpui::Stateful<Div> {
-        let colors = DefaultColors::light();
+    pub fn container(cx: &WindowContext) -> gpui::Stateful<Div> {
+        let color = cx.default_style().color;
 
         div()
             .id("story_container")
@@ -18,84 +15,77 @@ impl Story {
             .min_h_full()
             .flex()
             .flex_col()
-            .text_color(DefaultColor::Text.hsla(&colors))
-            .bg(DefaultColor::Background.hsla(&colors))
+            .text_color(color.foreground)
+            .bg(color.background)
     }
 
-    pub fn title(title: impl Into<SharedString>) -> impl Element {
-        let colors = DefaultColors::light();
+    pub fn title(cx: &WindowContext, title: impl Into<SharedString>) -> impl Element {
+        let color = cx.default_style().color;
 
         div()
             .text_xs()
-            .text_color(DefaultColor::Text.hsla(&colors))
+            .text_color(color.foreground)
             .child(title.into())
     }
 
-    pub fn title_for<T>() -> impl Element {
-        Self::title(std::any::type_name::<T>())
+    pub fn title_for<T>(cx: &WindowContext) -> impl Element {
+        Self::title(cx, std::any::type_name::<T>())
     }
 
-    pub fn section() -> Div {
-        let colors = DefaultColors::light();
+    pub fn section(cx: &WindowContext) -> Div {
+        let color = cx.default_style().color;
 
-        div()
-            .p_4()
-            .m_4()
-            .border_1()
-            .border_color(DefaultColor::Separator.hsla(&colors))
+        div().p_4().m_4().border_1().border_color(color.separator)
     }
 
-    pub fn section_title() -> Div {
-        let colors = DefaultColors::light();
+    pub fn section_title(cx: &WindowContext) -> Div {
+        let color = cx.default_style().color;
 
-        div().text_lg().text_color(DefaultColor::Text.hsla(&colors))
+        div().text_lg().text_color(color.foreground)
     }
 
-    pub fn group() -> Div {
-        let colors = DefaultColors::light();
-        div().my_2().bg(DefaultColor::Container.hsla(&colors))
+    pub fn group(cx: &WindowContext) -> Div {
+        let color = cx.default_style().color;
+        div().my_2().bg(color.container)
     }
 
-    pub fn code_block(code: impl Into<SharedString>) -> Div {
-        let colors = DefaultColors::light();
+    pub fn code_block(cx: &WindowContext, code: impl Into<SharedString>) -> Div {
+        let color = cx.default_style().color;
 
         div()
             .size_full()
             .p_2()
             .max_w(rems(36.))
-            .bg(DefaultColor::Container.hsla(&colors))
+            .bg(color.container)
             .rounded_md()
             .text_sm()
-            .text_color(DefaultColor::Text.hsla(&colors))
+            .text_color(color.foreground)
             .overflow_hidden()
             .child(code.into())
     }
 
-    pub fn divider() -> Div {
-        let colors = DefaultColors::light();
+    pub fn divider(cx: &WindowContext) -> Div {
+        let color = cx.default_style().color;
 
-        div()
-            .my_2()
-            .h(px(1.))
-            .bg(DefaultColor::Separator.hsla(&colors))
+        div().my_2().h(px(1.)).bg(color.separator)
     }
 
-    pub fn description(description: impl Into<SharedString>) -> impl Element {
-        let colors = DefaultColors::light();
+    pub fn description(cx: &WindowContext, description: impl Into<SharedString>) -> impl Element {
+        let color = cx.default_style().color;
 
         div()
             .text_sm()
-            .text_color(DefaultColor::Text.hsla(&colors))
+            .text_color(color.foreground)
             .min_w_96()
             .child(description.into())
     }
 
-    pub fn label(label: impl Into<SharedString>) -> impl Element {
-        let colors = DefaultColors::light();
+    pub fn label(cx: &WindowContext, label: impl Into<SharedString>) -> impl Element {
+        let color = cx.default_style().color;
 
         div()
             .text_xs()
-            .text_color(DefaultColor::Text.hsla(&colors))
+            .text_color(color.foreground)
             .child(label.into())
     }
 
@@ -135,8 +125,8 @@ impl StoryItem {
 }
 
 impl RenderOnce for StoryItem {
-    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
-        let colors = DefaultColors::light();
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let color = cx.default_style().color;
 
         div()
             .my_2()
@@ -148,20 +138,20 @@ impl RenderOnce for StoryItem {
                     .px_2()
                     .w_1_2()
                     .min_h_px()
-                    .child(Story::label(self.label))
+                    .child(Story::label(cx, self.label))
                     .child(
                         div()
                             .rounded_md()
-                            .bg(DefaultColor::Background.hsla(&colors))
+                            .bg(color.background)
                             .border_1()
-                            .border_color(DefaultColor::Border.hsla(&colors))
+                            .border_color(color.border)
                             .py_1()
                             .px_2()
                             .overflow_hidden()
                             .child(self.item),
                     )
                     .when_some(self.description, |this, description| {
-                        this.child(Story::description(description))
+                        this.child(Story::description(cx, description))
                     }),
             )
             .child(
@@ -171,8 +161,8 @@ impl RenderOnce for StoryItem {
                     .w_1_2()
                     .min_h_px()
                     .when_some(self.usage, |this, usage| {
-                        this.child(Story::label("Example Usage"))
-                            .child(Story::code_block(usage))
+                        this.child(Story::label(cx, "Example Usage"))
+                            .child(Story::code_block(cx, usage))
                     }),
             )
     }
@@ -205,21 +195,21 @@ impl StorySection {
 }
 
 impl RenderOnce for StorySection {
-    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let children: SmallVec<[AnyElement; 2]> = SmallVec::from_iter(Itertools::intersperse_with(
             self.children.into_iter(),
-            || Story::divider().into_any_element(),
+            || Story::divider(cx).into_any_element(),
         ));
 
-        Story::section()
+        Story::section(cx)
             // Section title
             .py_2()
             // Section description
             .when_some(self.description.clone(), |section, description| {
-                section.child(Story::description(description))
+                section.child(Story::description(cx, description))
             })
             .child(div().flex().flex_col().gap_2().children(children))
-            .child(Story::divider())
+            .child(Story::divider(cx))
     }
 }
 

crates/storybook/src/stories/auto_height_editor.rs

@@ -1,8 +1,9 @@
 use editor::Editor;
 use gpui::{
-    div, white, IntoElement, KeyBinding, ParentElement, Render, Styled, View, ViewContext,
-    VisualContext, WindowContext,
+    div, IntoElement, KeyBinding, ParentElement, Render, Styled, View, ViewContext, VisualContext,
+    WindowContext,
 };
+use story::Story;
 
 pub struct AutoHeightEditorStory {
     editor: View<Editor>,
@@ -19,6 +20,7 @@ impl AutoHeightEditorStory {
             editor: cx.new_view(|cx| {
                 let mut editor = Editor::auto_height(3, cx);
                 editor.set_soft_wrap_mode(language::language_settings::SoftWrap::EditorWidth, cx);
+                editor.set_placeholder_text("Type some text & hit enter", cx);
                 editor
             }),
         })
@@ -26,11 +28,11 @@ impl AutoHeightEditorStory {
 }
 
 impl Render for AutoHeightEditorStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        div()
-            .size_full()
-            .bg(white())
-            .text_sm()
-            .child(div().w_32().bg(gpui::black()).child(self.editor.clone()))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        let color = cx.default_style().color;
+
+        Story::container(cx)
+            .child(Story::title(cx, "Auto Height Editor"))
+            .child(div().w_64().bg(color.container).child(self.editor.clone()))
     }
 }

crates/storybook/src/stories/cursor.rs

@@ -5,7 +5,7 @@ use ui::prelude::*;
 pub struct CursorStory;
 
 impl Render for CursorStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let all_cursors: [(&str, Box<dyn Fn(Stateful<Div>) -> Stateful<Div>>); 19] = [
             (
                 "cursor_default",
@@ -85,12 +85,14 @@ impl Render for CursorStory {
             ),
         ];
 
-        Story::container()
+        let color = cx.default_style().color;
+
+        Story::container(cx)
             .flex()
             .gap_1()
-            .child(Story::title("cursor"))
+            .child(Story::title(cx, "cursor"))
             .children(all_cursors.map(|(name, apply_cursor)| {
-                div().gap_1().flex().text_color(gpui::white()).child(
+                div().gap_1().flex().text_color(color.foreground).child(
                     div()
                         .flex()
                         .items_center()
@@ -99,10 +101,10 @@ impl Render for CursorStory {
                         .map(apply_cursor)
                         .w_64()
                         .h_8()
-                        .bg(gpui::red())
-                        .active(|style| style.bg(gpui::green()))
+                        .bg(color.container)
+                        .active(|style| style.bg(color.background_activated))
                         .text_sm()
-                        .child(Story::label(name)),
+                        .child(Story::label(cx, name)),
                 )
             }))
     }

crates/storybook/src/stories/default_colors.rs

@@ -1,10 +1,11 @@
 use gpui::{
-    colors, div, prelude::*, DefaultColor, DefaultThemeAppearance, Hsla, Render, View, ViewContext,
-    WindowContext,
+    default_style::{colors_iter, default_style},
+    div,
+    prelude::*,
+    Render, View, ViewContext, WindowAppearance, WindowContext,
 };
 use story::Story;
-use strum::IntoEnumIterator;
-use ui::{h_flex, ActiveTheme};
+use ui::h_flex;
 
 pub struct DefaultColorsStory;
 
@@ -16,71 +17,74 @@ impl DefaultColorsStory {
 
 impl Render for DefaultColorsStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        let appearances = [DefaultThemeAppearance::Light, DefaultThemeAppearance::Dark];
+        let appearances = [WindowAppearance::Light, WindowAppearance::Dark];
 
-        Story::container()
-            .child(Story::title("Default Colors"))
+        Story::container(cx)
+            .child(Story::title(cx, "Default Colors"))
             .children(appearances.iter().map(|&appearance| {
-                let colors = colors(appearance);
-                let color_types = DefaultColor::iter()
-                    .map(|color| {
-                        let name = format!("{:?}", color);
-                        let rgba = color.hsla(&colors);
-                        (name, rgba)
-                    })
-                    .collect::<Vec<_>>();
+                let default_style = default_style(appearance);
+
+                let color = default_style.color;
+
+                let colors = colors_iter(appearance);
 
                 div()
                     .flex()
                     .flex_col()
                     .gap_4()
                     .p_4()
-                    .child(Story::label(format!("{:?} Appearance", appearance)))
-                    .children(color_types.iter().map(|(name, color)| {
-                        let color: Hsla = *color;
-
+                    .bg(color.background)
+                    .text_color(color.foreground)
+                    .child(
+                        div()
+                            .text_xs()
+                            .text_color(color.foreground)
+                            .child(format!("{:?} Appearance", appearance)),
+                    )
+                    .child(
                         div()
                             .flex()
                             .items_center()
                             .gap_2()
-                            .child(
+                            .children(colors.iter().map(|c| {
+                                let fill: gpui::Fill = c.clone().into();
+
                                 div()
                                     .w_12()
                                     .h_12()
-                                    .bg(color)
+                                    .bg(fill)
                                     .border_1()
-                                    .border_color(cx.theme().colors().border),
-                            )
-                            .child(Story::label(format!("{}: {:?}", name, color.clone())))
-                    }))
+                                    .border_color(color.border)
+                            })),
+                    )
                     .child(
                         h_flex()
                             .gap_1()
                             .child(
                                 h_flex()
-                                    .bg(DefaultColor::Background.hsla(&colors))
+                                    .bg(color.background)
                                     .h_8()
                                     .p_2()
                                     .text_sm()
-                                    .text_color(DefaultColor::Text.hsla(&colors))
+                                    .text_color(color.foreground)
                                     .child("Default Text"),
                             )
                             .child(
                                 h_flex()
-                                    .bg(DefaultColor::Container.hsla(&colors))
+                                    .bg(color.container)
                                     .h_8()
                                     .p_2()
                                     .text_sm()
-                                    .text_color(DefaultColor::Text.hsla(&colors))
+                                    .text_color(color.foreground)
                                     .child("Text on Container"),
                             )
                             .child(
                                 h_flex()
-                                    .bg(DefaultColor::Selected.hsla(&colors))
+                                    .bg(color.background_selected)
                                     .h_8()
                                     .p_2()
                                     .text_sm()
-                                    .text_color(DefaultColor::SelectedText.hsla(&colors))
+                                    .text_color(color.foreground_selected)
                                     .child("Selected Text"),
                             ),
                     )

crates/storybook/src/stories/kitchen_sink.rs

@@ -19,11 +19,11 @@ impl Render for KitchenSinkStory {
             .map(|selector| selector.story(cx))
             .collect::<Vec<_>>();
 
-        Story::container()
+        Story::container(cx)
             .id("kitchen-sink")
             .overflow_y_scroll()
-            .child(Story::title("Kitchen Sink"))
-            .child(Story::label("Components"))
+            .child(Story::title(cx, "Kitchen Sink"))
+            .child(Story::label(cx, "Components"))
             .child(div().flex().flex_col().children(component_stories))
             // Add a bit of space at the bottom of the kitchen sink so elements
             // don't end up squished right up against the bottom of the screen.

crates/storybook/src/stories/overflow_scroll.rs

@@ -6,36 +6,48 @@ use ui::prelude::*;
 pub struct OverflowScrollStory;
 
 impl Render for OverflowScrollStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title("Overflow Scroll"))
-            .child(Story::label("`overflow_x_scroll`"))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        let color = cx.default_style().color;
+
+        Story::container(cx)
+            .child(Story::title(cx, "Overflow Scroll"))
             .child(
-                h_flex()
-                    .id("overflow_x_scroll")
-                    .gap_2()
-                    .overflow_x_scroll()
-                    .children((0..100).map(|i| {
-                        div()
-                            .p_4()
-                            .debug_bg_cyan()
-                            .child(SharedString::from(format!("Child {}", i + 1)))
-                    })),
+                Story::section(cx)
+                    .child(Story::label(cx, "`overflow_x_scroll`"))
+                    .child(
+                        h_flex()
+                            .id("overflow_x_scroll")
+                            .gap_2()
+                            .overflow_x_scroll()
+                            .children((0..100).map(|i| {
+                                div()
+                                    .p_4()
+                                    .bg(color.container)
+                                    .border_1()
+                                    .border_color(color.border)
+                                    .child(SharedString::from(format!("Child {}", i + 1)))
+                            })),
+                    ),
             )
-            .child(Story::label("`overflow_y_scroll`"))
             .child(
-                v_flex()
-                    .w_full()
-                    .flex_1()
-                    .id("overflow_y_scroll")
-                    .gap_2()
-                    .overflow_y_scroll()
-                    .children((0..100).map(|i| {
-                        div()
-                            .p_4()
-                            .debug_bg_green()
-                            .child(SharedString::from(format!("Child {}", i + 1)))
-                    })),
+                Story::section(cx)
+                    .child(Story::label(cx, "`overflow_y_scroll`"))
+                    .child(
+                        v_flex()
+                            .w_full()
+                            .flex_1()
+                            .id("overflow_y_scroll")
+                            .gap_2()
+                            .overflow_y_scroll()
+                            .children((0..100).map(|i| {
+                                div()
+                                    .p_4()
+                                    .bg(color.container)
+                                    .border_1()
+                                    .border_color(color.border)
+                                    .child(SharedString::from(format!("Child {}", i + 1)))
+                            })),
+                    ),
             )
     }
 }

crates/storybook/src/stories/picker.rs

@@ -2,6 +2,7 @@ use fuzzy::StringMatchCandidate;
 use gpui::{div, prelude::*, KeyBinding, Render, SharedString, Styled, Task, View, WindowContext};
 use picker::{Picker, PickerDelegate};
 use std::sync::Arc;
+use story::Story;
 use ui::{prelude::*, ListItemSpacing};
 use ui::{Label, ListItem};
 
@@ -199,9 +200,16 @@ impl PickerStory {
 
 impl Render for PickerStory {
     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
-        div()
-            .bg(cx.theme().styles.colors.background)
-            .size_full()
-            .child(self.picker.clone())
+        Story::container(cx)
+            .p_4()
+            .child(Story::title(cx, "Picker"))
+            .child(
+                div()
+                    .flex()
+                    .size_full()
+                    .justify_center()
+                    .items_center()
+                    .child(self.picker.clone()),
+            )
     }
 }

crates/storybook/src/stories/text.rs

@@ -15,8 +15,8 @@ impl TextStory {
 
 impl Render for TextStory {
     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title("Text"))
+        Story::container(cx)
+            .child(Story::title(cx, "Text"))
             .children(vec![
                 StorySection::new()
                     .child(

crates/storybook/src/stories/viewport_units.rs

@@ -7,7 +7,7 @@ pub struct ViewportUnitsStory;
 
 impl Render for ViewportUnitsStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container().child(
+        Story::container(cx).child(
             div()
                 .flex()
                 .flex_row()

crates/storybook/src/stories/with_rem_size.rs

@@ -6,8 +6,8 @@ use ui::{prelude::*, WithRemSize};
 pub struct WithRemSizeStory;
 
 impl Render for WithRemSizeStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container().child(
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx).child(
             Example::new(16., gpui::red())
                 .child(
                     Example::new(24., gpui::green())

crates/theme/src/styles/stories/color.rs

@@ -10,30 +10,34 @@ impl Render for ColorsStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let color_scales = default_color_scales();
 
-        Story::container().child(Story::title("Colors")).child(
-            div()
-                .id("colors")
-                .flex()
-                .flex_col()
-                .gap_1()
-                .overflow_y_scroll()
-                .text_color(gpui::white())
-                .children(color_scales.into_iter().map(|scale| {
-                    div()
-                        .flex()
-                        .child(
-                            div()
-                                .w(px(75.))
-                                .line_height(px(24.))
-                                .child(scale.name().clone()),
-                        )
-                        .child(
-                            div().flex().gap_1().children(
-                                ColorScaleStep::ALL
-                                    .map(|step| div().flex().size_6().bg(scale.step(cx, step))),
-                            ),
-                        )
-                })),
-        )
+        Story::container(cx)
+            .child(Story::title(cx, "Colors"))
+            .child(
+                div()
+                    .id("colors")
+                    .flex()
+                    .flex_col()
+                    .gap_1()
+                    .overflow_y_scroll()
+                    .text_color(gpui::white())
+                    .children(color_scales.into_iter().map(|scale| {
+                        div()
+                            .flex()
+                            .child(
+                                div()
+                                    .w(px(75.))
+                                    .line_height(px(24.))
+                                    .child(scale.name().clone()),
+                            )
+                            .child(
+                                div()
+                                    .flex()
+                                    .gap_1()
+                                    .children(ColorScaleStep::ALL.map(|step| {
+                                        div().flex().size_6().bg(scale.step(cx, step))
+                                    })),
+                            )
+                    })),
+            )
     }
 }

crates/theme/src/styles/stories/players.rs

@@ -7,13 +7,13 @@ pub struct PlayerStory;
 
 impl Render for PlayerStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container().child(
+        Story::container(cx).child(
             div()
                 .flex()
                 .flex_col()
                 .gap_4()
-                .child(Story::title_for::<PlayerColors>())
-                .child(Story::label("Player Colors"))
+                .child(Story::title_for::<PlayerColors>(cx))
+                .child(Story::label(cx, "Player Colors"))
                 .child(
                     div()
                         .flex()
@@ -44,7 +44,7 @@ impl Render for PlayerStory {
                             ),
                         ),
                 )
-                .child(Story::label("Avatar Rings"))
+                .child(Story::label(cx, "Avatar Rings"))
                 .child(div().flex().gap_1().children(
                     cx.theme().players().0.clone().iter_mut().map(|player| {
                         div()
@@ -60,7 +60,7 @@ impl Render for PlayerStory {
                             )
                     }),
                 ))
-                .child(Story::label("Player Backgrounds"))
+                .child(Story::label(cx, "Player Backgrounds"))
                 .child(div().flex().gap_1().children(
                     cx.theme().players().0.clone().iter_mut().map(|player| {
                         div()
@@ -119,7 +119,7 @@ impl Render for PlayerStory {
                             )
                     }),
                 ))
-                .child(Story::label("Player Selections"))
+                .child(Story::label(cx, "Player Selections"))
                 .child(div().flex().flex_col().gap_px().children(
                     cx.theme().players().0.clone().iter_mut().map(|player| {
                         div()

crates/title_bar/src/stories/application_menu.rs

@@ -8,9 +8,9 @@ use crate::application_menu::ApplicationMenu;
 pub struct ApplicationMenuStory;
 
 impl Render for ApplicationMenuStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<ApplicationMenu>())
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<ApplicationMenu>(cx))
             .child(StorySection::new().child(StoryItem::new(
                 "Application Menu",
                 h_flex().child(ApplicationMenu::new()),

crates/ui/src/components/image.rs

@@ -96,8 +96,8 @@ pub mod story {
     pub struct VectorStory;
 
     impl Render for VectorStory {
-        fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-            Story::container().child(StorySection::new().children(VectorName::iter().map(
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+            Story::container(cx).child(StorySection::new().children(VectorName::iter().map(
                 |vector| StoryItem::new(format!("{:?}", vector), Vector::square(vector, rems(8.))),
             )))
         }

crates/ui/src/components/stories/avatar.rs

@@ -8,8 +8,8 @@ pub struct AvatarStory;
 
 impl Render for AvatarStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<Avatar>())
+        Story::container(cx)
+            .child(Story::title_for::<Avatar>(cx))
             .child(
                 StorySection::new()
                     .child(StoryItem::new(

crates/ui/src/components/stories/button.rs

@@ -7,32 +7,32 @@ use crate::{Button, ButtonStyle};
 pub struct ButtonStory;
 
 impl Render for ButtonStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<Button>())
-            .child(Story::label("Default"))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<Button>(cx))
+            .child(Story::label(cx, "Default"))
             .child(Button::new("default_filled", "Click me"))
-            .child(Story::label("Selected"))
+            .child(Story::label(cx, "Selected"))
             .child(Button::new("selected_filled", "Click me").selected(true))
-            .child(Story::label("Selected with `selected_label`"))
+            .child(Story::label(cx, "Selected with `selected_label`"))
             .child(
                 Button::new("selected_label_filled", "Click me")
                     .selected(true)
                     .selected_label("I have been selected"),
             )
-            .child(Story::label("With `label_color`"))
+            .child(Story::label(cx, "With `label_color`"))
             .child(Button::new("filled_with_label_color", "Click me").color(Color::Created))
-            .child(Story::label("With `icon`"))
+            .child(Story::label(cx, "With `icon`"))
             .child(Button::new("filled_with_icon", "Click me").icon(IconName::FileGit))
-            .child(Story::label("Selected with `icon`"))
+            .child(Story::label(cx, "Selected with `icon`"))
             .child(
                 Button::new("filled_and_selected_with_icon", "Click me")
                     .selected(true)
                     .icon(IconName::FileGit),
             )
-            .child(Story::label("Default (Subtle)"))
+            .child(Story::label(cx, "Default (Subtle)"))
             .child(Button::new("default_subtle", "Click me").style(ButtonStyle::Subtle))
-            .child(Story::label("Default (Transparent)"))
+            .child(Story::label(cx, "Default (Transparent)"))
             .child(Button::new("default_transparent", "Click me").style(ButtonStyle::Transparent))
     }
 }

crates/ui/src/components/stories/checkbox.rs

@@ -8,9 +8,9 @@ pub struct CheckboxStory;
 
 impl Render for CheckboxStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<Checkbox>())
-            .child(Story::label("Default"))
+        Story::container(cx)
+            .child(Story::title_for::<Checkbox>(cx))
+            .child(Story::label(cx, "Default"))
             .child(
                 h_flex()
                     .p_2()
@@ -25,7 +25,7 @@ impl Render for CheckboxStory {
                     ))
                     .child(Checkbox::new("checkbox-selected", Selection::Selected)),
             )
-            .child(Story::label("Disabled"))
+            .child(Story::label(cx, "Disabled"))
             .child(
                 h_flex()
                     .p_2()

crates/ui/src/components/stories/context_menu.rs

@@ -20,8 +20,8 @@ fn build_menu(cx: &mut WindowContext, header: impl Into<SharedString>) -> View<C
 pub struct ContextMenuStory;
 
 impl Render for ContextMenuStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
             .on_action(|_: &PrintCurrentDate, _| {
                 println!("printing unix time!");
                 if let Ok(unix_time) = std::time::UNIX_EPOCH.elapsed() {

crates/ui/src/components/stories/disclosure.rs

@@ -7,12 +7,12 @@ use crate::Disclosure;
 pub struct DisclosureStory;
 
 impl Render for DisclosureStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<Disclosure>())
-            .child(Story::label("Toggled"))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<Disclosure>(cx))
+            .child(Story::label(cx, "Toggled"))
             .child(Disclosure::new("toggled", true))
-            .child(Story::label("Not Toggled"))
+            .child(Story::label(cx, "Not Toggled"))
             .child(Disclosure::new("not_toggled", false))
     }
 }

crates/ui/src/components/stories/icon.rs

@@ -8,12 +8,12 @@ use crate::{Icon, IconName};
 pub struct IconStory;
 
 impl Render for IconStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let icons = IconName::iter();
 
-        Story::container()
-            .child(Story::title_for::<Icon>())
-            .child(Story::label("DecoratedIcon"))
+        Story::container(cx)
+            .child(Story::title_for::<Icon>(cx))
+            .child(Story::label(cx, "DecoratedIcon"))
             .child(DecoratedIcon::new(
                 Icon::new(IconName::Bell).color(Color::Muted),
                 IconDecoration::IndicatorDot,
@@ -30,7 +30,7 @@ impl Render for IconStory {
                 DecoratedIcon::new(Icon::new(IconName::Bell), IconDecoration::X)
                     .decoration_color(Color::Error),
             )
-            .child(Story::label("All Icons"))
+            .child(Story::label(cx, "All Icons"))
             .child(div().flex().gap_3().children(icons.map(Icon::new)))
     }
 }

crates/ui/src/components/stories/icon_button.rs

@@ -7,7 +7,7 @@ use crate::{IconButton, IconName};
 pub struct IconButtonStory;
 
 impl Render for IconButtonStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let default_button = StoryItem::new(
             "Default",
             IconButton::new("default_icon_button", IconName::Hash),
@@ -111,8 +111,8 @@ impl Render for IconButtonStory {
             selected_with_tooltip_button,
         ];
 
-        Story::container()
-            .child(Story::title_for::<IconButton>())
+        Story::container(cx)
+            .child(Story::title_for::<IconButton>(cx))
             .child(StorySection::new().children(buttons))
             .child(
                 StorySection::new().child(StoryItem::new(

crates/ui/src/components/stories/keybinding.rs

@@ -12,14 +12,14 @@ pub fn binding(key: &str) -> gpui::KeyBinding {
 }
 
 impl Render for KeybindingStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let all_modifier_permutations = ["ctrl", "alt", "cmd", "shift"].into_iter().permutations(2);
 
-        Story::container()
-            .child(Story::title_for::<KeyBinding>())
-            .child(Story::label("Single Key"))
+        Story::container(cx)
+            .child(Story::title_for::<KeyBinding>(cx))
+            .child(Story::label(cx, "Single Key"))
             .child(KeyBinding::new(binding("Z")))
-            .child(Story::label("Single Key with Modifier"))
+            .child(Story::label(cx, "Single Key with Modifier"))
             .child(
                 div()
                     .flex()
@@ -29,7 +29,7 @@ impl Render for KeybindingStory {
                     .child(KeyBinding::new(binding("cmd-c")))
                     .child(KeyBinding::new(binding("shift-c"))),
             )
-            .child(Story::label("Single Key with Modifier (Permuted)"))
+            .child(Story::label(cx, "Single Key with Modifier (Permuted)"))
             .child(
                 div().flex().flex_col().children(
                     all_modifier_permutations
@@ -46,31 +46,31 @@ impl Render for KeybindingStory {
                         }),
                 ),
             )
-            .child(Story::label("Single Key with All Modifiers"))
+            .child(Story::label(cx, "Single Key with All Modifiers"))
             .child(KeyBinding::new(binding("ctrl-alt-cmd-shift-z")))
-            .child(Story::label("Chord"))
+            .child(Story::label(cx, "Chord"))
             .child(KeyBinding::new(binding("a z")))
-            .child(Story::label("Chord with Modifier"))
+            .child(Story::label(cx, "Chord with Modifier"))
             .child(KeyBinding::new(binding("ctrl-a shift-z")))
             .child(KeyBinding::new(binding("fn-s")))
-            .child(Story::label("Single Key with All Modifiers (Linux)"))
+            .child(Story::label(cx, "Single Key with All Modifiers (Linux)"))
             .child(
                 KeyBinding::new(binding("ctrl-alt-cmd-shift-z"))
                     .platform_style(PlatformStyle::Linux),
             )
-            .child(Story::label("Chord (Linux)"))
+            .child(Story::label(cx, "Chord (Linux)"))
             .child(KeyBinding::new(binding("a z")).platform_style(PlatformStyle::Linux))
-            .child(Story::label("Chord with Modifier (Linux)"))
+            .child(Story::label(cx, "Chord with Modifier (Linux)"))
             .child(KeyBinding::new(binding("ctrl-a shift-z")).platform_style(PlatformStyle::Linux))
             .child(KeyBinding::new(binding("fn-s")).platform_style(PlatformStyle::Linux))
-            .child(Story::label("Single Key with All Modifiers (Windows)"))
+            .child(Story::label(cx, "Single Key with All Modifiers (Windows)"))
             .child(
                 KeyBinding::new(binding("ctrl-alt-cmd-shift-z"))
                     .platform_style(PlatformStyle::Windows),
             )
-            .child(Story::label("Chord (Windows)"))
+            .child(Story::label(cx, "Chord (Windows)"))
             .child(KeyBinding::new(binding("a z")).platform_style(PlatformStyle::Windows))
-            .child(Story::label("Chord with Modifier (Windows)"))
+            .child(Story::label(cx, "Chord with Modifier (Windows)"))
             .child(
                 KeyBinding::new(binding("ctrl-a shift-z")).platform_style(PlatformStyle::Windows),
             )

crates/ui/src/components/stories/label.rs

@@ -7,12 +7,12 @@ use story::Story;
 pub struct LabelStory;
 
 impl Render for LabelStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<Label>())
-            .child(Story::label("Default"))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<Label>(cx))
+            .child(Story::label(cx, "Default"))
             .child(Label::new("Hello, world!"))
-            .child(Story::label("Highlighted"))
+            .child(Story::label(cx, "Highlighted"))
             .child(HighlightedLabel::new(
                 "Hello, world!",
                 vec![0, 1, 2, 7, 8, 12],
@@ -21,7 +21,7 @@ impl Render for LabelStory {
                 "Héllo, world!",
                 vec![0, 1, 3, 8, 9, 13],
             ))
-            .child(Story::label("Highlighted with `color`"))
+            .child(Story::label(cx, "Highlighted with `color`"))
             .child(
                 HighlightedLabel::new("Hello, world!", vec![0, 1, 2, 7, 8, 12]).color(Color::Error),
             )

crates/ui/src/components/stories/list.rs

@@ -7,17 +7,17 @@ use crate::{List, ListItem};
 pub struct ListStory;
 
 impl Render for ListStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<List>())
-            .child(Story::label("Default"))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<List>(cx))
+            .child(Story::label(cx, "Default"))
             .child(
                 List::new()
                     .child(ListItem::new("apple").child("Apple"))
                     .child(ListItem::new("banana").child("Banana"))
                     .child(ListItem::new("cherry").child("Cherry")),
             )
-            .child(Story::label("With sections"))
+            .child(Story::label(cx, "With sections"))
             .child(
                 List::new()
                     .header(ListHeader::new("Produce"))

crates/ui/src/components/stories/list_header.rs

@@ -7,20 +7,20 @@ use crate::{IconName, ListHeader};
 pub struct ListHeaderStory;
 
 impl Render for ListHeaderStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<ListHeader>())
-            .child(Story::label("Default"))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<ListHeader>(cx))
+            .child(Story::label(cx, "Default"))
             .child(ListHeader::new("Section 1"))
-            .child(Story::label("With left icon"))
+            .child(Story::label(cx, "With left icon"))
             .child(ListHeader::new("Section 2").start_slot(Icon::new(IconName::Bell)))
-            .child(Story::label("With left icon and meta"))
+            .child(Story::label(cx, "With left icon and meta"))
             .child(
                 ListHeader::new("Section 3")
                     .start_slot(Icon::new(IconName::BellOff))
                     .end_slot(IconButton::new("action_1", IconName::Bolt)),
             )
-            .child(Story::label("With multiple meta"))
+            .child(Story::label(cx, "With multiple meta"))
             .child(
                 ListHeader::new("Section 4")
                     .end_slot(IconButton::new("action_1", IconName::Bolt))

crates/ui/src/components/stories/list_item.rs

@@ -10,12 +10,12 @@ pub struct ListItemStory;
 
 impl Render for ListItemStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
+        Story::container(cx)
             .bg(cx.theme().colors().background)
-            .child(Story::title_for::<ListItem>())
-            .child(Story::label("Default"))
+            .child(Story::title_for::<ListItem>(cx))
+            .child(Story::label(cx, "Default"))
             .child(ListItem::new("hello_world").child("Hello, world!"))
-            .child(Story::label("Inset"))
+            .child(Story::label(cx, "Inset"))
             .child(
                 ListItem::new("inset_list_item")
                     .inset(true)
@@ -31,7 +31,7 @@ impl Render for ListItemStory {
                             .color(Color::Muted),
                     ),
             )
-            .child(Story::label("With start slot icon"))
+            .child(Story::label(cx, "With start slot icon"))
             .child(
                 ListItem::new("with start slot_icon")
                     .child("Hello, world!")
@@ -41,7 +41,7 @@ impl Render for ListItemStory {
                             .color(Color::Muted),
                     ),
             )
-            .child(Story::label("With start slot avatar"))
+            .child(Story::label(cx, "With start slot avatar"))
             .child(
                 ListItem::new("with_start slot avatar")
                     .child("Hello, world!")
@@ -49,7 +49,7 @@ impl Render for ListItemStory {
                         "https://avatars.githubusercontent.com/u/1714999?v=4",
                     )),
             )
-            .child(Story::label("With end slot"))
+            .child(Story::label(cx, "With end slot"))
             .child(
                 ListItem::new("with_left_avatar")
                     .child("Hello, world!")
@@ -57,7 +57,7 @@ impl Render for ListItemStory {
                         "https://avatars.githubusercontent.com/u/1714999?v=4",
                     )),
             )
-            .child(Story::label("With end hover slot"))
+            .child(Story::label(cx, "With end hover slot"))
             .child(
                 ListItem::new("with_end_hover_slot")
                     .child("Hello, world!")
@@ -84,7 +84,7 @@ impl Render for ListItemStory {
                         "https://avatars.githubusercontent.com/u/1714999?v=4",
                     )),
             )
-            .child(Story::label("With `on_click`"))
+            .child(Story::label(cx, "With `on_click`"))
             .child(
                 ListItem::new("with_on_click")
                     .child("Click me")
@@ -92,7 +92,7 @@ impl Render for ListItemStory {
                         println!("Clicked!");
                     }),
             )
-            .child(Story::label("With `on_secondary_mouse_down`"))
+            .child(Story::label(cx, "With `on_secondary_mouse_down`"))
             .child(
                 ListItem::new("with_on_secondary_mouse_down")
                     .child("Right click me")
@@ -100,13 +100,17 @@ impl Render for ListItemStory {
                         println!("Right mouse down!");
                     }),
             )
-            .child(Story::label("With overflowing content in the `end_slot`"))
+            .child(Story::label(
+                cx,
+                "With overflowing content in the `end_slot`",
+            ))
             .child(
                 ListItem::new("with_overflowing_content_in_end_slot")
                     .child("An excerpt")
                     .end_slot(Label::new(OVERFLOWING_TEXT).color(Color::Muted)),
             )
             .child(Story::label(
+                cx,
                 "`inset` with overflowing content in the `end_slot`",
             ))
             .child(
@@ -116,6 +120,7 @@ impl Render for ListItemStory {
                     .end_slot(Label::new(OVERFLOWING_TEXT).color(Color::Muted)),
             )
             .child(Story::label(
+                cx,
                 "`inset` with overflowing content in `children` and `end_slot`",
             ))
             .child(

crates/ui/src/components/stories/tab.rs

@@ -9,12 +9,12 @@ use crate::{Indicator, Tab};
 pub struct TabStory;
 
 impl Render for TabStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<Tab>())
-            .child(Story::label("Default"))
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<Tab>(cx))
+            .child(Story::label(cx, "Default"))
             .child(h_flex().child(Tab::new("tab_1").child("Tab 1")))
-            .child(Story::label("With indicator"))
+            .child(Story::label(cx, "With indicator"))
             .child(
                 h_flex().child(
                     Tab::new("tab_1")
@@ -22,7 +22,7 @@ impl Render for TabStory {
                         .child("Tab 1"),
                 ),
             )
-            .child(Story::label("With close button"))
+            .child(Story::label(cx, "With close button"))
             .child(
                 h_flex().child(
                     Tab::new("tab_1")
@@ -37,13 +37,13 @@ impl Render for TabStory {
                         .child("Tab 1"),
                 ),
             )
-            .child(Story::label("List of tabs"))
+            .child(Story::label(cx, "List of tabs"))
             .child(
                 h_flex()
                     .child(Tab::new("tab_1").child("Tab 1"))
                     .child(Tab::new("tab_2").child("Tab 2")),
             )
-            .child(Story::label("List of tabs with first tab selected"))
+            .child(Story::label(cx, "List of tabs with first tab selected"))
             .child(
                 h_flex()
                     .child(
@@ -64,7 +64,7 @@ impl Render for TabStory {
                     )
                     .child(Tab::new("tab_4").position(TabPosition::Last).child("Tab 4")),
             )
-            .child(Story::label("List of tabs with last tab selected"))
+            .child(Story::label(cx, "List of tabs with last tab selected"))
             .child(
                 h_flex()
                     .child(
@@ -89,7 +89,7 @@ impl Render for TabStory {
                             .child("Tab 4"),
                     ),
             )
-            .child(Story::label("List of tabs with second tab selected"))
+            .child(Story::label(cx, "List of tabs with second tab selected"))
             .child(
                 h_flex()
                     .child(

crates/ui/src/components/stories/tab_bar.rs

@@ -6,7 +6,7 @@ use crate::{prelude::*, Tab, TabBar, TabPosition};
 pub struct TabBarStory;
 
 impl Render for TabBarStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let tab_count = 20;
         let selected_tab_index = 3;
 
@@ -31,9 +31,9 @@ impl Render for TabBarStory {
             })
             .collect::<Vec<_>>();
 
-        Story::container()
-            .child(Story::title_for::<TabBar>())
-            .child(Story::label("Default"))
+        Story::container(cx)
+            .child(Story::title_for::<TabBar>(cx))
+            .child(Story::label(cx, "Default"))
             .child(
                 h_flex().child(
                     TabBar::new("tab_bar_1")

crates/ui/src/components/stories/toggle_button.rs

@@ -6,9 +6,9 @@ use crate::{prelude::*, ToggleButton};
 pub struct ToggleButtonStory;
 
 impl Render for ToggleButtonStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<ToggleButton>())
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<ToggleButton>(cx))
             .child(
                 StorySection::new().child(
                     StoryItem::new(

crates/ui/src/components/stories/tool_strip.rs

@@ -6,9 +6,9 @@ use crate::{prelude::*, ToolStrip, Tooltip};
 pub struct ToolStripStory;
 
 impl Render for ToolStripStory {
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        Story::container()
-            .child(Story::title_for::<ToolStrip>())
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container(cx)
+            .child(Story::title_for::<ToolStrip>(cx))
             .child(
                 StorySection::new().child(StoryItem::new(
                     "Vertical Tool Strip",