mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
refactor: tag
This commit is contained in:
luoxiao
parent
bacda05edc
commit
ab5d17701d
5 changed files with 74 additions and 129 deletions
|
|
@ -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<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
|
||||
class=class_list!["thaw-tag", class.map(| c | move || c.get())]
|
||||
style=move || css_vars.get()
|
||||
<span
|
||||
class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class.map(| c | move || c.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>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue