adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: checkbox theme

Browse source
This commit is contained in:
luoxiao 2024-05-20 17:47:09 +08:00
parent a0db94378a
commit ec351e7ba1
2 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
thaw/src/checkbox/checkbox.css
View file

@ -6,16 +6,6 @@
cursor: pointer;
}
.thaw-checkbox--checked {
--thaw-checkbox__indicator--background-color: var(
--colorCompoundBrandBackground
);
--thaw-checkbox__indicator--color: var(--colorNeutralForegroundInverted);
--thaw-checkbox__indicator--border-color: var(
--colorCompoundBrandBackground
);
}
.thaw-checkbox:hover {
color: var(--colorNeutralForeground2);
@ -32,6 +22,36 @@
);
}
.thaw-checkbox--checked {
color: var(--colorNeutralForeground1);
--thaw-checkbox__indicator--background-color: var(
--colorCompoundBrandBackground
);
--thaw-checkbox__indicator--color: var(--colorNeutralForegroundInverted);
--thaw-checkbox__indicator--border-color: var(
--colorCompoundBrandBackground
);
}
.thaw-checkbox--checked:hover {
--thaw-checkbox__indicator--border-color: var(
--colorCompoundBrandBackgroundHover
);
--thaw-checkbox__indicator--background-color: var(
--colorCompoundBrandBackgroundHover
);
}
.thaw-checkbox--checked:active {
--thaw-checkbox__indicator--border-color: var(
--colorCompoundBrandBackgroundPressed
);
--thaw-checkbox__indicator--background-color: var(
--colorCompoundBrandBackgroundPressed
);
}
.thaw-checkbox:focus,
.thaw-checkbox:focus-visible {
outline-style: none;

12
thaw/src/theme/color.rs
View file

@ -24,6 +24,7 @@ pub struct ColorTheme {
pub color_neutral_foreground_3: String,
pub color_neutral_foreground_4: String,
pub color_neutral_foreground_on_brand: String,
pub color_neutral_foreground_inverted: String,
pub color_neutral_stroke_disabled: String,
pub color_neutral_stroke_1: String,
@ -34,6 +35,9 @@ pub struct ColorTheme {
pub color_neutral_stroke_accessible_hover: String,
pub color_neutral_stroke_accessible_pressed: String,
pub color_compound_brand_background: String,
pub color_compound_brand_background_hover: String,
pub color_compound_brand_background_pressed: String,
pub color_compound_brand_stroke: String,
pub color_brand_background: String,
@ -74,6 +78,7 @@ impl ColorTheme {
color_neutral_foreground_3: "#616161".into(),
color_neutral_foreground_4: "#707070".into(),
color_neutral_foreground_on_brand: "#fff".into(),
color_neutral_foreground_inverted: "#fff".into(),
color_neutral_stroke_disabled: "#e0e0e0".into(),
color_neutral_stroke_1: "#d1d1d1".into(),
@ -84,6 +89,9 @@ impl ColorTheme {
color_neutral_stroke_accessible_hover: "#575757".into(),
color_neutral_stroke_accessible_pressed: "#4d4d4d".into(),
color_compound_brand_background: "#0f6cbd".into(),
color_compound_brand_background_hover: "#115ea3".into(),
color_compound_brand_background_pressed: "#0f548c".into(),
color_compound_brand_stroke: "#0f6cbd".into(),
color_brand_background: "#0f6cbd".into(),
@ -124,6 +132,7 @@ impl ColorTheme {
color_neutral_foreground_3: "#adadad".into(),
color_neutral_foreground_4: "#999999".into(),
color_neutral_foreground_on_brand: "#fff".into(),
color_neutral_foreground_inverted: "#242424".into(),
color_neutral_stroke_disabled: "#424242".into(),
color_neutral_stroke_1: "#666666".into(),
@ -134,6 +143,9 @@ impl ColorTheme {
color_neutral_stroke_accessible_hover: "#bdbdbd".into(),
color_neutral_stroke_accessible_pressed: "#b3b3b3".into(),
color_compound_brand_background: "#479ef5".into(),
color_compound_brand_background_hover: "#62abf5".into(),
color_compound_brand_background_pressed: "#2886de".into(),
color_compound_brand_stroke: "#479ef5".into(),
color_brand_background: "#115ea3".into(),