diff --git a/thaw/src/anchor/anchor.css b/thaw/src/anchor/anchor.css index f6af1a1..bdb03a1 100644 --- a/thaw/src/anchor/anchor.css +++ b/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); } diff --git a/thaw/src/anchor/mod.rs b/thaw/src/anchor/mod.rs index cda81cc..fead0a4 100644 --- a/thaw/src/anchor/mod.rs +++ b/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::::new(); let bar_ref = NodeRef::new(); let element_ids = RwSignal::new(Vec::::new()); let active_id = RwSignal::new(None::); - 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(
-
, - background_ref: NodeRef, bar_ref: NodeRef, element_ids: RwSignal>, pub active_id: RwSignal>, @@ -165,14 +123,12 @@ impl Copy for AnchorInjection {} impl AnchorInjection { fn new( anchor_ref: NodeRef, - background_ref: NodeRef, bar_ref: NodeRef, element_ids: RwSignal>, active_id: RwSignal>, ) -> 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())); diff --git a/thaw/src/anchor/theme.rs b/thaw/src/anchor/theme.rs deleted file mode 100644 index 8c3e082..0000000 --- a/thaw/src/anchor/theme.rs +++ /dev/null @@ -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(), - } - } -} diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs index 7a5cae1..eb9c669 100644 --- a/thaw/src/theme/common.rs +++ b/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(), } } } diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index 6248064..96b4681 100644 --- a/thaw/src/theme/mod.rs +++ b/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(), } } }