refactor: Scrollbar

thaw/src/scrollbar/mod.rs

@@ -1,8 +1,3 @@
-mod theme;
-
-pub use theme::ScrollbarTheme;
-
-use crate::{use_theme, Theme};
 use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
 use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp};
 
@@ -17,23 +12,6 @@ pub fn Scrollbar(
     children: Children,
 ) -> impl IntoView {
     mount_style("scrollbar", include_str!("./scrollbar.css"));
-    let theme = use_theme(Theme::light);
-    let css_vars = Memo::new(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-scrollbar-background-color: {};",
-                theme.scrollbar.background_color
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-scrollbar-background-color-hover: {};",
-                theme.scrollbar.background_color_hover
-            ));
-            css_vars.push_str(&format!("--thaw-scrollbar-size: {}px;", size));
-        });
-        css_vars
-    });
-
     let container_ref = NodeRef::<html::Div>::new();
     let content_ref = NodeRef::<html::Div>::new();
     let x_track_ref = NodeRef::<html::Div>::new();
@@ -281,7 +259,7 @@ pub fn Scrollbar(
         <div
             class=class_list!["thaw-scrollbar", class.map(| c | move || c.get())]
             style=move || {
-                format!("{}{}", css_vars.get(), style.as_ref().map(|s| s.get()).unwrap_or_default())
+                format!("--thaw-scrollbar-size: {}px;{}", size, style.as_ref().map(|s| s.get()).unwrap_or_default())
             }
 
             on:mouseenter=on_mouseenter

thaw/src/scrollbar/scrollbar.css

@@ -58,10 +58,18 @@
     width: 100%;
     height: 100%;
     border-radius: var(--thaw-scrollbar-size);
-    background-color: var(--thaw-scrollbar-background-color);
+    background-color: color-mix(
+        in srgb,
+        var(--colorNeutralBackgroundInverted) 32%,
+        transparent
+    );
     transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .thaw-scrollabr__thumb:hover {
-    background-color: var(--thaw-scrollbar-background-color-hover);
+    background-color: color-mix(
+        in srgb,
+        var(--colorNeutralBackgroundInverted) 42%,
+        transparent
+    );
 }

thaw/src/scrollbar/theme.rs

@@ -1,23 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct ScrollbarTheme {
-    pub background_color: String,
-    pub background_color_hover: String,
-}
-
-impl ThemeMethod for ScrollbarTheme {
-    fn light() -> Self {
-        Self {
-            background_color: "#00000040".into(),
-            background_color_hover: "#00000066".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            background_color: "#ffffff33".into(),
-            background_color_hover: "#ffffff4d".into(),
-        }
-    }
-}

thaw/src/theme/color.rs

@@ -3,6 +3,7 @@ use thaw_macro::WriteCSSVars;
 #[derive(Clone, WriteCSSVars)]
 pub struct ColorTheme {
     pub color_neutral_background_static: String,
+    pub color_neutral_background_inverted: String,
     pub color_neutral_background_disabled: String,
     pub color_neutral_background_1: String,
     pub color_neutral_background_1_hover: String,
@@ -106,6 +107,7 @@ impl ColorTheme {
     pub fn light() -> Self {
         Self {
             color_neutral_background_static: "#333333".into(),
+            color_neutral_background_inverted: "#292929".into(),
             color_neutral_background_disabled: "#f0f0f0".into(),
             color_neutral_background_1: "#ffffff".into(),
             color_neutral_background_1_hover: "#f5f5f5".into(),
@@ -210,6 +212,7 @@ impl ColorTheme {
     pub fn dark() -> Self {
         Self {
             color_neutral_background_static: "#3d3d3d".into(),
+            color_neutral_background_inverted: "#ffffff".into(),
             color_neutral_background_disabled: "#141414".into(),
             color_neutral_background_1: "#292929".into(),
             color_neutral_background_1_hover: "#3d3d3d".into(),

thaw/src/theme/mod.rs

@@ -2,7 +2,7 @@ mod color;
 mod common;
 
 use self::common::CommonTheme;
-use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme};
+use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme, SelectTheme};
 pub use color::ColorTheme;
 use leptos::*;
 
@@ -20,7 +20,6 @@ pub struct Theme {
     pub message: MessageTheme,
     pub select: SelectTheme,
     pub progress: ProgressTheme,
-    pub scrollbar: ScrollbarTheme,
     pub anchor: AnchorTheme,
 }
 
@@ -34,7 +33,6 @@ impl Theme {
             message: MessageTheme::light(),
             select: SelectTheme::light(),
             progress: ProgressTheme::light(),
-            scrollbar: ScrollbarTheme::light(),
             anchor: AnchorTheme::light(),
         }
     }
@@ -47,7 +45,6 @@ impl Theme {
             message: MessageTheme::dark(),
             select: SelectTheme::dark(),
             progress: ProgressTheme::dark(),
-            scrollbar: ScrollbarTheme::dark(),
             anchor: AnchorTheme::dark(),
         }
     }