refactor: Anchor

thaw/src/anchor/anchor.css

@@ -8,17 +8,6 @@
     margin-top: 0.5em;
 }
 
-.thaw-anchor-background {
-    max-width: 0;
-    position: absolute;
-    left: 2px;
-    width: 100%;
-    background-color: var(--thaw-link-background-color);
-    transition: top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-        max-width 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .thaw-anchor-rail {
     position: absolute;
     left: 0;
@@ -28,7 +17,7 @@
     border-radius: 2px;
     overflow: hidden;
     transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    background-color: var(--thaw-rail-background-color);
+    background-color: var(--colorNeutralStroke2);
 }
 
 .thaw-anchor-rail__bar {
@@ -41,21 +30,21 @@
 }
 
 .thaw-anchor-rail__bar.thaw-anchor-rail__bar--active {
-    background-color: var(--thaw-title-color-active);
+    background-color: var(--colorBrandBackground);
 }
 
 .thaw-anchor-link {
     padding: 0 0 0 16px;
     position: relative;
-    line-height: 1.5;
-    font-size: 13px;
+    line-height: var(--lineHeightBase200);
+    font-size: var(--fontSizeBase200);
     min-height: 1.5em;
     display: flex;
     flex-direction: column;
 }
 
 .thaw-anchor-link.thaw-anchor-link--active > .thaw-anchor-link__title {
-    color: var(--thaw-title-color-active);
+    color: var(--colorNeutralForeground2Active);
 }
 
 .thaw-anchor-link__title {
@@ -70,8 +59,9 @@
     padding-right: 16px;
     color: inherit;
     transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--colorNeutralForeground2);
 }
 
 .thaw-anchor-link__title:hover {
-    color: var(--thaw-title-color-hover);
+    color: var(--colorNeutralForeground2Hover);
 }

thaw/src/anchor/mod.rs

@@ -1,10 +1,7 @@
 mod anchor_link;
-mod theme;
 
 pub use anchor_link::AnchorLink;
-pub use theme::AnchorTheme;
 
-use crate::{use_theme, Theme};
 use leptos::*;
 use std::cmp::Ordering;
 use thaw_utils::{add_event_listener_with_bool, class_list, mount_style, throttle, OptionalProp};
@@ -17,46 +14,11 @@ pub fn Anchor(
     children: Children,
 ) -> impl IntoView {
     mount_style("anchor", include_str!("./anchor.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-rail-background-color: {};",
-                theme.anchor.rail_background_color
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-title-color-hover: {};",
-                theme.common.color_primary_hover
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-title-color-active: {};",
-                theme.common.color_primary
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-link-background-color: {}1a;",
-                theme.common.color_primary
-            ));
-        });
-        css_vars
-    });
     let anchor_ref = NodeRef::new();
-    let background_ref = NodeRef::<html::Div>::new();
     let bar_ref = NodeRef::new();
     let element_ids = RwSignal::new(Vec::<String>::new());
     let active_id = RwSignal::new(None::<String>);
 
