Merge branch 'thaw'

.github/workflows/get-melt-changed.yml

@@ -1,18 +1,18 @@
-name: Get Melt Changed Call
+name: Get Thaw Changed Call
 
 on:
     workflow_call:
         outputs:
-            melt_changed:
+            thaw_changed:
-                description: "Melt Changed"
+                description: "Thaw Changed"
-                value: ${{ jobs.create.outputs.melt_changed }}
+                value: ${{ jobs.create.outputs.thaw_changed }}
 
 jobs:
     create:
         name: Detect Source Change
         runs-on: ubuntu-latest
         outputs:
-            melt_changed: ${{ steps.set-source-changed.outputs.melt_changed }}
+            thaw_changed: ${{ steps.set-source-changed.outputs.thaw_changed }}
         steps:
             - name: Checkout
               uses: actions/checkout@v4
@@ -29,7 +29,7 @@ jobs:
             - name: List source files that changed
               run: echo '${{ steps.changed-source.outputs.all_changed_files }}'
 
-            - name: Set melt_changed
+            - name: Set thaw_changed
               id: set-source-changed
               run: |
-                  echo "melt_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"
+                  echo "thaw_changed=${{ steps.changed-source.outputs.any_changed }}" >> "$GITHUB_OUTPUT"

.github/workflows/gh-pages.yml

@@ -5,12 +5,12 @@ on:
         - cron: "0 23 * * *"
 
 jobs:
-    get-melt-changed:
+    get-thaw-changed:
-        uses: ./.github/workflows/get-melt-changed.yml
+        uses: ./.github/workflows/get-thaw-changed.yml
     deploy:
         runs-on: ubuntu-latest
-        needs: [get-melt-changed]
+        needs: [get-thaw-changed]
-        if: needs.get-melt-changed.outputs.melt_changed == 'true'
+        if: needs.get-thaw-changed.outputs.thaw_changed == 'true'
         permissions:
             contents: write # To push a branch
             pull-requests: write # To create a PR from that branch

Cargo.toml

@@ -1,13 +1,13 @@
 [package]
-name = "melt-ui"
+name = "thaw"
 version = "0.0.6"
 edition = "2021"
-keywords = ["web", "leptos", "ui", "melt-ui"]
+keywords = ["web", "leptos", "ui", "thaw"]
 
-authors = ["luoxiaozero <luoxiaozero@163.com>"]
+authors = ["luoxiaozero"]
 description = "An easy to use leptos component library"
-homepage = "https://github.com/luoxiaozero/melt-ui"
+homepage = "https://github.com/thaw-ui/thaw"
-repository = "https://github.com/luoxiaozero/melt-ui"
+repository = "https://github.com/thaw-ui/thaw"
 license = "MIT"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

README.md

@@ -1,7 +1,7 @@
 <p align="center" >
-    <img src="https://raw.githubusercontent.com/luoxiaozero/melt-ui/main/logo.svg" alt="Melt Logo" width="160px"/>
+    <img src="https://raw.githubusercontent.com/thaw-ui/thaw/main/logo.svg" alt="Thaw Logo" width="160px"/>
 </p>
