✨ feat: add input theme

examples/basic/Trunk.toml

@@ -1,6 +1,11 @@
 [build]
 target = "index.html"
 
+[watch]
+watch = [
+    "../../src"
+]
+
 [serve]
 address = "127.0.0.1"
 port = 6421

src/input/input.css

@@ -0,0 +1,27 @@
+.melt-input {
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    background-color: #fafbfc;
+    color: #24292e;
+    font-size: 14px;
+    border: 1px solid #e0e0e6;
+    border-radius: var(--border-radius);
+    cursor: text;
+    transition: all 0.3s;
+}
+
+.melt-input:hover {
+    border-color: var(--border-color-hover);
+}
+.melt-input__input-el {
+    width: 100%;
+    height: 30px;
+    background-color: transparent;
+    color: #24292e;
+    line-height: 30px;
+    font-size: inherit;
+    border: none;
+    outline: none;
+}

src/input/mod.rs

@@ -1,4 +1,6 @@
-use crate::utils::mount_style::mount_style;
+mod theme;
+pub use theme::InputTheme;
+use crate::{utils::mount_style::mount_style, theme::{use_theme, Theme}};
 use leptos::*;
 use stylers::style_sheet_str;
 
@@ -8,7 +10,8 @@ pub fn Input(
     #[prop(optional, into)] value: MaybeSignal<String>,
     #[prop(optional)] on_input: Option<SignalSetter<String>>,
 ) -> impl IntoView {
-    let class_name = mount_style("modal", || style_sheet_str!("./src/input/input.css"));
+    let theme = use_theme(cx, Theme::light);
+    let class_name = mount_style("input", || style_sheet_str!("./src/input/input.css"));
     let input_ref = create_node_ref::<html::Input>(cx);
     if let Some(on_input) = on_input {
         input_ref.on_load(cx, move |input| {
@@ -17,11 +20,19 @@ pub fn Input(
             });
         });
     }
-
+    let css_vars = create_memo(cx, move |_| {
+        let mut css_vars = String::new();
+        let theme = theme.get();
+        let border_color_hover = theme.common.color_primary.clone();
+        css_vars.push_str(&format!("--border-color-hover: {border_color_hover};"));
+        let border_radius = theme.common.border_radius.clone();
+        css_vars.push_str(&format!("--border-radius: {border_radius};"));
+        css_vars
+    });
     view! {
         cx, class=class_name,
-        <div class:jo-input=true>
-            <input type="text" prop:value=move || value.get() ref=input_ref/>
+        <div class:melt-input=true style=move || css_vars.get()>
+            <input type="text" prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
         </div>
     }
 }

src/input/theme.rs

@@ -0,0 +1,16 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct InputTheme {
+
+}
+
+impl ThemeMethod for InputTheme {
+    fn light() -> Self {
+        Self {  }
+    }
+
+    fn dark() -> Self {
+        Self {  }
+    }
+}

src/theme/mod.rs

@@ -2,7 +2,7 @@ mod common;
 use leptos::*;
 
 use self::common::CommonTheme;
-use crate::ButtonTheme;
+use crate::{ButtonTheme, InputTheme};
 
 pub trait ThemeMethod {
     fn light() -> Self;
@@ -13,6 +13,7 @@ pub trait ThemeMethod {
 pub struct Theme {
     pub common: CommonTheme,
     pub button: ButtonTheme,
+    pub input: InputTheme,
 }
 
 impl Theme {
@@ -20,12 +21,14 @@ impl Theme {
         Self {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
+            input: InputTheme::light(),
         }
     }
     pub fn dark() -> Self {
         Self {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
+            input: InputTheme::dark(),
         }
     }
 }
@@ -35,12 +38,14 @@ impl ThemeMethod for Theme {
         Self {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
+            input: InputTheme::dark(),
         }
     }
     fn dark() -> Self {
         Self {
             common: CommonTheme::dark(),
             button: ButtonTheme::dark(),
+            input: InputTheme::dark(),
         }
     }
 }