Standalone Checkbox Widget

Refs #203

examples/checkbox.rs

@@ -9,7 +9,8 @@ fn main() -> cushy::Result {
 
     checkbox_state
         .clone()
-        .to_checkbox(label)
+        .to_checkbox()
+        .labelled_by(label)
         .and("Maybe".into_button().on_click(move |_| {
             checkbox_state.set(CheckboxState::Indeterminant);
         }))

examples/collapse.rs

@@ -10,7 +10,8 @@ fn main() -> cushy::Result {
     let collapse = Dynamic::new(false);
 
     collapse
-        .to_checkbox("Collapse")
+        .to_checkbox()
+        .labelled_by("Collapse")
         .and(
             "Content Above"
                 .contain()

examples/file-picker.rs

@@ -36,9 +36,14 @@ fn main(app: &mut App) -> cushy::Result {
                 .and(picker_mode.new_radio(PickerMode::PickFile, "Pick File"))
                 .and(picker_mode.new_radio(PickerMode::PickFolder, "Pick Folder"))
                 .into_columns()
-                .and(pick_multiple.to_checkbox("Select Multiple").with_enabled(
-                    picker_mode.map_each(|kind| !matches!(kind, PickerMode::SaveFile)),
-                ))
+                .and(
+                    pick_multiple
+                        .to_checkbox()
+                        .labelled_by("Select Multiple")
+                        .with_enabled(
+                            picker_mode.map_each(|kind| !matches!(kind, PickerMode::SaveFile)),
+                        ),
+                )
                 .and(picker_buttons(
                     &picker_mode,
                     &pick_multiple,

examples/slider.rs

@@ -15,7 +15,7 @@ fn main() -> cushy::Result {
         .and(enum_slider())
         .into_rows()
         .with_enabled(enabled.clone())
-        .and(enabled.into_checkbox("Enabled"))
+        .and(enabled.into_checkbox().labelled_by("Enabled"))
         .into_rows()
         .expand_horizontally()
         .contain()

examples/theme.rs

@@ -189,7 +189,10 @@ fn dark_mode_picker() -> (Dynamic<ThemeMode>, impl MakeWidget) {
         }
     });
 
-    (theme_mode.clone(), dark.into_checkbox("Dark Mode"))
+    (
+        theme_mode.clone(),
+        dark.into_checkbox().labelled_by("Dark Mode"),
+    )
 }
 
 fn swatch_label(label: &str, color: &Dynamic<ColorSource>) -> impl MakeWidget {
@@ -206,7 +209,8 @@ fn optional_editor(label: &str, color: &Dynamic<ColorSource>) -> (Dynamic<bool>,
     (
         enabled.clone(),
         enabled
-            .to_checkbox(swatch_label(label, color))
+            .to_checkbox()
+            .labelled_by(swatch_label(label, color))
             .and(color_editor(color).collapse_vertically(hide_editor))
             .into_rows(),
     )

src/context.rs

@@ -1242,6 +1242,12 @@ impl<'context> WidgetContext<'context> {
         }
     }
 
+    /// Returns the currently active theme mode.
+    #[must_use]
+    pub fn theme_mode(&self) -> ThemeMode {
+        self.cache.theme_mode
+    }
+
     /// Returns the opposite theme of [`Self::theme()`].
     #[must_use]
     pub fn inverse_theme(&self) -> &Theme {

src/styles.rs

@@ -1801,9 +1801,9 @@ impl ColorTheme {
     #[must_use]
     pub fn light_from_source(source: ColorSource) -> Self {
         Self {
-            color: source.color(40),
-            color_dim: source.color(20),
-            color_bright: source.color(45),
+            color: source.color(50),
+            color_dim: source.color(30),
+            color_bright: source.color(60),
             on_color: source.color(100),
             container: source.color(90),
             on_container: source.color(10),
@@ -1814,9 +1814,9 @@ impl ColorTheme {
     #[must_use]
     pub fn dark_from_source(source: ColorSource) -> Self {
         Self {
-            color: source.color(85),
-            color_dim: source.color(60),
-            color_bright: source.color(90),
+            color: source.color(60),
+            color_dim: source.color(50),
+            color_bright: source.color(70),
             on_color: source.color(10),
             container: source.color(30),
             on_container: source.color(90),
@@ -1844,8 +1844,8 @@ impl FixedTheme {
     #[must_use]
     pub fn from_source(source: ColorSource) -> Self {
         Self {
-            color: source.color(90),
-            dim_color: source.color(80),
+            color: source.color(60),
+            dim_color: source.color(50),
             on_color: source.color(10),
             on_color_variant: source.color(40),
         }
@@ -1901,7 +1901,7 @@ impl ColorSource {
     pub fn color(self, lightness: impl Lightness) -> Color {
         let rgb: palette::Srgb =
             Okhsl::new(self.hue, *self.saturation, *lightness.into_lightness()).into_color();
-        Color::new_f32(rgb.red, rgb.blue, rgb.green, 1.0)
+        Color::new_f32(rgb.red, rgb.green, rgb.blue, 1.0)
     }
 
     /// Calculates an approximate ratio between 0.0 and 1.0 of how contrasting
@@ -2610,7 +2610,7 @@ impl ColorScheme {
 
 impl Default for ColorScheme {
     fn default() -> Self {
-        Self::from_primary(138.5)
+        Self::from_primary(290.)
     }
 }
 

src/styles/components.rs

@@ -8,6 +8,7 @@ use kludgine::Color;
 use crate::animation::easings::{EaseInOutQuadradic, EaseInQuadradic, EaseOutQuadradic};
 use crate::animation::{EasingFunction, ZeroToOne};
 use crate::styles::{Dimension, FocusableWidgets, FontFamilyList, VisualOrder};
+use crate::window::ThemeMode;
 
 /// Defines a set of style components for Cushy.
 ///
@@ -235,7 +236,12 @@ define_components! {
         /// selection.
         AutoFocusableControls(FocusableWidgets, "focus")
         /// A [`Color`] to be used as the background color of a widget.
-        WidgetBackground(Color, "widget_backgrond_color", Color::CLEAR_WHITE)
+        WidgetBackground(Color, "widget_backgrond_color", |ctx| {
+            match ctx.theme_mode() {
+                ThemeMode::Dark => Color::CLEAR_BLACK,
+                ThemeMode::Light => Color::CLEAR_WHITE,
+            }
+        })
         /// A [`Color`] to be used to accent a widget.
         WidgetAccentColor(Color, "widget_accent_color", .primary.color)
         /// A [`Color`] to be used to accent a disabled widget.

src/widget.rs

@@ -1281,7 +1281,7 @@ pub trait MakeWidget: Sized {
 
     /// Returns this widget as the label of a Checkbox.
     fn into_checkbox(self, value: impl IntoDynamic<CheckboxState>) -> Checkbox {
-        value.into_checkbox(self)
+        value.into_checkbox().labelled_by(self)
     }
 
     /// Returns this widget as the label of a Checkbox.
@@ -2673,6 +2673,12 @@ impl From<WidgetRef> for WindowLocal<MountedWidget> {
     }
 }
 
+impl From<WidgetInstance> for WidgetRef {
+    fn from(value: WidgetInstance) -> Self {
+        Self::new(value)
+    }
+}
+
 impl AsRef<WidgetId> for WidgetRef {
     fn as_ref(&self) -> &WidgetId {
         self.instance.as_ref()

src/widgets/button.rs

@@ -8,7 +8,9 @@ use kludgine::app::winit::window::CursorIcon;
 use kludgine::shapes::{Shape, StrokeOptions};
 use kludgine::Color;
 
-use crate::animation::{AnimationHandle, AnimationTarget, IntoAnimate, LinearInterpolate, Spawn};
+use crate::animation::{
+    AnimationHandle, AnimationTarget, IntoAnimate, LinearInterpolate, Spawn, ZeroToOne,
+};
 use crate::context::{AsEventContext, EventContext, GraphicsContext, LayoutContext, WidgetContext};
 use crate::styles::components::{
     AutoFocusableControls, CornerRadius, DefaultActiveBackgroundColor,
@@ -17,7 +19,7 @@ use crate::styles::components::{
     DefaultHoveredForegroundColor, Easing, HighlightColor, IntrinsicPadding, OpaqueWidgetColor,
     OutlineColor, OutlineWidth, SurfaceColor, TextColor,
 };
-use crate::styles::{ColorExt, Styles};
+use crate::styles::{ColorExt, Hsla, Styles};
 use crate::value::{Destination, Dynamic, IntoValue, Source, Value};
 use crate::widget::{
     Callback, EventHandling, MakeWidget, SharedCallback, Widget, WidgetRef, HANDLED,
@@ -573,7 +575,11 @@ define_components! {
         ButtonActiveBackground(Color, "active_background_color", .surface.color)
         /// The background color of the button when the mouse cursor is hovering over
         /// it.
-        ButtonHoverBackground(Color, "hover_background_color", .surface.lowest_container)
+        ButtonHoverBackground(Color, "hover_background_color", |context| {
+            let mut hsla = Hsla::from(context.get(&ButtonBackground));
+            hsla.hsl.lightness *= ZeroToOne::new(0.8);
+            Color::from(hsla)
+        })
         /// The background color of the button when the mouse cursor is hovering over
         /// it.
         ButtonDisabledBackground(Color, "disabled_background_color", .surface.dim_color)