-<h1 align="center">Melt UI</h1>
+<h1 align="center">Thaw UI</h1>
 <p align="center">An easy to use leptos component library</p>
 
 **melt was renamed [thaw](https://github.com/thaw-ui/thaw)**

demo/Cargo.toml

@@ -8,7 +8,7 @@ edition = "2021"
 
 [dependencies]
 leptos = { version = "0.5.1", features = ["csr"] }
-melt-ui = { path = "../" }
+thaw = { path = "../" }
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",

demo/README.md

@@ -1,3 +1,3 @@
 ## Used
 
-Run the `trunk serve` command and then open the `http://127.0.0.1:6421/melt-ui` URL
+Run the `trunk serve` command and then open the `http://127.0.0.1:6421/thaw` URL

demo/Trunk.toml

@@ -1,6 +1,6 @@
 [build]
 target = "index.html"
-public_url = "/melt-ui/"
+public_url = "/thaw/"
 # release = true
 
 [watch]

demo/index.html

@@ -4,10 +4,10 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Melt UI</title>
+        <title>Thaw UI</title>
         <link
             rel="shortcut icon"
-            href="/melt-ui/favicon.ico"
+            href="/thaw/favicon.ico"
             type="image/x-icon"
         />
         <link data-trunk rel="css" href="./src/assets/css/index.css" />

demo/src/app.rs

@@ -1,7 +1,7 @@
 use crate::pages::*;
 use leptos::*;
 use leptos_router::*;
-use melt_ui::*;
+use thaw::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -24,8 +24,8 @@ pub fn App() -> impl IntoView {
     provide_context(theme);
     view! {
         <Provider theme>
-            <Router base="/melt-ui">
+            <Router base="/thaw">
-                <Routes base="/melt-ui".to_string()>
+                <Routes base="/thaw".to_string()>
                     <Route path="/" view=Home/>
                     <Route path="/components" view=ComponentsPage>
                         <Route path="/menu" view=MenuPage/>

demo/src/components/demo.rs

@@ -1,5 +1,5 @@
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 
 #[slot]
 pub struct DemoCode {
@@ -13,7 +13,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
     mount_style("demo", prisms::prism_css!());
     let theme = use_theme(Theme::light);
     let style = create_memo(move |_| {
-        let mut style = String::from("background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
+        let mut style = String::from("background-image: url(/thaw/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
         theme.with(|theme| {
             if theme.common.color_scheme == "dark" {
                 style.push_str("border: 1px solid #383f52;");

demo/src/components/site_header.rs

@@ -1,6 +1,6 @@
 use leptos::*;
 use leptos_router::use_navigate;
-use melt_ui::*;
+use thaw::*;
 
 #[component]
 pub fn SiteHeader() -> impl IntoView {
@@ -29,7 +29,7 @@ pub fn SiteHeader() -> impl IntoView {
     view! {
         <LayoutHeader style>
             <Space>
-                <img src="/melt-ui/logo.svg" style="width: 36px"/>
+                <img src="/thaw/logo.svg" style="width: 36px"/>
                 <div
                     style="cursor: pointer; display: flex; align-items: center; height: 100%; font-weight: 600; font-size: 20px"
                     on:click=move |_| {
@@ -38,7 +38,7 @@ pub fn SiteHeader() -> impl IntoView {
                     }
                 >
 
-                    "Melt UI"
+                    "Thaw UI"
                 </div>
             </Space>
             <Space>
@@ -51,7 +51,7 @@ pub fn SiteHeader() -> impl IntoView {
                 <Button
                     variant=ButtonVariant::Text
                     on:click=move |_| {
-                        _ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
+                        _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
                 >
 

demo/src/pages/alert/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/auto_complete/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/avatar/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/badge/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/button/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/card/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/checkbox/mod.rs

@@ -2,7 +2,7 @@ use std::collections::HashSet;
 
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/color_picker/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/components.rs

@@ -1,7 +1,7 @@
 use crate::components::SiteHeader;
 use leptos::*;
 use leptos_router::{use_location, use_navigate, Outlet};
-use melt_ui::*;
+use thaw::*;
 
 #[component]
 pub fn ComponentsPage() -> impl IntoView {
@@ -10,7 +10,7 @@ pub fn ComponentsPage() -> impl IntoView {
         let loaction = use_location();
         let mut pathname = loaction.pathname.get_untracked();
 
-        if pathname.starts_with("/melt-ui/components/") {
+        if pathname.starts_with("/thaw/components/") {
             pathname.drain(20..).collect()
         } else {
             String::new()

demo/src/pages/divider/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/grid/mod.rs

@@ -1,22 +1,22 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]
 pub fn GridPage() -> impl IntoView {
     mount_style(
         "grid-demo",
-        r#".melt-grid-item {
+        r#".thaw-grid-item {
         height: 60px;
         color: white;
         text-align: center;
         line-height: 60px;
       }
-      .melt-grid-item:nth-child(odd) {
+      .thaw-grid-item:nth-child(odd) {
         background-color: #3d8ae5dd;
       }
-      .melt-grid-item:nth-child(even) {
+      .thaw-grid-item:nth-child(even) {
         background-color: #3d8ae5aa;
       }"#,
     );

demo/src/pages/home.rs

@@ -1,6 +1,6 @@
 use leptos::*;
 use leptos_router::{use_navigate, use_query_map};
-use melt_ui::*;
+use thaw::*;
 
 #[component]
 pub fn Home() -> impl IntoView {
@@ -15,7 +15,7 @@ pub fn Home() -> impl IntoView {
             position=LayoutPosition::Absolute
             style="display: flex; align-items: center; justify-content: center; flex-direction: column;"
         >
-            <h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Melt UI"</h1>
+            <h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Thaw UI"</h1>
             <p>"An easy to use leptos component library"</p>
             <Space>
                 <Button on_click=move |_| {
@@ -25,7 +25,7 @@ pub fn Home() -> impl IntoView {
                 <Button
                     variant=ButtonVariant::Text
                     on:click=move |_| {
-                        _ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
+                        _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
                 >
 

demo/src/pages/icon/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/image/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/input/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/input_number/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/menu/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/message/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/mobile.rs

@@ -1,5 +1,5 @@
 use leptos::*;
-use melt_ui::{use_theme, Theme};
+use thaw::{use_theme, Theme};
 
 #[component]
 pub fn MobilePage(path: &'static str) -> impl IntoView {

demo/src/pages/modal/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/nav_bar/mod.rs

@@ -3,7 +3,7 @@ use crate::{
     pages::MobilePage,
 };
 use leptos::*;
-use melt_ui::mobile::NavBar;
+use thaw::mobile::NavBar;
 use prisms::highlight_str;
 
 #[component]
@@ -45,7 +45,7 @@ pub fn NavBarPage() -> impl IntoView {
                 </Demo>
             </div>
             <div>
-                <MobilePage path="/melt-ui?path=/mobile/nav-bar"/>
+                <MobilePage path="/thaw?path=/mobile/nav-bar"/>
             </div>
         </div>
     }

demo/src/pages/radio/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/select/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/skeleton/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/slider/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/space/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/switch/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/tabbar/mod.rs

@@ -3,7 +3,7 @@ use crate::{
     pages::MobilePage,
 };
 use leptos::*;
-use melt_ui::mobile::*;
+use thaw::mobile::*;
 use prisms::highlight_str;
 
 #[component]
@@ -41,7 +41,7 @@ pub fn TabbarPage() -> impl IntoView {
                 </Demo>
             </div>
             <div>
-                <MobilePage path="/melt-ui?path=/mobile/tabbar"/>
+                <MobilePage path="/thaw?path=/mobile/tabbar"/>
             </div>
         </div>
     }

demo/src/pages/table/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/tabs/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/tag/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

demo/src/pages/toast/mod.rs

@@ -3,8 +3,8 @@ use crate::{
     pages::MobilePage,
 };
 use leptos::*;
-use melt_ui::mobile::*;
+use thaw::mobile::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 use std::time::Duration;
 
@@ -38,7 +38,7 @@ pub fn ToastPage() -> impl IntoView {
                 </Demo>
             </div>
             <div>
-                <MobilePage path="/melt-ui?path=/mobile/toast"/>
+                <MobilePage path="/thaw?path=/mobile/toast"/>
             </div>
         </div>
     }

demo/src/pages/upload/mod.rs

@@ -1,6 +1,6 @@
 use crate::components::{Demo, DemoCode};
 use leptos::*;
-use melt_ui::*;
+use thaw::*;
 use prisms::highlight_str;
 
 #[component]

src/alert/alert.css

@@ -1,27 +1,27 @@
-.melt-alert {
+.thaw-alert {
     position: relative;
     padding: 14px 20px 14px 42px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
-    border: 1px solid var(--melt-border-color);
+    border: 1px solid var(--thaw-border-color);
     border-radius: 3px;
     line-height: 1.6;
 }
 
-.melt-alert__icon {
+.thaw-alert__icon {
     position: absolute;
     top: 12px;
     left: 10px;
     font-size: 24px;
-    color: var(--melt-icon-color);
+    color: var(--thaw-icon-color);
 }
 
-.melt-alert__header {
+.thaw-alert__header {
     font-size: 16px;
     line-height: 19px;
     font-weight: 500;
 }
 
-.melt-alert__header + .melt-alert__content {
+.thaw-alert__header + .thaw-alert__content {
     margin-top: 8px;
     font-size: 14px;
 }

src/alert/mod.rs

@@ -54,15 +54,15 @@ pub fn Alert(
             theme.with(|theme| {
                 let variant = variant.get();
                 css_vars.push_str(&format!(
-                    "--melt-icon-color: {};",
+                    "--thaw-icon-color: {};",
                     variant.theme_icon_color(theme)
                 ));
                 css_vars.push_str(&format!(
-                    "--melt-background-color: {};",
+                    "--thaw-background-color: {};",
                     variant.theme_background_color(theme)
                 ));
                 css_vars.push_str(&format!(
-                    "--melt-border-color: {};",
+                    "--thaw-border-color: {};",
                     variant.theme_border_color(theme)
                 ));
             });
@@ -79,8 +79,8 @@ pub fn Alert(
         .into()
     });
     view! {
-        <div class="melt-alert" style=move || css_vars.get()>
+        <div class="thaw-alert" style=move || css_vars.get()>
-            <Icon icon class="melt-alert__icon"/>
+            <Icon icon class="thaw-alert__icon"/>
             <div>
 
                 {move || {
@@ -88,10 +88,10 @@ pub fn Alert(
                     if title.is_empty() {
                         None
                     } else {
-                        view! { <div class="melt-alert__header">{title}</div> }.into()
+                        view! { <div class="thaw-alert__header">{title}</div> }.into()
                     }
                 }}
-                <div class="melt-alert__content">{children()}</div>
+                <div class="thaw-alert__content">{children()}</div>
             </div>
         </div>
     }

src/auto_complete/auto-complete.css

@@ -1,20 +1,20 @@
-.melt-auto-complete__menu {
+.thaw-auto-complete__menu {
     position: relative;
     display: inline-block;
     max-height: 200px;
     padding: 5px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
     border-radius: 3px;
     box-sizing: border-box;
     box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
         0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
     z-index: 2000;
 }
-.melt-auto-complete__menu-item {
+.thaw-auto-complete__menu-item {
     padding: 6px 5px;
     border-radius: 2px;
     cursor: pointer;
 }
-.melt-auto-complete__menu-item:hover {
+.thaw-auto-complete__menu-item:hover {
-    background-color: var(--melt-background-color-hover);
+    background-color: var(--thaw-background-color-hover);
 }

src/auto_complete/mod.rs

@@ -24,11 +24,11 @@ pub fn AutoComplete(
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.select.menu_background_color
             ));
             css_vars.push_str(&format!(
-                "--melt-background-color-hover: {};",
+                "--thaw-background-color-hover: {};",
                 theme.select.menu_background_color_hover
             ));
         });
@@ -66,7 +66,7 @@ pub fn AutoComplete(
     };
 
     view! {
-        <div class="melt-auto-complete" ref=auto_complete_ref>
+        <div class="thaw-auto-complete" ref=auto_complete_ref>
             <Input
                 value
                 placeholder
@@ -77,7 +77,7 @@ pub fn AutoComplete(
         </div>
         <Teleport>
             <div
-                class="melt-auto-complete__menu"
+                class="thaw-auto-complete__menu"
                 style=move || {
                     if is_show_menu.get() {
                         menu_css_vars.get()
@@ -104,7 +104,7 @@ pub fn AutoComplete(
                             };
                             view! {
                                 <div
-                                    class="melt-auto-complete__menu-item"
+                                    class="thaw-auto-complete__menu-item"
                                     on:click=on_click
                                     on:mousedown=on_mousedown
                                 >

src/avatar/avatar.css

@@ -1,13 +1,13 @@
-.melt-avatar {
+.thaw-avatar {
     display: inline-block;
-    width: var(--melt-size);
+    width: var(--thaw-size);
-    height: var(--melt-size);
+    height: var(--thaw-size);
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
-    border-radius: var(--melt-border-radius);
+    border-radius: var(--thaw-border-radius);
 }
 
-.melt-avatar img {
+.thaw-avatar img {
     width: 100%;
     height: 100%;
-    border-radius: var(--melt-border-radius);
+    border-radius: var(--thaw-border-radius);
 }

src/avatar/mod.rs

@@ -13,14 +13,14 @@ pub fn Avatar(
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        css_vars.push_str(&format!("--melt-size: {}px;", size.get()));
+        css_vars.push_str(&format!("--thaw-size: {}px;", size.get()));
         css_vars.push_str(&format!(
-            "--melt-border-radius: {};",
+            "--thaw-border-radius: {};",
             if circle.get() { "50%" } else { "3px" }
         ));
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color: {}",
+                "--thaw-background-color: {}",
                 theme.avatar.background_color
             ));
         });
@@ -28,7 +28,7 @@ pub fn Avatar(
     });
     mount_style("avatar", include_str!("./avatar.css"));
     view! {
-        <span class="melt-avatar" style=move || css_vars.get()>
+        <span class="thaw-avatar" style=move || css_vars.get()>
             {move || {
                 let src = src.get();
                 (!src.is_empty()).then(|| view! { <img src=src/> })

src/badge/badge.css

@@ -1,13 +1,13 @@
-.melt-badge {
+.thaw-badge {
     position: relative;
     display: inline-block;
 }
-.melt-badge__sup {
+.thaw-badge__sup {
     position: absolute;
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
 }
-.melt-badge__sup--value {
+.thaw-badge__sup--value {
     top: -9px;
     right: -9px;
     font-size: 12px;
@@ -18,7 +18,7 @@
     text-align: center;
 }
 
-.melt-badge__sup--dot {
+.thaw-badge__sup--dot {
     top: -5px;
     right: -5px;
     height: 10px;

src/badge/mod.rs

@@ -31,10 +31,10 @@ pub fn Badge(
     mount_style("badge", include_str!("./badge.css"));
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
-        css_vars.push_str("--melt-font-color: #fff;");
+        css_vars.push_str("--thaw-font-color: #fff;");
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 color.get().theme_color(theme)
             ));
         });
@@ -52,11 +52,11 @@ pub fn Badge(
         }
     });
     view! {
-        <div class="melt-badge" style=move || css_vars.get()>
+        <div class="thaw-badge" style=move || css_vars.get()>
             <div
-                class="melt-badge__sup"
+                class="thaw-badge__sup"
-                class=("melt-badge__sup--value", move || !dot.get() && !value.get().is_empty())
+                class=("thaw-badge__sup--value", move || !dot.get() && !value.get().is_empty())
-                class=("melt-badge__sup--dot", move || dot.get())
+                class=("thaw-badge__sup--dot", move || dot.get())
             >
                 {move || value.get()}
             </div>

src/button/button.css

@@ -1,9 +1,9 @@
-.melt-button {
+.thaw-button {
     height: 34px;
     padding: 0 16px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
-    border: 1px solid var(--melt-border-color);
+    border: 1px solid var(--thaw-border-color);
     border-radius: 5px;
     position: relative;
     display: inline-flex;
@@ -12,50 +12,50 @@
     user-select: none;
 }
 
-.melt-button:hover {
+.thaw-button:hover {
-    border-color: var(--melt-border-color-hover);
+    border-color: var(--thaw-border-color-hover);
-    background-color: var(--melt-background-color-hover);
+    background-color: var(--thaw-background-color-hover);
     cursor: pointer;
 
     transition: all 0.3s;
 }
 
-.melt-button:active:not(.melt-button--disabled) {
+.thaw-button:active:not(.thaw-button--disabled) {
     transition: all 0.3s;
-    border-color: var(--melt-border-color-hover);
+    border-color: var(--thaw-border-color-hover);
-    background-color: var(--melt-background-color-active);
+    background-color: var(--thaw-background-color-active);
 }
 
-.melt-button--text,
+.thaw-button--text,
-.melt-button--link {
+.thaw-button--link {
     border: none;
 }
 
-.melt-button--text:hover {
+.thaw-button--text:hover {
-    color: var(--melt-font-color-hover);
+    color: var(--thaw-font-color-hover);
 }
 
-.melt-button--link {
+.thaw-button--link {
     height: auto;
     padding: inherit;
 }
 
-.melt-button--link:hover {
+.thaw-button--link:hover {
-    color: var(--melt-font-color-hover);
+    color: var(--thaw-font-color-hover);
 }
 
-.melt-button--round {
+.thaw-button--round {
     padding: 0 10px;
     border-radius: 50%;
 }
 
-@keyframes meltLoadingCircle {
+@keyframes thawLoadingCircle {
     100% {
         transform: rotate(360deg);
     }
 }
 
-.melt-button .melt-wave {
+.thaw-button .thaw-wave {
     pointer-events: none;
     animation-iteration-count: 1;
     animation-duration: 0.6s;
@@ -63,21 +63,21 @@
         cubic-bezier(0, 0, 0.2, 1);
 }
 
-.melt-button .melt-wave.melt-wave--active {
+.thaw-button .thaw-wave.thaw-wave--active {
     z-index: 1;
-    animation-name: meltButtonWaveSpread, meltButtonWaveOpacity;
+    animation-name: thawButtonWaveSpread, thawButtonWaveOpacity;
 }
 
-@keyframes meltButtonWaveSpread {
+@keyframes thawButtonWaveSpread {
     from {
-        box-shadow: 0 0 0.5px 0 var(--melt-ripple-color);
+        box-shadow: 0 0 0.5px 0 var(--thaw-ripple-color);
     }
     to {
-        box-shadow: 0 0 0.5px 6px var(--melt-ripple-color);
+        box-shadow: 0 0 0.5px 6px var(--thaw-ripple-color);
     }
 }
 
-@keyframes meltButtonWaveOpacity {
+@keyframes thawButtonWaveOpacity {
     from {
         opacity: 0.6;
     }

src/button/mod.rs

@@ -76,31 +76,31 @@ pub fn Button(
             if variant.get() == ButtonVariant::Primary {
                 let bg_color_hover = color.get().theme_color_hover(theme);
                 let bg_color_active = color.get().theme_color_active(theme);
-                css_vars.push_str(&format!("--melt-background-color: {bg_color};"));
+                css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
-                css_vars.push_str(&format!("--melt-background-color-hover: {bg_color_hover};"));
+                css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
                 css_vars.push_str(&format!(
-                    "--melt-background-color-active: {bg_color_active};"
+                    "--thaw-background-color-active: {bg_color_active};"
                 ));
-                css_vars.push_str("--melt-font-color: #fff;");
+                css_vars.push_str("--thaw-font-color: #fff;");
-                css_vars.push_str(&format!("--melt-border-color: {bg_color};"));
+                css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
-                css_vars.push_str(&format!("--melt-border-color-hover: {bg_color};"));
+                css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
-                css_vars.push_str(&format!("--melt-melt-ripple-color: {bg_color};"));
+                css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
             } else if variant.get() == ButtonVariant::Text {
-                css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
+                css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
                 css_vars.push_str(&format!(
-                    "--melt-background-color-hover: {};",
+                    "--thaw-background-color-hover: {};",
                     theme.button.color_text_hover
                 ));
                 css_vars.push_str(&format!(
-                    "--melt-background-color-active: {};",
+                    "--thaw-background-color-active: {};",
                     theme.button.color_text_active
                 ));
-                css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
+                css_vars.push_str(&format!("--thaw-ripple-color: #0000;"));
             } else {
-                css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
+                css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
-                css_vars.push_str("--melt-border-color: #555a;");
+                css_vars.push_str("--thaw-border-color: #555a;");
-                css_vars.push_str("--melt-border-color-hover: #555;");
+                css_vars.push_str("--thaw-border-color-hover: #555;");
-                css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
+                css_vars.push_str(&format!("--thaw-ripple-color: #0000;"));
             }
         });
 
@@ -139,11 +139,11 @@ pub fn Button(
 
     view! {
         <button
-            class:melt-button=true
+            class:thaw-button=true
-            class=("melt-button--text", move || variant.get() == ButtonVariant::Text)
+            class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)
-            class=("melt-button--link", move || variant.get() == ButtonVariant::Link)
+            class=("thaw-button--link", move || variant.get() == ButtonVariant::Link)
-            class=("melt-button--round", move || round.get())
+            class=("thaw-button--round", move || round.get())
-            class=("melt-button--disabled", move || disabled.get())
+            class=("thaw-button--disabled", move || disabled.get())
             style=move || format!("{}{}", css_vars.get(), style.get())
             on:click=on_click
         >
@@ -154,7 +154,7 @@ pub fn Button(
                         <Icon
                             icon=Icon::from(AiIcon::AiLoadingOutlined)
                             style=format!(
-                                "animation: meltLoadingCircle 1s infinite linear;{icon_style}",
+                                "animation: thawLoadingCircle 1s infinite linear;{icon_style}",
                             )
                         />
                     }

src/card/card.css

@@ -1,32 +1,32 @@
-.melt-card {
+.thaw-card {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--melt-border-color);
+    border: 1px solid var(--thaw-border-color);
     border-radius: 3px;
     overflow: hidden;
 }
-.melt-card__header {
+.thaw-card__header {
     font-weight: 600;
     display: flex;
     align-items: center;
 }
-.melt-card__header-extra {
+.thaw-card__header-extra {
     display: flex;
     align-items: center;
 }
-.melt-card__header-content {
+.thaw-card__header-content {
     flex: 1;
 }
-.melt-card__header,
+.thaw-card__header,
-.melt-card__content,
+.thaw-card__content,
-.melt-card__footer {
+.thaw-card__footer {
     padding: 12px 28px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
 }
-.melt-card__header {
+.thaw-card__header {
     padding: 20px 28px;
 }
-.melt-card__header + .melt-card__content,
+.thaw-card__header + .thaw-card__content,
-.melt-card__footer {
+.thaw-card__footer {
     padding: 0 28px 20px;
 }

src/card/mod.rs

@@ -34,11 +34,11 @@ pub fn Card(
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.common.background_color
             ));
             css_vars.push_str(&format!(
-                "--melt-border-color: {};",
+                "--thaw-border-color: {};",
                 theme.common.border_color
             ));
         });
@@ -52,27 +52,27 @@ pub fn Card(
     let header_extra = store_value(card_header_extra);
 
     view! {
-        <div class="melt-card" style=move || css_vars.get()>
+        <div class="thaw-card" style=move || css_vars.get()>
             <If cond=is_header>
                 <Then slot>
-                    <div class="melt-card__header">
+                    <div class="thaw-card__header">
-                        <div class="melt-card__header-content">
+                        <div class="thaw-card__header-content">
                             <OptionComp value=header.get_value() let:header>
                                 <Fallback slot>{move || title.get_value().get()}</Fallback>
                                 {(header.children)()}
                             </OptionComp>
                         </div>
                         <OptionComp value=header_extra.get_value() let:header_extra>
-                            <div class="melt-card__header-extra">{(header_extra.children)()}</div>
+                            <div class="thaw-card__header-extra">{(header_extra.children)()}</div>
                         </OptionComp>
                     </div>
                 </Then>
             </If>
-            <div class="melt-card__content">{children()}</div>
+            <div class="thaw-card__content">{children()}</div>
             <OptionComp value=card_footer let:footer>
                 <If cond=footer.if_>
                     <Then slot>
-                        <div class="melt-card__footer">{(footer.children)()}</div>
+                        <div class="thaw-card__footer">{(footer.children)()}</div>
                     </Then>
                 </If>
             </OptionComp>

src/checkbox/checkbox.css

@@ -1,15 +1,15 @@
-.melt-checkbox {
+.thaw-checkbox {
     display: inline-flex;
     align-items: center;
     cursor: pointer;
 }
 
-.melt-checkbox__input {
+.thaw-checkbox__input {
     width: 0;
     height: 0;
     opacity: 0;
 }
-.melt-checkbox__dot {
+.thaw-checkbox__dot {
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -18,15 +18,15 @@
     border: 1px solid #ddd;
     border-radius: 2px;
 }
-.melt-checkbox:hover .melt-checkbox__dot,
+.thaw-checkbox:hover .thaw-checkbox__dot,
-.melt-checkbox--checked .melt-checkbox__dot {
+.thaw-checkbox--checked .thaw-checkbox__dot {
-    border-color: var(--melt-background-color-checked);
+    border-color: var(--thaw-background-color-checked);
 }
-.melt-checkbox--checked .melt-checkbox__dot {
+.thaw-checkbox--checked .thaw-checkbox__dot {
-    background-color: var(--melt-background-color-checked);
+    background-color: var(--thaw-background-color-checked);
 }
 
-.melt-checkbox__label {
+.thaw-checkbox__label {
     display: inline-block;
     padding: 0 6px;
     user-select: none;

src/checkbox/mod.rs

@@ -25,7 +25,7 @@ pub fn Checkbox(
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color-checked: {};",
+                "--thaw-background-color-checked: {};",
                 theme.common.color_primary
             ));
         });
@@ -34,20 +34,20 @@ pub fn Checkbox(
 
     view! {
         <div
-            class:melt-checkbox=true
+            class:thaw-checkbox=true
-            class=("melt-checkbox--checked", move || value.get())
+            class=("thaw-checkbox--checked", move || value.get())
             style=move || css_vars.get()
             on:click=move |_| value.set(!value.get_untracked())
         >
-            <input class="melt-checkbox__input" type="checkbox"/>
+            <input class="thaw-checkbox__input" type="checkbox"/>
-            <div class="melt-checkbox__dot">
+            <div class="thaw-checkbox__dot">
                 <If cond=value.clone_into()>
                     <Then slot>
                         <Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
                     </Then>
                 </If>
             </div>
-            <div class="melt-checkbox__label">{children()}</div>
+            <div class="thaw-checkbox__label">{children()}</div>
         </div>
     }
 }

src/code/code.css

@@ -1,3 +1,3 @@
-.melt-code {
+.thaw-code {
     font-size: 14px;
 }

src/code/mod.rs

@@ -4,5 +4,5 @@ use leptos::*;
 #[component]
 pub fn Code(children: Children) -> impl IntoView {
     mount_style("code", include_str!("./code.css"));
-    view! { <code class="melt-code">{children()}</code> }
+    view! { <code class="thaw-code">{children()}</code> }
 }

src/color_picker/color-picker.css

@@ -1,4 +1,4 @@
-.melt-color-picker-trigger {
+.thaw-color-picker-trigger {
     display: inline-block;
     padding: 4px;
     width: 100%;
@@ -9,7 +9,7 @@
     cursor: pointer;
 }
 
-.melt-color-picker-trigger__content {
+.thaw-color-picker-trigger__content {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -17,14 +17,14 @@
     font-size: 14px;
 }
 
-.melt-color-picker-popover {
+.thaw-color-picker-popover {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 240px;
     padding: 12px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
     border-radius: 3px;
     box-sizing: border-box;
     box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
@@ -32,14 +32,14 @@
     z-index: 1000;
 }
 
-.melt-color-picker-popover__panel {
+.thaw-color-picker-popover__panel {
     position: relative;
     height: 180px;
     margin-bottom: 8px;
     cursor: crosshair;
 }
 
-.melt-color-picker-popover__layer {
+.thaw-color-picker-popover__layer {
     position: absolute;
     left: 0;
     right: 0;
@@ -47,7 +47,7 @@
     bottom: 0;
 }
 
-.melt-color-picker-popover__layer--shadowed {
+.thaw-color-picker-popover__layer--shadowed {
     position: absolute;
     left: 0;
     right: 0;
@@ -56,7 +56,7 @@
     background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
 }
 
-.melt-color-picker-popover__handle {
+.thaw-color-picker-popover__handle {
     position: absolute;
     left: -6px;
     bottom: -6px;
@@ -68,7 +68,7 @@
     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.45);
 }
 
-.melt-color-picker-slider {
+.thaw-color-picker-slider {
     height: 12px;
     padding: 0 6px;
     background-image: linear-gradient(
@@ -84,7 +84,7 @@
     border-radius: 6px;
 }
 
-.melt-color-picker-slider__handle {
+.thaw-color-picker-slider__handle {
     position: relative;
     left: 0;
     width: 12px;

src/color_picker/mod.rs

@@ -16,7 +16,7 @@ pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal<RGBA>) -> impl I
     let popover_css_vars = create_memo(move |_| {
         theme.with(|theme| {
             format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.color_picker.popover_background_color
             )
         })
@@ -98,14 +98,14 @@ pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal<RGBA>) -> impl I
     on_cleanup(move || timer.remove());
 
     view! {
-        <div class="melt-color-picker-trigger" on:click=show_popover ref=trigger_ref>
+        <div class="thaw-color-picker-trigger" on:click=show_popover ref=trigger_ref>
-            <div class="melt-color-picker-trigger__content" style=move || style.get()>
+            <div class="thaw-color-picker-trigger__content" style=move || style.get()>
                 {move || label.get()}
             </div>
         </div>
         <Teleport>
             <div
-                class="melt-color-picker-popover"
+                class="thaw-color-picker-popover"
                 ref=popover_ref
                 style=move || {
                     if is_show_popover.get() {
@@ -172,17 +172,17 @@ fn ColorPanel(hue: ReadSignal<u16>, sv: RwSignal<(f64, f64)>) -> impl IntoView {
     };
 
     view! {
-        <div class="melt-color-picker-popover__panel" ref=panel_ref on:mousedown=on_mouse_down>
+        <div class="thaw-color-picker-popover__panel" ref=panel_ref on:mousedown=on_mouse_down>
             <div
-                class="melt-color-picker-popover__layer"
+                class="thaw-color-picker-popover__layer"
                 style:background-image=move || {
                     format!("linear-gradient(90deg, white, hsl({}, 100%, 50%))", hue.get())
                 }
             >
             </div>
-            <div class="melt-color-picker-popover__layer--shadowed"></div>
+            <div class="thaw-color-picker-popover__layer--shadowed"></div>
             <div
-                class="melt-color-picker-popover__handle"
+                class="thaw-color-picker-popover__handle"
                 style=move || {
                     format!(
                         "left: calc({}% - 6px); bottom: calc({}% - 6px)",
@@ -233,9 +233,9 @@ fn HueSlider(hue: RwSignal<u16>) -> impl IntoView {
         });
     };
     view! {
-        <div class="melt-color-picker-slider" ref=rail_ref on:mousedown=on_mouse_down>
+        <div class="thaw-color-picker-slider" ref=rail_ref on:mousedown=on_mouse_down>
             <div
-                class="melt-color-picker-slider__handle"
+                class="thaw-color-picker-slider__handle"
                 style=move || format!("left: calc({}% - 6px)", f32::from(hue.get()) / 359.0 * 100.0)
             ></div>
         </div>

src/divider/divider.css

@@ -1,12 +1,12 @@
 
-.melt-divider {
+.thaw-divider {
     position: relative;
     display: flex;
     width: 100%;
     margin: 1.5rem 0;
 }
 
-.melt-divider__line {
+.thaw-divider__line {
     background-color: #efeff5;
     height: 1px;
     width: 100%;

src/divider/mod.rs

@@ -6,8 +6,8 @@ use crate::mount_style;
 pub fn Divider() -> impl IntoView {
     mount_style("divider", include_str!("./divider.css"));
     view! {
-        <div class="melt-divider">
+        <div class="thaw-divider">
-            <div class="melt-divider__line"></div>
+            <div class="thaw-divider__line"></div>
         </div>
     }
 }

src/grid/grid_item.rs

@@ -33,7 +33,7 @@ pub fn GridItem(
         style
     });
     view! {
-        <div class="melt-grid-item" style=move || style.get()>
+        <div class="thaw-grid-item" style=move || style.get()>
             {children()}
         </div>
     }

src/grid/mod.rs

@@ -24,7 +24,7 @@ pub fn Grid(
     });
 
     view! {
-        <div class="melt-grid" style=move || style.get()>
+        <div class="thaw-grid" style=move || style.get()>
             {children()}
         </div>
     }

src/input/input.css

@@ -1,42 +1,42 @@
-.melt-input {
+.thaw-input {
     display: inline-flex;
     width: 100%;
     box-sizing: border-box;
     padding: 0 10px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
     font-size: 14px;
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
-    border: 1px solid var(--melt-border-color);
+    border: 1px solid var(--thaw-border-color);
-    border-radius: var(--melt-border-radius);
+    border-radius: var(--thaw-border-radius);
     cursor: text;
     transition: all 0.3s;
 }
 
-.melt-input--focus,
+.thaw-input--focus,
-.melt-input:hover {
+.thaw-input:hover {
-    border-color: var(--melt-border-color-hover);
+    border-color: var(--thaw-border-color-hover);
 }
 
-.melt-input--focus {
+.thaw-input--focus {
-    box-shadow: 0 0 0 2px var(--melt-box-shadow-color);
+    box-shadow: 0 0 0 2px var(--thaw-box-shadow-color);
 }
 
-.melt-input__input-el {
+.thaw-input__input-el {
     width: 100%;
     height: 30px;
     background-color: transparent;
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
     line-height: 30px;
     font-size: inherit;
     border: none;
     outline: none;
 }
 
-.melt-input__input-el::placeholder {
+.thaw-input__input-el::placeholder {
-    color: var(--melt-placeholder-color);
+    color: var(--thaw-placeholder-color);
 }
 
-.melt-input__suffix {
+.thaw-input__suffix {
     display: inline-flex;
     align-items: center;
     justify-content: center;

src/input/mod.rs

@@ -70,28 +70,28 @@ pub fn Input(
         let mut css_vars = String::new();
         theme.with(|theme| {
             let border_color_hover = theme.common.color_primary.clone();
-            css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};"));
+            css_vars.push_str(&format!("--thaw-border-color-hover: {border_color_hover};"));
-            css_vars.push_str(&format!("--melt-box-shadow-color: {border_color_hover}33;"));
+            css_vars.push_str(&format!("--thaw-box-shadow-color: {border_color_hover}33;"));
             let border_radius = theme.common.border_radius.clone();
-            css_vars.push_str(&format!("--melt-border-radius: {border_radius};"));
+            css_vars.push_str(&format!("--thaw-border-radius: {border_radius};"));
             css_vars.push_str(&format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.input.background_color
             ));
-            css_vars.push_str(&format!("--melt-font-color: {};", theme.input.font_color));
+            css_vars.push_str(&format!("--thaw-font-color: {};", theme.input.font_color));
             css_vars.push_str(&format!(
-                "--melt-border-color: {};",
+                "--thaw-border-color: {};",
                 theme.input.border_color
             ));
             css_vars.push_str(&format!(
-                "--melt-placeholder-color: {};",
+                "--thaw-placeholder-color: {};",
                 theme.input.placeholder_color
             ));
         });
         css_vars
     });
     view! {
-        <div class="melt-input" class=("melt-input--focus", move || is_focus.get()) style=move || css_vars.get()>
+        <div class="thaw-input" class=("thaw-input--focus", move || is_focus.get()) style=move || css_vars.get()>
             <input
                 type=move || variant.get().as_str()
                 prop:value=move || {
@@ -102,12 +102,12 @@ pub fn Input(
                 on:input=on_input
                 on:focus=on_internal_focus
                 on:blur=on_internal_blur
-                class="melt-input__input-el"
+                class="thaw-input__input-el"
                 placeholder=move || placeholder.get()
             />
 
             {if let Some(suffix) = input_suffix {
-                view! { <div class="melt-input__suffix">{(suffix.children)()}</div> }.into()
+                view! { <div class="thaw-input__suffix">{(suffix.children)()}</div> }.into()
             } else {
                 None
             }}

src/layout/layout-sider.css

@@ -1,4 +1,4 @@
-.melt-layout-sider {
+.thaw-layout-sider {
     position: relative;
     min-width: 240px;
     overflow: auto;

src/layout/layout.css

@@ -1,8 +1,8 @@
-.melt-layout {
+.thaw-layout {
     flex: auto;
 }
 
-.melt-layout--absolute-positioned {
+.thaw-layout--absolute-positioned {
     position: absolute;
     top: 0;
     right: 0;

src/layout/layout_header.rs

@@ -6,7 +6,7 @@ pub fn LayoutHeader(
     children: Children,
 ) -> impl IntoView {
     view! {
-        <div class="melt-layout-header" style=move || style.get()>
+        <div class="thaw-layout-header" style=move || style.get()>
             {children()}
         </div>
     }

src/layout/layout_sider.rs

@@ -8,7 +8,7 @@ pub fn LayoutSider(
 ) -> impl IntoView {
     mount_style("layout-sider", include_str!("./layout-sider.css"));
     view! {
-        <div class="melt-layout-sider" style=move || style.get()>
+        <div class="thaw-layout-sider" style=move || style.get()>
             {children()}
         </div>
     }

src/layout/mod.rs

@@ -40,8 +40,8 @@ pub fn Layout(
     });
     view! {
         <div
-            class="melt-layout"
+            class="thaw-layout"
-            class=("melt-layout--absolute-positioned", position == LayoutPosition::Absolute)
+            class=("thaw-layout--absolute-positioned", position == LayoutPosition::Absolute)
             style=move || style.get()
         >
             {children()}

src/menu/menu-group.css

@@ -1,6 +1,6 @@
-.melt-menu-group {
+.thaw-menu-group {
     padding: 0.85rem 1.15em 0.1rem;
     font-size: 0.86rem;
     font-weight: bold;
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
 }

src/menu/menu-item.css

@@ -1,7 +1,7 @@
-.melt-menu-item__content {
+.thaw-menu-item__content {
     margin: 0.3rem 0.4rem;
     padding: 0.5rem 0.75rem;
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
     cursor: pointer;
     border-radius: 0.25rem;
     font-size: 0.875rem;
@@ -11,11 +11,11 @@
     transition-duration: 0.15s;
 }
 
-.melt-menu-item__content:hover:not(.melt-menu-item__content--selected) {
+.thaw-menu-item__content:hover:not(.thaw-menu-item__content--selected) {
-    background-color: var(--melt-background-color-hover);
+    background-color: var(--thaw-background-color-hover);
 }
 
-.melt-menu-item__content--selected {
+.thaw-menu-item__content--selected {
-    color: var(--melt-font-color-active);
+    color: var(--thaw-font-color-active);
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
 }

src/menu/menu_group.rs

@@ -8,12 +8,12 @@ pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoVi
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.group_color));
+            css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.group_color));
         });
         css_vars
     });
     view! {
-        <div class="melt-menu-group" style=move || css_vars.get()>
+        <div class="thaw-menu-group" style=move || css_vars.get()>
             {label}
         </div>
         {children()}

src/menu/menu_item.rs

@@ -19,21 +19,21 @@ pub fn MenuItem(
         let mut css_vars = String::new();
         theme.with(|theme| {
             let font_color = theme.common.color_primary.clone();
-            css_vars.push_str(&format!("--melt-font-color-active: {font_color};"));
+            css_vars.push_str(&format!("--thaw-font-color-active: {font_color};"));
-            css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.color));
+            css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.color));
-            css_vars.push_str(&format!("--melt-background-color: {font_color}1a;"));
+            css_vars.push_str(&format!("--thaw-background-color: {font_color}1a;"));
             css_vars.push_str(&format!(
-                "--melt-background-color-hover: {};",
+                "--thaw-background-color-hover: {};",
                 theme.menu.item_color_hover
             ));
         });
         css_vars
     });
     view! {
-        <div class="melt-menu-item">
+        <div class="thaw-menu-item">
             <div
-                class="melt-menu-item__content"
+                class="thaw-menu-item__content"
-                class=("melt-menu-item__content--selected", move || menu.get().value == key.get())
+                class=("thaw-menu-item__content--selected", move || menu.get().value == key.get())
                 on:click=on_click
                 style=move || css_vars.get()
             >

src/menu/mod.rs

@@ -30,7 +30,7 @@ pub fn Menu(
         }
     });
     provide_context(menu_injection_key);
-    view! { <div class="melt-menu">{children()}</div> }
+    view! { <div class="thaw-menu">{children()}</div> }
 }
 
 #[derive(Clone)]

src/message/message.css

@@ -1,4 +1,4 @@
-.melt-message-container {
+.thaw-message-container {
     z-index: 6000;
     position: fixed;
     top: 12px;
@@ -11,11 +11,11 @@
     align-items: center;
 }
 
-.melt-message-wrapper {
+.thaw-message-wrapper {
     margin-bottom: 8px;
 }
 
-.melt-message {
+.thaw-message {
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -24,7 +24,7 @@
 
     padding: 10px 20px;
     max-width: 75vh;
-    background: var(--melt-background-color);
+    background: var(--thaw-background-color);
 
     font-size: 14px;
     border-radius: 3px;
@@ -32,13 +32,13 @@
         0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 
-.melt-message__icon {
+.thaw-message__icon {
     width: 20px;
     height: 20px;
     margin-right: 10px;
     font-size: 20px;
 }
 
-.melt-message__content {
+.thaw-message__content {
     line-height: 1.6;
 }

src/message/message.rs

@@ -34,7 +34,7 @@ pub(crate) fn Message(variant: MessageVariant, content: String) -> impl IntoView
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color: {}",
+                "--thaw-background-color: {}",
                 theme.message.background_color
             ))
         });
@@ -42,12 +42,12 @@ pub(crate) fn Message(variant: MessageVariant, content: String) -> impl IntoView
     });
     let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
     view! {
-        <div class="melt-message-wrapper">
+        <div class="thaw-message-wrapper">
-            <div class="melt-message" style=move || css_vars.get()>
+            <div class="thaw-message" style=move || css_vars.get()>
-                <div class="melt-message__icon">
+                <div class="thaw-message__icon">
                     <Icon icon=variant.icon() style/>
                 </div>
-                <div class="melt-message__content">{content}</div>
+                <div class="thaw-message__content">{content}</div>
             </div>
         </div>
     }

src/message/message_provider.rs

@@ -24,7 +24,7 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
     view! {
         {children()}
         <Teleport>
-            <div class="melt-message-container">
+            <div class="thaw-message-container">
                 <For
                     each=move || message_list.get()
                     key=|message| message.0

src/mobile/nav_bar/mod.rs

@@ -24,7 +24,7 @@ pub fn NavBar(
     let css_vars = create_memo(move |_| {
         theme.with(|theme| {
             format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.nav_bar.background_color
             )
         })
@@ -46,10 +46,10 @@ pub fn NavBar(
     };
 
     view! {
-        <div class="melt-nav-bar" style=move || css_vars.get()>
+        <div class="thaw-nav-bar" style=move || css_vars.get()>
             <If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
                 <Then slot>
-                    <div class="melt-nav-bar__left" on:click=on_click_left>
+                    <div class="thaw-nav-bar__left" on:click=on_click_left>
                         <If cond=left_arrow>
                             <Then slot>
                                 <Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
@@ -59,10 +59,10 @@ pub fn NavBar(
                     </div>
                 </Then>
             </If>
-            <div class="melt-nav-bar__center">{move || title.get()}</div>
+            <div class="thaw-nav-bar__center">{move || title.get()}</div>
             <If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
                 <Then slot>
-                    <div class="melt-nav-bar__right" on:click=on_click_right>
+                    <div class="thaw-nav-bar__right" on:click=on_click_right>
                         {move || right_text.get()}
                     </div>
                 </Then>

src/mobile/nav_bar/nav-bar.css

@@ -1,21 +1,21 @@
-.melt-nav-bar {
+.thaw-nav-bar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: 46px;
     line-height: 46px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
 }
 
-.melt-nav-bar__center {
+.thaw-nav-bar__center {
     max-width: 60%;
     font-weight: 600;
     text-align: center;
     margin: 0 auto;
 }
 
-.melt-nav-bar__left {
+.thaw-nav-bar__left {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -27,7 +27,7 @@
     align-items: center;
 }
 
-.melt-nav-bar__right {
+.thaw-nav-bar__right {
     position: absolute;
     top: 0;
     bottom: 0;

src/mobile/tabbar/mod.rs

@@ -20,7 +20,7 @@ pub fn Tabbar(
     let css_vars = create_memo(move |_| {
         theme.with(|theme| {
             format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.tabbar.background_color
             )
         })
@@ -44,7 +44,7 @@ pub fn Tabbar(
     });
     provide_context(tabbar_injection_key);
     view! {
-        <div class="melt-tabbar" style=move || css_vars.get()>
+        <div class="thaw-tabbar" style=move || css_vars.get()>
             {children()}
         </div>
     }

src/mobile/tabbar/tabbar-item.css

@@ -1,4 +1,4 @@
-.melt-tabbar-item {
+.thaw-tabbar-item {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -7,11 +7,11 @@
     cursor: pointer;
 }
 
-.melt-tabbar-item--selected {
+.thaw-tabbar-item--selected {
-    color: var(--melt-font-color-selected)
+    color: var(--thaw-font-color-selected)
 }
 
-.melt-tabbar-item__content {
+.thaw-tabbar-item__content {
     font-size: 12px;
     line-height: 16px;
 }

src/mobile/tabbar/tabbar.css

@@ -1,5 +1,5 @@
-.melt-tabbar {
+.thaw-tabbar {
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
     position: fixed;
     left: 0;
     right: 0;

src/mobile/tabbar/tabbar_item.rs

@@ -22,22 +22,22 @@ pub fn TabbarItem(
         let mut css_vars = String::new();
         theme.with(|theme| {
             let font_color = theme.common.color_primary.clone();
-            css_vars.push_str(&format!("--melt-font-color-selected: {font_color};"));
+            css_vars.push_str(&format!("--thaw-font-color-selected: {font_color};"));
         });
         css_vars
     });
 
     view! {
         <div
-            class="melt-tabbar-item"
+            class="thaw-tabbar-item"
-            class=("melt-tabbar-item--selected", move || tabbar.get().value == key.get())
+            class=("thaw-tabbar-item--selected", move || tabbar.get().value == key.get())
             on:click=on_click
             style=move || css_vars.get()
         >
             <OptionComp value=icon let:icon>
-                <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
+                <Icon icon=icon width="22px" height="22px" class="thaw-tabbar-item__icon"/>
             </OptionComp>
-            <div class="melt-tabbar-item__content">{children()}</div>
+            <div class="thaw-tabbar-item__content">{children()}</div>
         </div>
     }
 }

src/mobile/toast/mod.rs

@@ -12,7 +12,7 @@ pub fn show_toast(options: ToastOptions) {
     mount_style("toast", include_str!("./toast.css"));
 
     let parent = Element::from(document().body().expect("body element not to exist"));
-    let children = view! { <div class="melt-toast">{options.message}</div> };
+    let children = view! { <div class="thaw-toast">{options.message}</div> };
     let node = children.into_view();
 
     #[cfg(target_arch = "wasm32")]

src/mobile/toast/toast.css

@@ -1,4 +1,4 @@
-.melt-toast {
+.thaw-toast {
     white-space: pre-wrap;
     word-break: break-all;
     max-width: 80%;

src/modal/mod.rs

@@ -24,14 +24,14 @@ pub fn Modal(
     view! {
         <Teleport>
             <div
-                class="melt-modal-container"
+                class="thaw-modal-container"
                 style=move || if show.get() { "" } else { "display: none" }
             >
-                <div class="melt-modal-mask"></div>
+                <div class="thaw-modal-mask"></div>
-                <div class="melt-modal-body">
+                <div class="thaw-modal-body">
                     <Card>
                         <CardHeader slot>
-                            <span class="melt-model-title">{move || title.get()}</span>
+                            <span class="thaw-model-title">{move || title.get()}</span>
                         </CardHeader>
                         <CardHeaderExtra slot>
                             <span style="cursor: pointer;" on:click=move |_| show.set(false)>

src/modal/modal.css

@@ -1,7 +1,7 @@
-.melt-modal-container {
+.thaw-modal-container {
     z-index: 2001;
 }
-.melt-modal-mask {
+.thaw-modal-mask {
     position: fixed;
     top: 0;
     right: 0;
@@ -10,7 +10,7 @@
     background-color: #0007;
     z-index: 2000;
 }
-.melt-modal-body {
+.thaw-modal-body {
     position: fixed;
     top: 0;
     right: 0;
@@ -21,11 +21,11 @@
     z-index: 2002;
 }
 
-.melt-modal-body .melt-card {
+.thaw-modal-body .thaw-card {
     width: 600px;
     margin: auto;
 }
 
-.melt-model-title {
+.thaw-model-title {
     font-size: 16px;
 }

src/progress/mod.rs

@@ -13,16 +13,16 @@ pub fn Progress(
     let right_tip: StoredMaybeSignal<_> = right_tip.into();
 
     view! {
-        <div class="melt-progress">
+        <div class="thaw-progress">
-            <span class="melt-progress__tip-left">
+            <span class="thaw-progress__tip-left">
                 <Show when=move || left_tip.with(|v| !v.is_empty())>{move || left_tip.get()}</Show>
             </span>
-            <span class="melt-progress__progress">
+            <span class="thaw-progress__progress">
-                <span class="melt-progress__progress-inner" style=style>
+                <span class="thaw-progress__progress-inner" style=style>
-                    <span class="melt-progress__progress-circle"></span>
+                    <span class="thaw-progress__progress-circle"></span>
                 </span>
             </span>
-            <span class="melt-progress__tip-right">
+            <span class="thaw-progress__tip-right">
                 <Show when=move || {
                     right_tip.with(|v| !v.is_empty())
                 }>{move || right_tip.get()}</Show>

src/progress/progress.css

@@ -1,4 +1,4 @@
-.melt-progress {
+.thaw-progress {
     width: 100%;
     display: flex;
     justify-content: center;
@@ -7,8 +7,8 @@
     padding: 0 8px;
 }
 
-.melt-progress__tip-right,
+.thaw-progress__tip-right,
-.melt-progress__tip-left {
+.thaw-progress__tip-left {
     display: inline-block;
     margin: 0 10px;
     width: 48px;
@@ -17,7 +17,7 @@
     color: #777;
 }
 
-.melt-progress__progress {
+.thaw-progress__progress {
     flex: 1;
     height: 3px;
     background: #f2f2f2;
@@ -25,7 +25,7 @@
     /* cursor: pointer; */
 }
 
-.melt-progress__progress-inner {
+.thaw-progress__progress-inner {
     position: relative;
     top: -14px;
     display: inline-block;
@@ -34,7 +34,7 @@
     transition: width 0.1s;
 }
 
-.melt-progress__progress-circle {
+.thaw-progress__progress-circle {
     display: inline-block;
     position: absolute;
     right: -3px;

src/radio/mod.rs

@@ -17,7 +17,7 @@ pub fn Radio(
         let mut css_vars = String::new();
         theme.with(|theme| {
             let bg_color = theme.common.color_primary.clone();
-            css_vars.push_str(&format!("--melt-background-color-checked: {bg_color};"));
+            css_vars.push_str(&format!("--thaw-background-color-checked: {bg_color};"));
         });
 
         css_vars
@@ -25,14 +25,14 @@ pub fn Radio(
 
     view! {
         <div
-            class="melt-radio"
+            class="thaw-radio"
-            class=("melt-radio--checked", move || value.get())
+            class=("thaw-radio--checked", move || value.get())
             style=move || css_vars.get()
             on:click=move |_| value.set(!value.get_untracked())
         >
-            <input class="melt-radio__input" type="radio" prop:value=move || value.get()/>
+            <input class="thaw-radio__input" type="radio" prop:value=move || value.get()/>
-            <div class="melt-radio__dot"></div>
+            <div class="thaw-radio__dot"></div>
-            <div class="melt-radio__label">{children()}</div>
+            <div class="thaw-radio__label">{children()}</div>
         </div>
     }
 }

src/radio/radio.css

@@ -1,16 +1,16 @@
-.melt-radio {
+.thaw-radio {
     display: inline-flex;
     align-items: center;
     cursor: pointer;
 }
 
-.melt-radio__input {
+.thaw-radio__input {
     width: 0;
     height: 0;
     opacity: 0;
 }
 
-.melt-radio__dot {
+.thaw-radio__dot {
     display: inline-block;
     position: relative;
     width: 14px;
@@ -19,23 +19,23 @@
     border-radius: 50%;
 }
 
-.melt-radio:hover .melt-radio__dot,
+.thaw-radio:hover .thaw-radio__dot,
-.melt-radio--checked .melt-radio__dot {
+.thaw-radio--checked .thaw-radio__dot {
-    border-color: var(--melt-background-color-checked);
+    border-color: var(--thaw-background-color-checked);
 }
 
-.melt-radio--checked .melt-radio__dot::before {
+.thaw-radio--checked .thaw-radio__dot::before {
     content: "";
     position: absolute;
     top: 3px;
     bottom: 3px;
     left: 3px;
     right: 3px;
-    background-color: var(--melt-background-color-checked);
+    background-color: var(--thaw-background-color-checked);
     border-radius: 50%;
 }
 
-.melt-radio__label {
+.thaw-radio__label {
     display: inline-block;
     padding: 0 6px;
     user-select: none;

src/select/mod.rs

@@ -32,14 +32,14 @@ where
         let mut css_vars = String::new();
         theme.with(|theme| {
             let border_color_hover = theme.common.color_primary.clone();
-            css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};"));
+            css_vars.push_str(&format!("--thaw-border-color-hover: {border_color_hover};"));
             css_vars.push_str(&format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.select.background_color
             ));
-            css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color));
+            css_vars.push_str(&format!("--thaw-font-color: {};", theme.select.font_color));
             css_vars.push_str(&format!(
-                "--melt-border-color: {};",
+                "--thaw-border-color: {};",
                 theme.select.border_color
             ));
         });
@@ -51,16 +51,16 @@ where
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 theme.select.menu_background_color
             ));
             css_vars.push_str(&format!(
-                "--melt-background-color-hover: {};",
+                "--thaw-background-color-hover: {};",
                 theme.select.menu_background_color_hover
             ));
-            css_vars.push_str(&format!("--melt-font-color: {};", theme.select.font_color));
+            css_vars.push_str(&format!("--thaw-font-color: {};", theme.select.font_color));
             css_vars.push_str(&format!(
-                "--melt-font-color-selected: {};",
+                "--thaw-font-color-selected: {};",
                 theme.common.color_primary
             ));
         });
@@ -116,14 +116,14 @@ where
         None => String::new(),
     });
     view! {
-        <div class="melt-select" ref=trigger_ref on:click=show_menu style=move || css_vars.get()>
+        <div class="thaw-select" ref=trigger_ref on:click=show_menu style=move || css_vars.get()>
 
             {move || select_option_label.get()}
 
         </div>
         <Teleport>
             <div
-                class="melt-select-menu"
+                class="thaw-select-menu"
                 style=move || {
                     if is_show_menu.get() { menu_css_vars.get() } else { "display: none;".into() }
                 }
@@ -142,9 +142,9 @@ where
                         };
                         view! {
                             <div
-                                class="melt-select-menu__item"
+                                class="thaw-select-menu__item"
                                 class=(
-                                    "melt-select-menu__item-selected",
+                                    "thaw-select-menu__item-selected",
                                     move || value.get() == Some(item.get_value().value),
                                 )
 

src/select/select.css

@@ -1,24 +1,24 @@
-.melt-select {
+.thaw-select {
     position: relative;
     padding: 0 10px;
     height: 30px;
     line-height: 30px;
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
-    border: 1px solid var(--melt-border-color);
+    border: 1px solid var(--thaw-border-color);
     border-radius: 3px;
     transition: all 0.3s;
     cursor: pointer;
     box-sizing: border-box;
 }
 
-.melt-select:hover {
+.thaw-select:hover {
-    border-color: var(--melt-border-color-hover);
+    border-color: var(--thaw-border-color-hover);
 }
 
-.melt-select-menu {
+.thaw-select-menu {
-    color: var(--melt-font-color);
+    color: var(--thaw-font-color);
-    background-color: var(--melt-background-color);
+    background-color: var(--thaw-background-color);
     box-sizing: border-box;
     padding: 5px;
     position: absolute;
@@ -32,16 +32,16 @@
     z-index: 1000;
 }
 
-.melt-select-menu__item {
+.thaw-select-menu__item {
     padding: 6px 5px;
     border-radius: 2px;
     cursor: pointer;
 }
 
-.melt-select-menu__item:hover {
+.thaw-select-menu__item:hover {
-    background-color: var(--melt-background-color-hover);
+    background-color: var(--thaw-background-color-hover);
 }
 
-.melt-select-menu__item-selected {
+.thaw-select-menu__item-selected {
-    color: var(--melt-font-color-selected);
+    color: var(--thaw-font-color-selected);
 }

src/skeleton/mod.rs

@@ -28,11 +28,11 @@ pub fn Skeleton(
 
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color-start: {};",
+                "--thaw-background-color-start: {};",
                 theme.skeletion.background_color_start
             ));
             css_vars.push_str(&format!(
-                "--melt-background-color-end: {};",
+                "--thaw-background-color-end: {};",
                 theme.skeletion.background_color_end
             ));
         });
@@ -41,7 +41,7 @@ pub fn Skeleton(
     });
     (0..repeat.get())
         .map(|_| {
-            view! { <div class="melt-skeleton" style=move || css_vars.get()></div> }
+            view! { <div class="thaw-skeleton" style=move || css_vars.get()></div> }
         })
         .collect_view()
 }

src/skeleton/skeleton.css

@@ -1,19 +1,19 @@
-.melt-skeleton {
+.thaw-skeleton {
     width: 100%;
     height: 1em;
-    background-color: var(--melt-background-color-start);
+    background-color: var(--thaw-background-color-start);
 
     background: linear-gradient(
         90deg,
-        var(--melt-background-color-start) 25%,
+        var(--thaw-background-color-start) 25%,
-        var(--melt-background-color-end) 37%,
+        var(--thaw-background-color-end) 37%,
-        var(--melt-background-color-start) 63%
+        var(--thaw-background-color-start) 63%
     );
-    animation: meltSkeletonLoading 1.4s ease infinite;
+    animation: thawSkeletonLoading 1.4s ease infinite;
     background-size: 400% 100%;
 }
 
-@keyframes meltSkeletonLoading {
+@keyframes thawSkeletonLoading {
     from {
         background-position: 100% 50%;
     }

src/slider/mod.rs

@@ -19,11 +19,11 @@ pub fn Slider(
         let mut css_vars = String::new();
         theme.with(|theme| {
             css_vars.push_str(&format!(
-                "--melt-background-color: {};",
+                "--thaw-background-color: {};",
                 &theme.slider.background_color
             ));
             css_vars.push_str(&format!(
-                "--melt-background-color-fill: {};",
+                "--thaw-background-color-fill: {};",
                 &theme.common.color_primary
             ));
         });
@@ -78,16 +78,16 @@ pub fn Slider(
     on_cleanup(move || on_mouse_move.remove());
 
     view! {
-        <div class="melt-slider" style=move || css_vars.get()>
+        <div class="thaw-slider" style=move || css_vars.get()>
-            <div class="melt-slider-rail" ref=rail_ref>
+            <div class="thaw-slider-rail" ref=rail_ref>
                 <div
-                    class="melt-slider-rail__fill"
+                    class="thaw-slider-rail__fill"
                     style=move || format!("width: {}%", percentage.get())
                 ></div>
             </div>
             <div
                 on:mousedown=on_mouse_down
-                class="melt-slider-handle"
+                class="thaw-slider-handle"
                 style=move || {
                     format!(
                         "left: {}%; transform: translateX(-{}%)",