Fix inconsistent styling for toggler and checkbox
This commit is contained in:
parent
ff27f24781
commit
d897ccd49e
2 changed files with 13 additions and 28 deletions
|
|
@ -556,21 +556,18 @@ pub fn primary(theme: &Theme, status: Status) -> Style {
|
||||||
|
|
||||||
match status {
|
match status {
|
||||||
Status::Active { is_checked } => styled(
|
Status::Active { is_checked } => styled(
|
||||||
palette.primary.strong.text,
|
|
||||||
palette.background.strongest.color,
|
palette.background.strongest.color,
|
||||||
palette.background.base,
|
palette.background.base,
|
||||||
palette.primary.base,
|
palette.primary.base,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Hovered { is_checked } => styled(
|
Status::Hovered { is_checked } => styled(
|
||||||
palette.primary.strong.text,
|
|
||||||
palette.background.strongest.color,
|
palette.background.strongest.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.primary.strong,
|
palette.primary.strong,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Disabled { is_checked } => styled(
|
Status::Disabled { is_checked } => styled(
|
||||||
palette.primary.strong.text,
|
|
||||||
palette.background.weak.color,
|
palette.background.weak.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.background.strong,
|
palette.background.strong,
|
||||||
|
|
@ -585,21 +582,18 @@ pub fn secondary(theme: &Theme, status: Status) -> Style {
|
||||||
|
|
||||||
match status {
|
match status {
|
||||||
Status::Active { is_checked } => styled(
|
Status::Active { is_checked } => styled(
|
||||||
palette.background.base.text,
|
|
||||||
palette.background.strongest.color,
|
palette.background.strongest.color,
|
||||||
palette.background.base,
|
palette.background.base,
|
||||||
palette.background.strong,
|
palette.background.strong,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Hovered { is_checked } => styled(
|
Status::Hovered { is_checked } => styled(
|
||||||
palette.background.base.text,
|
|
||||||
palette.background.strongest.color,
|
palette.background.strongest.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.background.strong,
|
palette.background.strong,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Disabled { is_checked } => styled(
|
Status::Disabled { is_checked } => styled(
|
||||||
palette.background.strong.color,
|
|
||||||
palette.background.weak.color,
|
palette.background.weak.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
|
|
@ -614,21 +608,18 @@ pub fn success(theme: &Theme, status: Status) -> Style {
|
||||||
|
|
||||||
match status {
|
match status {
|
||||||
Status::Active { is_checked } => styled(
|
Status::Active { is_checked } => styled(
|
||||||
palette.success.base.text,
|
|
||||||
palette.background.weak.color,
|
palette.background.weak.color,
|
||||||
palette.background.base,
|
palette.background.base,
|
||||||
palette.success.base,
|
palette.success.base,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Hovered { is_checked } => styled(
|
Status::Hovered { is_checked } => styled(
|
||||||
palette.success.base.text,
|
|
||||||
palette.background.strongest.color,
|
palette.background.strongest.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.success.strong,
|
palette.success.strong,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Disabled { is_checked } => styled(
|
Status::Disabled { is_checked } => styled(
|
||||||
palette.success.base.text,
|
|
||||||
palette.background.weak.color,
|
palette.background.weak.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.success.weak,
|
palette.success.weak,
|
||||||
|
|
@ -643,21 +634,18 @@ pub fn danger(theme: &Theme, status: Status) -> Style {
|
||||||
|
|
||||||
match status {
|
match status {
|
||||||
Status::Active { is_checked } => styled(
|
Status::Active { is_checked } => styled(
|
||||||
palette.danger.base.text,
|
|
||||||
palette.background.strongest.color,
|
palette.background.strongest.color,
|
||||||
palette.background.base,
|
palette.background.base,
|
||||||
palette.danger.base,
|
palette.danger.base,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Hovered { is_checked } => styled(
|
Status::Hovered { is_checked } => styled(
|
||||||
palette.danger.base.text,
|
|
||||||
palette.background.strongest.color,
|
palette.background.strongest.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.danger.strong,
|
palette.danger.strong,
|
||||||
is_checked,
|
is_checked,
|
||||||
),
|
),
|
||||||
Status::Disabled { is_checked } => styled(
|
Status::Disabled { is_checked } => styled(
|
||||||
palette.danger.base.text,
|
|
||||||
palette.background.weak.color,
|
palette.background.weak.color,
|
||||||
palette.background.weak,
|
palette.background.weak,
|
||||||
palette.danger.weak,
|
palette.danger.weak,
|
||||||
|
|
@ -667,27 +655,24 @@ pub fn danger(theme: &Theme, status: Status) -> Style {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn styled(
|
fn styled(
|
||||||
icon_color: Color,
|
|
||||||
border_color: Color,
|
border_color: Color,
|
||||||
base: palette::Pair,
|
base: palette::Pair,
|
||||||
accent: palette::Pair,
|
accent: palette::Pair,
|
||||||
is_checked: bool,
|
is_checked: bool,
|
||||||
) -> Style {
|
) -> Style {
|
||||||
|
let (background, border) = if is_checked {
|
||||||
|
(accent, accent.color)
|
||||||
|
} else {
|
||||||
|
(base, border_color)
|
||||||
|
};
|
||||||
|
|
||||||
Style {
|
Style {
|
||||||
background: Background::Color(if is_checked {
|
background: Background::Color(background.color),
|
||||||
accent.color
|
icon_color: background.text,
|
||||||
} else {
|
|
||||||
base.color
|
|
||||||
}),
|
|
||||||
icon_color,
|
|
||||||
border: Border {
|
border: Border {
|
||||||
radius: 2.0.into(),
|
radius: 2.0.into(),
|
||||||
width: 1.0,
|
width: 1.0,
|
||||||
color: if is_checked {
|
color: border,
|
||||||
accent.color
|
|
||||||
} else {
|
|
||||||
border_color
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
text_color: None,
|
text_color: None,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -557,9 +557,9 @@ pub fn default(theme: &Theme, status: Status) -> Style {
|
||||||
let background = match status {
|
let background = match status {
|
||||||
Status::Active { is_toggled } | Status::Hovered { is_toggled } => {
|
Status::Active { is_toggled } | Status::Hovered { is_toggled } => {
|
||||||
if is_toggled {
|
if is_toggled {
|
||||||
palette.primary.strong.color
|
palette.primary.base.color
|
||||||
} else {
|
} else {
|
||||||
palette.background.strong.color
|
palette.background.strongest.color
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Status::Disabled => palette.background.weak.color,
|
Status::Disabled => palette.background.weak.color,
|
||||||
|
|
@ -568,7 +568,7 @@ pub fn default(theme: &Theme, status: Status) -> Style {
|
||||||
let foreground = match status {
|
let foreground = match status {
|
||||||
Status::Active { is_toggled } => {
|
Status::Active { is_toggled } => {
|
||||||
if is_toggled {
|
if is_toggled {
|
||||||
palette.primary.strong.text
|
palette.primary.base.text
|
||||||
} else {
|
} else {
|
||||||
palette.background.base.color
|
palette.background.base.color
|
||||||
}
|
}
|
||||||
|
|
@ -577,7 +577,7 @@ pub fn default(theme: &Theme, status: Status) -> Style {
|
||||||
if is_toggled {
|
if is_toggled {
|
||||||
Color {
|
Color {
|
||||||
a: 0.5,
|
a: 0.5,
|
||||||
..palette.primary.strong.text
|
..palette.primary.base.text
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
palette.background.weak.color
|
palette.background.weak.color
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue