Implement more properties

masonry/src/properties/background.rs

@@ -20,6 +20,10 @@ pub enum Background {
     Gradient(Gradient),
 }
 
+/// The background color/gradient a widget takes when hovered by a pointer.
+#[derive(Clone, Debug, PartialEq)]
+pub struct HoveredBackground(pub Background);
+
 /// The background color/gradient a widget takes when the user is clicking or otherwise using it.
 #[derive(Clone, Debug, PartialEq)]
 pub struct ActiveBackground(pub Background);
@@ -70,6 +74,33 @@ impl Background {
 
 // ---
 
+impl Property for HoveredBackground {
+    fn static_default() -> &'static Self {
+        // This matches the CSS default.
+        const DEFAULT: HoveredBackground =
+            HoveredBackground(Background::Color(AlphaColor::TRANSPARENT));
+        &DEFAULT
+    }
+}
+
+impl Default for HoveredBackground {
+    fn default() -> Self {
+        Self::static_default().clone()
+    }
+}
+
+impl HoveredBackground {
+    /// Helper function to be called in [`Widget::property_changed`](crate::core::Widget::property_changed).
+    pub fn prop_changed(ctx: &mut UpdateCtx<'_>, property_type: TypeId) {
+        if property_type != TypeId::of::<Self>() {
+            return;
+        }
+        ctx.request_paint_only();
+    }
+}
+
+// ---
+
 impl Property for ActiveBackground {
     fn static_default() -> &'static Self {
         // This matches the CSS default.

masonry/src/properties/border_color.rs

@@ -42,6 +42,32 @@ impl Property for HoveredBorderColor {
     }
 }
 
+/// The color of a widget's border when the user is clicking or otherwise using it.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub struct ActiveBorderColor(pub BorderColor);
+
+impl Property for ActiveBorderColor {
+    fn static_default() -> &'static Self {
+        static DEFAULT: ActiveBorderColor = ActiveBorderColor(BorderColor {
+            color: AlphaColor::TRANSPARENT,
+        });
+        &DEFAULT
+    }
+}
+
+/// The color of a widget's border when disabled.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub struct DisabledBorderColor(pub BorderColor);
+
+impl Property for DisabledBorderColor {
+    fn static_default() -> &'static Self {
+        static DEFAULT: DisabledBorderColor = DisabledBorderColor(BorderColor {
+            color: AlphaColor::TRANSPARENT,
+        });
+        &DEFAULT
+    }
+}
+
 // ---
 
 // TODO - The default border color in CSS is `currentcolor`,
@@ -81,3 +107,39 @@ impl HoveredBorderColor {
         ctx.request_paint_only();
     }
 }
+
+// ---
+
+impl Default for ActiveBorderColor {
+    fn default() -> Self {
+        *Self::static_default()
+    }
+}
+
+impl ActiveBorderColor {
+    /// Helper function to be called in [`Widget::property_changed`](crate::core::Widget::property_changed).
+    pub fn prop_changed(ctx: &mut UpdateCtx<'_>, property_type: TypeId) {
+        if property_type != TypeId::of::<Self>() {
+            return;
+        }
+        ctx.request_paint_only();
+    }
+}
+
+// ---
+
+impl Default for DisabledBorderColor {
+    fn default() -> Self {
+        *Self::static_default()
+    }
+}
+
+impl DisabledBorderColor {
+    /// Helper function to be called in [`Widget::property_changed`](crate::core::Widget::property_changed).
+    pub fn prop_changed(ctx: &mut UpdateCtx<'_>, property_type: TypeId) {
+        if property_type != TypeId::of::<Self>() {
+            return;
+        }
+        ctx.request_paint_only();
+    }
+}

masonry/src/properties/mod.rs

@@ -15,8 +15,8 @@ mod padding;
 
 pub mod types;
 
-pub use background::{ActiveBackground, Background, DisabledBackground};
-pub use border_color::{BorderColor, HoveredBorderColor};
+pub use background::{ActiveBackground, Background, DisabledBackground, HoveredBackground};
+pub use border_color::{ActiveBorderColor, BorderColor, DisabledBorderColor, HoveredBorderColor};
 pub use border_width::BorderWidth;
 pub use box_shadow::BoxShadow;
 pub use checkmark::{CheckmarkColor, CheckmarkStrokeWidth, DisabledCheckmarkColor};

masonry/src/widgets/button.rs

@@ -19,8 +19,9 @@ use crate::core::{
     UpdateCtx, Widget, WidgetId, WidgetMut, WidgetPod,
 };
 use crate::properties::{
-    ActiveBackground, Background, BorderColor, BorderWidth, BoxShadow, CornerRadius,
-    DisabledBackground, HoveredBorderColor, Padding,
+    ActiveBackground, ActiveBorderColor, Background, BorderColor, BorderWidth, BoxShadow,
+    CornerRadius, DisabledBackground, DisabledBorderColor, HoveredBackground, HoveredBorderColor,
+    Padding,
 };
 use crate::theme;
 use crate::util::{fill, stroke};
