Rename `fill_rectangle` to `fill_quad` in `Renderer`

19 files changed, 321 insertions, 246 deletions

diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs
index 78a4339e..b32cb83d 100644
--- a/examples/custom_widget/src/main.rs
+++ b/examples/custom_widget/src/main.rs
@@ -12,8 +12,7 @@ mod circle {
     use iced_native::layout::{self, Layout};
     use iced_native::renderer;
     use iced_native::{
-        Background, Color, Element, Hasher, Length, Point, Rectangle, Size,
-        Widget,
+        Color, Element, Hasher, Length, Point, Rectangle, Size, Widget,
     };
 
     pub struct Circle {
@@ -60,13 +59,15 @@ mod circle {
             _cursor_position: Point,
             _viewport: &Rectangle,
         ) {
-            renderer.fill_rectangle(renderer::Quad {
-                bounds: layout.bounds(),
-                background: Background::Color(Color::BLACK),
-                border_radius: self.radius,
-                border_width: 0.0,
-                border_color: Color::TRANSPARENT,
-            });
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: layout.bounds(),
+                    border_radius: self.radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                Color::BLACK,
+            );
         }
     }
 
diff --git a/graphics/src/renderer.rs b/graphics/src/renderer.rs
index df9f1ac0..30f9d40e 100644
--- a/graphics/src/renderer.rs
+++ b/graphics/src/renderer.rs
@@ -3,7 +3,7 @@ use crate::{Primitive, Vector};
 use iced_native::layout;
 use iced_native::renderer;
 use iced_native::text::{self, Text};
-use iced_native::{Element, Font, Point, Rectangle, Size};
+use iced_native::{Background, Element, Font, Point, Rectangle, Size};
 
 pub use iced_native::renderer::Style;
 
@@ -88,10 +88,14 @@ where
         });
     }
 
-    fn fill_rectangle(&mut self, quad: renderer::Quad) {
+    fn fill_quad(
+        &mut self,
+        quad: renderer::Quad,
+        background: impl Into<Background>,
+    ) {
         self.primitives.push(Primitive::Quad {
             bounds: quad.bounds,
-            background: quad.background,
+            background: background.into(),
             border_radius: quad.border_radius,
             border_width: quad.border_width,
             border_color: quad.border_color,
diff --git a/native/src/element.rs b/native/src/element.rs
index 50ff9424..ee404a1c 100644
--- a/native/src/element.rs
+++ b/native/src/element.rs
@@ -4,8 +4,7 @@ use crate::mouse;
 use crate::overlay;
 use crate::renderer;
 use crate::{
-    Background, Clipboard, Color, Hasher, Layout, Length, Point, Rectangle,
-    Widget,
+    Clipboard, Color, Hasher, Layout, Length, Point, Rectangle, Widget,
 };
 
 /// A generic [`Widget`].
@@ -254,6 +253,7 @@ where
             .draw(renderer, style, layout, cursor_position, viewport)
     }
 
+    /// Returns the current [`mouse::Interaction`] of the [`Element`].
     pub fn mouse_interaction(
         &self,
         layout: Layout<'_>,
@@ -452,13 +452,15 @@ where
             color: Color,
             layout: Layout<'_>,
         ) {
-            renderer.fill_rectangle(renderer::Quad {
-                bounds: layout.bounds(),
-                border_color: color,
-                border_width: 1.0,
-                border_radius: 0.0,
-                background: Background::Color(Color::TRANSPARENT),
-            });
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: layout.bounds(),
+                    border_color: color,
+                    border_width: 1.0,
+                    border_radius: 0.0,
+                },
+                Color::TRANSPARENT,
+            );
 
             for child in layout.children() {
                 explain_layout(renderer, color, child);
diff --git a/native/src/overlay/menu.rs b/native/src/overlay/menu.rs
index 12dd4b0b..ee3bee6e 100644
--- a/native/src/overlay/menu.rs
+++ b/native/src/overlay/menu.rs
@@ -253,13 +253,15 @@ where
     ) {
         let bounds = layout.bounds();
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds,
-            background: self.style.background,
-            border_color: self.style.border_color,
-            border_width: self.style.border_width,
-            border_radius: 0.0,
-        });
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_color: self.style.border_color,
+                border_width: self.style.border_width,
+                border_radius: 0.0,
+            },
+            self.style.background,
+        );
 
         self.container
             .draw(renderer, style, layout, cursor_position, &bounds);
