Implement theme styling for `Container`

6 files changed, 81 insertions, 134 deletions

diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 4c955b6a..fca1116e 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -193,9 +193,9 @@ impl Application for Example {
                 .controls(pane.controls.view(id, total_panes, *is_pinned))
                 .padding(10)
                 .style(if is_focused {
-                    style::TitleBar::Focused
+                    style::title_bar_focused
                 } else {
-                    style::TitleBar::Active
+                    style::title_bar_active
                 });
 
             pane_grid::Content::new(Responsive::new(responsive, move |size| {
@@ -203,9 +203,9 @@ impl Application for Example {
             }))
             .title_bar(title_bar)
             .style(if is_focused {
-                style::Pane::Focused
+                style::pane_focused
             } else {
-                style::Pane::Active
+                style::pane_active
             })
         })
         .width(Length::Fill)
@@ -387,51 +387,47 @@ impl Controls {
 }
 
 mod style {
-    use iced::{container, Background, Color};
+    use iced::{container, Theme};
 
-    const SURFACE: Color = Color::from_rgb(
-        0xF2 as f32 / 255.0,
-        0xF3 as f32 / 255.0,
-        0xF5 as f32 / 255.0,
-    );
+    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    pub enum TitleBar {
-        Active,
-        Focused,
+        container::Appearance {
+            text_color: Some(palette.background.strong.text),
+            background: Some(palette.background.strong.color.into()),
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for TitleBar {
-        fn style(&self) -> container::Style {
-            let pane = match self {
-                Self::Active => Pane::Active,
-                Self::Focused => Pane::Focused,
-            }
-            .style();
+    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-            container::Style {
-                text_color: Some(Color::WHITE),
-                background: Some(pane.border_color.into()),
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.primary.strong.text),
+            background: Some(palette.primary.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Pane {
-        Active,
-        Focused,
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.background.strong.color,
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for Pane {
-        fn style(&self) -> container::Style {
-            container::Style {
-                background: Some(Background::Color(SURFACE)),
-                border_width: 2.0,
-                border_color: match self {
-                    Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
-                    Self::Focused => Color::BLACK,
-                },
-                ..Default::default()
-            }
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.primary.strong.color,
+            ..Default::default()
         }
     }
 }
diff --git a/examples/pure/game_of_life/src/main.rs b/examples/pure/game_of_life/src/main.rs
index 87c7a204..4db9fbc7 100644
--- a/examples/pure/game_of_life/src/main.rs
+++ b/examples/pure/game_of_life/src/main.rs
@@ -151,7 +151,6 @@ impl Application for GameOfLife {
         container(content)
             .width(Length::Fill)
             .height(Length::Fill)
-            .style(style::Container)
             .into()
     }
 }
diff --git a/examples/pure/game_of_life/src/style.rs b/examples/pure/game_of_life/src/style.rs
index 773b88eb..d1ca5c9b 100644
--- a/examples/pure/game_of_life/src/style.rs
+++ b/examples/pure/game_of_life/src/style.rs
@@ -1,4 +1,4 @@
-use iced::{container, pick_list, Color};
+use iced::{pick_list, Color};
 
 pub const BACKGROUND: Color = Color::from_rgb(
     0x2F as f32 / 255.0,
@@ -6,17 +6,6 @@ pub const BACKGROUND: Color = Color::from_rgb(
     0x36 as f32 / 255.0,
 );
 
-pub struct Container;
-
-impl container::StyleSheet for Container {
-    fn style(&self) -> container::Style {
-        container::Style {
-            text_color: Some(Color::WHITE),
-            ..container::Style::default()
-        }
-    }
-}
-
 pub struct PickList;
 
 impl pick_list::StyleSheet for PickList {
diff --git a/examples/pure/pane_grid/src/main.rs b/examples/pure/pane_grid/src/main.rs
index 2825a5c2..077e116b 100644
--- a/examples/pure/pane_grid/src/main.rs
+++ b/examples/pure/pane_grid/src/main.rs
@@ -179,9 +179,9 @@ impl Application for Example {
                 .controls(view_controls(id, total_panes, pane.is_pinned))
                 .padding(10)
                 .style(if is_focused {
-                    style::TitleBar::Focused
+                    style::title_bar_focused
                 } else {
-                    style::TitleBar::Active
+                    style::title_bar_active
                 });
 
             pane_grid::Content::new(responsive(move |size| {
@@ -189,9 +189,9 @@ impl Application for Example {
             }))
             .title_bar(title_bar)
             .style(if is_focused {
-                style::Pane::Focused
+                style::pane_focused
             } else {
-                style::Pane::Active
+                style::pane_active
             })
         })
         .width(Length::Fill)
@@ -323,51 +323,47 @@ fn view_controls<'a>(
 }
 
 mod style {
-    use iced::{container, Background, Color};
+    use iced::{container, Theme};
 
-    const SURFACE: Color = Color::from_rgb(
-        0xF2 as f32 / 255.0,
-        0xF3 as f32 / 255.0,
-        0xF5 as f32 / 255.0,
-    );
+    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-    pub enum TitleBar {
-        Active,
-        Focused,
+        container::Appearance {
+            text_color: Some(palette.background.strong.text),
+            background: Some(palette.background.strong.color.into()),
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for TitleBar {
-        fn style(&self) -> container::Style {
-            let pane = match self {
-                Self::Active => Pane::Active,
-                Self::Focused => Pane::Focused,
-            }
-            .style();
+    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
 
-            container::Style {
-                text_color: Some(Color::WHITE),
-                background: Some(pane.border_color.into()),
-                ..Default::default()
-            }
+        container::Appearance {
+            text_color: Some(palette.primary.strong.text),
+            background: Some(palette.primary.strong.color.into()),
+            ..Default::default()
         }
     }
 
-    pub enum Pane {
-        Active,
-        Focused,
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.background.strong.color,
+            ..Default::default()
+        }
     }
 
-    impl container::StyleSheet for Pane {
-        fn style(&self) -> container::Style {
-            container::Style {
-                background: Some(Background::Color(SURFACE)),
-                border_width: 2.0,
-                border_color: match self {
-                    Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
-                    Self::Focused => Color::BLACK,
-                },
-                ..Default::default()
-            }
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border_width: 2.0,
+            border_color: palette.primary.strong.color,
+            ..Default::default()
         }
     }
 }
diff --git a/examples/pure/tooltip/src/main.rs b/examples/pure/tooltip/src/main.rs
index dbd83f5f..e9a6c111 100644
--- a/examples/pure/tooltip/src/main.rs
+++ b/examples/pure/tooltip/src/main.rs
@@ -1,6 +1,7 @@
-use iced::pure::{
-    button, container, tooltip, widget::tooltip::Position, Element, Sandbox,
-};
+use iced::pure::widget::tooltip::Position;
+use iced::pure::{button, container, tooltip};
+use iced::pure::{Element, Sandbox};
+use iced::theme;
 use iced::{Length, Settings};
 
 pub fn main() -> iced::Result {
@@ -53,7 +54,7 @@ impl Sandbox for Example {
             self.position,
         )
         .gap(10)
-        .style(style::Tooltip);
+        .style(theme::Container::Box);
 
         container(tooltip)
             .width(Length::Fill)
@@ -73,21 +74,3 @@ fn position_to_text<'a>(position: Position) -> &'a str {
         Position::Right => "Right",
     }
 }
-
-mod style {
-    use iced::container;
-    use iced::Color;
-
-    pub struct Tooltip;
-
-    impl container::StyleSheet for Tooltip {
-        fn style(&self) -> container::Style {
-            container::Style {
-                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
-                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
-                border_radius: 12.0,
-                ..container::Style::default()
-            }
-        }
-    }
-}
diff --git a/examples/tooltip/src/main.rs b/examples/tooltip/src/main.rs
index cfeaf6a6..1bd1133c 100644
--- a/examples/tooltip/src/main.rs
+++ b/examples/tooltip/src/main.rs
@@ -1,7 +1,9 @@
+use iced::alignment::{self, Alignment};
+use iced::button;
+use iced::theme;
 use iced::tooltip::{self, Tooltip};
 use iced::{
-    alignment, button, Alignment, Button, Column, Container, Element, Length,
-    Row, Sandbox, Settings, Text,
+    Button, Column, Container, Element, Length, Row, Sandbox, Settings, Text,
 };
 
 pub fn main() {
@@ -115,24 +117,6 @@ fn tooltip<'a>(
     )
     .gap(5)
     .padding(10)
-    .style(style::Tooltip)
+    .style(theme::Container::Box)
     .into()
 }
-
-mod style {
-    use iced::container;
-    use iced::Color;
-
-    pub struct Tooltip;
-
-    impl container::StyleSheet for Tooltip {
-        fn style(&self) -> container::Style {
-            container::Style {
-                text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
-                background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
-                border_radius: 12.0,
-                ..container::Style::default()
-            }
-        }
-    }
-}