-    let _ = watch(
-        move || active_id.get(),
-        move |id, _, _| {
-            if id.is_none() {
-                if let Some(background_el) = background_ref.get_untracked() {
-                    let _ = background_el.style("max-width", "0");
-                }
-            }
-        },
-        false,
-    );
     let on_scroll = move || {
         element_ids.with(|ids| {
             let offset_target_top = if let Some(offset_target) = offset_target.as_ref() {
@@ -126,7 +88,6 @@ pub fn Anchor(
         <div
             class=class_list!["thaw-anchor", class.map(| c | move || c.get())]
             ref=anchor_ref
-            style=move || css_vars.get()
         >
             <div class="thaw-anchor-rail">
                 <div
@@ -139,10 +100,8 @@ pub fn Anchor(
                     ref=bar_ref
                 ></div>
             </div>
-            <div class="thaw-anchor-background" ref=background_ref></div>
             <Provider value=AnchorInjection::new(
                 anchor_ref,
-                background_ref,
                 bar_ref,
                 element_ids,
                 active_id,
@@ -154,7 +113,6 @@ pub fn Anchor(
 #[derive(Clone)]
 pub(crate) struct AnchorInjection {
     anchor_ref: NodeRef<html::Div>,
-    background_ref: NodeRef<html::Div>,
     bar_ref: NodeRef<html::Div>,
     element_ids: RwSignal<Vec<String>>,
     pub active_id: RwSignal<Option<String>>,
@@ -165,14 +123,12 @@ impl Copy for AnchorInjection {}
 impl AnchorInjection {
     fn new(
         anchor_ref: NodeRef<html::Div>,
-        background_ref: NodeRef<html::Div>,
         bar_ref: NodeRef<html::Div>,
         element_ids: RwSignal<Vec<String>>,
         active_id: RwSignal<Option<String>>,
     ) -> Self {
         Self {
             anchor_ref,
-            background_ref,
             bar_ref,
             element_ids,
             active_id,
@@ -202,19 +158,12 @@ impl AnchorInjection {
 
     pub fn update_background_position(&self, title_rect: DomRect) {
         if let Some(anchor_el) = self.anchor_ref.get_untracked() {
-            let background_el = self.background_ref.get_untracked().unwrap();
             let bar_el = self.bar_ref.get_untracked().unwrap();
             let anchor_rect = anchor_el.get_bounding_client_rect();
 
             let offset_top = title_rect.top() - anchor_rect.top();
-            let offset_left = title_rect.left() - anchor_rect.left();
-            let _ = background_el
-                .style("top", format!("{}px", offset_top))
-                .style("height", format!("{}px", title_rect.height()))
-                .style(
-                    "max-width",
-                    format!("{}px", title_rect.width() + offset_left),
-                );
+            // let offset_left = title_rect.left() - anchor_rect.left();
+
             let _ = bar_el
                 .style("top", format!("{}px", offset_top))
                 .style("height", format!("{}px", title_rect.height()));

thaw/src/anchor/theme.rs

@@ -1,20 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct AnchorTheme {
-    pub rail_background_color: String,
-}
-
-impl ThemeMethod for AnchorTheme {
-    fn light() -> Self {
-        Self {
-            rail_background_color: "#dbdbdf".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            rail_background_color: "#ffffff33".into(),
-        }
-    }
-}

thaw/src/theme/common.rs

@@ -46,7 +46,9 @@ pub struct CommonTheme {
     pub stroke_width_thickest: String,
 
     pub border_radius_none: String,
+    pub border_radius_small: String,
     pub border_radius_medium: String,
+    pub border_radius_large: String,
     pub border_radius_x_large: String,
     pub border_radius_circular: String,
 
@@ -80,8 +82,6 @@ pub struct CommonTheme {
     pub height_large: String,
 
     pub border_radius: String,
-    pub border_radius_small: String,
-    pub border_radius_large: String,
 }
 
 impl CommonTheme {
@@ -129,7 +129,9 @@ impl CommonTheme {
             stroke_width_thickest: "4px".into(),
 
             border_radius_none: "0".into(),
+            border_radius_small: "2px".into(),
             border_radius_medium: "4px".into(),
+            border_radius_large: "6px".into(),
             border_radius_x_large: "8px".into(),
             border_radius_circular: "10000px".into(),
 
@@ -163,8 +165,6 @@ impl CommonTheme {
             height_large: "40px".into(),
 
             border_radius: "3px".into(),
-            border_radius_small: "2px".into(),
-            border_radius_large: "8px".into(),
         }
     }
 }

thaw/src/theme/mod.rs

@@ -2,7 +2,7 @@ mod color;
 mod common;
 
 use self::common::CommonTheme;
-use crate::{AnchorTheme, ProgressTheme};
+use crate::ProgressTheme;
 pub use color::ColorTheme;
 use leptos::*;
 
@@ -17,7 +17,6 @@ pub struct Theme {
     pub common: CommonTheme,
     pub color: ColorTheme,
     pub progress: ProgressTheme,
-    pub anchor: AnchorTheme,
 }
 
 impl Theme {
@@ -27,7 +26,6 @@ impl Theme {
             common: CommonTheme::light(),
             color: ColorTheme::light(),
             progress: ProgressTheme::light(),
-            anchor: AnchorTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -36,7 +34,6 @@ impl Theme {
             common: CommonTheme::dark(),
             color: ColorTheme::dark(),
             progress: ProgressTheme::dark(),
-            anchor: AnchorTheme::dark(),
         }
     }
 }