Merge pull request #2811 from iced-rs/palette-tweaks
Tweak `Palette` Generation
This commit is contained in:
Héctor
GitHub
commit
fd1cfc05ea
9 changed files with 100 additions and 46 deletions
|
|
@ -29,7 +29,7 @@ impl Palette {
|
|||
pub const LIGHT: Self = Self {
|
||||
background: Color::WHITE,
|
||||
text: Color::BLACK,
|
||||
primary: color!(0x5e7ce2),
|
||||
primary: color!(0x5865F2),
|
||||
success: color!(0x12664f),
|
||||
warning: color!(0xffc14e),
|
||||
danger: color!(0xc3423f),
|
||||
|
|
@ -37,9 +37,9 @@ impl Palette {
|
|||
|
||||
/// The built-in dark variant of a [`Palette`].
|
||||
pub const DARK: Self = Self {
|
||||
background: color!(0x202225),
|
||||
background: color!(0x2B2D31),
|
||||
text: Color::from_rgb(0.90, 0.90, 0.90),
|
||||
primary: color!(0x5e7ce2),
|
||||
primary: color!(0x5865F2),
|
||||
success: color!(0x12664f),
|
||||
warning: color!(0xffc14e),
|
||||
danger: color!(0xc3423f),
|
||||
|
|
@ -205,9 +205,9 @@ impl Palette {
|
|||
///
|
||||
/// [Kanagawa]: https://github.com/rebelot/kanagawa.nvim
|
||||
pub const KANAGAWA_WAVE: Self = Self {
|
||||
background: color!(0x363646), // Sumi Ink 3
|
||||
text: color!(0xCD7BA), // Fuji White
|
||||
primary: color!(0x2D4F67), // Wave Blue 2
|
||||
background: color!(0x1f1f28), // Sumi Ink 3
|
||||
text: color!(0xDCD7BA), // Fuji White
|
||||
primary: color!(0x7FB4CA), // Wave Blue
|
||||
success: color!(0x76946A), // Autumn Green
|
||||
warning: color!(0xff9e3b), // Ronin Yellow
|
||||
danger: color!(0xC34043), // Autumn Red
|
||||
|
|
@ -231,7 +231,7 @@ impl Palette {
|
|||
pub const KANAGAWA_LOTUS: Self = Self {
|
||||
background: color!(0xf2ecbc), // Lotus White 3
|
||||
text: color!(0x545464), // Lotus Ink 1
|
||||
primary: color!(0xc9cbd1), // Lotus Violet 3
|
||||
primary: color!(0x4d699b), // Lotus Blue
|
||||
success: color!(0x6f894e), // Lotus Green
|
||||
warning: color!(0xe98a00), // Lotus Orange 2
|
||||
danger: color!(0xc84053), // Lotus Red
|
||||
|
|
@ -453,22 +453,30 @@ impl Pair {
|
|||
pub struct Background {
|
||||
/// The base background color.
|
||||
pub base: Pair,
|
||||
/// The weakest version of the base background color.
|
||||
pub weakest: Pair,
|
||||
/// A weaker version of the base background color.
|
||||
pub weak: Pair,
|
||||
/// A stronger version of the base background color.
|
||||
pub strong: Pair,
|
||||
/// The strongest version of the base background color.
|
||||
pub strongest: Pair,
|
||||
}
|
||||
|
||||
impl Background {
|
||||
/// Generates a set of [`Background`] colors from the base and text colors.
|
||||
pub fn new(base: Color, text: Color) -> Self {
|
||||
let weak = mix(base, text, 0.15);
|
||||
let strong = mix(base, text, 0.40);
|
||||
let weakest = deviate(base, 0.03);
|
||||
let weak = muted(deviate(base, 0.1));
|
||||
let strong = muted(deviate(base, 0.2));
|
||||
let strongest = muted(deviate(base, 0.3));
|
||||
|
||||
Self {
|
||||
base: Pair::new(base, text),
|
||||
weakest: Pair::new(weakest, text),
|
||||
weak: Pair::new(weak, text),
|
||||
strong: Pair::new(strong, text),
|
||||
strongest: Pair::new(strongest, text),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -627,10 +635,18 @@ fn deviate(color: Color, amount: f32) -> Color {
|
|||
if is_dark(color) {
|
||||
lighten(color, amount)
|
||||
} else {
|
||||
darken(color, amount)
|
||||
darken(color, amount * 0.7)
|
||||
}
|
||||
}
|
||||
|
||||
fn muted(color: Color) -> Color {
|
||||
let mut hsl = to_hsl(color);
|
||||
|
||||
hsl.saturation = hsl.saturation.min(0.5);
|
||||
|
||||
from_hsl(hsl)
|
||||
}
|
||||
|
||||
fn mix(a: Color, b: Color, factor: f32) -> Color {
|
||||
let a_lin = Rgb::from(a).into_linear();
|
||||
let b_lin = Rgb::from(b).into_linear();
|
||||
|
|
@ -641,16 +657,25 @@ fn mix(a: Color, b: Color, factor: f32) -> Color {
|
|||
|
||||
fn readable(background: Color, text: Color) -> Color {
|
||||
if is_readable(background, text) {
|
||||
text
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
|
||||
let improve = if is_dark(background) { lighten } else { darken };
|
||||
|
||||
// TODO: Compute factor from relative contrast value
|
||||
let candidate = improve(text, 0.1);
|
||||
|
||||
if is_readable(background, candidate) {
|
||||
return candidate;
|
||||
}
|
||||
|
||||
let white_contrast = relative_contrast(background, Color::WHITE);
|
||||
let black_contrast = relative_contrast(background, Color::BLACK);
|
||||
|
||||
if white_contrast >= black_contrast {
|
||||
Color::WHITE
|
||||
mix(Color::WHITE, background, 0.05)
|
||||
} else {
|
||||
Color::BLACK
|
||||
}
|
||||
mix(Color::BLACK, background, 0.05)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
use iced::keyboard;
|
||||
use iced::widget::{
|
||||
button, center, checkbox, column, horizontal_rule, pick_list, progress_bar,
|
||||
row, scrollable, slider, text, text_input, toggler, vertical_rule,
|
||||
vertical_space,
|
||||
button, center, checkbox, column, container, horizontal_rule, pick_list,
|
||||
progress_bar, row, scrollable, slider, text, text_input, toggler,
|
||||
vertical_rule, vertical_space,
|
||||
};
|
||||
use iced::{Center, Element, Fill, Subscription, Theme};
|
||||
|
||||
|
|
@ -90,9 +90,9 @@ impl Styling {
|
|||
let danger = styled_button("Danger").style(button::danger);
|
||||
|
||||
let slider =
|
||||
slider(0.0..=100.0, self.slider_value, Message::SliderChanged);
|
||||
|| slider(0.0..=100.0, self.slider_value, Message::SliderChanged);
|
||||
|
||||
let progress_bar = progress_bar(0.0..=100.0, self.slider_value);
|
||||
let progress_bar = || progress_bar(0.0..=100.0, self.slider_value);
|
||||
|
||||
let scrollable = scrollable(column![
|
||||
"Scroll me!",
|
||||
|
|
@ -110,6 +110,20 @@ impl Styling {
|
|||
.on_toggle(Message::TogglerToggled)
|
||||
.spacing(10);
|
||||
|
||||
let card = {
|
||||
container(
|
||||
column![
|
||||
text("Card Example").size(24),
|
||||
slider(),
|
||||
progress_bar(),
|
||||
]
|
||||
.spacing(20),
|
||||
)
|
||||
.width(Fill)
|
||||
.padding(20)
|
||||
.style(container::bordered_box)
|
||||
};
|
||||
|
||||
let content = column![
|
||||
choose_theme,
|
||||
horizontal_rule(38),
|
||||
|
|
@ -117,8 +131,8 @@ impl Styling {
|
|||
row![primary, success, warning, danger]
|
||||
.spacing(10)
|
||||
.align_y(Center),
|
||||
slider,
|
||||
progress_bar,
|
||||
slider(),
|
||||
progress_bar(),
|
||||
row![
|
||||
scrollable,
|
||||
vertical_rule(38),
|
||||
|
|
@ -127,6 +141,7 @@ impl Styling {
|
|||
.spacing(10)
|
||||
.height(100)
|
||||
.align_y(Center),
|
||||
card
|
||||
]
|
||||
.spacing(20)
|
||||
.padding(20)
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
3160686067cb7c738802009cdf2f3c5f5a5bd8c89ada70517388b7adbe64c313
|
||||
0ef7325a79ce31c83759529ed478c8b4848c40c2867193624ef9673b9e21ff53
|
||||
|
|
@ -591,12 +591,12 @@ impl Catalog for Theme {
|
|||
/// A primary button; denoting a main action.
|
||||
pub fn primary(theme: &Theme, status: Status) -> Style {
|
||||
let palette = theme.extended_palette();
|
||||
let base = styled(palette.primary.strong);
|
||||
let base = styled(palette.primary.base);
|
||||
|
||||
match status {
|
||||
Status::Active | Status::Pressed => base,
|
||||
Status::Hovered => Style {
|
||||
background: Some(Background::Color(palette.primary.base.color)),
|
||||
background: Some(Background::Color(palette.primary.strong.color)),
|
||||
..base
|
||||
},
|
||||
Status::Disabled => disabled(base),
|
||||
|
|
|
|||
|
|
@ -555,18 +555,21 @@ pub fn primary(theme: &Theme, status: Status) -> Style {
|
|||
match status {
|
||||
Status::Active { is_checked } => styled(
|
||||
palette.primary.strong.text,
|
||||
palette.background.strongest.color,
|
||||
palette.background.base,
|
||||
palette.primary.strong,
|
||||
palette.primary.base,
|
||||
is_checked,
|
||||
),
|
||||
Status::Hovered { is_checked } => styled(
|
||||
palette.primary.strong.text,
|
||||
palette.background.strongest.color,
|
||||
palette.background.weak,
|
||||
palette.primary.base,
|
||||
palette.primary.strong,
|
||||
is_checked,
|
||||
),
|
||||
Status::Disabled { is_checked } => styled(
|
||||
palette.primary.strong.text,
|
||||
palette.background.weak.color,
|
||||
palette.background.weak,
|
||||
palette.background.strong,
|
||||
is_checked,
|
||||
|
|
@ -581,18 +584,21 @@ pub fn secondary(theme: &Theme, status: Status) -> Style {
|
|||
match status {
|
||||
Status::Active { is_checked } => styled(
|
||||
palette.background.base.text,
|
||||
palette.background.strongest.color,
|
||||
palette.background.base,
|
||||
palette.background.strong,
|
||||
is_checked,
|
||||
),
|
||||
Status::Hovered { is_checked } => styled(
|
||||
palette.background.base.text,
|
||||
palette.background.strongest.color,
|
||||
palette.background.weak,
|
||||
palette.background.strong,
|
||||
is_checked,
|
||||
),
|
||||
Status::Disabled { is_checked } => styled(
|
||||
palette.background.strong.color,
|
||||
palette.background.weak.color,
|
||||
palette.background.weak,
|
||||
palette.background.weak,
|
||||
is_checked,
|
||||
|
|
@ -607,18 +613,21 @@ pub fn success(theme: &Theme, status: Status) -> Style {
|
|||
match status {
|
||||
Status::Active { is_checked } => styled(
|
||||
palette.success.base.text,
|
||||
palette.background.weak.color,
|
||||
palette.background.base,
|
||||
palette.success.base,
|
||||
is_checked,
|
||||
),
|
||||
Status::Hovered { is_checked } => styled(
|
||||
palette.success.base.text,
|
||||
palette.background.strongest.color,
|
||||
palette.background.weak,
|
||||
palette.success.base,
|
||||
palette.success.strong,
|
||||
is_checked,
|
||||
),
|
||||
Status::Disabled { is_checked } => styled(
|
||||
palette.success.base.text,
|
||||
palette.background.weak.color,
|
||||
palette.background.weak,
|
||||
palette.success.weak,
|
||||
is_checked,
|
||||
|
|
@ -633,18 +642,21 @@ pub fn danger(theme: &Theme, status: Status) -> Style {
|
|||
match status {
|
||||
Status::Active { is_checked } => styled(
|
||||
palette.danger.base.text,
|
||||
palette.background.strongest.color,
|
||||
palette.background.base,
|
||||
palette.danger.base,
|
||||
is_checked,
|
||||
),
|
||||
Status::Hovered { is_checked } => styled(
|
||||
palette.danger.base.text,
|
||||
palette.background.strongest.color,
|
||||
palette.background.weak,
|
||||
palette.danger.base,
|
||||
palette.danger.strong,
|
||||
is_checked,
|
||||
),
|
||||
Status::Disabled { is_checked } => styled(
|
||||
palette.danger.base.text,
|
||||
palette.background.weak.color,
|
||||
palette.background.weak,
|
||||
palette.danger.weak,
|
||||
is_checked,
|
||||
|
|
@ -654,6 +666,7 @@ pub fn danger(theme: &Theme, status: Status) -> Style {
|
|||
|
||||
fn styled(
|
||||
icon_color: Color,
|
||||
border_color: Color,
|
||||
base: palette::Pair,
|
||||
accent: palette::Pair,
|
||||
is_checked: bool,
|
||||
|
|
@ -668,7 +681,11 @@ fn styled(
|
|||
border: Border {
|
||||
radius: 2.0.into(),
|
||||
width: 1.0,
|
||||
color: accent.color,
|
||||
color: if is_checked {
|
||||
accent.color
|
||||
} else {
|
||||
border_color
|
||||
},
|
||||
},
|
||||
text_color: None,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -703,10 +703,10 @@ pub fn bordered_box(theme: &Theme) -> Style {
|
|||
let palette = theme.extended_palette();
|
||||
|
||||
Style {
|
||||
background: Some(palette.background.weak.color.into()),
|
||||
background: Some(palette.background.weakest.color.into()),
|
||||
border: Border {
|
||||
width: 1.0,
|
||||
radius: 0.0.into(),
|
||||
radius: 5.0.into(),
|
||||
color: palette.background.strong.color,
|
||||
},
|
||||
..Style::default()
|
||||
|
|
|
|||
|
|
@ -288,10 +288,7 @@ impl Catalog for Theme {
|
|||
pub fn primary(theme: &Theme) -> Style {
|
||||
let palette = theme.extended_palette();
|
||||
|
||||
styled(
|
||||
palette.background.strong.color,
|
||||
palette.primary.strong.color,
|
||||
)
|
||||
styled(palette.background.strong.color, palette.primary.base.color)
|
||||
}
|
||||
|
||||
/// The secondary style of a [`ProgressBar`].
|
||||
|
|
|
|||
|
|
@ -670,14 +670,14 @@ pub fn default(theme: &Theme, status: Status) -> Style {
|
|||
let palette = theme.extended_palette();
|
||||
|
||||
let color = match status {
|
||||
Status::Active => palette.primary.strong.color,
|
||||
Status::Hovered => palette.primary.base.color,
|
||||
Status::Dragged => palette.primary.strong.color,
|
||||
Status::Active => palette.primary.base.color,
|
||||
Status::Hovered => palette.primary.strong.color,
|
||||
Status::Dragged => palette.primary.weak.color,
|
||||
};
|
||||
|
||||
Style {
|
||||
rail: Rail {
|
||||
backgrounds: (color.into(), palette.secondary.base.color.into()),
|
||||
backgrounds: (color.into(), palette.background.strong.color.into()),
|
||||
width: 4.0,
|
||||
border: Border {
|
||||
radius: 2.0.into(),
|
||||
|
|
|
|||
|
|
@ -1802,10 +1802,10 @@ pub fn default(theme: &Theme, status: Status) -> Style {
|
|||
border: Border {
|
||||
radius: 2.0.into(),
|
||||
width: 1.0,
|
||||
color: palette.background.strong.color,
|
||||
color: palette.background.strongest.color,
|
||||
},
|
||||
icon: palette.background.weak.text,
|
||||
placeholder: palette.background.strong.color,
|
||||
placeholder: palette.background.strongest.color,
|
||||
value: palette.background.base.text,
|
||||
selection: palette.primary.weak.color,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue