refactor: ColorPicker

thaw/src/color_picker/color-picker.css

@@ -1,10 +1,10 @@
 .thaw-color-picker-trigger {
     display: inline-block;
-    padding: 4px;
+    padding: var(--spacingVerticalXS) var(--spacingHorizontalXS);
     width: 100%;
-    height: 34px;
+    height: 32px;
-    border: 1px solid #e0e0e6;
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
-    border-radius: 3px;
+    border-radius: var(--borderRadiusMedium);
     box-sizing: border-box;
     cursor: pointer;
 }
@@ -14,17 +14,15 @@
     justify-content: center;
     align-items: center;
     height: 100%;
-    font-size: 14px;
 }
 
-.thaw-color-picker-popover {
+div.thaw-color-picker-popover {
     width: 240px;
-    padding: 12px;
+    padding: var(--spacingVerticalM) var(--spacingHorizontalM);
-    background-color: var(--thaw-background-color);
+    background-color: var(--colorNeutralBackground1);
-    border-radius: 3px;
+    border-radius: var(--borderRadiusMedium);
     box-sizing: border-box;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    box-shadow: var(--shadow16);
-        0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 .thaw-color-picker-popover__panel {

thaw/src/color_picker/mod.rs

@@ -1,10 +1,8 @@
 mod color;
-mod theme;
 
 pub use color::*;
-pub use theme::ColorPickerTheme;
 
-use crate::{use_theme, Theme};
+use crate::ConfigInjection;
 use leptos::leptos_dom::helpers::WindowListenerHandle;
 use leptos::*;
 use palette::{Hsv, IntoColor, Srgb};
@@ -17,20 +15,11 @@ pub fn ColorPicker(
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
 ) -> impl IntoView {
     mount_style("color-picker", include_str!("./color-picker.css"));
-    let theme = use_theme(Theme::light);
+    let config_provider = ConfigInjection::use_();
-    let popover_css_vars = create_memo(move |_| {
+    let hue = RwSignal::new(0f32);
-        theme.with(|theme| {
+    let sv = RwSignal::new((0f32, 0f32));
-            format!(
+    let label = RwSignal::new(String::new());
-                "--thaw-background-color: {};",
+    let style = Memo::new(move |_| {
-                theme.color_picker.popover_background_color
-            )
-        })
-    });
-
-    let hue = create_rw_signal(0f32);
-    let sv = create_rw_signal((0f32, 0f32));
-    let label = create_rw_signal(String::new());
-    let style = create_memo(move |_| {
         let mut style = String::new();
 
         value.with(|color| {
@@ -77,7 +66,7 @@ pub fn ColorPicker(
         style
     });
 
-    create_effect(move |prev| {
+    Effect::new(move |prev| {
         let (s, v) = sv.get();
         let hue_value = hue.get();
         if prev.is_none() {
@@ -106,9 +95,9 @@ pub fn ColorPicker(
         }
     });
 
-    let is_show_popover = create_rw_signal(false);
+    let is_show_popover = RwSignal::new(false);
-    let trigger_ref = create_node_ref::<html::Div>();
+    let trigger_ref = NodeRef::<html::Div>::new();
-    let popover_ref = create_node_ref::<html::Div>();
+    let popover_ref = NodeRef::<html::Div>::new();
     let show_popover = move |_| {
         is_show_popover.set(true);
     };
@@ -157,14 +146,10 @@ pub fn ColorPicker(
                     let:display
                 >
                     <div
-                        class="thaw-color-picker-popover"
+                        class="thaw-config-provider thaw-color-picker-popover"
                         ref=popover_ref
-                        style=move || {
+                        style=move || display.get()
-                            display
+                        data-thaw-id=config_provider.id().clone()
-                                .get()
-                                .map(|d| d.to_string())
-                                .unwrap_or_else(|| popover_css_vars.get())
-                        }
                     >
 
                         <ColorPanel hue=hue.read_only() sv/>
@@ -178,8 +163,8 @@ pub fn ColorPicker(
 
 #[component]
 fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
-    let panel_ref = create_node_ref::<html::Div>();
+    let panel_ref = NodeRef::<html::Div>::new();
-    let mouse = store_value(Vec::<WindowListenerHandle>::new());
+    let mouse = StoredValue::new(Vec::<WindowListenerHandle>::new());
 
     let on_mouse_down = move |ev| {
         let cb = move |ev: ev::MouseEvent| {
@@ -251,8 +236,8 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
 
 #[component]
 fn HueSlider(hue: RwSignal<f32>) -> impl IntoView {
-    let rail_ref = create_node_ref::<html::Div>();
+    let rail_ref = NodeRef::<html::Div>::new();
-    let mouse = store_value(Vec::<WindowListenerHandle>::new());
+    let mouse = StoredValue::new(Vec::<WindowListenerHandle>::new());
 
     let on_mouse_down = move |ev| {
         let cb = move |ev: ev::MouseEvent| {

thaw/src/color_picker/theme.rs

@@ -1,20 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct ColorPickerTheme {
-    pub popover_background_color: String,
-}
-
-impl ThemeMethod for ColorPickerTheme {
-    fn light() -> Self {
-        Self {
-            popover_background_color: "#fff".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            popover_background_color: "#48484e".into(),
-        }
-    }
-}

thaw/src/theme/common.rs

@@ -58,6 +58,7 @@ pub struct CommonTheme {
     pub spacing_horizontal_m: String,
     pub spacing_horizontal_l: String,
     pub spacing_vertical_none: String,
+    pub spacing_vertical_x_s: String,
     pub spacing_vertical_s_nudge: String,
     pub spacing_vertical_s: String,
     pub spacing_vertical_m_nudge: String,
@@ -140,6 +141,7 @@ impl CommonTheme {
             spacing_horizontal_m: "12px".into(),
             spacing_horizontal_l: "16px".into(),
             spacing_vertical_none: "0".into(),
+            spacing_vertical_x_s: "4px".into(),
             spacing_vertical_s_nudge: "6px".into(),
             spacing_vertical_s: "8px".into(),
             spacing_vertical_m_nudge: "10px".into(),

thaw/src/theme/mod.rs

@@ -4,7 +4,7 @@ mod common;
 use self::common::CommonTheme;
 use crate::{
     mobile::{NavBarTheme, TabbarTheme},
-    AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, ColorPickerTheme, DatePickerTheme,
+    AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, DatePickerTheme,
     InputTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme,
     UploadTheme,
 };
@@ -28,7 +28,6 @@ pub struct Theme {
     pub upload: UploadTheme,
     pub nav_bar: NavBarTheme,
     pub tabbar: TabbarTheme,
-    pub color_picker: ColorPickerTheme,
     pub progress: ProgressTheme,
     pub calendar: CalendarTheme,
     pub time_picker: TimePickerTheme,
@@ -51,7 +50,6 @@ impl Theme {
             upload: UploadTheme::light(),
             nav_bar: NavBarTheme::light(),
             tabbar: TabbarTheme::light(),
-            color_picker: ColorPickerTheme::light(),
             progress: ProgressTheme::light(),
             calendar: CalendarTheme::light(),
             time_picker: TimePickerTheme::light(),
@@ -73,7 +71,6 @@ impl Theme {
             upload: UploadTheme::dark(),
             nav_bar: NavBarTheme::dark(),
             tabbar: TabbarTheme::dark(),
-            color_picker: ColorPickerTheme::dark(),
             progress: ProgressTheme::dark(),
             calendar: CalendarTheme::dark(),
             time_picker: TimePickerTheme::dark(),