Simplify theming for `Container` widget

20 files changed, 276 insertions, 187 deletions

diff --git a/examples/editor/src/main.rs b/examples/editor/src/main.rs
index b5870e9e..60a6ca5a 100644
--- a/examples/editor/src/main.rs
+++ b/examples/editor/src/main.rs
@@ -1,14 +1,13 @@
 use iced::executor;
 use iced::highlighter::{self, Highlighter};
 use iced::keyboard;
-use iced::theme::{self, Theme};
 use iced::widget::{
     button, column, container, horizontal_space, pick_list, row, text,
     text_editor, tooltip,
 };
 use iced::{
     Alignment, Application, Command, Element, Font, Length, Settings,
-    Subscription,
+    Subscription, Theme,
 };
 
 use std::ffi;
@@ -287,7 +286,7 @@ fn action<'a, Message: Clone + 'a>(
             label,
             tooltip::Position::FollowCursor,
         )
-        .style(theme::Container::Box)
+        .style(container::box_)
         .into()
     } else {
         action.style(button::secondary).into()
diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs
index a021c164..1a264063 100644
--- a/examples/gradient/src/main.rs
+++ b/examples/gradient/src/main.rs
@@ -1,7 +1,7 @@
 use iced::application;
 use iced::theme::{self, Theme};
 use iced::widget::{
-    checkbox, column, container, horizontal_space, row, slider, text,
+    checkbox, column, container, horizontal_space, row, slider, text, themer,
 };
 use iced::{gradient, window};
 use iced::{
@@ -71,20 +71,24 @@ impl Sandbox for Gradient {
             transparent,
         } = *self;
 
-        let gradient_box = container(horizontal_space())
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .style(move |_: &_| {
-                let gradient = gradient::Linear::new(angle)
-                    .add_stop(0.0, start)
-                    .add_stop(1.0, end)
-                    .into();
-
-                container::Appearance {
-                    background: Some(Background::Gradient(gradient)),
-                    ..Default::default()
-                }
-            });
+        let appearance = {
+            let gradient = gradient::Linear::new(angle)
+                .add_stop(0.0, start)
+                .add_stop(1.0, end)
+                .into();
+
+            container::Appearance {
+                background: Some(Background::Gradient(gradient)),
+                ..Default::default()
+            }
+        };
+
+        let gradient_box = themer(
+            move |_| appearance,
+            container(horizontal_space())
+                .width(Length::Fill)
+                .height(Length::Fill),
+        );
 
         let angle_picker = row![
             text("Angle").width(64),
diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs
index 39c8315f..b2d28a1c 100644
--- a/examples/layout/src/main.rs
+++ b/examples/layout/src/main.rs
@@ -1,7 +1,6 @@
 use iced::executor;
 use iced::keyboard;
 use iced::mouse;
-use iced::theme;
 use iced::widget::{
     button, canvas, checkbox, column, container, horizontal_space, pick_list,
     row, scrollable, text,
@@ -98,7 +97,7 @@ impl Application for Layout {
         } else {
             self.example.view()
         })
-        .style(|theme: &Theme| {
+        .style(|theme, _status| {
             let palette = theme.extended_palette();
 
             container::Appearance::default()
@@ -262,7 +261,7 @@ fn application<'a>() -> Element<'a, Message> {
         .padding(10)
         .align_items(Alignment::Center),
     )
-    .style(|theme: &Theme| {
+    .style(|theme, _status| {
         let palette = theme.extended_palette();
 
         container::Appearance::default()
@@ -276,7 +275,7 @@ fn application<'a>() -> Element<'a, Message> {
             .width(200)
             .align_items(Alignment::Center),
     )
-    .style(theme::Container::Box)
+    .style(container::box_)
     .height(Length::Fill)
     .center_y();
 
diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs
index 938ce32c..df3da1cd 100644
--- a/examples/modal/src/main.rs
+++ b/examples/modal/src/main.rs
@@ -2,7 +2,6 @@ use iced::event::{self, Event};
 use iced::executor;
 use iced::keyboard;
 use iced::keyboard::key;
-use iced::theme;
 use iced::widget::{
     self, button, column, container, horizontal_space, pick_list, row, text,
     text_input,
@@ -175,7 +174,7 @@ impl Application for App {
             )
             .width(300)
             .padding(10)
-            .style(theme::Container::Box);
+            .style(container::box_);
 
             Modal::new(content, modal)
                 .on_blur(Message::HideModal)
diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 2bed5a03..eb904c3f 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -348,7 +348,10 @@ mod style {
     use iced::widget::container;
     use iced::{Border, Theme};
 
-    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+    pub fn title_bar_active(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
         let palette = theme.extended_palette();
 
         container::Appearance {
@@ -358,7 +361,10 @@ mod style {
         }
     }
 
-    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+    pub fn title_bar_focused(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
         let palette = theme.extended_palette();
 
         container::Appearance {
@@ -368,7 +374,10 @@ mod style {
         }
     }
 
-    pub fn pane_active(theme: &Theme) -> container::Appearance {
+    pub fn pane_active(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
         let palette = theme.extended_palette();
 
         container::Appearance {
@@ -382,7 +391,10 @@ mod style {
         }
     }
 
-    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+    pub fn pane_focused(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
         let palette = theme.extended_palette();
 
         container::Appearance {
diff --git a/examples/screenshot/src/main.rs b/examples/screenshot/src/main.rs
index dc4684d4..c670b20b 100644
--- a/examples/screenshot/src/main.rs
+++ b/examples/screenshot/src/main.rs
@@ -1,7 +1,6 @@
 use iced::alignment;
 use iced::executor;
 use iced::keyboard;
-use iced::theme;
 use iced::widget::{button, column, container, image, row, text, text_input};
 use iced::window;
 use iced::window::screenshot::{self, Screenshot};
@@ -149,7 +148,7 @@ impl Application for Example {
 
         let image = container(image)
             .padding(10)
-            .style(theme::Container::Box)
+            .style(container::box_)
             .width(Length::FillPortion(2))
             .height(Length::Fill)
             .center_x()
diff --git a/examples/toast/src/main.rs b/examples/toast/src/main.rs
index c1d29193..49626710 100644
--- a/examples/toast/src/main.rs
+++ b/examples/toast/src/main.rs
@@ -209,27 +209,6 @@ mod toast {
             &[Self::Primary, Self::Secondary, Self::Success, Self::Danger];
     }
 
-    impl container::StyleSheet for Status {
-        type Style = Theme;
-
-        fn appearance(&self, theme: &Theme) -> container::Appearance {
-            let palette = theme.extended_palette();
-
-            let pair = match self {
-                Status::Primary => palette.primary.weak,
-                Status::Secondary => palette.secondary.weak,
-                Status::Success => palette.success.weak,
-                Status::Danger => palette.danger.weak,
-            };
-
-            container::Appearance {
-                background: Some(pair.color.into()),
-                text_color: pair.text.into(),
-                ..Default::default()
-            }
-        }
-    }
-
     impl fmt::Display for Status {
         fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
             match self {
@@ -282,14 +261,17 @@ mod toast {
                         )
                         .width(Length::Fill)
                         .padding(5)
-                        .style(
-                            theme::Container::Custom(Box::new(toast.status))
-                        ),
+                        .style(match toast.status {
+                            Status::Primary => primary,
+                            Status::Secondary => secondary,
+                            Status::Success => success,
+                            Status::Danger => danger,
+                        }),
                         horizontal_rule(1),
                         container(text(toast.body.as_str()))
                             .width(Length::Fill)
                             .padding(5)
-                            .style(theme::Container::Box),
+                            .style(container::box_),
                     ])
                     .max_width(200)
                     .into()
@@ -676,4 +658,48 @@ mod toast {
             Element::new(manager)
         }
     }
+
+    fn styled(pair: theme::palette::Pair) -> container::Appearance {
+        container::Appearance {
+            background: Some(pair.color.into()),
+            text_color: pair.text.into(),
+            ..Default::default()
+        }
+    }
+
+    fn primary(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        styled(palette.primary.weak)
+    }
+
+    fn secondary(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        styled(palette.secondary.weak)
+    }
+
+    fn success(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        styled(palette.success.weak)
+    }
+
+    fn danger(
+        theme: &Theme,
+        _status: container::Status,
+    ) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        styled(palette.danger.weak)
+    }
 }
diff --git a/examples/tooltip/src/main.rs b/examples/tooltip/src/main.rs
index a904cce0..c83b671f 100644
--- a/examples/tooltip/src/main.rs
+++ b/examples/tooltip/src/main.rs
@@ -1,4 +1,3 @@
-use iced::theme;
 use iced::widget::tooltip::Position;
 use iced::widget::{button, container, tooltip};
 use iced::{Element, Length, Sandbox, Settings};
@@ -53,7 +52,7 @@ impl Sandbox for Example {
             self.position,
         )
         .gap(10)
-        .style(theme::Container::Box);
+        .style(container::box_);
 
         container(tooltip)
             .width(Length::Fill)
diff --git a/examples/visible_bounds/src/main.rs b/examples/visible_bounds/src/main.rs
index 10cdc783..d7f5a81d 100644
--- a/examples/visible_bounds/src/main.rs
+++ b/examples/visible_bounds/src/main.rs
@@ -1,14 +1,13 @@
 use iced::event::{self, Event};
 use iced::executor;
 use iced::mouse;
-use iced::theme::{self, Theme};
 use iced::widget::{
     column, container, horizontal_space, row, scrollable, text, vertical_space,
 };
 use iced::window;
 use iced::{
     Alignment, Application, Color, Command, Element, Font, Length, Point,
-    Rectangle, Settings, Subscription,
+    Rectangle, Settings, Subscription, Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -133,7 +132,7 @@ impl Application for Example {
                     container(text("I am the outer container!"))
                         .id(OUTER_CONTAINER.clone())
                         .padding(40)
-                        .style(theme::Container::Box),
+                        .style(container::box_),
                     vertical_space().height(400),
                     scrollable(
                         column![
@@ -142,7 +141,7 @@ impl Application for Example {
                             container(text("I am the inner container!"))
                                 .id(INNER_CONTAINER.clone())
                                 .padding(40)
-                                .style(theme::Container::Box),
+                                .style(container::box_),
                             vertical_space().height(400),
                         ]
                         .padding(20)
diff --git a/style/src/theme.rs b/style/src/theme.rs
index 81303e68..c3260427 100644
--- a/style/src/theme.rs
+++ b/style/src/theme.rs
@@ -20,7 +20,7 @@ use crate::text_editor;
 use crate::text_input;
 use crate::toggler;
 
-use crate::core::{Background, Border, Color, Shadow};
+use crate::core::{Background, Border, Color};
 
 use std::fmt;
 use std::rc::Rc;
@@ -283,59 +283,6 @@ impl<T: Fn(&Theme) -> application::Appearance> application::StyleSheet for T {
     }
 }
 
-/// The style of a container.
-#[derive(Default)]
-pub enum Container {
-    /// No style.
-    #[default]
-    Transparent,
-    /// A simple box.
-    Box,
-    /// A custom style.
-    Custom(Box<dyn container::StyleSheet<Style = Theme>>),
-}
-
-impl From<container::Appearance> for Container {
-    fn from(appearance: container::Appearance) -> Self {
-        Self::Custom(Box::new(move |_: &_| appearance))
-    }
-}
-
-impl<T: Fn(&Theme) -> container::Appearance + 'static> From<T> for Container {
-    fn from(f: T) -> Self {
-        Self::Custom(Box::new(f))
-    }
-}
-
-impl container::StyleSheet for Theme {
-    type Style = Container;
-
-    fn appearance(&self, style: &Self::Style) -> container::Appearance {
-        match style {
-            Container::Transparent => container::Appearance::default(),
-            Container::Box => {
-                let palette = self.extended_palette();
-
-                container::Appearance {
-                    text_color: None,
-                    background: Some(palette.background.weak.color.into()),
-                    border: Border::with_radius(2),
-                    shadow: Shadow::default(),
-                }
-            }
-            Container::Custom(custom) => custom.appearance(self),
-        }
-    }
-}
-
-impl<T: Fn(&Theme) -> container::Appearance> container::StyleSheet for T {
-    type Style = Theme;
-
-    fn appearance(&self, style: &Self::Style) -> container::Appearance {
-        (self)(style)
-    }
-}
-
 impl slider::StyleSheet for Theme {
     fn default() -> fn(&Self, slider::Status) -> slider::Appearance {
         slider
diff --git a/widget/src/combo_box.rs b/widget/src/combo_box.rs
index e3862174..665b1da9 100644
--- a/widget/src/combo_box.rs
+++ b/widget/src/combo_box.rs
@@ -299,7 +299,7 @@ impl<'a, T, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
 where
     T: Display + Clone + 'static,
     Message: Clone,
-    Theme: container::StyleSheet
+    Theme: container::Style
         + text_input::StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet,
@@ -719,7 +719,7 @@ impl<'a, T, Message, Theme, Renderer>
 where
     T: Display + Clone + 'static,
     Message: Clone + 'a,
-    Theme: container::StyleSheet
+    Theme: container::Style
         + text_input::StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
diff --git a/widget/src/container.rs b/widget/src/container.rs
index e0174177..66e80820 100644
--- a/widget/src/container.rs
+++ b/widget/src/container.rs
@@ -8,12 +8,11 @@ use crate::core::renderer;
 use crate::core::widget::tree::{self, Tree};
 use crate::core::widget::{self, Operation};
 use crate::core::{
-    Background, Clipboard, Color, Element, Layout, Length, Padding, Pixels,
-    Point, Rectangle, Shell, Size, Vector, Widget,
+    Background, Border, Clipboard, Color, Element, Layout, Length, Padding,
+    Pixels, Point, Rectangle, Shadow, Shell, Size, Vector, Widget,
 };
 use crate::runtime::Command;
-
-pub use iced_style::container::{Appearance, StyleSheet};
+use crate::style::Theme;
 
 /// An element decorating some content.
 ///
@@ -25,7 +24,6 @@ pub struct Container<
     Theme = crate::Theme,
     Renderer = crate::Renderer,
 > where
-    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     id: Option<Id>,
@@ -36,19 +34,19 @@ pub struct Container<
     max_height: f32,
     horizontal_alignment: alignment::Horizontal,
     vertical_alignment: alignment::Vertical,
-    style: Theme::Style,
+    style: fn(&Theme, Status) -> Appearance,
     clip: bool,
     content: Element<'a, Message, Theme, Renderer>,
 }
 
 impl<'a, Message, Theme, Renderer> Container<'a, Message, Theme, Renderer>
 where
-    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     /// Creates an empty [`Container`].
     pub fn new<T>(content: T) -> Self
     where
+        Theme: Style,
         T: Into<Element<'a, Message, Theme, Renderer>>,
     {
         let content = content.into();
@@ -63,7 +61,7 @@ where
             max_height: f32::INFINITY,
             horizontal_alignment: alignment::Horizontal::Left,
             vertical_alignment: alignment::Vertical::Top,
-            style: Default::default(),
+            style: Theme::default(),
             clip: false,
             content,
         }
@@ -130,8 +128,8 @@ where
     }
 
     /// Sets the style of the [`Container`].
-    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
-        self.style = style.into();
+    pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self {
+        self.style = style;
         self
     }
 
@@ -146,7 +144,6 @@ where
 impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
     for Container<'a, Message, Theme, Renderer>
 where
-    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     fn tag(&self) -> tree::Tag {
@@ -262,10 +259,18 @@ where
         cursor: mouse::Cursor,
         viewport: &Rectangle,
     ) {
-        let style = theme.appearance(&self.style);
+        let bounds = layout.bounds();
+
+        let status = if cursor.is_over(bounds) {
+            Status::Hovered
+        } else {
+            Status::Idle
+        };
 
-        if let Some(clipped_viewport) = layout.bounds().intersection(viewport) {
-            draw_background(renderer, &style, layout.bounds());
+        let style = (self.style)(theme, status);
+
+        if let Some(clipped_viewport) = bounds.intersection(viewport) {
+            draw_background(renderer, &style, bounds);
 
             self.content.as_widget().draw(
                 tree,
@@ -307,7 +312,7 @@ impl<'a, Message, Theme, Renderer> From<Container<'a, Message, Theme, Renderer>>
     for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Theme: 'a + StyleSheet,
+    Theme: 'a,
     Renderer: 'a + crate::core::Renderer,
 {
     fn from(
@@ -482,3 +487,86 @@ pub fn visible_bounds(id: Id) -> Command<Option<Rectangle>> {
         bounds: None,
     })
 }
+
+/// The appearance of a container.
+#[derive(Debug, Clone, Copy, Default)]
+pub struct Appearance {
+    /// The text [`Color`] of the container.
+    pub text_color: Option<Color>,
+    /// The [`Background`] of the container.
+    pub background: Option<Background>,
+    /// The [`Border`] of the container.
+    pub border: Border,
+    /// The [`Shadow`] of the container.
+    pub shadow: Shadow,
+}
+
+impl Appearance {
+    /// Derives a new [`Appearance`] with a border of the given [`Color`] and
+    /// `width`.
+    pub fn with_border(
+        self,
+        color: impl Into<Color>,
+        width: impl Into<Pixels>,
+    ) -> Self {
+        Self {
+            border: Border {
+                color: color.into(),
+                width: width.into().0,
+                ..Border::default()
+            },
+            ..self
+        }
+    }
+
+    /// Derives a new [`Appearance`] with the given [`Background`].
+    pub fn with_background(self, background: impl Into<Background>) -> Self {
+        Self {
+            background: Some(background.into()),
+            ..self
+        }
+    }
+}
+
+/// The possible status of a [`Container`].
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Status {
+    /// The [`Container`] is idle.
+    Idle,
+    /// The [`Container`] is being hovered.
+    Hovered,
+}
+
+/// The style of a [`Container`] for a theme.
+pub trait Style {
+    /// The default style of a [`Container`].
+    fn default() -> fn(&Self, Status) -> Appearance;
+}
+
+impl Style for Theme {
+    fn default() -> fn(&Self, Status) -> Appearance {
+        transparent
+    }
+}
+
+impl Style for Appearance {
+    fn default() -> fn(&Self, Status) -> Appearance {
+        |appearance, _status| *appearance
+    }
+}
+
+/// A transparent [`Container`].
+pub fn transparent(_theme: &Theme, _status: Status) -> Appearance {
+    <Appearance as Default>::default()
+}
+
+/// A rounded [`Container`] with a background.
+pub fn box_(theme: &Theme, _status: Status) -> Appearance {
+    let palette = theme.extended_palette();
+
+    Appearance {
+        background: Some(palette.background.weak.color.into()),
+        border: Border::with_radius(2),
+        ..<Appearance as Default>::default()
+    }
+}
diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs
index 397cc452..a14a307e 100644
--- a/widget/src/helpers.rs
+++ b/widget/src/helpers.rs
@@ -58,7 +58,7 @@ pub fn container<'a, Message, Theme, Renderer>(
     content: impl Into<Element<'a, Message, Theme, Renderer>>,
 ) -> Container<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet,
+    Theme: container::Style,
     Renderer: core::Renderer,
 {
     Container::new(content)
@@ -134,7 +134,7 @@ pub fn tooltip<'a, Message, Theme, Renderer>(
     position: tooltip::Position,
 ) -> crate::Tooltip<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet + text::StyleSheet,
+    Theme: container::Style + text::StyleSheet,
     Renderer: core::text::Renderer,
 {
     Tooltip::new(content, tooltip, position)
@@ -278,7 +278,7 @@ where
     Theme: pick_list::StyleSheet
         + scrollable::StyleSheet
         + overlay::menu::StyleSheet
-        + container::StyleSheet,
+        + container::Style,
     <Theme as overlay::menu::StyleSheet>::Style:
         From<<Theme as pick_list::StyleSheet>::Style>,
 {
diff --git a/widget/src/overlay/menu.rs b/widget/src/overlay/menu.rs
index 8a4d6a98..a666b98e 100644
--- a/widget/src/overlay/menu.rs
+++ b/widget/src/overlay/menu.rs
@@ -47,7 +47,7 @@ impl<'a, T, Message, Theme, Renderer> Menu<'a, T, Message, Theme, Renderer>
 where
     T: ToString + Clone,
     Message: 'a,
-    Theme: StyleSheet + container::StyleSheet + scrollable::StyleSheet + 'a,
+    Theme: StyleSheet + container::Style + scrollable::StyleSheet + 'a,
     Renderer: text::Renderer + 'a,
 {
     /// Creates a new [`Menu`] with the given [`State`], a list of options, and
@@ -165,7 +165,7 @@ impl Default for State {
 
 struct Overlay<'a, Message, Theme, Renderer>
 where
-    Theme: StyleSheet + container::StyleSheet,
+    Theme: StyleSheet + container::Style,
     Renderer: crate::core::Renderer,
 {
     position: Point,
@@ -179,7 +179,7 @@ where
 impl<'a, Message, Theme, Renderer> Overlay<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Theme: StyleSheet + container::StyleSheet + scrollable::StyleSheet + 'a,
+    Theme: StyleSheet + container::Style + scrollable::StyleSheet + 'a,
     Renderer: text::Renderer + 'a,
 {
     pub fn new<T>(
@@ -235,7 +235,7 @@ impl<'a, Message, Theme, Renderer>
     crate::core::Overlay<Message, Theme, Renderer>
     for Overlay<'a, Message, Theme, Renderer>
 where
-    Theme: StyleSheet + container::StyleSheet,
+    Theme: StyleSheet + container::Style,
     Renderer: text::Renderer,
 {
     fn layout(&mut self, renderer: &Renderer, bounds: Size) -> layout::Node {
diff --git a/widget/src/pane_grid.rs b/widget/src/pane_grid.rs
index 478a7024..a18d0fbf 100644
--- a/widget/src/pane_grid.rs
+++ b/widget/src/pane_grid.rs
@@ -32,7 +32,6 @@ pub use title_bar::TitleBar;
 
 pub use crate::style::pane_grid::{Appearance, Line, StyleSheet};
 
-use crate::container;
 use crate::core::event::{self, Event};
 use crate::core::layout;
 use crate::core::mouse;
@@ -105,7 +104,7 @@ pub struct PaneGrid<
     Theme = crate::Theme,
     Renderer = crate::Renderer,
 > where
-    Theme: StyleSheet + container::StyleSheet,
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     contents: Contents<'a, Content<'a, Message, Theme, Renderer>>,
@@ -120,7 +119,7 @@ pub struct PaneGrid<
 
 impl<'a, Message, Theme, Renderer> PaneGrid<'a, Message, Theme, Renderer>
 where
-    Theme: StyleSheet + container::StyleSheet,
+    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     /// Creates a [`PaneGrid`] with the given [`State`] and view function.
@@ -240,7 +239,7 @@ impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
     for PaneGrid<'a, Message, Theme, Renderer>
 where
     Renderer: crate::core::Renderer,
-    Theme: StyleSheet + container::StyleSheet,
+    Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<state::Action>()
@@ -470,7 +469,7 @@ impl<'a, Message, Theme, Renderer> From<PaneGrid<'a, Message, Theme, Renderer>>
     for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Theme: StyleSheet + container::StyleSheet + 'a,
+    Theme: StyleSheet + 'a,
     Renderer: crate::core::Renderer + 'a,
 {
     fn from(
diff --git a/widget/src/pane_grid/content.rs b/widget/src/pane_grid/content.rs
index dfe0fdcf..78a4f347 100644
--- a/widget/src/pane_grid/content.rs
+++ b/widget/src/pane_grid/content.rs
@@ -20,25 +20,26 @@ pub struct Content<
     Theme = crate::Theme,
     Renderer = crate::Renderer,
 > where
-    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
 {
     title_bar: Option<TitleBar<'a, Message, Theme, Renderer>>,
     body: Element<'a, Message, Theme, Renderer>,
-    style: Theme::Style,
+    style: fn(&Theme, container::Status) -> container::Appearance,
 }
 
 impl<'a, Message, Theme, Renderer> Content<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
 {
     /// Creates a new [`Content`] with the provided body.
-    pub fn new(body: impl Into<Element<'a, Message, Theme, Renderer>>) -> Self {
+    pub fn new(body: impl Into<Element<'a, Message, Theme, Renderer>>) -> Self
+    where
+        Theme: container::Style,
+    {
         Self {
             title_bar: None,
             body: body.into(),
-            style: Default::default(),
+            style: Theme::default(),
         }
     }
 
@@ -52,15 +53,17 @@ where
     }
 
     /// Sets the style of the [`Content`].
-    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
-        self.style = style.into();
+    pub fn style(
+        mut self,
+        style: fn(&Theme, container::Status) -> container::Appearance,
+    ) -> Self {
+        self.style = style;
         self
     }
 }
 
 impl<'a, Message, Theme, Renderer> Content<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
 {
     pub(super) fn state(&self) -> Tree {
@@ -104,7 +107,15 @@ where
         let bounds = layout.bounds();
 
         {
-            let style = theme.appearance(&self.style);
+            let style = {
+                let status = if cursor.is_over(bounds) {
+                    container::Status::Hovered
+                } else {
+                    container::Status::Idle
+                };
+
+                (self.style)(theme, status)
+            };
 
             container::draw_background(renderer, &style, bounds);
         }
@@ -370,7 +381,6 @@ where
 impl<'a, Message, Theme, Renderer> Draggable
     for &Content<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
 {
     fn can_be_dragged_at(
@@ -393,7 +403,7 @@ impl<'a, T, Message, Theme, Renderer> From<T>
     for Content<'a, Message, Theme, Renderer>
 where
     T: Into<Element<'a, Message, Theme, Renderer>>,
-    Theme: container::StyleSheet,
+    Theme: container::Style,
     Renderer: crate::core::Renderer,
 {
     fn from(element: T) -> Self {
diff --git a/widget/src/pane_grid/title_bar.rs b/widget/src/pane_grid/title_bar.rs
index 5b57509b..6d786f96 100644
--- a/widget/src/pane_grid/title_bar.rs
+++ b/widget/src/pane_grid/title_bar.rs
@@ -19,24 +19,23 @@ pub struct TitleBar<
     Theme = crate::Theme,
     Renderer = crate::Renderer,
 > where
-    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
 {
     content: Element<'a, Message, Theme, Renderer>,
     controls: Option<Element<'a, Message, Theme, Renderer>>,
     padding: Padding,
     always_show_controls: bool,
-    style: Theme::Style,
+    style: fn(&Theme, container::Status) -> container::Appearance,
 }
 
 impl<'a, Message, Theme, Renderer> TitleBar<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
 {
     /// Creates a new [`TitleBar`] with the given content.
     pub fn new<E>(content: E) -> Self
     where
+        Theme: container::Style,
         E: Into<Element<'a, Message, Theme, Renderer>>,
     {
         Self {
@@ -44,7 +43,7 @@ where
             controls: None,
             padding: Padding::ZERO,
             always_show_controls: false,
-            style: Default::default(),
+            style: Theme::default(),
         }
     }
 
@@ -64,8 +63,11 @@ where
     }
 
     /// Sets the style of the [`TitleBar`].
-    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
-        self.style = style.into();
+    pub fn style(
+        mut self,
+        style: fn(&Theme, container::Status) -> container::Appearance,
+    ) -> Self {
+        self.style = style;
         self
     }
 
@@ -85,7 +87,6 @@ where
 
 impl<'a, Message, Theme, Renderer> TitleBar<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet,
     Renderer: crate::core::Renderer,
 {
     pub(super) fn state(&self) -> Tree {
@@ -128,7 +129,17 @@ where
         show_controls: bool,
     ) {
         let bounds = layout.bounds();
-        let style = theme.appearance(&self.style);
+
+        let style = {
+            let status = if cursor.is_over(bounds) {
+                container::Status::Hovered
+            } else {
+                container::Status::Idle
+            };
+
+            (self.style)(theme, status)
+        };
+
         let inherited_style = renderer::Style {
             text_color: style.text_color.unwrap_or(inherited_style.text_color),
         };
diff --git a/widget/src/pick_list.rs b/widget/src/pick_list.rs
index 1f20e2bc..4d6ca695 100644
--- a/widget/src/pick_list.rs
+++ b/widget/src/pick_list.rs
@@ -64,7 +64,7 @@ where
     Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
-        + container::StyleSheet,
+        + container::Style,
     <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
     Renderer: text::Renderer,
 {
@@ -179,7 +179,7 @@ where
     Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
-        + container::StyleSheet,
+        + container::Style,
     <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
     Renderer: text::Renderer + 'a,
 {
@@ -320,7 +320,7 @@ where
     Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
-        + container::StyleSheet
+        + container::Style
         + 'a,
     <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
     Renderer: text::Renderer + 'a,
@@ -630,7 +630,7 @@ where
     Theme: StyleSheet
         + scrollable::StyleSheet
         + menu::StyleSheet
-        + container::StyleSheet
+        + container::Style
         + 'a,
     <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
     Renderer: text::Renderer + 'a,
diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs
index f736d92e..12e23def 100644
--- a/widget/src/scrollable.rs
+++ b/widget/src/scrollable.rs
@@ -1,5 +1,5 @@
 //! Navigate an endless amount of content with a scrollbar.
-use crate::container;
+// use crate::container;
 use crate::core::event::{self, Event};
 use crate::core::keyboard;
 use crate::core::layout;
@@ -917,11 +917,11 @@ pub fn draw<Theme, Renderer>(
         }
     };
 
-    container::draw_background(
-        renderer,
-        &appearance.container,
-        layout.bounds(),
-    );
+    // container::draw_background(
+    //     renderer,
+    //     &appearance.container,
+    //     layout.bounds(),
+    // );
 
     // Draw inner content
     if scrollbars.active() {
diff --git a/widget/src/tooltip.rs b/widget/src/tooltip.rs
index 51969aec..11df391e 100644
--- a/widget/src/tooltip.rs
+++ b/widget/src/tooltip.rs
@@ -20,7 +20,6 @@ pub struct Tooltip<
     Theme = crate::Theme,
     Renderer = crate::Renderer,
 > where
-    Theme: container::StyleSheet,
     Renderer: text::Renderer,
 {
     content: Element<'a, Message, Theme, Renderer>,
@@ -29,12 +28,11 @@ pub struct Tooltip<
     gap: f32,
     padding: f32,
     snap_within_viewport: bool,
-    style: <Theme as container::StyleSheet>::Style,
+    style: fn(&Theme, container::Status) -> container::Appearance,
 }
 
 impl<'a, Message, Theme, Renderer> Tooltip<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet,
     Renderer: text::Renderer,
 {
     /// The default padding of a [`Tooltip`] drawn by this renderer.
@@ -47,7 +45,10 @@ where
         content: impl Into<Element<'a, Message, Theme, Renderer>>,
         tooltip: impl Into<Element<'a, Message, Theme, Renderer>>,
         position: Position,
-    ) -> Self {
+    ) -> Self
+    where
+        Theme: container::Style,
+    {
         Tooltip {
             content: content.into(),
             tooltip: tooltip.into(),
@@ -55,7 +56,7 @@ where
             gap: 0.0,
             padding: Self::DEFAULT_PADDING,
             snap_within_viewport: true,
-            style: Default::default(),
+            style: Theme::default(),
         }
     }
 
@@ -80,9 +81,9 @@ where
     /// Sets the style of the [`Tooltip`].
     pub fn style(
         mut self,
-        style: impl Into<<Theme as container::StyleSheet>::Style>,
+        style: fn(&Theme, container::Status) -> container::Appearance,
     ) -> Self {
-        self.style = style.into();
+        self.style = style;
         self
     }
 }
@@ -90,7 +91,6 @@ where
 impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
     for Tooltip<'a, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet + crate::text::StyleSheet,
     Renderer: text::Renderer,
 {
     fn children(&self) -> Vec<widget::Tree> {
@@ -239,7 +239,7 @@ where
                 positioning: self.position,
                 gap: self.gap,
                 padding: self.padding,
-                style: &self.style,
+                style: self.style,
             })))
         } else {
             None
@@ -262,7 +262,7 @@ impl<'a, Message, Theme, Renderer> From<Tooltip<'a, Message, Theme, Renderer>>
     for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Theme: container::StyleSheet + crate::text::StyleSheet + 'a,
+    Theme: 'a,
     Renderer: text::Renderer + 'a,
 {
     fn from(
@@ -298,7 +298,6 @@ enum State {
 
 struct Overlay<'a, 'b, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet + widget::text::StyleSheet,
     Renderer: text::Renderer,
 {
     position: Point,
@@ -310,14 +309,13 @@ where
     positioning: Position,
     gap: f32,
     padding: f32,
-    style: &'b <Theme as container::StyleSheet>::Style,
+    style: fn(&Theme, container::Status) -> container::Appearance,
 }
 
 impl<'a, 'b, Message, Theme, Renderer>
     overlay::Overlay<Message, Theme, Renderer>
     for Overlay<'a, 'b, Message, Theme, Renderer>
 where
-    Theme: container::StyleSheet + widget::text::StyleSheet,
     Renderer: text::Renderer,
 {
     fn layout(&mut self, renderer: &Renderer, bounds: Size) -> layout::Node {
@@ -426,7 +424,7 @@ where
         layout: Layout<'_>,
         cursor_position: mouse::Cursor,
     ) {
-        let style = container::StyleSheet::appearance(theme, self.style);
+        let style = (self.style)(theme, container::Status::Idle);
 
         container::draw_background(renderer, &style, layout.bounds());