Simplify theming for Scrollable widget

style/src/container.rs

@@ -1,51 +0,0 @@
-//! Change the appearance of a container.
-use crate::core::{Background, Border, Color, Pixels, Shadow};
-
-/// 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
-        }
-    }
-}
-
-/// A set of rules that dictate the [`Appearance`] of a container.
-pub trait StyleSheet {
-    /// The supported style of the [`StyleSheet`].
-    type Style: Default;
-
-    /// Produces the [`Appearance`] of a container.
-    fn appearance(&self, style: &Self::Style) -> Appearance;
-}

style/src/lib.rs

@@ -17,7 +17,6 @@
 pub use iced_core as core;
 
 pub mod application;
-pub mod container;
 pub mod menu;
 pub mod pane_grid;
 pub mod pick_list;
@@ -25,7 +24,6 @@ pub mod progress_bar;
 pub mod qr_code;
 pub mod radio;
 pub mod rule;
-pub mod scrollable;
 pub mod slider;
 pub mod svg;
 pub mod text_editor;

style/src/scrollable.rs

@@ -1,55 +0,0 @@
-//! Change the appearance of a scrollable.
-use crate::container;
-use crate::core::{Background, Border, Color};
-
-/// The appearance of a scrolable.
-#[derive(Debug, Clone, Copy)]
-pub struct Appearance {
-    /// The [`container::Appearance`] of a scrollable.
-    pub container: container::Appearance,
-    /// The [`Scrollbar`] appearance.
-    pub scrollbar: Scrollbar,
-    /// The [`Background`] of the gap between a horizontal and vertical scrollbar.
-    pub gap: Option<Background>,
-}
-
-/// The appearance of the scrollbar of a scrollable.
-#[derive(Debug, Clone, Copy)]
-pub struct Scrollbar {
-    /// The [`Background`] of a scrollbar.
-    pub background: Option<Background>,
-    /// The [`Border`] of a scrollbar.
-    pub border: Border,
-    /// The appearance of the [`Scroller`] of a scrollbar.
-    pub scroller: Scroller,
-}
-
-/// The appearance of the scroller of a scrollable.
-#[derive(Debug, Clone, Copy)]
-pub struct Scroller {
-    /// The [`Color`] of the scroller.
-    pub color: Color,
-    /// The [`Border`] of the scroller.
-    pub border: Border,
-}
-
-/// A set of rules that dictate the style of a scrollable.
-pub trait StyleSheet {
-    /// The supported style of the [`StyleSheet`].
-    type Style: Default;
-
-    /// Produces the [`Appearance`] of an active scrollable.
-    fn active(&self, style: &Self::Style) -> Appearance;
-
-    /// Produces the [`Appearance`] of a scrollable when it is being hovered.
-    fn hovered(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> Appearance;
-
-    /// Produces the [`Appearance`] of a scrollable when it is being dragged.
-    fn dragging(&self, style: &Self::Style) -> Appearance {
-        self.hovered(style, true)
-    }
-}

style/src/theme.rs

@@ -4,7 +4,6 @@ pub mod palette;
 pub use palette::Palette;
 
 use crate::application;
-use crate::container;
 use crate::core::widget::text;
 use crate::menu;
 use crate::pane_grid;
@@ -13,7 +12,6 @@ use crate::progress_bar;
 use crate::qr_code;
 use crate::radio;
 use crate::rule;
-use crate::scrollable;
 use crate::slider;
 use crate::svg;
 use crate::text_editor;
@@ -793,91 +791,6 @@ impl svg::StyleSheet for fn(&Theme) -> svg::Appearance {
     }
 }
 
