Update lookbook and fix tab colors

lookbook/src/main.rs

@@ -9,12 +9,18 @@ fn ButtonPreview(
     /// Label for the button.
     #[lookbook(default = "Label")]
     label: &'a str,
-) -> Element {
-    let theme = use_theme(cx);
-    let background_color = use_state(cx, || theme.primary_color.to_string());
 
+    /// Background color of the container (optional).
+    #[lookbook(default = &*use_theme(cx).primary_color)]
+    background_color: &'a str,
+
+    /// Background color of the container (optional).
+    #[lookbook(default = &*use_theme(cx).border_radius_medium)]
+    border_radius: &'a str,
+) -> Element {
     render!(Button {
         background_color: background_color,
+        border_radius: border_radius,
         onpress: |_| {},
         label
     })
@@ -33,6 +39,7 @@ fn TabRowPreview<'a>(
         div { width: "500px",
             TabRow {
                 onselect: |_| {},
+                selected: 0,
                 tabs: cx
                     .bump()
                     .alloc(tabs.0.iter().map(|label| render!(Tab { "{label}" })).collect::<Vec<_>>())

src/tab_row.rs

@@ -1,4 +1,4 @@
-use crate::Ripple;
+use crate::{use_theme, Ripple};
 use dioxus::prelude::*;
 use dioxus_resize_observer::{use_resize, Rect};
 use dioxus_signals::{use_signal, Signal};
@@ -14,7 +14,6 @@ pub fn TabRow<'a>(
     onselect: EventHandler<'a, usize>,
 ) -> Element<'a> {
     let sizes = use_signal(cx, HashMap::new);
-
 
     let width = sizes
         .read()
@@ -33,15 +32,19 @@ pub fn TabRow<'a>(
 
     let value_ref = use_spring(cx, [width, left], Duration::from_millis(200));
     let animated_ref = use_mounted(cx);
-    use_animated(cx, animated_ref, value_ref, |[width, left]| {
+
+    let theme = use_theme(cx);
+    let primary_color = theme.primary_color.clone();
+
+    use_animated(cx, animated_ref, value_ref, move |[width, left]| {
         format!(
             r"
             position: absolute;
             bottom: 0;
             left: {left}px;
             width: {width}px;
             height: 4px;
-            background: #416529;
+            background: {primary_color};
             "
         )
     });