Merge pull request #2312 from iced-rs/theming-reloaded

Theming reloaded

27 files changed, 256 insertions, 234 deletions

diff --git a/examples/bezier_tool/src/main.rs b/examples/bezier_tool/src/main.rs
index 56cb23ba..897e7df8 100644
--- a/examples/bezier_tool/src/main.rs
+++ b/examples/bezier_tool/src/main.rs
@@ -49,7 +49,9 @@ impl Sandbox for Example {
         column![
             text("Bezier tool example").width(Length::Shrink).size(50),
             self.bezier.view(&self.curves).map(Message::AddCurve),
-            button("Clear").padding(8).on_press(Message::Clear),
+            button("Clear")
+                .style(button::danger)
+                .on_press(Message::Clear),
         ]
         .padding(20)
         .spacing(20)
diff --git a/examples/checkbox/src/main.rs b/examples/checkbox/src/main.rs
index 834a8f5c..121c99ea 100644
--- a/examples/checkbox/src/main.rs
+++ b/examples/checkbox/src/main.rs
@@ -1,6 +1,5 @@
 use iced::executor;
 use iced::font::{self, Font};
-use iced::theme;
 use iced::widget::{checkbox, column, container, row, text};
 use iced::{Application, Command, Element, Length, Settings, Theme};
 
@@ -71,10 +70,10 @@ impl Application for Example {
         };
 
         let checkboxes = row![
-            styled_checkbox("Primary", theme::Checkbox::Primary),
-            styled_checkbox("Secondary", theme::Checkbox::Secondary),
-            styled_checkbox("Success", theme::Checkbox::Success),
-            styled_checkbox("Danger", theme::Checkbox::Danger),
+            styled_checkbox("Primary", checkbox::primary),
+            styled_checkbox("Secondary", checkbox::secondary),
+            styled_checkbox("Success", checkbox::success),
+            styled_checkbox("Danger", checkbox::danger),
         ]
         .spacing(20);
 
diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs
index 13252526..87da0c7e 100644
--- a/examples/clock/src/main.rs
+++ b/examples/clock/src/main.rs
@@ -3,7 +3,7 @@ use iced::mouse;
 use iced::widget::canvas::{stroke, Cache, Geometry, LineCap, Path, Stroke};
 use iced::widget::{canvas, container};
 use iced::{
-    Application, Color, Command, Element, Length, Point, Rectangle, Renderer,
+    Application, Command, Element, Length, Point, Rectangle, Renderer,
     Settings, Subscription, Theme, Vector,
 };
 
@@ -80,6 +80,10 @@ impl Application for Clock {
             )
         })
     }
