feat: Per-component themes (#425)

Author: tigerros

book/src/guides/theming.md

@@ -4,7 +4,8 @@ Freya has built-in support for Theming.
 
 > ⚠️ Currently, extending the base theme is not supported.
 
-### Accessing the current theme
+## Accessing the current theme
+
 You can access the whole current theme via the `use_get_theme` hook.
 
 ```rust, no_run
@@ -30,7 +31,7 @@ fn Component(cx: Scope) -> Element {
 }
 ```
 
-### Custom default theme 
+## Custom default theme 
 By default, the selected theme is `LIGHT_THEME`. You can use the alternative, `DARK_THEME`.
 
 ```rust, no_run
@@ -57,7 +58,8 @@ fn Component(cx: Scope) -> Element {
 }
 ```
 
-### Change theme
+## Change theme globally
+
 Changing the selected theme at runtime is possible by using the `use_theme` hook.
 
 ```rust, no_run
@@ -88,12 +90,11 @@ fn Component(cx: Scope) -> Element {
 }
 ```
 
-### Custom theme
+## Custom theme
 
 Themes can be built from scratch or extended from others, like here with `LIGHT_THEME`:
 
 ```rust, no_run
-
 const CUSTOM_THEME: Theme = Theme {
     button: ButtonTheme {
         background: "rgb(230, 0, 0)",

crates/components/src/accordion.rs

@@ -1,8 +1,10 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
+
 use freya_hooks::{
-    use_animation, use_get_theme, use_node, use_platform, AccordionTheme, Animation,
+    use_animation, use_applied_theme, use_node, use_platform, AccordionTheme, AccordionThemeWith,
+    Animation,
 };
 use winit::window::CursorIcon;
 
@@ -19,10 +21,13 @@ pub enum AccordionStatus {
 /// [`Accordion`] component properties.
 #[derive(Props)]
 pub struct AccordionProps<'a> {
+    /// Theme override.
+    #[props(optional)]
+    pub theme: Option<AccordionThemeWith>,
     /// Inner children for the Accordion.
-    children: Element<'a>,
+    pub children: Element<'a>,
     /// Summary element.
-    summary: Element<'a>,
+    pub summary: Element<'a>,
 }
 
 /// `Accordion` component.
@@ -35,7 +40,7 @@ pub struct AccordionProps<'a> {
 ///
 #[allow(non_snake_case)]
 pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
-    let theme = use_get_theme(cx);
+    let theme = use_applied_theme!(cx, &cx.props.theme, accordion);
     let animation = use_animation(cx, || 0.0);
     let open = use_state(cx, || false);
     let (node_ref, size) = use_node(cx);
@@ -47,7 +52,7 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
         background,
         color,
         border_fill,
-    } = theme.accordion;
+    } = theme;
 
     // Adapt the accordion if the body size changes
     let _ = use_memo(

crates/components/src/body.rs

@@ -1,15 +1,15 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::{use_get_theme, BodyTheme};
+
+use freya_hooks::{use_applied_theme, BodyTheme, BodyThemeWith};
 
 /// [`Body`] component properties.
 #[derive(Props)]
 pub struct BodyProps<'a> {
+    /// Theme override.
+    pub theme: Option<BodyThemeWith>,
     /// Inner children for the Body.
-    children: Element<'a>,
-    /// Padding for the Body.
-    #[props(default = "none".to_string(), into)]
-    padding: String,
+    pub children: Element<'a>,
 }
 
 /// `Body` component.
@@ -39,16 +39,21 @@ pub struct BodyProps<'a> {
 ///
 #[allow(non_snake_case)]
 pub fn Body<'a>(cx: Scope<'a, BodyProps<'a>>) -> Element {
-    let theme = use_get_theme(cx);
-    let BodyTheme { background, color } = theme.body;
-    let BodyProps { children, padding } = cx.props;
+    let theme = use_applied_theme!(cx, &cx.props.theme, body);
+    let BodyTheme {
+        background,
+        color,
+        padding,
+    } = theme;
 
-    render!(rect {
-        width: "fill",
-        height: "fill",
-        color: "{color}",
-        background: "{background}",
-        padding: "{padding}",
-        children
-    })
+    render!(
+        rect {
+            width: "fill",
+            height: "fill",
+            color: "{color}",
+            background: "{background}",
+            padding: "{padding}",
+            &cx.props.children
+        }
+    )
 }

crates/components/src/button.rs

@@ -1,27 +1,16 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_focus, use_get_theme, use_platform};
+
+use freya_hooks::{use_applied_theme, use_focus, use_platform, ButtonTheme, ButtonThemeWith};
 use winit::window::CursorIcon;
 
 /// [`Button`] component properties.
 #[derive(Props)]
 pub struct ButtonProps<'a> {
-    /// Padding for the Button.
-    #[props(default = "8 16".to_string(), into)]
-    pub padding: String,
-    /// Margin for the Button.
-    #[props(default = "4".to_string(), into)]
-    pub margin: String,
-    /// Corner radius for the Button.
-    #[props(default = "8".to_string(), into)]
-    pub corner_radius: String,
-    /// Width size for the Button.
-    #[props(default = "auto".to_string(), into)]
-    pub width: String,
-    /// Inner children for the Button.
-    #[props(default = "auto".to_string(), into)]
-    pub height: String,
+    /// Theme override.
+    #[props(optional)]
+    pub theme: Option<ButtonThemeWith>,
     /// Inner children for the Button.
     pub children: Element<'a>,
     /// Handler for the `onclick` event.
@@ -66,12 +55,22 @@ pub enum ButtonStatus {
 #[allow(non_snake_case)]
 pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
     let focus = use_focus(cx);
-    let theme = use_get_theme(cx);
     let status = use_state(cx, ButtonStatus::default);
     let platform = use_platform(cx);
-
     let focus_id = focus.attribute(cx);
 
+    let ButtonTheme {
+        background,
+        hover_background,
+        border_fill,
+        padding,
+        margin,
+        corner_radius,
+        width,
+        height,
+        font_theme,
+    } = use_applied_theme!(cx, &cx.props.theme, button);
+
     let onclick = move |ev| {
         focus.focus();
         if let Some(onclick) = &cx.props.onclick {
@@ -102,19 +101,9 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
     };
 
     let background = match *status.get() {
-        ButtonStatus::Hovering => theme.button.hover_background,
-        ButtonStatus::Idle => theme.button.background,
+        ButtonStatus::Hovering => hover_background,
+        ButtonStatus::Idle => background,
     };
-    let color = theme.button.font_theme.color;
-    let border_fill = theme.button.border_fill;
-    let ButtonProps {
-        width,
-        height,
-        corner_radius,
-        padding,
-        margin,
-        ..
-    } = &cx.props;
 
     render!(
         rect {
@@ -129,7 +118,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
             focusable: "true",
             overflow: "clip",
             role: "button",
-            color: "{color}",
+            color: "{font_theme.color}",
             shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
             border: "1 solid {border_fill}",
             corner_radius: "{corner_radius}",

crates/components/src/canvas.rs

@@ -1,21 +1,15 @@
 use dioxus::prelude::{render, Element, Props, Scope};
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::UseCanvas;
+
+use freya_hooks::{use_applied_theme, CanvasTheme, CanvasThemeWith, UseCanvas};
 
 /// [`Canvas`] component properties.
 #[derive(Props, PartialEq)]
 pub struct CanvasProps {
-    /// Width of the canvas.
-    #[props(default = "300".to_string(), into)]
-    width: String,
-    /// Height of the canvas.
-    #[props(default = "150".to_string(), into)]
-    height: String,
-    /// Color of the canvas.
-    #[props(default = "white".to_string(), into)]
-    background: String,
+    /// Theme override.
+    pub theme: Option<CanvasThemeWith>,
     /// The Canvas reference.
-    canvas: UseCanvas,
+    pub canvas: UseCanvas,
 }
 
 /// Draw anything inside of this canvas.
@@ -25,11 +19,17 @@ pub struct CanvasProps {
 ///
 #[allow(non_snake_case)]
 pub fn Canvas(cx: Scope<CanvasProps>) -> Element {
+    let CanvasTheme {
+        width,
+        height,
+        background,
+    } = use_applied_theme!(cx, &cx.props.theme, canvas);
+
     render!(rect {
         overflow: "clip",
         canvas_reference: cx.props.canvas.attribute(cx),
-        background: "{cx.props.background}",
-        width: "{cx.props.width}",
-        height: "{cx.props.height}",
+        background: "{background}",
+        width: "{width}",
+        height: "{height}"
     })
 }