@@ -432,13 +434,15 @@ where
             };
 
             if is_selected {
-                renderer.fill_rectangle(renderer::Quad {
-                    bounds,
-                    background: self.style.selected_background,
-                    border_color: Color::TRANSPARENT,
-                    border_width: 0.0,
-                    border_radius: 0.0,
-                });
+                renderer.fill_quad(
+                    renderer::Quad {
+                        bounds,
+                        border_color: Color::TRANSPARENT,
+                        border_width: 0.0,
+                        border_radius: 0.0,
+                    },
+                    self.style.selected_background,
+                );
             }
 
             renderer.fill_text(Text {
diff --git a/native/src/renderer.rs b/native/src/renderer.rs
index 1e518936..3b04a5c0 100644
--- a/native/src/renderer.rs
+++ b/native/src/renderer.rs
@@ -42,23 +42,28 @@ pub trait Renderer: Sized {
         element.layout(self, limits)
     }
 
+    /// Draws the primitives recorded in the given closure in a new layer.
+    ///
+    /// The layer will clip its contents to the provided `bounds`.
     fn with_layer(&mut self, bounds: Rectangle, f: impl FnOnce(&mut Self));
 
+    /// Applies a `translation` to the primitives recorded in the given closure.
     fn with_translation(
         &mut self,
         translation: Vector,
         f: impl FnOnce(&mut Self),
     );
 
+    /// Clears all of the recorded primitives in the [`Renderer`].
     fn clear(&mut self);
 
-    fn fill_rectangle(&mut self, quad: Quad);
+    /// Fills a [`Quad`] with the provided [`Background`].
+    fn fill_quad(&mut self, quad: Quad, background: impl Into<Background>);
 }
 
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub struct Quad {
     pub bounds: Rectangle,
-    pub background: Background,
     pub border_radius: f32,
     pub border_width: f32,
     pub border_color: Color,
diff --git a/native/src/renderer/null.rs b/native/src/renderer/null.rs
index 263b38a9..a5b2f277 100644
--- a/native/src/renderer/null.rs
+++ b/native/src/renderer/null.rs
@@ -1,6 +1,6 @@
 use crate::renderer::{self, Renderer};
 use crate::text::{self, Text};
-use crate::{Font, Point, Rectangle, Size, Vector};
+use crate::{Background, Font, Point, Rectangle, Size, Vector};
 
 /// A renderer that does nothing.
 ///
@@ -27,7 +27,12 @@ impl Renderer for Null {
 
     fn clear(&mut self) {}
 
-    fn fill_rectangle(&mut self, _quad: renderer::Quad) {}
+    fn fill_quad(
+        &mut self,
+        _quad: renderer::Quad,
+        _background: impl Into<Background>,
+    ) {
+    }
 }
 
 impl text::Renderer for Null {
diff --git a/native/src/widget/button.rs b/native/src/widget/button.rs
index 0d9eeebd..1d785f35 100644
--- a/native/src/widget/button.rs
+++ b/native/src/widget/button.rs
@@ -293,28 +293,32 @@ where
         if styling.background.is_some() || styling.border_width > 0.0 {
             if styling.shadow_offset != Vector::default() {
                 // TODO: Implement proper shadow support
-                renderer.fill_rectangle(renderer::Quad {
-                    bounds: Rectangle {
-                        x: bounds.x + styling.shadow_offset.x,
-                        y: bounds.y + styling.shadow_offset.y,
-                        ..bounds
+                renderer.fill_quad(
+                    renderer::Quad {
+                        bounds: Rectangle {
+                            x: bounds.x + styling.shadow_offset.x,
+                            y: bounds.y + styling.shadow_offset.y,
+                            ..bounds
+                        },
+                        border_radius: styling.border_radius,
+                        border_width: 0.0,
+                        border_color: Color::TRANSPARENT,
                     },
-                    background: Background::Color([0.0, 0.0, 0.0, 0.5].into()),
-                    border_radius: styling.border_radius,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                });
+                    Background::Color([0.0, 0.0, 0.0, 0.5].into()),
+                );
             }
 
-            renderer.fill_rectangle(renderer::Quad {
-                bounds,
-                background: styling
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds,
+                    border_radius: styling.border_radius,
+                    border_width: styling.border_width,
+                    border_color: styling.border_color,
+                },
+                styling
                     .background
                     .unwrap_or(Background::Color(Color::TRANSPARENT)),
-                border_radius: styling.border_radius,
-                border_width: styling.border_width,
-                border_color: styling.border_color,
-            });
+            );
         }
 
         self.content.draw(
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index 04f62cd9..0d4a43ec 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -226,13 +226,15 @@ where
                 self.style_sheet.active(self.is_checked)
             };
 
-            renderer.fill_rectangle(renderer::Quad {
-                bounds,
-                background: style.background,
-                border_radius: style.border_radius,
-                border_width: style.border_width,
-                border_color: style.border_color,
-            });
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds,
+                    border_radius: style.border_radius,
+                    border_width: style.border_width,
+                    border_color: style.border_color,
+                },
+                style.background,
+            );
 
             if self.is_checked {
                 renderer.fill_text(text::Text {
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
index 9e3d0193..596af7fd 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -238,6 +238,7 @@ where
     }
 }
 
+/// Draws the background of a [`Container`] given its [`Style`] and its `bounds`.
 pub fn draw_background<Renderer>(
     renderer: &mut Renderer,
     style: &Style,
@@ -246,15 +247,17 @@ pub fn draw_background<Renderer>(
     Renderer: crate::Renderer,
 {
     if style.background.is_some() || style.border_width > 0.0 {
-        renderer.fill_rectangle(renderer::Quad {
-            bounds,
-            background: style
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_radius: style.border_radius,
+                border_width: style.border_width,
+                border_color: style.border_color,
+            },
+            style
                 .background
                 .unwrap_or(Background::Color(Color::TRANSPARENT)),
-            border_radius: style.border_radius,
-            border_width: style.border_width,
-            border_color: style.border_color,
-        });
+        );
     }
 }
 
diff --git a/native/src/widget/pane_grid.rs b/native/src/widget/pane_grid.rs
index d98369e4..20616ed4 100644
--- a/native/src/widget/pane_grid.rs
+++ b/native/src/widget/pane_grid.rs
@@ -609,31 +609,34 @@ where
             };
 
             if let Some(highlight) = highlight {
-                renderer.fill_rectangle(renderer::Quad {
-                    bounds: match axis {
-                        Axis::Horizontal => Rectangle {
-                            x: split_region.x,
-                            y: (split_region.y
-                                + (split_region.height - highlight.width)
-                                    / 2.0)
-                                .round(),
-                            width: split_region.width,
-                            height: highlight.width,
-                        },
-                        Axis::Vertical => Rectangle {
-                            x: (split_region.x
-                                + (split_region.width - highlight.width) / 2.0)
-                                .round(),
-                            y: split_region.y,
-                            width: highlight.width,
-                            height: split_region.height,
+                renderer.fill_quad(
+                    renderer::Quad {
+                        bounds: match axis {
+                            Axis::Horizontal => Rectangle {
+                                x: split_region.x,
+                                y: (split_region.y
+                                    + (split_region.height - highlight.width)
+                                        / 2.0)
+                                    .round(),
+                                width: split_region.width,
+                                height: highlight.width,
+                            },
+                            Axis::Vertical => Rectangle {
+                                x: (split_region.x
+                                    + (split_region.width - highlight.width)
+                                        / 2.0)
+                                    .round(),
+                                y: split_region.y,
+                                width: highlight.width,
+                                height: split_region.height,
+                            },
                         },
+                        border_radius: 0.0,
+                        border_width: 0.0,
+                        border_color: Color::TRANSPARENT,
                     },
-                    background: highlight.color.into(),
-                    border_radius: 0.0,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                });
+                    highlight.color,
+                );
             }
         }
     }