+
+    fn theme(&self) -> Theme {
+        Theme::TokyoNight
+    }
 }
 
 impl<Message> canvas::Program<Message> for Clock {
@@ -89,16 +93,18 @@ impl<Message> canvas::Program<Message> for Clock {
         &self,
         _state: &Self::State,
         renderer: &Renderer,
-        _theme: &Theme,
+        theme: &Theme,
         bounds: Rectangle,
         _cursor: mouse::Cursor,
     ) -> Vec<Geometry> {
         let clock = self.clock.draw(renderer, bounds.size(), |frame| {
+            let palette = theme.extended_palette();
+
             let center = frame.center();
             let radius = frame.width().min(frame.height()) / 2.0;
 
             let background = Path::circle(center, radius);
-            frame.fill(&background, Color::from_rgb8(0x12, 0x93, 0xD8));
+            frame.fill(&background, palette.primary.weak.color);
 
             let short_hand =
                 Path::line(Point::ORIGIN, Point::new(0.0, -0.5 * radius));
@@ -111,7 +117,7 @@ impl<Message> canvas::Program<Message> for Clock {
             let thin_stroke = || -> Stroke {
                 Stroke {
                     width,
-                    style: stroke::Style::Solid(Color::WHITE),
+                    style: stroke::Style::Solid(palette.primary.weak.text),
                     line_cap: LineCap::Round,
                     ..Stroke::default()
                 }
@@ -120,7 +126,7 @@ impl<Message> canvas::Program<Message> for Clock {
             let wide_stroke = || -> Stroke {
                 Stroke {
                     width: width * 3.0,
-                    style: stroke::Style::Solid(Color::WHITE),
+                    style: stroke::Style::Solid(palette.primary.weak.text),
                     line_cap: LineCap::Round,
                     ..Stroke::default()
                 }
diff --git a/examples/color_palette/Cargo.toml b/examples/color_palette/Cargo.toml
index 2da6c6ed..bf9bff19 100644
--- a/examples/color_palette/Cargo.toml
+++ b/examples/color_palette/Cargo.toml
@@ -7,6 +7,6 @@ publish = false
 
 [dependencies]
 iced.workspace = true
-iced.features = ["canvas", "palette"]
+iced.features = ["canvas"]
 
 palette.workspace = true
diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs
index a5fd46e0..4150c641 100644
--- a/examples/color_palette/src/main.rs
+++ b/examples/color_palette/src/main.rs
@@ -3,7 +3,7 @@ use iced::mouse;
 use iced::widget::canvas::{self, Canvas, Frame, Geometry, Path};
 use iced::widget::{column, row, text, Slider};
 use iced::{
-    Color, Element, Length, Pixels, Point, Rectangle, Renderer, Sandbox,
+    Color, Element, Font, Length, Pixels, Point, Rectangle, Renderer, Sandbox,
     Settings, Size, Vector,
 };
 use palette::{
@@ -15,6 +15,7 @@ use std::ops::RangeInclusive;
 pub fn main() -> iced::Result {
     ColorPalette::run(Settings {
         antialiasing: true,
+        default_font: Font::MONOSPACE,
         ..Settings::default()
     })
 }
@@ -87,6 +88,19 @@ impl Sandbox for ColorPalette {
         .spacing(10)
         .into()
     }
+
+    fn theme(&self) -> iced::Theme {
+        iced::Theme::custom(
+            String::from("Custom"),
+            iced::theme::Palette {
+                background: self.theme.base,
+                primary: *self.theme.lower.first().unwrap(),
+                text: *self.theme.higher.last().unwrap(),
+                success: *self.theme.lower.last().unwrap(),
+                danger: *self.theme.higher.last().unwrap(),
+            },
+        )
+    }
 }
 
 #[derive(Debug)]
@@ -150,7 +164,7 @@ impl Theme {
             .into()
     }
 
-    fn draw(&self, frame: &mut Frame) {
+    fn draw(&self, frame: &mut Frame, text_color: Color) {
         let pad = 20.0;
 
         let box_size = Size {
@@ -169,6 +183,7 @@ impl Theme {
             horizontal_alignment: alignment::Horizontal::Center,
             vertical_alignment: alignment::Vertical::Top,
             size: Pixels(15.0),
+            color: text_color,
             ..canvas::Text::default()
         };
 
@@ -246,12 +261,14 @@ impl<Message> canvas::Program<Message> for Theme {
         &self,
         _state: &Self::State,
         renderer: &Renderer,
-        _theme: &iced::Theme,
+        theme: &iced::Theme,
         bounds: Rectangle,
         _cursor: mouse::Cursor,
     ) -> Vec<Geometry> {
         let theme = self.canvas_cache.draw(renderer, bounds.size(), |frame| {
-            self.draw(frame);
+            let palette = theme.extended_palette();
+
+            self.draw(frame, palette.background.base.text);
         });
 
         vec![theme]
@@ -308,7 +325,7 @@ impl<C: ColorSpace + Copy> ColorPicker<C> {
             slider(cr1, c1, move |v| C::new(v, c2, c3)),
             slider(cr2, c2, move |v| C::new(c1, v, c3)),
             slider(cr3, c3, move |v| C::new(c1, c2, v)),
-            text(color.to_string()).width(185).size(14),
+            text(color.to_string()).width(185).size(12),
         ]
         .spacing(10)
         .align_items(Alignment::Center)
diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs
index 25c0bb39..305ef7dd 100644
--- a/examples/custom_widget/src/main.rs
+++ b/examples/custom_widget/src/main.rs
@@ -62,7 +62,7 @@ mod circle {
             renderer.fill_quad(
                 renderer::Quad {
                     bounds: layout.bounds(),
-                    border: Border::with_radius(self.radius),
+                    border: Border::rounded(self.radius),
                     ..renderer::Quad::default()
                 },
                 Color::BLACK,
diff --git a/examples/editor/src/main.rs b/examples/editor/src/main.rs
index 53c9cf7c..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,10 +286,10 @@ fn action<'a, Message: Clone + 'a>(
             label,
             tooltip::Position::FollowCursor,
         )
-        .style(theme::Container::Box)
+        .style(container::box_)
         .into()
     } else {
-        action.style(theme::Button::Secondary).into()
+        action.style(button::secondary).into()
     }
 }
 
diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index 9cbb7fff..5ec1a11c 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -6,7 +6,6 @@ use grid::Grid;
 use preset::Preset;
 
 use iced::executor;
-use iced::theme::{self, Theme};
 use iced::time;
 use iced::widget::{
     button, checkbox, column, container, pick_list, row, slider, text,
@@ -14,6 +13,7 @@ use iced::widget::{
 use iced::window;
 use iced::{
     Alignment, Application, Command, Element, Length, Settings, Subscription,
+    Theme,
 };
 use std::time::Duration;
 
@@ -171,7 +171,7 @@ fn view_controls<'a>(
             .on_press(Message::TogglePlayback),
         button("Next")
             .on_press(Message::Next)
-            .style(theme::Button::Secondary),
+            .style(button::secondary),
     ]
     .spacing(10);
 
@@ -185,17 +185,14 @@ fn view_controls<'a>(
     row![
         playback_controls,
         speed_controls,
-        checkbox("Grid", is_grid_enabled)
-            .on_toggle(Message::ToggleGrid)
-            .size(16)
-            .spacing(5)
-            .text_size(16),
-        pick_list(preset::ALL, Some(preset), Message::PresetPicked)
-            .padding(8)
-            .text_size(16),
-        button("Clear")
-            .on_press(Message::Clear)
-            .style(theme::Button::Destructive),
+        checkbox("Grid", is_grid_enabled).on_toggle(Message::ToggleGrid),
+        row![
+            pick_list(preset::ALL, Some(preset), Message::PresetPicked),
+            button("Clear")
+                .on_press(Message::Clear)
+                .style(button::danger)
+        ]
+        .spacing(10)
     ]
     .padding(10)
     .spacing(20)
diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs
index a021c164..4a8b2fa5 100644
--- a/examples/gradient/src/main.rs
+++ b/examples/gradient/src/main.rs
@@ -1,11 +1,10 @@
 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::{
-    Alignment, Background, Color, Element, Length, Radians, Sandbox, Settings,
+    Alignment, Color, Element, Length, Radians, Sandbox, Settings, Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -71,20 +70,16 @@ 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 gradient = gradient::Linear::new(angle)
+            .add_stop(0.0, start)
+            .add_stop(1.0, end);
+
+        let gradient_box = themer(
+            gradient,
+            container(horizontal_space())
+                .width(Length::Fill)
+                .height(Length::Fill),
+        );
 
         let angle_picker = row![
             text("Angle").width(64),
@@ -111,16 +106,14 @@ impl Sandbox for Gradient {
         .into()
     }
 
-    fn style(&self) -> theme::Application {
+    fn style(&self, theme: &Theme) -> application::Appearance {
         if self.transparent {
-            theme::Application::custom(|theme: &Theme| {
-                application::Appearance {
-                    background_color: Color::TRANSPARENT,
-                    text_color: theme.palette().text,
-                }
-            })
+            application::Appearance {
+                background_color: Color::TRANSPARENT,
+                text_color: theme.palette().text,
+            }
         } else {
-            theme::Application::Default
+            application::default(theme)
         }
     }
 }
diff --git a/examples/integration/src/controls.rs b/examples/integration/src/controls.rs
index c9bab828..28050f8a 100644
--- a/examples/integration/src/controls.rs
+++ b/examples/integration/src/controls.rs
@@ -1,25 +1,25 @@
 use iced_wgpu::Renderer;
-use iced_widget::{slider, text_input, Column, Row, Text};
-use iced_winit::core::{Alignment, Color, Element, Length};
+use iced_widget::{column, container, row, slider, text, text_input};
+use iced_winit::core::alignment;
+use iced_winit::core::{Color, Element, Length, Theme};
 use iced_winit::runtime::{Command, Program};
-use iced_winit::style::Theme;
 
 pub struct Controls {
     background_color: Color,
-    text: String,
+    input: String,
 }
 
 #[derive(Debug, Clone)]
 pub enum Message {
     BackgroundColorChanged(Color),
-    TextChanged(String),
+    InputChanged(String),
 }
 
 impl Controls {
     pub fn new() -> Controls {
         Controls {
             background_color: Color::BLACK,
-            text: String::default(),
+            input: String::default(),
         }
     }
 
@@ -38,8 +38,8 @@ impl Program for Controls {
             Message::BackgroundColorChanged(color) => {
                 self.background_color = color;
             }
-            Message::TextChanged(text) => {
-                self.text = text;
+            Message::InputChanged(input) => {
+                self.input = input;
             }
         }
 
@@ -48,60 +48,48 @@ impl Program for Controls {
 
     fn view(&self) -> Element<Message, Theme, Renderer> {
         let background_color = self.background_color;
-        let text = &self.text;
 
-        let sliders = Row::new()
-            .width(500)
-            .spacing(20)
-            .push(
-                slider(0.0..=1.0, background_color.r, move |r| {
-                    Message::BackgroundColorChanged(Color {
-                        r,
-                        ..background_color
-                    })
+        let sliders = row![
+            slider(0.0..=1.0, background_color.r, move |r| {
+                Message::BackgroundColorChanged(Color {
+                    r,
+                    ..background_color
                 })
-                .step(0.01),
-            )
-            .push(
-                slider(0.0..=1.0, background_color.g, move |g| {
-                    Message::BackgroundColorChanged(Color {
-                        g,
-                        ..background_color
-                    })
+            })
+            .step(0.01),
+            slider(0.0..=1.0, background_color.g, move |g| {
+                Message::BackgroundColorChanged(Color {
+                    g,
+                    ..background_color
                 })
-                .step(0.01),
-            )
-            .push(
-                slider(0.0..=1.0, background_color.b, move |b| {
-                    Message::BackgroundColorChanged(Color {
-                        b,
-                        ..background_color
-                    })
+            })
+            .step(0.01),
+            slider(0.0..=1.0, background_color.b, move |b| {
+                Message::BackgroundColorChanged(Color {
+                    b,
+                    ..background_color
                 })
-                .step(0.01),
-            );
+            })
+            .step(0.01),
+        ]
+        .width(500)
+        .spacing(20);
 
-        Row::new()
-            .height(Length::Fill)
-            .align_items(Alignment::End)
-            .push(
-                Column::new().align_items(Alignment::End).push(
-                    Column::new()
-                        .padding(10)
-                        .spacing(10)
-                        .push(Text::new("Background color").style(Color::WHITE))
-                        .push(sliders)
-                        .push(
-                            Text::new(format!("{background_color:?}"))
-                                .size(14)
-                                .style(Color::WHITE),
-                        )
-                        .push(
-                            text_input("Placeholder", text)
-                                .on_input(Message::TextChanged),
-                        ),
-                ),
-            )
-            .into()
+        container(
+            column![
+                text("Background color").color(Color::WHITE),
+                text(format!("{background_color:?}"))
+                    .size(14)
+                    .color(Color::WHITE),
+                text_input("Placeholder", &self.input)
+                    .on_input(Message::InputChanged),
+                sliders,
+            ]
+            .spacing(10),
+        )
+        .padding(10)
+        .height(Length::Fill)
+        .align_y(alignment::Vertical::Bottom)
+        .into()
     }
 }
diff --git a/examples/integration/src/main.rs b/examples/integration/src/main.rs
index 0e2e53ac..f53b5bf1 100644
--- a/examples/integration/src/main.rs
+++ b/examples/integration/src/main.rs
@@ -10,11 +10,10 @@ use iced_winit::conversion;
 use iced_winit::core::mouse;
 use iced_winit::core::renderer;
 use iced_winit::core::window;
-use iced_winit::core::{Color, Font, Pixels, Size};
+use iced_winit::core::{Color, Font, Pixels, Size, Theme};
 use iced_winit::futures;
 use iced_winit::runtime::program;
 use iced_winit::runtime::Debug;
-use iced_winit::style::Theme;
 use iced_winit::winit;
 use iced_winit::Clipboard;
 
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/lazy/src/main.rs b/examples/lazy/src/main.rs
index 9d8c0e35..8758fa66 100644
--- a/examples/lazy/src/main.rs
+++ b/examples/lazy/src/main.rs
@@ -1,4 +1,3 @@
-use iced::theme;
 use iced::widget::{
     button, column, horizontal_space, lazy, pick_list, row, scrollable, text,
     text_input,
@@ -181,11 +180,10 @@ impl Sandbox for App {
             column(items.into_iter().map(|item| {
                 let button = button("Delete")
                     .on_press(Message::DeleteItem(item.clone()))
-                    .style(theme::Button::Destructive);
+                    .style(button::danger);
 
                 row![
-                    text(&item.name)
-                        .style(theme::Text::Color(item.color.into())),
+                    text(&item.name).color(item.color),
                     horizontal_space(),
                     pick_list(Color::ALL, Some(item.color), move |color| {
                         Message::ItemColorChanged(item.clone(), color)
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 39719420..5e728ce1 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -1,13 +1,13 @@
 use iced::alignment::{self, Alignment};
 use iced::executor;
 use iced::keyboard;
-use iced::theme::{self, Theme};
 use iced::widget::pane_grid::{self, PaneGrid};
 use iced::widget::{
     button, column, container, responsive, row, scrollable, text,
 };
 use iced::{
     Application, Color, Command, Element, Length, Settings, Size, Subscription,
+    Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -162,7 +162,7 @@ impl Application for Example {
             let title = row![
                 pin_button,
                 "Pane",
-                text(pane.id.to_string()).style(if is_focused {
+                text(pane.id.to_string()).color(if is_focused {
                     PANE_ID_COLOR_FOCUSED
                 } else {
                     PANE_ID_COLOR_UNFOCUSED
@@ -287,10 +287,7 @@ fn view_content<'a>(
         )
     ]
     .push_maybe(if total_panes > 1 && !is_pinned {
-        Some(
-            button("Close", Message::Close(pane))
-                .style(theme::Button::Destructive),
-        )
+        Some(button("Close", Message::Close(pane)).style(button::danger))
     } else {
         None
     })
@@ -327,7 +324,7 @@ fn view_controls<'a>(
 
         Some(
             button(text(content).size(14))
-                .style(theme::Button::Secondary)
+                .style(button::secondary)
                 .padding(3)
                 .on_press(message),
         )
@@ -336,7 +333,7 @@ fn view_controls<'a>(
     });
 
     let close = button(text("Close").size(14))
-        .style(theme::Button::Destructive)
+        .style(button::danger)
         .padding(3)
         .on_press_maybe(if total_panes > 1 && !is_pinned {
             Some(Message::Close(pane))
@@ -351,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 {
@@ -361,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 {
@@ -371,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 {
@@ -385,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/pokedex/src/main.rs b/examples/pokedex/src/main.rs
index 8b71a269..193f85f2 100644
--- a/examples/pokedex/src/main.rs
+++ b/examples/pokedex/src/main.rs
@@ -1,8 +1,6 @@
 use iced::futures;
 use iced::widget::{self, column, container, image, row, text};
-use iced::{
-    Alignment, Application, Color, Command, Element, Length, Settings, Theme,
-};
+use iced::{Alignment, Application, Command, Element, Length, Settings, Theme};
 
 pub fn main() -> iced::Result {
     Pokedex::run(Settings::default())
@@ -116,7 +114,7 @@ impl Pokemon {
                     text(&self.name).size(30).width(Length::Fill),
                     text(format!("#{}", self.number))
                         .size(20)
-                        .style(Color::from([0.5, 0.5, 0.5])),
+                        .color([0.5, 0.5, 0.5]),
                 ]
                 .align_items(Alignment::Center)
                 .spacing(20),
diff --git a/examples/screenshot/src/main.rs b/examples/screenshot/src/main.rs
index 79749956..10a6aea3 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()
@@ -216,9 +215,9 @@ impl Application for Example {
                         )
                     } else {
                         button(centered_text("Saving..."))
-                            .style(theme::Button::Secondary)
+                            .style(button::secondary)
                     }
-                    .style(theme::Button::Secondary)
+                    .style(button::secondary)
                     .padding([10, 20, 10, 20])
                     .width(Length::Fill)
                 ]
@@ -227,7 +226,7 @@ impl Application for Example {
                     crop_controls,
                     button(centered_text("Crop"))
                         .on_press(Message::Crop)
-                        .style(theme::Button::Destructive)
+                        .style(button::danger)
                         .padding([10, 20, 10, 20])
                         .width(Length::Fill),
                 ]
diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
index bae23775..2ad7272b 100644
--- a/examples/scrollable/src/main.rs
+++ b/examples/scrollable/src/main.rs
@@ -5,7 +5,8 @@ use iced::widget::{
     scrollable, slider, text, vertical_space, Scrollable,
 };
 use iced::{
-    Alignment, Application, Color, Command, Element, Length, Settings, Theme,
+    Alignment, Application, Border, Color, Command, Element, Length, Settings,
+    Theme,
 };
 
 use once_cell::sync::Lazy;
@@ -348,6 +349,6 @@ fn progress_bar_custom_style(theme: &Theme) -> progress_bar::Appearance {
     progress_bar::Appearance {
         background: theme.extended_palette().background.strong.color.into(),
         bar: Color::from_rgb8(250, 85, 134).into(),
-        border_radius: 0.0.into(),
+        border: Border::default(),
     }
 }
diff --git a/examples/solar_system/src/main.rs b/examples/solar_system/src/main.rs
index a58ca683..4cc625da 100644
--- a/examples/solar_system/src/main.rs
+++ b/examples/solar_system/src/main.rs
@@ -9,7 +9,6 @@
 use iced::application;
 use iced::executor;
 use iced::mouse;
-use iced::theme::{self, Theme};
 use iced::widget::canvas;
 use iced::widget::canvas::gradient;
 use iced::widget::canvas::stroke::{self, Stroke};
@@ -17,7 +16,7 @@ use iced::widget::canvas::Path;
 use iced::window;
 use iced::{
     Application, Color, Command, Element, Length, Point, Rectangle, Renderer,
-    Settings, Size, Subscription, Vector,
+    Settings, Size, Subscription, Theme, Vector,
 };
 
 use std::time::Instant;
@@ -80,15 +79,11 @@ impl Application for SolarSystem {
         Theme::Dark
     }
 
-    fn style(&self) -> theme::Application {
-        fn dark_background(_theme: &Theme) -> application::Appearance {
-            application::Appearance {
-                background_color: Color::BLACK,
-                text_color: Color::WHITE,
-            }
+    fn style(&self, _theme: &Theme) -> application::Appearance {
+        application::Appearance {
+            background_color: Color::BLACK,
+            text_color: Color::WHITE,
         }
-
-        theme::Application::custom(dark_background)
     }
 
     fn subscription(&self) -> Subscription<Message> {
diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs
index 8a0674c1..56b7686e 100644
--- a/examples/stopwatch/src/main.rs
+++ b/examples/stopwatch/src/main.rs
@@ -1,11 +1,11 @@
 use iced::alignment;
 use iced::executor;
 use iced::keyboard;
-use iced::theme::{self, Theme};
 use iced::time;
 use iced::widget::{button, column, container, row, text};
 use iced::{
     Alignment, Application, Command, Element, Length, Settings, Subscription,
+    Theme,
 };
 
 use std::time::{Duration, Instant};
@@ -136,7 +136,7 @@ impl Application for Stopwatch {
         };
 
         let reset_button = button("Reset")
-            .style(theme::Button::Destructive)
+            .style(button::danger)
             .on_press(Message::Reset);
 
         let controls = row![toggle_button, reset_button].spacing(20);
diff --git a/examples/svg/src/main.rs b/examples/svg/src/main.rs
index ba93007c..4e238048 100644
--- a/examples/svg/src/main.rs
+++ b/examples/svg/src/main.rs
@@ -1,4 +1,3 @@
-use iced::theme;
 use iced::widget::{checkbox, column, container, svg};
 use iced::{color, Element, Length, Sandbox, Settings};
 
@@ -43,11 +42,11 @@ impl Sandbox for Tiger {
 
         let svg = svg(handle).width(Length::Fill).height(Length::Fill).style(
             if self.apply_color_filter {
-                theme::Svg::custom_fn(|_theme| svg::Appearance {
+                |_theme, _status| svg::Appearance {
                     color: Some(color!(0x0000ff)),
-                })
+                }
             } else {
-                theme::Svg::Default
+                |_theme, _status| svg::Appearance::default()
             },
         );
 
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/todos/src/main.rs b/examples/todos/src/main.rs
index eae127f7..aaa86ef8 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -1,14 +1,14 @@
 use iced::alignment::{self, Alignment};
 use iced::font::{self, Font};
 use iced::keyboard;
-use iced::theme::{self, Theme};
 use iced::widget::{
     self, button, checkbox, column, container, keyed_column, row, scrollable,
     text, text_input, Text,
 };
 use iced::window;
-use iced::{Application, Element};
-use iced::{Color, Command, Length, Settings, Size, Subscription};
+use iced::{
+    Application, Command, Element, Length, Settings, Size, Subscription, Theme,
+};
 
 use once_cell::sync::Lazy;
 use serde::{Deserialize, Serialize};
@@ -209,7 +209,7 @@ impl Application for Todos {
                 let title = text("todos")
                     .width(Length::Fill)
                     .size(100)
-                    .style(Color::from([0.5, 0.5, 0.5]))
+                    .color([0.5, 0.5, 0.5])
                     .horizontal_alignment(alignment::Horizontal::Center);
 
                 let input = text_input("What needs to be done?", input_value)
@@ -355,6 +355,7 @@ impl Task {
                 let checkbox = checkbox(&self.description, self.completed)
                     .on_toggle(TaskMessage::Completed)
                     .width(Length::Fill)
+                    .size(17)
                     .text_shaping(text::Shaping::Advanced);
 
                 row![
@@ -362,7 +363,7 @@ impl Task {
                     button(edit_icon())
                         .on_press(TaskMessage::Edit)
                         .padding(10)
-                        .style(theme::Button::Text),
+                        .style(button::text),
                 ]
                 .spacing(20)
                 .align_items(Alignment::Center)
@@ -385,7 +386,7 @@ impl Task {
                     )
                     .on_press(TaskMessage::Delete)
                     .padding(10)
-                    .style(theme::Button::Destructive)
+                    .style(button::danger)
                 ]
                 .spacing(20)
                 .align_items(Alignment::Center)
@@ -402,9 +403,9 @@ fn view_controls(tasks: &[Task], current_filter: Filter) -> Element<Message> {
         let label = text(label);
 
         let button = button(label).style(if filter == current_filter {
-            theme::Button::Primary
+            button::primary
         } else {
-            theme::Button::Text
+            button::text
         });
 
         button.on_press(Message::FilterChanged(filter)).padding(8)
@@ -467,7 +468,7 @@ fn empty_message(message: &str) -> Element<'_, Message> {
             .width(Length::Fill)
             .size(25)
             .horizontal_alignment(alignment::Horizontal::Center)
-            .style(Color::from([0.7, 0.7, 0.7])),
+            .color([0.7, 0.7, 0.7]),
     )
     .height(200)
     .center_y()
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/tour/src/main.rs b/examples/tour/src/main.rs
index 1e2f1ef8..f5791ad7 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -1,7 +1,6 @@
 use iced::alignment::{self, Alignment};
-use iced::theme;
 use iced::widget::{
-    checkbox, column, container, horizontal_space, image, radio, row,
+    button, checkbox, column, container, horizontal_space, image, radio, row,
     scrollable, slider, text, text_input, toggler, vertical_space,
 };
 use iced::widget::{Button, Column, Container, Slider};
@@ -56,18 +55,17 @@ impl Sandbox for Tour {
     fn view(&self) -> Element<Message> {
         let Tour { steps, .. } = self;
 
-        let controls = row![]
-            .push_maybe(steps.has_previous().then(|| {
-                button("Back")
-                    .on_press(Message::BackPressed)
-                    .style(theme::Button::Secondary)
-            }))
-            .push(horizontal_space())
-            .push_maybe(
-                steps
-                    .can_continue()
-                    .then(|| button("Next").on_press(Message::NextPressed)),
-            );
+        let controls =
+            row![]
+                .push_maybe(steps.has_previous().then(|| {
+                    padded_button("Back")
+                        .on_press(Message::BackPressed)
+                        .style(button::secondary)
+                }))
+                .push(horizontal_space())
+                .push_maybe(steps.can_continue().then(|| {
+                    padded_button("Next").on_press(Message::NextPressed)
+                }));
 
         let content: Element<_> = column![
             steps.view(self.debug).map(Message::StepMessage),
@@ -474,7 +472,7 @@ impl<'a> Step {
 
         let color_section = column![
             "And its color:",
-            text(format!("{color:?}")).style(color),
+            text(format!("{color:?}")).color(color),
             color_sliders,
         ]
         .padding(20)
@@ -676,8 +674,8 @@ fn ferris<'a>(
     .center_x()
 }
 
-fn button<'a, Message: Clone>(label: &str) -> Button<'a, Message> {
-    iced::widget::button(text(label)).padding([12, 24])
+fn padded_button<'a, Message: Clone>(label: &str) -> Button<'a, Message> {
+    button(text(label)).padding([12, 24])
 }
 
 fn color_slider<'a>(
diff --git a/examples/visible_bounds/src/main.rs b/examples/visible_bounds/src/main.rs
index bef5d296..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 {
@@ -82,7 +81,10 @@ impl Application for Example {
             row![
                 text(label),
                 horizontal_space(),
-                text(value).font(Font::MONOSPACE).size(14).style(color),
+                text(value)
+                    .font(Font::MONOSPACE)
+                    .size(14)
+                    .color_maybe(color),
             ]
             .height(40)
             .align_items(Alignment::Center)
@@ -102,13 +104,12 @@ impl Application for Example {
                     })
                     .unwrap_or_default()
                 {
-                    Color {
+                    Some(Color {
                         g: 1.0,
                         ..Color::BLACK
-                    }
-                    .into()
+                    })
                 } else {
-                    theme::Text::Default
+                    None
                 },
             )
         };
@@ -120,7 +121,7 @@ impl Application for Example {
                     Some(Point { x, y }) => format!("({x}, {y})"),
                     None => "unknown".to_string(),
                 },
-                theme::Text::Default,
+                None,
             ),
             view_bounds("Outer container", self.outer_bounds),
             view_bounds("Inner container", self.inner_bounds),
@@ -131,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![
@@ -140,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/examples/websocket/src/main.rs b/examples/websocket/src/main.rs
index 38a6db1e..47c1898a 100644
--- a/examples/websocket/src/main.rs
+++ b/examples/websocket/src/main.rs
@@ -6,7 +6,7 @@ use iced::widget::{
     button, column, container, row, scrollable, text, text_input,
 };
 use iced::{
-    Application, Color, Command, Element, Length, Settings, Subscription, Theme,
+    color, Application, Command, Element, Length, Settings, Subscription, Theme,
 };
 use once_cell::sync::Lazy;
 
@@ -99,7 +99,7 @@ impl Application for WebSocket {
         let message_log: Element<_> = if self.messages.is_empty() {
             container(
                 text("Your messages will appear here...")
-                    .style(Color::from_rgb8(0x88, 0x88, 0x88)),
+                    .color(color!(0x888888)),
             )
             .width(Length::Fill)
             .height(Length::Fill)