From ab5d17701d4530356bf4c2c8d9681f13f51b4caf Mon Sep 17 00:00:00 2001 From: luoxiao Date: Mon, 3 Jun 2024 17:31:59 +0800 Subject: [PATCH] refactor: tag --- thaw/src/tag/mod.rs | 67 ++++++----------------------------------- thaw/src/tag/tag.css | 67 +++++++++++++++++++++++++++++------------ thaw/src/tag/theme.rs | 44 --------------------------- thaw/src/theme/color.rs | 18 +++++++++-- thaw/src/theme/mod.rs | 7 ++--- 5 files changed, 74 insertions(+), 129 deletions(-) delete mode 100644 thaw/src/tag/theme.rs diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs index c1b0e22..648918c 100644 --- a/thaw/src/tag/mod.rs +++ b/thaw/src/tag/mod.rs @@ -1,8 +1,4 @@ -mod theme; - -pub use theme::TagTheme; - -use crate::{theme::use_theme, Icon, Theme}; +use crate::Icon; use leptos::*; use thaw_utils::{class_list, mount_style, OptionalProp}; @@ -15,33 +11,6 @@ pub enum TagVariant { Error, } -impl TagVariant { - fn theme_font_color(&self, theme: &Theme) -> String { - match self { - TagVariant::Default => theme.tag.default_font_color.clone(), - TagVariant::Success => theme.common.color_success.clone(), - TagVariant::Warning => theme.common.color_warning.clone(), - TagVariant::Error => theme.common.color_error.clone(), - } - } - fn theme_background_color(&self, theme: &Theme) -> String { - match self { - TagVariant::Default => theme.tag.default_background_color.clone(), - TagVariant::Success => theme.tag.success_background_color.clone(), - TagVariant::Warning => theme.tag.warning_background_color.clone(), - TagVariant::Error => theme.tag.error_background_color.clone(), - } - } - fn theme_border_color(&self, theme: &Theme) -> String { - match self { - TagVariant::Default => theme.tag.default_border_color.clone(), - TagVariant::Success => theme.tag.success_border_color.clone(), - TagVariant::Warning => theme.tag.warning_border_color.clone(), - TagVariant::Error => theme.tag.error_border_color.clone(), - } - } -} - #[component] pub fn Tag( #[prop(optional, into)] variant: MaybeSignal, @@ -51,26 +20,6 @@ pub fn Tag( children: Children, ) -> impl IntoView { mount_style("tag", include_str!("./tag.css")); - let theme = use_theme(Theme::light); - let css_vars = create_memo(move |_| { - let mut css_vars = String::new(); - theme.with(|theme| { - let variant = variant.get(); - css_vars.push_str(&format!( - "--thaw-font-color: {};", - variant.theme_font_color(theme) - )); - css_vars.push_str(&format!( - "--thaw-background-color: {};", - variant.theme_background_color(theme) - )); - css_vars.push_str(&format!( - "--thaw-border-color: {};", - variant.theme_border_color(theme) - )); - }); - css_vars - }); let on_close = move |event| { let Some(callback) = on_close.as_ref() else { @@ -80,17 +29,19 @@ pub fn Tag( }; view! { -
- {children()} + {children()} {move || { if closable.get() { view! { } .into() @@ -99,6 +50,6 @@ pub fn Tag( } }} -
+ } } diff --git a/thaw/src/tag/tag.css b/thaw/src/tag/tag.css index 08bf1a2..72949cf 100644 --- a/thaw/src/tag/tag.css +++ b/thaw/src/tag/tag.css @@ -1,33 +1,60 @@ .thaw-tag { - display: inline-flex; - height: 28px; + display: inline-grid; align-items: center; - font-size: 14px; - line-height: 1; - padding: 0 8px; - background-color: var(--thaw-background-color); - color: var(--thaw-font-color); - border: 1px solid var(--thaw-border-color); - border-radius: 3px; + grid-template-areas: + "media primary dismissIcon" + "media secondary dismissIcon"; + width: fit-content; + height: 32px; + padding: 0 7px; + background-color: var(--colorNeutralBackground3); + color: var(--colorNeutralForeground2); + font-family: inherit; + appearance: button; + text-align: unset; + box-sizing: border-box; + border: var(--strokeWidthThin) solid var(--colorTransparentStroke); + border-radius: var(--borderRadiusMedium); +} + +.thaw-tag--closable { + padding-right: 0; +} + +.thaw-tag__primary-text { + grid-row-end: secondary; + grid-row-start: primary; + grid-column-start: primary; + white-space: nowrap; + padding: 0 var(--spacingHorizontalXXS) var(--spacingHorizontalXXS); + line-height: var(--lineHeightBase300); + font-weight: var(--fontWeightRegular); + font-size: var(--fontSizeBase300); + font-family: var(--fontFamilyBase); + color: var(--colorNeutralForeground2); } .thaw-tag__close { - position: relative; - right: -3px; + grid-area: dismissIcon; display: flex; - align-items: center; - justify-content: center; + padding: 0; + padding-right: 7px; + padding-left: var(--spacingHorizontalXS); + font-size: 20px; background-color: transparent; - padding: 1px; - width: 16px; - height: 16px; - color: var(--thaw-font-color); border: none; cursor: pointer; - transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.thaw-tag__close > svg { + display: inline; + line-height: 0; } .thaw-tag__close:hover { - background-color: var(--thaw-border-color); - border-radius: 3px; + color: var(--colorCompoundBrandForeground1Hover); +} + +.thaw-tag__close:active { + color: var(--colorCompoundBrandForeground1Pressed); } diff --git a/thaw/src/tag/theme.rs b/thaw/src/tag/theme.rs deleted file mode 100644 index 4d454fc..0000000 --- a/thaw/src/tag/theme.rs +++ /dev/null @@ -1,44 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct TagTheme { - pub default_font_color: String, - pub default_background_color: String, - pub default_border_color: String, - pub success_background_color: String, - pub success_border_color: String, - pub warning_background_color: String, - pub warning_border_color: String, - pub error_background_color: String, - pub error_border_color: String, -} - -impl ThemeMethod for TagTheme { - fn light() -> Self { - Self { - default_font_color: "#333639".into(), - default_background_color: "#fafafc".into(), - default_border_color: " #e0e0e6".into(), - success_background_color: "#edf7f2".into(), - success_border_color: "#c5e7d5".into(), - warning_background_color: "#fef7ed".into(), - warning_border_color: "#fae0b5".into(), - error_background_color: "#fbeef1".into(), - error_border_color: "#f3cbd3".into(), - } - } - - fn dark() -> Self { - Self { - default_font_color: "#ffffffd1".into(), - default_background_color: "#0000".into(), - default_border_color: "#ffffff3d".into(), - success_background_color: "#0000".into(), - success_border_color: "#63e2b74d".into(), - warning_background_color: "#0000".into(), - warning_border_color: "#f2c97d4d".into(), - error_background_color: "#0000".into(), - error_border_color: "#e880804d".into(), - } - } -} diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs index 94d7cbe..d859ffd 100644 --- a/thaw/src/theme/color.rs +++ b/thaw/src/theme/color.rs @@ -6,6 +6,9 @@ pub struct ColorTheme { pub color_neutral_background_1: String, pub color_neutral_background_1_hover: String, pub color_neutral_background_1_pressed: String, + pub color_neutral_background_3: String, + pub color_neutral_background_3_hover: String, + pub color_neutral_background_3_pressed: String, pub color_neutral_background_4: String, pub color_neutral_background_4_hover: String, pub color_neutral_background_4_pressed: String, @@ -36,7 +39,8 @@ pub struct ColorTheme { pub color_neutral_stroke_accessible_pressed: String, pub color_compound_brand_foreground_1: String, - + pub color_compound_brand_foreground_1_hover: String, + pub color_compound_brand_foreground_1_pressed: String, pub color_compound_brand_background: String, pub color_compound_brand_background_hover: String, pub color_compound_brand_background_pressed: String, @@ -61,9 +65,12 @@ impl ColorTheme { pub fn light() -> Self { Self { color_neutral_background_disabled: "#f0f0f0".into(), - color_neutral_background_1: "#fff".into(), + color_neutral_background_1: "#ffffff".into(), color_neutral_background_1_hover: "#f5f5f5".into(), color_neutral_background_1_pressed: "#e0e0e0".into(), + color_neutral_background_3: "#f5f5f5".into(), + color_neutral_background_3_hover: "#ebebeb".into(), + color_neutral_background_3_pressed: "#d6d6d6".into(), color_neutral_background_4: "#f0f0f0".into(), color_neutral_background_4_hover: "#fafafa".into(), color_neutral_background_4_pressed: "#f5f5f5".into(), @@ -94,6 +101,8 @@ impl ColorTheme { color_neutral_stroke_accessible_pressed: "#4d4d4d".into(), color_compound_brand_foreground_1: "#0f6cbd".into(), + color_compound_brand_foreground_1_hover: "#115ea3".into(), + color_compound_brand_foreground_1_pressed: "#0f548c".into(), color_compound_brand_background: "#0f6cbd".into(), color_compound_brand_background_hover: "#115ea3".into(), @@ -122,6 +131,9 @@ impl ColorTheme { color_neutral_background_1: "#292929".into(), color_neutral_background_1_hover: "#3d3d3d".into(), color_neutral_background_1_pressed: "#1f1f1f".into(), + color_neutral_background_3: "#141414".into(), + color_neutral_background_3_hover: "#292929".into(), + color_neutral_background_3_pressed: "#0a0a0a".into(), color_neutral_background_4: "#0a0a0a".into(), color_neutral_background_4_hover: "#1f1f1f".into(), color_neutral_background_4_pressed: "#000000".into(), @@ -152,6 +164,8 @@ impl ColorTheme { color_neutral_stroke_accessible_pressed: "#b3b3b3".into(), color_compound_brand_foreground_1: "#479ef5".into(), + color_compound_brand_foreground_1_hover: "#62abf5".into(), + color_compound_brand_foreground_1_pressed: "#2886de".into(), color_compound_brand_background: "#479ef5".into(), color_compound_brand_background_hover: "#62abf5".into(), diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index be32980..af5882f 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -6,8 +6,8 @@ use crate::{ mobile::{NavBarTheme, TabbarTheme}, AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, BreadcrumbTheme, CalendarTheme, ColorPickerTheme, DatePickerTheme, InputTheme, MessageTheme, PopoverTheme, ProgressTheme, - ScrollbarTheme, SelectTheme, SkeletionTheme, SpinnerTheme, TableTheme, TagTheme, - TimePickerTheme, UploadTheme, + ScrollbarTheme, SelectTheme, SkeletionTheme, SpinnerTheme, TableTheme, TimePickerTheme, + UploadTheme, }; pub use color::ColorTheme; use leptos::*; @@ -26,7 +26,6 @@ pub struct Theme { pub table: TableTheme, pub alert: AlertTheme, pub skeletion: SkeletionTheme, - pub tag: TagTheme, pub message: MessageTheme, pub select: SelectTheme, pub spinner: SpinnerTheme, @@ -56,7 +55,6 @@ impl Theme { table: TableTheme::light(), alert: AlertTheme::light(), skeletion: SkeletionTheme::light(), - tag: TagTheme::light(), message: MessageTheme::light(), select: SelectTheme::light(), spinner: SpinnerTheme::light(), @@ -85,7 +83,6 @@ impl Theme { table: TableTheme::dark(), alert: AlertTheme::dark(), skeletion: SkeletionTheme::dark(), - tag: TagTheme::dark(), message: MessageTheme::dark(), select: SelectTheme::dark(), spinner: SpinnerTheme::dark(),