diff --git a/native/src/widget/pick_list.rs b/native/src/widget/pick_list.rs
index a7fef37b..9d1a86ec 100644
--- a/native/src/widget/pick_list.rs
+++ b/native/src/widget/pick_list.rs
@@ -360,13 +360,15 @@ where
             self.style_sheet.active()
         };
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds,
-            background: style.background,
-            border_color: style.border_color,
-            border_width: style.border_width,
-            border_radius: style.border_radius,
-        });
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_color: style.border_color,
+                border_width: style.border_width,
+                border_radius: style.border_radius,
+            },
+            style.background,
+        );
 
         renderer.fill_text(Text {
             content: &Renderer::ARROW_DOWN_ICON.to_string(),
diff --git a/native/src/widget/progress_bar.rs b/native/src/widget/progress_bar.rs
index 1f83de10..69eb8c09 100644
--- a/native/src/widget/progress_bar.rs
+++ b/native/src/widget/progress_bar.rs
@@ -116,25 +116,29 @@ where
 
         let style = self.style_sheet.style();
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds: Rectangle { ..bounds },
-            background: style.background,
-            border_radius: style.border_radius,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        });
-
-        if active_progress_width > 0.0 {
-            renderer.fill_rectangle(renderer::Quad {
-                bounds: Rectangle {
-                    width: active_progress_width,
-                    ..bounds
-                },
-                background: style.bar,
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: Rectangle { ..bounds },
                 border_radius: style.border_radius,
                 border_width: 0.0,
                 border_color: Color::TRANSPARENT,
-            });
+            },
+            style.background,
+        );
+
+        if active_progress_width > 0.0 {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: Rectangle {
+                        width: active_progress_width,
+                        ..bounds
+                    },
+                    border_radius: style.border_radius,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                style.bar,
+            );
         }
     }
 
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
index 7d39c526..86ad4c4e 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -10,8 +10,8 @@ use crate::text;
 use crate::touch;
 use crate::widget::{self, Row, Text};
 use crate::{
-    Alignment, Background, Clipboard, Color, Element, Hasher, Layout, Length,
-    Point, Rectangle, Widget,
+    Alignment, Clipboard, Color, Element, Hasher, Layout, Length, Point,
+    Rectangle, Widget,
 };
 
 pub use iced_style::radio::{Style, StyleSheet};
