refactor: tag

thaw/src/tag/mod.rs

@@ -1,8 +1,4 @@
-mod theme;
+use crate::Icon;
-
-pub use theme::TagTheme;
-
-use crate::{theme::use_theme, Icon, Theme};
 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<TagVariant>,
@@ -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! {
-        <div
+        <span
-            class=class_list!["thaw-tag", class.map(| c | move || c.get())]
+            class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class.map(| c | move || c.get())]
-            style=move || css_vars.get()
+
         >
-            <span class="thaw-tag__content">{children()}</span>
+            <span class="thaw-tag__primary-text">{children()}</span>
 
             {move || {
                 if closable.get() {
                     view! {
                         <button class="thaw-tag__close" on:click=on_close>
-                            <Icon icon=icondata_ai::AiCloseOutlined style="font-size: 14px"/>
+                            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
+                                <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" fill="currentColor"></path>
+                            </svg>
                         </button>
                     }
                         .into()
@@ -99,6 +50,6 @@ pub fn Tag(
                 }
             }}
 
-        </div>
+        </span>
     }
 }

thaw/src/tag/tag.css

@@ -1,33 +1,60 @@
 .thaw-tag {
-    display: inline-flex;
+    display: inline-grid;
-    height: 28px;
     align-items: center;
-    font-size: 14px;
+    grid-template-areas:
-    line-height: 1;
+        "media primary dismissIcon"
-    padding: 0 8px;
+        "media secondary dismissIcon";
-    background-color: var(--thaw-background-color);
+    width: fit-content;
-    color: var(--thaw-font-color);
+    height: 32px;
-    border: 1px solid var(--thaw-border-color);
+    padding: 0 7px;
-    border-radius: 3px;
+    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;
+    grid-area: dismissIcon;
-    right: -3px;
     display: flex;
-    align-items: center;
+    padding: 0;
-    justify-content: center;
+    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);
+    color: var(--colorCompoundBrandForeground1Hover);
-    border-radius: 3px;
+}
+
+.thaw-tag__close:active {
+    color: var(--colorCompoundBrandForeground1Pressed);
 }

thaw/src/tag/theme.rs

@@ -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(),
-        }
-    }
-}

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(),

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,
+    ScrollbarTheme, SelectTheme, SkeletionTheme, SpinnerTheme, TableTheme, TimePickerTheme,
-    TimePickerTheme, UploadTheme,
+    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(),