Implement styling for `Checkbox`

3 files changed, 26 insertions, 15 deletions

diff --git a/wgpu/src/renderer/widget/checkbox.rs b/wgpu/src/renderer/widget/checkbox.rs
index 1ed27ff7..cd90be5e 100644
--- a/wgpu/src/renderer/widget/checkbox.rs
+++ b/wgpu/src/renderer/widget/checkbox.rs
@@ -1,12 +1,13 @@
-use crate::{Primitive, Renderer};
+use crate::{checkbox::StyleSheet, Primitive, Renderer};
 use iced_native::{
-    checkbox, Background, Color, HorizontalAlignment, MouseCursor, Rectangle,
-    VerticalAlignment,
+    checkbox, HorizontalAlignment, MouseCursor, Rectangle, VerticalAlignment,
 };
 
 const SIZE: f32 = 28.0;
 
 impl checkbox::Renderer for Renderer {
+    type Style = Box<dyn StyleSheet>;
+
     fn default_size(&self) -> u32 {
         SIZE as u32
     }
@@ -17,20 +18,20 @@ impl checkbox::Renderer for Renderer {
         is_checked: bool,
         is_mouse_over: bool,
         (label, _): Self::Output,
+        style_sheet: &Self::Style,
     ) -> Self::Output {
+        let style = if is_mouse_over {
+            style_sheet.hovered()
+        } else {
+            style_sheet.active()
+        };
+
         let checkbox = Primitive::Quad {
             bounds,
-            background: Background::Color(
-                if is_mouse_over {
-                    [0.90, 0.90, 0.90]
-                } else {
-                    [0.95, 0.95, 0.95]
-                }
-                .into(),
-            ),
-            border_radius: 5,
-            border_width: 1,
-            border_color: Color::from_rgb(0.6, 0.6, 0.6),
+            background: style.background,
+            border_radius: style.border_radius,
+            border_width: style.border_width,
+            border_color: style.border_color,
         };
 
         (
@@ -41,7 +42,7 @@ impl checkbox::Renderer for Renderer {
                         font: crate::text::BUILTIN_ICONS,
                         size: bounds.height * 0.7,
                         bounds: bounds,
-                        color: [0.3, 0.3, 0.3].into(),
+                        color: style.checkmark_color,
                         horizontal_alignment: HorizontalAlignment::Center,
                         vertical_alignment: VerticalAlignment::Center,
                     };
diff --git a/wgpu/src/widget.rs b/wgpu/src/widget.rs
index 991e0644..e0f56594 100644
--- a/wgpu/src/widget.rs
+++ b/wgpu/src/widget.rs
@@ -1,4 +1,5 @@
 pub mod button;
+pub mod checkbox;
 pub mod container;
 pub mod progress_bar;
 pub mod radio;
diff --git a/wgpu/src/widget/checkbox.rs b/wgpu/src/widget/checkbox.rs
new file mode 100644
index 00000000..da0d7a84
--- /dev/null
+++ b/wgpu/src/widget/checkbox.rs
@@ -0,0 +1,9 @@
+//! Show toggle controls using checkboxes.
+use crate::Renderer;
+
+pub use iced_style::checkbox::{Style, StyleSheet};
+
+/// A box that can be checked.
+///
+/// This is an alias of an `iced_native` checkbox with an `iced_wgpu::Renderer`.
+pub type Checkbox<Message> = iced_native::Checkbox<Message, Renderer>;