@@ -243,27 +243,31 @@ where
                 self.style_sheet.active()
             };
 
-            renderer.fill_rectangle(renderer::Quad {
-                bounds,
-                background: style.background,
-                border_radius: size / 2.0,
-                border_width: style.border_width,
-                border_color: style.border_color,
-            });
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds,
+                    border_radius: size / 2.0,
+                    border_width: style.border_width,
+                    border_color: style.border_color,
+                },
+                style.background,
+            );
 
             if self.is_selected {
-                renderer.fill_rectangle(renderer::Quad {
-                    bounds: Rectangle {
-                        x: bounds.x + dot_size / 2.0,
-                        y: bounds.y + dot_size / 2.0,
-                        width: bounds.width - dot_size,
-                        height: bounds.height - dot_size,
+                renderer.fill_quad(
+                    renderer::Quad {
+                        bounds: Rectangle {
+                            x: bounds.x + dot_size / 2.0,
+                            y: bounds.y + dot_size / 2.0,
+                            width: bounds.width - dot_size,
+                            height: bounds.height - dot_size,
+                        },
+                        border_radius: dot_size / 2.0,
+                        border_width: 0.0,
+                        border_color: Color::TRANSPARENT,
                     },
-                    background: Background::Color(style.dot_color),
-                    border_radius: dot_size / 2.0,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                });
+                    style.dot_color,
+                );
             }
         }
 
diff --git a/native/src/widget/rule.rs b/native/src/widget/rule.rs
index 8f4e66a6..7c8c5dbc 100644
--- a/native/src/widget/rule.rs
+++ b/native/src/widget/rule.rs
@@ -2,8 +2,7 @@
 use crate::layout;
 use crate::renderer;
 use crate::{
-    Background, Color, Element, Hasher, Layout, Length, Point, Rectangle, Size,
-    Widget,
+    Color, Element, Hasher, Layout, Length, Point, Rectangle, Size, Widget,
 };
 
 use std::hash::Hash;
@@ -113,13 +112,15 @@ where
             }
         };
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds,
-            background: Background::Color(style.color),
-            border_radius: style.radius,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        });
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_radius: style.radius,
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
+            },
+            style.color,
+        );
     }
 
     fn hash_layout(&self, state: &mut Hasher) {
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 00f80bc6..2bf2ea5e 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -526,28 +526,32 @@ where
                 },
                 |renderer| {
                     if is_scrollbar_visible {
-                        renderer.fill_rectangle(renderer::Quad {
-                            bounds: scrollbar.bounds,
-                            background: style.background.unwrap_or(
-                                Background::Color(Color::TRANSPARENT),
-                            ),
-                            border_radius: style.border_radius,
-                            border_width: style.border_width,
-                            border_color: style.border_color,
-                        });
+                        renderer.fill_quad(
+                            renderer::Quad {
+                                bounds: scrollbar.bounds,
+                                border_radius: style.border_radius,
+                                border_width: style.border_width,
+                                border_color: style.border_color,
+                            },
+                            style.background.unwrap_or(Background::Color(
+                                Color::TRANSPARENT,
+                            )),
+                        );
                     }
 
                     if is_mouse_over
                         || self.state.is_scroller_grabbed()
                         || is_scrollbar_visible
                     {
-                        renderer.fill_rectangle(renderer::Quad {
-                            bounds: scrollbar.scroller.bounds,
-                            background: Background::Color(style.scroller.color),
-                            border_radius: style.scroller.border_radius,
-                            border_width: style.scroller.border_width,
-                            border_color: style.scroller.border_color,
-                        });
+                        renderer.fill_quad(
+                            renderer::Quad {
+                                bounds: scrollbar.scroller.bounds,
+                                border_radius: style.scroller.border_radius,
+                                border_width: style.scroller.border_width,
+                                border_color: style.scroller.border_color,
+                            },
+                            style.scroller.color,
+                        );
                     }
                 },
             );