-/// The style of a scrollable.
-#[derive(Default)]
-pub enum Scrollable {
-    /// The default style.
-    #[default]
-    Default,
-    /// A custom style.
-    Custom(Box<dyn scrollable::StyleSheet<Style = Theme>>),
-}
-
-impl Scrollable {
-    /// Creates a custom [`Scrollable`] theme.
-    pub fn custom<T: scrollable::StyleSheet<Style = Theme> + 'static>(
-        style: T,
-    ) -> Self {
-        Self::Custom(Box::new(style))
-    }
-}
-
-impl scrollable::StyleSheet for Theme {
-    type Style = Scrollable;
-
-    fn active(&self, style: &Self::Style) -> scrollable::Appearance {
-        match style {
-            Scrollable::Default => {
-                let palette = self.extended_palette();
-
-                scrollable::Appearance {
-                    container: container::Appearance::default(),
-                    scrollbar: scrollable::Scrollbar {
-                        background: Some(palette.background.weak.color.into()),
-                        border: Border::with_radius(2),
-                        scroller: scrollable::Scroller {
-                            color: palette.background.strong.color,
-                            border: Border::with_radius(2),
-                        },
-                    },
-                    gap: None,
-                }
-            }
-            Scrollable::Custom(custom) => custom.active(self),
-        }
-    }
-
-    fn hovered(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> scrollable::Appearance {
-        match style {
-            Scrollable::Default => {
-                if is_mouse_over_scrollbar {
-                    let palette = self.extended_palette();
-
-                    scrollable::Appearance {
-                        scrollbar: scrollable::Scrollbar {
-                            background: Some(
-                                palette.background.weak.color.into(),
-                            ),
-                            border: Border::with_radius(2),
-                            scroller: scrollable::Scroller {
-                                color: palette.primary.strong.color,
-                                border: Border::with_radius(2),
-                            },
-                        },
-                        ..self.active(style)
-                    }
-                } else {
-                    self.active(style)
-                }
-            }
-            Scrollable::Custom(custom) => {
-                custom.hovered(self, is_mouse_over_scrollbar)
-            }
-        }
-    }
-
-    fn dragging(&self, style: &Self::Style) -> scrollable::Appearance {
-        match style {
-            Scrollable::Default => self.hovered(style, true),
-            Scrollable::Custom(custom) => custom.dragging(self),
-        }
-    }
-}
-
 impl text::StyleSheet for Theme {}
 
 /// The style of a text input.

widget/src/combo_box.rs

@@ -301,7 +301,7 @@ where
     Message: Clone,
     Theme: container::Style
         + text_input::StyleSheet
-        + scrollable::StyleSheet
+        + scrollable::Tradition
         + menu::StyleSheet,
     Renderer: text::Renderer,
 {
@@ -721,7 +721,7 @@ where
     Message: Clone + 'a,
     Theme: container::Style
         + text_input::StyleSheet
-        + scrollable::StyleSheet
+        + scrollable::Tradition
         + menu::StyleSheet
         + 'a,
     Renderer: text::Renderer + 'a,

widget/src/helpers.rs

@@ -104,7 +104,7 @@ pub fn scrollable<'a, Message, Theme, Renderer>(
     content: impl Into<Element<'a, Message, Theme, Renderer>>,
 ) -> Scrollable<'a, Message, Theme, Renderer>
 where
-    Theme: scrollable::StyleSheet,
+    Theme: scrollable::Tradition,
     Renderer: core::Renderer,
 {
     Scrollable::new(content)
@@ -276,7 +276,7 @@ where
     Message: Clone,
     Renderer: core::text::Renderer,
     Theme: pick_list::StyleSheet
-        + scrollable::StyleSheet
+        + scrollable::Tradition
         + overlay::menu::StyleSheet
         + container::Style,
     <Theme as overlay::menu::StyleSheet>::Style:

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::Style + scrollable::StyleSheet + 'a,
+    Theme: StyleSheet + container::Style + scrollable::Tradition + 'a,
     Renderer: text::Renderer + 'a,
 {
     /// Creates a new [`Menu`] with the given [`State`], a list of options, and
@@ -179,7 +179,7 @@ where
 impl<'a, Message, Theme, Renderer> Overlay<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Theme: StyleSheet + container::Style + scrollable::StyleSheet + 'a,
+    Theme: StyleSheet + container::Style + scrollable::Tradition + 'a,
     Renderer: text::Renderer + 'a,
 {
     pub fn new<T>(

widget/src/pick_list.rs

@@ -62,7 +62,7 @@ where
     V: Borrow<T> + 'a,
     Message: Clone,
     Theme: StyleSheet
-        + scrollable::StyleSheet
+        + scrollable::Tradition
         + menu::StyleSheet
         + container::Style,
     <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
@@ -177,7 +177,7 @@ where
     V: Borrow<T>,
     Message: Clone + 'a,
     Theme: StyleSheet
-        + scrollable::StyleSheet
+        + scrollable::Tradition
         + menu::StyleSheet
         + container::Style,
     <Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
@@ -318,7 +318,7 @@ where
     V: Borrow<T> + 'a,
     Message: Clone + 'a,
     Theme: StyleSheet
-        + scrollable::StyleSheet
+        + scrollable::Tradition
         + menu::StyleSheet
         + container::Style
         + 'a,
@@ -628,7 +628,7 @@ where
     T: Clone + ToString,
     Message: 'a,
     Theme: StyleSheet
-        + scrollable::StyleSheet
+        + scrollable::Tradition
         + menu::StyleSheet
         + container::Style
         + 'a,

widget/src/scrollable.rs

@@ -1,5 +1,6 @@
 //! 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;
@@ -11,14 +12,12 @@ use crate::core::widget;
 use crate::core::widget::operation::{self, Operation};
 use crate::core::widget::tree::{self, Tree};
 use crate::core::{
-    Background, Clipboard, Color, Element, Layout, Length, Pixels, Point,
+    Background, Border, Clipboard, Color, Element, Layout, Length, Pixels,
-    Rectangle, Shell, Size, Vector, Widget,
+    Point, Rectangle, Shell, Size, Vector, Widget,
 };
 use crate::runtime::Command;
+use crate::style::Theme;
 
-pub use crate::style::scrollable::{
-    Appearance, Scrollbar, Scroller, StyleSheet,
-};
 pub use operation::scrollable::{AbsoluteOffset, RelativeOffset};
 
 /// A widget that can vertically display an infinite amount of content with a
@@ -30,7 +29,6 @@ pub struct Scrollable<
     Theme = crate::Theme,
     Renderer = crate::Renderer,
 > where
-    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     id: Option<Id>,
@@ -39,18 +37,20 @@ pub struct Scrollable<
     direction: Direction,
     content: Element<'a, Message, Theme, Renderer>,
     on_scroll: Option<Box<dyn Fn(Viewport) -> Message + 'a>>,
-    style: Theme::Style,
+    style: fn(&Theme, Status) -> Appearance,
 }
 
 impl<'a, Message, Theme, Renderer> Scrollable<'a, Message, Theme, Renderer>
 where
-    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     /// Creates a new vertical [`Scrollable`].
     pub fn new(
         content: impl Into<Element<'a, Message, Theme, Renderer>>,
-    ) -> Self {
+    ) -> Self
+    where
+        Theme: Tradition,
+    {
         Self::with_direction(content, Direction::default())
     }
 
@@ -58,7 +58,10 @@ where
     pub fn with_direction(
         content: impl Into<Element<'a, Message, Theme, Renderer>>,
         direction: Direction,
-    ) -> Self {
+    ) -> Self
+    where
+        Theme: Tradition,
+    {
         let content = content.into();
 
         debug_assert!(
@@ -80,7 +83,7 @@ where
             direction,
             content,
             on_scroll: None,
-            style: Default::default(),
+            style: Theme::tradition(),
         }
     }
 
@@ -111,8 +114,8 @@ where
     }
 
     /// Sets the style of the [`Scrollable`] .
-    pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
+    pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self {
-        self.style = style.into();
+        self.style = style;
         self
     }
 }
@@ -223,7 +226,6 @@ pub enum Alignment {
 impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
     for Scrollable<'a, Message, Theme, Renderer>
 where
-    Theme: StyleSheet,
     Renderer: crate::core::Renderer,
 {
     fn tag(&self) -> tree::Tag {
@@ -352,26 +354,181 @@ where
         cursor: mouse::Cursor,
         _viewport: &Rectangle,
     ) {
-        draw(
+        let state = tree.state.downcast_ref::<State>();
-            tree.state.downcast_ref::<State>(),
+
+        let bounds = layout.bounds();
+        let content_layout = layout.children().next().unwrap();
+        let content_bounds = content_layout.bounds();
+
+        let scrollbars =
+            Scrollbars::new(state, self.direction, bounds, content_bounds);
+
+        let cursor_over_scrollable = cursor.position_over(bounds);
+        let (mouse_over_y_scrollbar, mouse_over_x_scrollbar) =
+            scrollbars.is_mouse_over(cursor);
+
+        let translation =
+            state.translation(self.direction, bounds, content_bounds);
+
+        let cursor = match cursor_over_scrollable {
+            Some(cursor_position)
+                if !(mouse_over_x_scrollbar || mouse_over_y_scrollbar) =>
+            {
+                mouse::Cursor::Available(cursor_position + translation)
+            }
+            _ => mouse::Cursor::Unavailable,
+        };
+
+        let status = if state.y_scroller_grabbed_at.is_some()
+            || state.x_scroller_grabbed_at.is_some()
+        {
+            Status::Dragged {
+                is_horizontal_scrollbar_dragged: state
+                    .x_scroller_grabbed_at
+                    .is_some(),
+                is_vertical_scrollbar_dragged: state
+                    .y_scroller_grabbed_at
+                    .is_some(),
+            }
+        } else if cursor_over_scrollable.is_some() {
+            Status::Hovered {
+                is_horizontal_scrollbar_hovered: mouse_over_x_scrollbar,
+                is_vertical_scrollbar_hovered: mouse_over_y_scrollbar,
+            }
+        } else {
+            Status::Active
+        };
+
+        let appearance = (self.style)(theme, status);
+
+        container::draw_background(
             renderer,
-            theme,
+            &appearance.container,
-            layout,
+            layout.bounds(),
-            cursor,
-            self.direction,
-            &self.style,
-            |renderer, layout, cursor, viewport| {
-                self.content.as_widget().draw(
-                    &tree.children[0],
-                    renderer,
-                    theme,
-                    style,
-                    layout,
-                    cursor,
-                    viewport,
-                );
-            },
         );
+
+        // Draw inner content
+        if scrollbars.active() {
+            renderer.with_layer(bounds, |renderer| {
+                renderer.with_translation(
+                    Vector::new(-translation.x, -translation.y),
+                    |renderer| {
+                        self.content.as_widget().draw(
+                            &tree.children[0],
+                            renderer,
+                            theme,
+                            style,
+                            content_layout,
+                            cursor,
+                            &Rectangle {
+                                y: bounds.y + translation.y,
+                                x: bounds.x + translation.x,
+                                ..bounds
+                            },
+                        );
+                    },
+                );
+            });
+
+            let draw_scrollbar =
+                |renderer: &mut Renderer,
+                 style: Scrollbar,
+                 scrollbar: &internals::Scrollbar| {
+                    if scrollbar.bounds.width > 0.0
+                        && scrollbar.bounds.height > 0.0
+                        && (style.background.is_some()
+                            || (style.border.color != Color::TRANSPARENT
+                                && style.border.width > 0.0))
+                    {
+                        renderer.fill_quad(
+                            renderer::Quad {
+                                bounds: scrollbar.bounds,
+                                border: style.border,
+                                ..renderer::Quad::default()
+                            },
+                            style.background.unwrap_or(Background::Color(
+                                Color::TRANSPARENT,
+                            )),
+                        );
+                    }
+
+                    if scrollbar.scroller.bounds.width > 0.0
+                        && scrollbar.scroller.bounds.height > 0.0
+                        && (style.scroller.color != Color::TRANSPARENT
+                            || (style.scroller.border.color
+                                != Color::TRANSPARENT
+                                && style.scroller.border.width > 0.0))
+                    {
+                        renderer.fill_quad(
+                            renderer::Quad {
+                                bounds: scrollbar.scroller.bounds,
+                                border: style.scroller.border,
+                                ..renderer::Quad::default()
+                            },
+                            style.scroller.color,
+                        );
+                    }
+                };
+
+            renderer.with_layer(
+                Rectangle {
+                    width: bounds.width + 2.0,
+                    height: bounds.height + 2.0,
+                    ..bounds
+                },
+                |renderer| {
+                    if let Some(scrollbar) = scrollbars.y {
+                        draw_scrollbar(
+                            renderer,
+                            appearance.vertical_scrollbar,
+                            &scrollbar,
+                        );
+                    }
+
+                    if let Some(scrollbar) = scrollbars.x {
+                        draw_scrollbar(
+                            renderer,
+                            appearance.horizontal_scrollbar,
+                            &scrollbar,
+                        );
+                    }
+
+                    if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
+                        let background =
+                            appearance.gap.or(appearance.container.background);
+
+                        if let Some(background) = background {
+                            renderer.fill_quad(
+                                renderer::Quad {
+                                    bounds: Rectangle {
+                                        x: y.bounds.x,
+                                        y: x.bounds.y,
+                                        width: y.bounds.width,
+                                        height: x.bounds.height,
+                                    },
+                                    ..renderer::Quad::default()
+                                },
+                                background,
+                            );
+                        }
+                    }
+                },
+            );
+        } else {
+            self.content.as_widget().draw(
+                &tree.children[0],
+                renderer,
+                theme,
+                style,
+                content_layout,
+                cursor,
+                &Rectangle {
+                    x: bounds.x + translation.x,
+                    y: bounds.y + translation.y,
+                    ..bounds
+                },
+            );
+        }
     }
 
     fn mouse_interaction(
@@ -430,7 +587,7 @@ impl<'a, Message, Theme, Renderer>
     for Element<'a, Message, Theme, Renderer>
 where
     Message: 'a,
-    Theme: StyleSheet + 'a,
+    Theme: 'a,
     Renderer: 'a + crate::core::Renderer,
 {
     fn from(
@@ -862,190 +1019,6 @@ pub fn mouse_interaction(
     }
 }
 
-/// Draws a [`Scrollable`].
-pub fn draw<Theme, Renderer>(
-    state: &State,
-    renderer: &mut Renderer,
-    theme: &Theme,
-    layout: Layout<'_>,
-    cursor: mouse::Cursor,
-    direction: Direction,
-    style: &Theme::Style,
-    draw_content: impl FnOnce(&mut Renderer, Layout<'_>, mouse::Cursor, &Rectangle),
-) where
-    Theme: StyleSheet,
-    Renderer: crate::core::Renderer,
-{
-    let bounds = layout.bounds();
-    let content_layout = layout.children().next().unwrap();
-    let content_bounds = content_layout.bounds();
-
-    let scrollbars = Scrollbars::new(state, direction, bounds, content_bounds);
-
-    let cursor_over_scrollable = cursor.position_over(bounds);
-    let (mouse_over_y_scrollbar, mouse_over_x_scrollbar) =
-        scrollbars.is_mouse_over(cursor);
-
-    let translation = state.translation(direction, bounds, content_bounds);
-
-    let cursor = match cursor_over_scrollable {
-        Some(cursor_position)
-            if !(mouse_over_x_scrollbar || mouse_over_y_scrollbar) =>
-        {
-            mouse::Cursor::Available(cursor_position + translation)
-        }
-        _ => mouse::Cursor::Unavailable,
-    };
-
-    let appearance = if state.y_scroller_grabbed_at.is_some()
-        || state.x_scroller_grabbed_at.is_some()
-    {
-        theme.dragging(style)
-    } else if cursor_over_scrollable.is_some() {
-        theme.hovered(style, mouse_over_y_scrollbar || mouse_over_x_scrollbar)
-    } else {
-        theme.active(style)
-    };
-
-    let scrollbar_style = |is_dragging: bool, mouse_over_scrollbar: bool| {
-        if is_dragging {
-            theme.dragging(style).scrollbar
-        } else if cursor_over_scrollable.is_some() {
-            theme.hovered(style, mouse_over_scrollbar).scrollbar
-        } else {
-            theme.active(style).scrollbar
-        }
-    };
-
-    // container::draw_background(
-    //     renderer,
-    //     &appearance.container,
-    //     layout.bounds(),
-    // );
-
-    // Draw inner content
-    if scrollbars.active() {
-        renderer.with_layer(bounds, |renderer| {
-            renderer.with_translation(
-                Vector::new(-translation.x, -translation.y),
-                |renderer| {
-                    draw_content(
-                        renderer,
-                        content_layout,
-                        cursor,
-                        &Rectangle {
-                            y: bounds.y + translation.y,
-                            x: bounds.x + translation.x,
-                            ..bounds
-                        },
-                    );
-                },
-            );
-        });
-
-        let draw_scrollbar =
-            |renderer: &mut Renderer,
-             style: Scrollbar,
-             scrollbar: &internals::Scrollbar| {
-                if scrollbar.bounds.width > 0.0
-                    && scrollbar.bounds.height > 0.0
-                    && (style.background.is_some()
-                        || (style.border.color != Color::TRANSPARENT
-                            && style.border.width > 0.0))
-                {
-                    renderer.fill_quad(
-                        renderer::Quad {
-                            bounds: scrollbar.bounds,
-                            border: style.border,
-                            ..renderer::Quad::default()
-                        },
-                        style
-                            .background
-                            .unwrap_or(Background::Color(Color::TRANSPARENT)),
-                    );
-                }
-
-                if scrollbar.scroller.bounds.width > 0.0
-                    && scrollbar.scroller.bounds.height > 0.0
-                    && (style.scroller.color != Color::TRANSPARENT
-                        || (style.scroller.border.color != Color::TRANSPARENT
-                            && style.scroller.border.width > 0.0))
-                {
-                    renderer.fill_quad(
-                        renderer::Quad {
-                            bounds: scrollbar.scroller.bounds,
-                            border: style.scroller.border,
-                            ..renderer::Quad::default()
-                        },
-                        style.scroller.color,
-                    );
-                }
-            };
-
-        renderer.with_layer(
-            Rectangle {
-                width: bounds.width + 2.0,
-                height: bounds.height + 2.0,
-                ..bounds
-            },
-            |renderer| {
-                if let Some(scrollbar) = scrollbars.y {
-                    draw_scrollbar(
-                        renderer,
-                        scrollbar_style(
-                            state.y_scroller_grabbed_at.is_some(),
-                            mouse_over_y_scrollbar,
-                        ),
-                        &scrollbar,
-                    );
-                }
-
-                if let Some(scrollbar) = scrollbars.x {
-                    draw_scrollbar(
-                        renderer,
-                        scrollbar_style(
-                            state.x_scroller_grabbed_at.is_some(),
-                            mouse_over_x_scrollbar,
-                        ),
-                        &scrollbar,
-                    );
-                }
-
-                if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
-                    let background =
-                        appearance.gap.or(appearance.container.background);
-
-                    if let Some(background) = background {
-                        renderer.fill_quad(
-                            renderer::Quad {
-                                bounds: Rectangle {
-                                    x: y.bounds.x,
-                                    y: x.bounds.y,
-                                    width: y.bounds.width,
-                                    height: x.bounds.height,
-                                },
-                                ..renderer::Quad::default()
-                            },
-                            background,
-                        );
-                    }
-                }
-            },
-        );
-    } else {
-        draw_content(
-            renderer,
-            content_layout,
-            cursor,
-            &Rectangle {
-                x: bounds.x + translation.x,
-                y: bounds.y + translation.y,
-                ..bounds
-            },
-        );
-    }
-}
-
 fn notify_on_scroll<Message>(
     state: &mut State,
     on_scroll: &Option<Box<dyn Fn(Viewport) -> Message + '_>>,
@@ -1625,3 +1598,145 @@ pub(super) mod internals {
         pub bounds: Rectangle,
     }
 }
+
+/// The possible status of a [`Scrollable`].
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Status {
+    /// The [`Scrollable`] can be interacted with.
+    Active,
+    /// The [`Scrollable`] is being hovered.
+    Hovered {
+        /// Indicates if the horizontal scrollbar is being hovered.
+        is_horizontal_scrollbar_hovered: bool,
+        /// Indicates if the vertical scrollbar is being hovered.
+        is_vertical_scrollbar_hovered: bool,
+    },
+    /// The [`Scrollable`] is being dragged.
+    Dragged {
+        /// Indicates if the horizontal scrollbar is being dragged.
+        is_horizontal_scrollbar_dragged: bool,
+        /// Indicates if the vertical scrollbar is being dragged.
+        is_vertical_scrollbar_dragged: bool,
+    },
+}
+
+/// The appearance of a scrolable.
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// The [`container::Appearance`] of a scrollable.
+    pub container: container::Appearance,
+    /// The vertical [`Scrollbar`] appearance.
+    pub vertical_scrollbar: Scrollbar,
+    /// The horizontal [`Scrollbar`] appearance.
+    pub horizontal_scrollbar: Scrollbar,
+    /// The [`Background`] of the gap between a horizontal and vertical scrollbar.
+    pub gap: Option<Background>,
+}
+
+/// The appearance of the scrollbar of a scrollable.
+#[derive(Debug, Clone, Copy)]
+pub struct Scrollbar {
+    /// The [`Background`] of a scrollbar.
+    pub background: Option<Background>,
+    /// The [`Border`] of a scrollbar.
+    pub border: Border,
+    /// The appearance of the [`Scroller`] of a scrollbar.
+    pub scroller: Scroller,
+}
+
+/// The appearance of the scroller of a scrollable.
+#[derive(Debug, Clone, Copy)]
+pub struct Scroller {
+    /// The [`Color`] of the scroller.
+    pub color: Color,
+    /// The [`Border`] of the scroller.
+    pub border: Border,
+}
+
+/// The definition of the traditional style of a [`Scrollable`].
+pub trait Tradition {
+    /// Returns the traditional style of a [`Scrollable`].
+    fn tradition() -> fn(&Self, Status) -> Appearance;
+}
+
+impl Tradition for Theme {
+    fn tradition() -> fn(&Self, Status) -> Appearance {
+        default
+    }
+}
+
+fn default(theme: &Theme, status: Status) -> Appearance {
+    let palette = theme.extended_palette();
+
+    let scrollbar = Scrollbar {
+        background: Some(palette.background.weak.color.into()),
+        border: Border::with_radius(2),
+        scroller: Scroller {
+            color: palette.background.strong.color,
+            border: Border::with_radius(2),
+        },
+    };
+
+    match status {
+        Status::Active => Appearance {
+            container: container::Appearance::default(),
+            vertical_scrollbar: scrollbar,
+            horizontal_scrollbar: scrollbar,
+            gap: None,
+        },
+        Status::Hovered {
+            is_horizontal_scrollbar_hovered,
+            is_vertical_scrollbar_hovered,
+        } => {
+            let hovered_scrollbar = Scrollbar {
+                scroller: Scroller {
+                    color: palette.primary.strong.color,
+                    ..scrollbar.scroller
+                },
+                ..scrollbar
+            };
+
+            Appearance {
+                container: container::Appearance::default(),
+                vertical_scrollbar: if is_vertical_scrollbar_hovered {
+                    hovered_scrollbar
+                } else {
+                    scrollbar
+                },
+                horizontal_scrollbar: if is_horizontal_scrollbar_hovered {
+                    hovered_scrollbar
+                } else {
+                    scrollbar
+                },
+                gap: None,
+            }
+        }
+        Status::Dragged {
+            is_horizontal_scrollbar_dragged,
+            is_vertical_scrollbar_dragged,
+        } => {
+            let dragged_scrollbar = Scrollbar {
+                scroller: Scroller {
+                    color: palette.primary.base.color,
+                    ..scrollbar.scroller
+                },
+                ..scrollbar
+            };
+
+            Appearance {
+                container: container::Appearance::default(),
+                vertical_scrollbar: if is_vertical_scrollbar_dragged {
+                    dragged_scrollbar
+                } else {
+                    scrollbar
+                },
+                horizontal_scrollbar: if is_horizontal_scrollbar_dragged {
+                    dragged_scrollbar
+                } else {
+                    scrollbar
+                },
+                gap: None,
+            }
+        }
+    }
+}