@@ -167,7 +168,10 @@ impl Widget for Button {
     fn property_changed(&mut self, ctx: &mut UpdateCtx<'_>, property_type: TypeId) {
         DisabledBackground::prop_changed(ctx, property_type);
         ActiveBackground::prop_changed(ctx, property_type);
+        HoveredBackground::prop_changed(ctx, property_type);
         Background::prop_changed(ctx, property_type);
+        DisabledBorderColor::prop_changed(ctx, property_type);
+        ActiveBorderColor::prop_changed(ctx, property_type);
         HoveredBorderColor::prop_changed(ctx, property_type);
         BorderColor::prop_changed(ctx, property_type);
         BorderWidth::prop_changed(ctx, property_type);
@@ -233,14 +237,20 @@ impl Widget for Button {
             &props.get::<DisabledBackground>().0
         } else if is_pressed {
             &props.get::<ActiveBackground>().0
+        } else if is_hovered {
+            &props.get::<HoveredBackground>().0
         } else {
             props.get::<Background>()
         };
 
         let bg_rect = border_width.bg_rect(size, border_radius);
         let border_rect = border_width.border_rect(size, border_radius);
 
-        let mut border_color = if is_hovered && !ctx.is_disabled() {
+        let mut border_color = if ctx.is_disabled() {
+            &props.get::<DisabledBorderColor>().0
+        } else if is_pressed {
+            &props.get::<ActiveBorderColor>().0
+        } else if is_hovered {
             &props.get::<HoveredBorderColor>().0
         } else {
             props.get::<BorderColor>()

masonry/src/widgets/checkbox.rs

@@ -17,8 +17,9 @@ use crate::core::{
     UpdateCtx, Widget, WidgetId, WidgetMut, WidgetPod,
 };
 use crate::properties::{
-    ActiveBackground, Background, BorderColor, BorderWidth, CheckmarkColor, CheckmarkStrokeWidth,
-    CornerRadius, DisabledBackground, DisabledCheckmarkColor, HoveredBorderColor, Padding,
+    ActiveBackground, ActiveBorderColor, Background, BorderColor, BorderWidth, CheckmarkColor,
+    CheckmarkStrokeWidth, CornerRadius, DisabledBackground, DisabledBorderColor,
+    DisabledCheckmarkColor, HoveredBackground, HoveredBorderColor, Padding,
 };
 use crate::theme;
 use crate::util::{fill, stroke};
@@ -147,7 +148,10 @@ impl Widget for Checkbox {
     fn property_changed(&mut self, ctx: &mut UpdateCtx<'_>, property_type: TypeId) {
         DisabledBackground::prop_changed(ctx, property_type);
         ActiveBackground::prop_changed(ctx, property_type);
+        HoveredBackground::prop_changed(ctx, property_type);
         Background::prop_changed(ctx, property_type);
+        DisabledBorderColor::prop_changed(ctx, property_type);
+        ActiveBorderColor::prop_changed(ctx, property_type);
         HoveredBorderColor::prop_changed(ctx, property_type);
         BorderColor::prop_changed(ctx, property_type);
         BorderWidth::prop_changed(ctx, property_type);
@@ -202,14 +206,20 @@ impl Widget for Checkbox {
             &props.get::<DisabledBackground>().0
         } else if is_pressed {
             &props.get::<ActiveBackground>().0
+        } else if is_hovered {
+            &props.get::<HoveredBackground>().0
         } else {
             props.get::<Background>()
         };
 
         let bg_rect = border_width.bg_rect(size, border_radius);
         let border_rect = border_width.border_rect(size, border_radius);
 
-        let border_color = if is_hovered && !ctx.is_disabled() {
+        let border_color = if ctx.is_disabled() {
+            &props.get::<DisabledBorderColor>().0
+        } else if is_pressed {
+            &props.get::<ActiveBorderColor>().0
+        } else if is_hovered {
             &props.get::<HoveredBorderColor>().0
         } else {
             props.get::<BorderColor>()

xilem/src/property_tuple.rs

@@ -85,6 +85,8 @@ impl_property_tuple!(P0, 0; P1, 1; P2, 2; P3, 3; P4, 4; P5, 5; P6, 6; P7, 7; P8,
 impl_property_tuple!(P0, 0; P1, 1; P2, 2; P3, 3; P4, 4; P5, 5; P6, 6; P7, 7; P8, 8; P9, 9);
 impl_property_tuple!(P0, 0; P1, 1; P2, 2; P3, 3; P4, 4; P5, 5; P6, 6; P7, 7; P8, 8; P9, 9; P10, 10);
 impl_property_tuple!(P0, 0; P1, 1; P2, 2; P3, 3; P4, 4; P5, 5; P6, 6; P7, 7; P8, 8; P9, 9; P10, 10; P11, 11);
+impl_property_tuple!(P0, 0; P1, 1; P2, 2; P3, 3; P4, 4; P5, 5; P6, 6; P7, 7; P8, 8; P9, 9; P10, 10; P11, 11; P12, 12);
+impl_property_tuple!(P0, 0; P1, 1; P2, 2; P3, 3; P4, 4; P5, 5; P6, 6; P7, 7; P8, 8; P9, 9; P10, 10; P11, 11; P12, 12; P13, 13);
 
 // ---
 

xilem/src/style.rs

@@ -4,6 +4,7 @@
 //! Traits used to set custom styles on views.
 
 use masonry::core::Property;
+use masonry::properties::{ActiveBorderColor, DisabledBorderColor, HoveredBackground};
 use vello::peniko::Color;
 
 pub use masonry::properties::types::{Gradient, GradientShape};
@@ -59,6 +60,33 @@ pub trait Style: Sized {
         self
     }
 
+    /// Set the element's background when hovered to a color/gradient.
+    fn hovered_background(mut self, background: Background) -> Self
+    where
+        Self: HasProperty<HoveredBackground>,
+    {
+        *self.property() = Some(HoveredBackground(background));
+        self
+    }
+
+    /// Set the element's background when hovered to a color.
+    fn hovered_background_color(mut self, color: Color) -> Self
+    where
+        Self: HasProperty<HoveredBackground>,
+    {
+        *self.property() = Some(HoveredBackground(Background::Color(color)));
+        self
+    }
+
+    /// Set the element's background when hovered to a gradient.
+    fn hovered_background_gradient(mut self, gradient: Gradient) -> Self
+    where
+        Self: HasProperty<HoveredBackground>,
+    {
+        *self.property() = Some(HoveredBackground(Background::Gradient(gradient)));
+        self
+    }
+
     /// Set the element's background when pressed to a color/gradient.
     fn active_background(mut self, background: Background) -> Self
     where
@@ -142,6 +170,24 @@ pub trait Style: Sized {
         self
     }
 
+    /// Set the element's border color when pressed.
+    fn active_border_color(mut self, color: Color) -> Self
+    where
+        Self: HasProperty<ActiveBorderColor>,
+    {
+        *self.property() = Some(ActiveBorderColor(BorderColor { color }));
+        self
+    }
+
+    /// Set the element's border color when disabled.
+    fn disabled_border_color(mut self, color: Color) -> Self
+    where
+        Self: HasProperty<DisabledBorderColor>,
+    {
+        *self.property() = Some(DisabledBorderColor(BorderColor { color }));
+        self
+    }
+
     /// Set the element's border width.
     fn border_width(mut self, width: f64) -> Self
     where

xilem/src/view/button.rs

@@ -3,8 +3,9 @@
 
 pub use masonry::core::PointerButton;
 use masonry::properties::{
-    ActiveBackground, Background, BorderColor, BorderWidth, BoxShadow, CornerRadius,
-    DisabledBackground, HoveredBorderColor, Padding,
+    ActiveBackground, ActiveBorderColor, Background, BorderColor, BorderWidth, BoxShadow,
+    CornerRadius, DisabledBackground, DisabledBorderColor, HoveredBackground, HoveredBorderColor,
+    Padding,
 };
 use masonry::widgets;
 use xilem_core::ViewPathTracker;
@@ -125,15 +126,18 @@ crate::declare_property_tuple!(
     ButtonProps;
     Button<F>;
 
-    Background, 0;
-    BorderColor, 1;
-    BorderWidth, 2;
-    BoxShadow, 3;
-    CornerRadius, 4;
-    Padding, 5;
-    ActiveBackground, 6;
-    DisabledBackground, 7;
-    HoveredBorderColor, 8;
+    DisabledBackground, 0;
+    ActiveBackground, 1;
+    HoveredBackground, 2;
+    Background, 3;
+    DisabledBorderColor, 4;
+    ActiveBorderColor, 5;
+    HoveredBorderColor, 6;
+    BorderColor, 7;
+    BorderWidth, 8;
+    BoxShadow, 9;
+    CornerRadius, 10;
+    Padding, 11;
 );
 
 impl<F> ViewMarker for Button<F> {}

xilem/src/view/checkbox.rs

@@ -79,15 +79,18 @@ crate::declare_property_tuple!(
 
     DisabledBackground, 0;
     ActiveBackground, 1;
-    Background, 2;
-    HoveredBorderColor, 3;
-    BorderColor, 4;
-    BorderWidth, 5;
-    CornerRadius, 6;
-    Padding, 7;
-    CheckmarkStrokeWidth, 8;
-    DisabledCheckmarkColor, 9;
-    CheckmarkColor, 10;
+    HoveredBackground, 2;
+    Background, 3;
+    DisabledBorderColor, 4;
+    ActiveBorderColor, 5;
+    HoveredBorderColor, 6;
+    BorderColor, 7;
+    BorderWidth, 8;
+    CornerRadius, 9;
+    Padding, 10;
+    CheckmarkStrokeWidth, 11;
+    DisabledCheckmarkColor, 12;
+    CheckmarkColor, 13;
 );
 
 impl<F> ViewMarker for Checkbox<F> {}