diff --git a/native/src/widget/slider.rs b/native/src/widget/slider.rs
index 01053081..49bafab4 100644
--- a/native/src/widget/slider.rs
+++ b/native/src/widget/slider.rs
@@ -58,6 +58,7 @@ where
     T: Copy + From<u8> + std::cmp::PartialOrd,
     Message: Clone,
 {
+    /// The default height of a [`Slider`].
     pub const DEFAULT_HEIGHT: u16 = 22;
 
     /// Creates a new [`Slider`].
@@ -272,31 +273,35 @@ where
 
         let rail_y = bounds.y + (bounds.height / 2.0).round();
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds: Rectangle {
-                x: bounds.x,
-                y: rail_y,
-                width: bounds.width,
-                height: 2.0,
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: Rectangle {
+                    x: bounds.x,
+                    y: rail_y,
+                    width: bounds.width,
+                    height: 2.0,
+                },
+                border_radius: 0.0,
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
             },
-            background: Background::Color(style.rail_colors.0),
-            border_radius: 0.0,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        });
-
-        renderer.fill_rectangle(renderer::Quad {
-            bounds: Rectangle {
-                x: bounds.x,
-                y: rail_y + 2.0,
-                width: bounds.width,
-                height: 2.0,
+            style.rail_colors.0,
+        );
+
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: Rectangle {
+                    x: bounds.x,
+                    y: rail_y + 2.0,
+                    width: bounds.width,
+                    height: 2.0,
+                },
+                border_radius: 0.0,
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
             },
-            background: Background::Color(style.rail_colors.1),
-            border_radius: 0.0,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        });
+            Background::Color(style.rail_colors.1),
+        );
 
         let (handle_width, handle_height, handle_border_radius) = match style
             .handle
@@ -325,18 +330,20 @@ where
                 / (range_end - range_start)
         };
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds: Rectangle {
-                x: bounds.x + handle_offset.round(),
-                y: rail_y - handle_height / 2.0,
-                width: handle_width,
-                height: handle_height,
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: Rectangle {
+                    x: bounds.x + handle_offset.round(),
+                    y: rail_y - handle_height / 2.0,
+                    width: handle_width,
+                    height: handle_height,
+                },
+                border_radius: handle_border_radius,
+                border_width: style.handle.border_width,
+                border_color: style.handle.border_color,
             },
-            background: Background::Color(style.handle.color),
-            border_radius: handle_border_radius,
-            border_width: style.handle.border_width,
-            border_color: style.handle.border_color,
-        });
+            style.handle.color,
+        );
     }
 
     fn mouse_interaction(
diff --git a/native/src/widget/text.rs b/native/src/widget/text.rs
index 79688b28..4dbc4a65 100644
--- a/native/src/widget/text.rs
+++ b/native/src/widget/text.rs
@@ -163,6 +163,16 @@ where
     }
 }
 
+/// Draws text using the same logic as the [`Text`] widget.
+///
+/// Specifically:
+///
+/// * If no `size` is provided, the default text size of the `Renderer` will be
+///   used.
+/// * If no `color` is provided, the [`renderer::Style::text_color`] will be
+///   used.
+/// * The alignment attributes do not affect the position of the bounds of the
+///   [`Layout`].
 pub fn draw<Renderer>(
     renderer: &mut Renderer,
     style: &renderer::Style,
diff --git a/native/src/widget/text_input.rs b/native/src/widget/text_input.rs
index db60b553..40c6c573 100644
--- a/native/src/widget/text_input.rs
+++ b/native/src/widget/text_input.rs
@@ -20,8 +20,8 @@ use crate::renderer;
 use crate::text::{self, Text};
 use crate::touch;
 use crate::{
-    Background, Clipboard, Color, Element, Hasher, Layout, Length, Padding,
-    Point, Rectangle, Size, Vector, Widget,
+    Clipboard, Color, Element, Hasher, Layout, Length, Padding, Point,
+    Rectangle, Size, Vector, Widget,
 };
 
 use std::u32;
@@ -196,13 +196,15 @@ where
             self.style_sheet.active()
         };
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds,
-            background: style.background,
-            border_radius: style.border_radius,
-            border_width: style.border_width,
-            border_color: style.border_color,
-        });
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                border_radius: style.border_radius,
+                border_width: style.border_width,
+                border_color: style.border_color,
+            },
+            style.background,
+        );
 
         let text = value.to_string();
         let size = self.size.unwrap_or(renderer.default_size());
@@ -221,20 +223,20 @@ where
                         );
 
                     (
-                        Some(renderer::Quad {
-                            bounds: Rectangle {
-                                x: text_bounds.x + text_value_width,
-                                y: text_bounds.y,
-                                width: 1.0,
-                                height: text_bounds.height,
+                        Some((
+                            renderer::Quad {
+                                bounds: Rectangle {
+                                    x: text_bounds.x + text_value_width,
+                                    y: text_bounds.y,
+                                    width: 1.0,
+                                    height: text_bounds.height,
+                                },
+                                border_radius: 0.0,
+                                border_width: 0.0,
+                                border_color: Color::TRANSPARENT,
                             },
-                            background: Background::Color(
-                                self.style_sheet.value_color(),
-                            ),
-                            border_radius: 0.0,
-                            border_width: 0.0,
-                            border_color: Color::TRANSPARENT,
-                        }),
+                            self.style_sheet.value_color(),
+                        )),
                         offset,
                     )
                 }
@@ -265,20 +267,20 @@ where
                     let width = right_position - left_position;
 
                     (
-                        Some(renderer::Quad {
-                            bounds: Rectangle {
-                                x: text_bounds.x + left_position,
-                                y: text_bounds.y,
-                                width,
-                                height: text_bounds.height,
+                        Some((
+                            renderer::Quad {
+                                bounds: Rectangle {
+                                    x: text_bounds.x + left_position,
+                                    y: text_bounds.y,
+                                    width,
+                                    height: text_bounds.height,
+                                },
+                                border_radius: 0.0,
+                                border_width: 0.0,
+                                border_color: Color::TRANSPARENT,
                             },
-                            background: Background::Color(
-                                self.style_sheet.selection_color(),
-                            ),
-                            border_radius: 0.0,
-                            border_width: 0.0,
-                            border_color: Color::TRANSPARENT,
-                        }),
+                            self.style_sheet.selection_color(),
+                        )),
                         if end == right {
                             right_offset
                         } else {
@@ -302,8 +304,8 @@ where
         );
 
         let render = |renderer: &mut Renderer| {
-            if let Some(cursor) = cursor {
-                renderer.fill_rectangle(cursor);
+            if let Some((cursor, color)) = cursor {
+                renderer.fill_quad(cursor, color);
             }
 
             renderer.fill_text(Text {
diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs
index 78e3d5ef..2dcc3ffe 100644
--- a/native/src/widget/toggler.rs
+++ b/native/src/widget/toggler.rs
@@ -258,13 +258,17 @@ where
             height: bounds.height - (2.0 * space),
         };
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds: toggler_background_bounds,
-            background: style.background.into(),
-            border_radius,
-            border_width: 1.0,
-            border_color: style.background_border.unwrap_or(style.background),
-        });
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: toggler_background_bounds,
+                border_radius,
+                border_width: 1.0,
+                border_color: style
+                    .background_border
+                    .unwrap_or(style.background),
+            },
+            style.background,
+        );
 
         let toggler_foreground_bounds = Rectangle {
             x: bounds.x
@@ -278,13 +282,17 @@ where
             height: bounds.height - (4.0 * space),
         };
 
-        renderer.fill_rectangle(renderer::Quad {
-            bounds: toggler_foreground_bounds,
-            background: style.foreground.into(),
-            border_radius,
-            border_width: 1.0,
-            border_color: style.foreground_border.unwrap_or(style.foreground),
-        });
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds: toggler_foreground_bounds,
+                border_radius,
+                border_width: 1.0,
+                border_color: style
+                    .foreground_border
+                    .unwrap_or(style.foreground),
+            },
+            style.foreground,
+        );
     }
 
     fn hash_layout(&self, state: &mut Hasher) {