Merge pull request #2607 from DavidAguilo/palette_warning
Feat: Add warning color to palette
This commit is contained in:
Héctor
GitHub
commit
b156087fcf
4 changed files with 129 additions and 5 deletions
|
|
@ -17,6 +17,8 @@ pub struct Palette {
|
|||
pub primary: Color,
|
||||
/// The success [`Color`] of the [`Palette`].
|
||||
pub success: Color,
|
||||
/// The warning [`Color`] of the [`Palette`].
|
||||
pub warning: Color,
|
||||
/// The danger [`Color`] of the [`Palette`].
|
||||
pub danger: Color,
|
||||
}
|
||||
|
|
@ -36,6 +38,11 @@ impl Palette {
|
|||
0x66 as f32 / 255.0,
|
||||
0x4F as f32 / 255.0,
|
||||
),
|
||||
warning: Color::from_rgb(
|
||||
0xFF as f32 / 255.0,
|
||||
0xC1 as f32 / 255.0,
|
||||
0x4E as f32 / 255.0,
|
||||
),
|
||||
danger: Color::from_rgb(
|
||||
0xC3 as f32 / 255.0,
|
||||
0x42 as f32 / 255.0,
|
||||
|
|
@ -61,6 +68,11 @@ impl Palette {
|
|||
0x66 as f32 / 255.0,
|
||||
0x4F as f32 / 255.0,
|
||||
),
|
||||
warning: Color::from_rgb(
|
||||
0xFF as f32 / 255.0,
|
||||
0xC1 as f32 / 255.0,
|
||||
0x4E as f32 / 255.0,
|
||||
),
|
||||
danger: Color::from_rgb(
|
||||
0xC3 as f32 / 255.0,
|
||||
0x42 as f32 / 255.0,
|
||||
|
|
@ -76,6 +88,7 @@ impl Palette {
|
|||
text: color!(0xf8f8f2), // FOREGROUND
|
||||
primary: color!(0xbd93f9), // PURPLE
|
||||
success: color!(0x50fa7b), // GREEN
|
||||
warning: color!(0xf1fa8c), // YELLOW
|
||||
danger: color!(0xff5555), // RED
|
||||
};
|
||||
|
||||
|
|
@ -87,6 +100,7 @@ impl Palette {
|
|||
text: color!(0xeceff4), // nord6
|
||||
primary: color!(0x8fbcbb), // nord7
|
||||
success: color!(0xa3be8c), // nord14
|
||||
warning: color!(0xebcb8b), // nord13
|
||||
danger: color!(0xbf616a), // nord11
|
||||
};
|
||||
|
||||
|
|
@ -98,6 +112,7 @@ impl Palette {
|
|||
text: color!(0x657b83), // base00
|
||||
primary: color!(0x2aa198), // cyan
|
||||
success: color!(0x859900), // green
|
||||
warning: color!(0xb58900), // yellow
|
||||
danger: color!(0xdc322f), // red
|
||||
};
|
||||
|
||||
|
|
@ -109,6 +124,7 @@ impl Palette {
|
|||
text: color!(0x839496), // base0
|
||||
primary: color!(0x2aa198), // cyan
|
||||
success: color!(0x859900), // green
|
||||
warning: color!(0xb58900), // yellow
|
||||
danger: color!(0xdc322f), // red
|
||||
};
|
||||
|
||||
|
|
@ -120,6 +136,7 @@ impl Palette {
|
|||
text: color!(0x282828), // light FG0_29
|
||||
primary: color!(0x458588), // light BLUE_4
|
||||
success: color!(0x98971a), // light GREEN_2
|
||||
warning: color!(0xd79921), // light YELLOW_3
|
||||
danger: color!(0xcc241d), // light RED_1
|
||||
};
|
||||
|
||||
|
|
@ -131,6 +148,7 @@ impl Palette {
|
|||
text: color!(0xfbf1c7), // dark FG0_29
|
||||
primary: color!(0x458588), // dark BLUE_4
|
||||
success: color!(0x98971a), // dark GREEN_2
|
||||
warning: color!(0xd79921), // dark YELLOW_3
|
||||
danger: color!(0xcc241d), // dark RED_1
|
||||
};
|
||||
|
||||
|
|
@ -142,6 +160,7 @@ impl Palette {
|
|||
text: color!(0x4c4f69), // Text
|
||||
primary: color!(0x1e66f5), // Blue
|
||||
success: color!(0x40a02b), // Green
|
||||
warning: color!(0xdf8e1d), // Yellow
|
||||
danger: color!(0xd20f39), // Red
|
||||
};
|
||||
|
||||
|
|
@ -153,6 +172,7 @@ impl Palette {
|
|||
text: color!(0xc6d0f5), // Text
|
||||
primary: color!(0x8caaee), // Blue
|
||||
success: color!(0xa6d189), // Green
|
||||
warning: color!(0xe5c890), // Yellow
|
||||
danger: color!(0xe78284), // Red
|
||||
};
|
||||
|
||||
|
|
@ -164,6 +184,7 @@ impl Palette {
|
|||
text: color!(0xcad3f5), // Text
|
||||
primary: color!(0x8aadf4), // Blue
|
||||
success: color!(0xa6da95), // Green
|
||||
warning: color!(0xeed49f), // Yellow
|
||||
danger: color!(0xed8796), // Red
|
||||
};
|
||||
|
||||
|
|
@ -175,6 +196,7 @@ impl Palette {
|
|||
text: color!(0xcdd6f4), // Text
|
||||
primary: color!(0x89b4fa), // Blue
|
||||
success: color!(0xa6e3a1), // Green
|
||||
warning: color!(0xf9e2af), // Yellow
|
||||
danger: color!(0xf38ba8), // Red
|
||||
};
|
||||
|
||||
|
|
@ -186,6 +208,7 @@ impl Palette {
|
|||
text: color!(0x9aa5ce), // Text
|
||||
primary: color!(0x2ac3de), // Blue
|
||||
success: color!(0x9ece6a), // Green
|
||||
warning: color!(0xe0af68), // Yellow
|
||||
danger: color!(0xf7768e), // Red
|
||||
};
|
||||
|
||||
|
|
@ -197,6 +220,7 @@ impl Palette {
|
|||
text: color!(0x9aa5ce), // Text
|
||||
primary: color!(0x2ac3de), // Blue
|
||||
success: color!(0x9ece6a), // Green
|
||||
warning: color!(0xe0af68), // Yellow
|
||||
danger: color!(0xf7768e), // Red
|
||||
};
|
||||
|
||||
|
|
@ -208,6 +232,7 @@ impl Palette {
|
|||
text: color!(0x565a6e), // Text
|
||||
primary: color!(0x166775), // Blue
|
||||
success: color!(0x485e30), // Green
|
||||
warning: color!(0x8f5e15), // Yellow
|
||||
danger: color!(0x8c4351), // Red
|
||||
};
|
||||
|
||||
|
|
@ -219,6 +244,7 @@ impl Palette {
|
|||
text: color!(0xCD7BA), // Fuji White
|
||||
primary: color!(0x2D4F67), // Wave Blue 2
|
||||
success: color!(0x76946A), // Autumn Green
|
||||
warning: color!(0xff9e3b), // Ronin Yellow
|
||||
danger: color!(0xC34043), // Autumn Red
|
||||
};
|
||||
|
||||
|
|
@ -230,6 +256,7 @@ impl Palette {
|
|||
text: color!(0xc5c9c5), // Dragon White
|
||||
primary: color!(0x223249), // Wave Blue 1
|
||||
success: color!(0x8a9a7b), // Dragon Green 2
|
||||
warning: color!(0xff9e3b), // Ronin Yellow
|
||||
danger: color!(0xc4746e), // Dragon Red
|
||||
};
|
||||
|
||||
|
|
@ -241,6 +268,7 @@ impl Palette {
|
|||
text: color!(0x545464), // Lotus Ink 1
|
||||
primary: color!(0xc9cbd1), // Lotus Violet 3
|
||||
success: color!(0x6f894e), // Lotus Green
|
||||
warning: color!(0xe98a00), // Lotus Orange 2
|
||||
danger: color!(0xc84053), // Lotus Red
|
||||
};
|
||||
|
||||
|
|
@ -252,6 +280,7 @@ impl Palette {
|
|||
text: color!(0xbdbdbd), // Foreground
|
||||
primary: color!(0x80a0ff), // Blue (normal)
|
||||
success: color!(0x8cc85f), // Green (normal)
|
||||
warning: color!(0xe3c78a), // Yellow (normal)
|
||||
danger: color!(0xff5454), // Red (normal)
|
||||
};
|
||||
|
||||
|
|
@ -263,6 +292,7 @@ impl Palette {
|
|||
text: color!(0xbdc1c6), // Foreground
|
||||
primary: color!(0x82aaff), // Blue (normal)
|
||||
success: color!(0xa1cd5e), // Green (normal)
|
||||
warning: color!(0xe3d18a), // Yellow (normal)
|
||||
danger: color!(0xfc514e), // Red (normal)
|
||||
};
|
||||
|
||||
|
|
@ -274,6 +304,7 @@ impl Palette {
|
|||
text: color!(0xd0d0d0),
|
||||
primary: color!(0x00b4ff),
|
||||
success: color!(0x00c15a),
|
||||
warning: color!(0xbe95ff), // Base 14
|
||||
danger: color!(0xf62d0f),
|
||||
};
|
||||
|
||||
|
|
@ -285,6 +316,7 @@ impl Palette {
|
|||
text: color!(0xfecdb2),
|
||||
primary: color!(0xd1d1e0),
|
||||
success: color!(0xb1b695),
|
||||
warning: color!(0xf5d76e), // Honey
|
||||
danger: color!(0xe06b75),
|
||||
};
|
||||
}
|
||||
|
|
@ -300,6 +332,8 @@ pub struct Extended {
|
|||
pub secondary: Secondary,
|
||||
/// The set of success colors.
|
||||
pub success: Success,
|
||||
/// The set of warning colors.
|
||||
pub warning: Warning,
|
||||
/// The set of danger colors.
|
||||
pub danger: Danger,
|
||||
/// Whether the palette is dark or not.
|
||||
|
|
@ -410,6 +444,11 @@ impl Extended {
|
|||
palette.background,
|
||||
palette.text,
|
||||
),
|
||||
warning: Warning::generate(
|
||||
palette.warning,
|
||||
palette.background,
|
||||
palette.text,
|
||||
),
|
||||
danger: Danger::generate(
|
||||
palette.danger,
|
||||
palette.background,
|
||||
|
|
@ -545,6 +584,31 @@ impl Success {
|
|||
}
|
||||
}
|
||||
|
||||
/// A set of warning colors.
|
||||
#[derive(Debug, Clone, Copy, PartialEq)]
|
||||
pub struct Warning {
|
||||
/// The base warning color.
|
||||
pub base: Pair,
|
||||
/// A weaker version of the base warning color.
|
||||
pub weak: Pair,
|
||||
/// A stronger version of the base warning color.
|
||||
pub strong: Pair,
|
||||
}
|
||||
|
||||
impl Warning {
|
||||
/// Generates a set of [`Warning`] colors from the base, background, and text colors.
|
||||
pub fn generate(base: Color, background: Color, text: Color) -> Self {
|
||||
let weak = mix(base, background, 0.4);
|
||||
let strong = deviate(base, 0.1);
|
||||
|
||||
Self {
|
||||
base: Pair::new(base, text),
|
||||
weak: Pair::new(weak, text),
|
||||
strong: Pair::new(strong, text),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// A set of danger colors.
|
||||
#[derive(Debug, Clone, Copy, PartialEq)]
|
||||
pub struct Danger {
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ impl ColorPalette {
|
|||
primary: *self.theme.lower.first().unwrap(),
|
||||
text: *self.theme.higher.last().unwrap(),
|
||||
success: *self.theme.lower.last().unwrap(),
|
||||
warning: *self.theme.higher.last().unwrap(),
|
||||
danger: *self.theme.higher.last().unwrap(),
|
||||
},
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
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,
|
||||
};
|
||||
use iced::{Center, Element, Fill, Theme};
|
||||
use iced::{Center, Element, Fill, Subscription, Theme};
|
||||
|
||||
pub fn main() -> iced::Result {
|
||||
iced::application("Styling - Iced", Styling::update, Styling::view)
|
||||
.subscription(Styling::subscription)
|
||||
.theme(Styling::theme)
|
||||
.run()
|
||||
}
|
||||
|
|
@ -28,6 +30,8 @@ enum Message {
|
|||
SliderChanged(f32),
|
||||
CheckboxToggled(bool),
|
||||
TogglerToggled(bool),
|
||||
PreviousTheme,
|
||||
NextTheme,
|
||||
}
|
||||
|
||||
impl Styling {
|
||||
|
|
@ -41,6 +45,23 @@ impl Styling {
|
|||
Message::SliderChanged(value) => self.slider_value = value,
|
||||
Message::CheckboxToggled(value) => self.checkbox_value = value,
|
||||
Message::TogglerToggled(value) => self.toggler_value = value,
|
||||
Message::PreviousTheme | Message::NextTheme => {
|
||||
if let Some(current) = Theme::ALL
|
||||
.iter()
|
||||
.position(|candidate| &self.theme == candidate)
|
||||
{
|
||||
self.theme = if matches!(message, Message::NextTheme) {
|
||||
Theme::ALL[(current + 1) % Theme::ALL.len()].clone()
|
||||
} else if current == 0 {
|
||||
Theme::ALL
|
||||
.last()
|
||||
.expect("Theme::ALL must not be empty")
|
||||
.clone()
|
||||
} else {
|
||||
Theme::ALL[current - 1].clone()
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,9 +78,16 @@ impl Styling {
|
|||
.padding(10)
|
||||
.size(20);
|
||||
|
||||
let button = button("Submit")
|
||||
let styled_button = |label| {
|
||||
button(text(label).width(Fill).center())
|
||||
.padding(10)
|
||||
.on_press(Message::ButtonPressed);
|
||||
.on_press(Message::ButtonPressed)
|
||||
};
|
||||
|
||||
let primary = styled_button("Primary");
|
||||
let success = styled_button("Success").style(button::success);
|
||||
let warning = styled_button("Warning").style(button::warning);
|
||||
let danger = styled_button("Danger").style(button::danger);
|
||||
|
||||
let slider =
|
||||
slider(0.0..=100.0, self.slider_value, Message::SliderChanged);
|
||||
|
|
@ -85,7 +113,10 @@ impl Styling {
|
|||
let content = column![
|
||||
choose_theme,
|
||||
horizontal_rule(38),
|
||||
row![text_input, button].spacing(10).align_y(Center),
|
||||
text_input,
|
||||
row![primary, success, warning, danger]
|
||||
.spacing(10)
|
||||
.align_y(Center),
|
||||
slider,
|
||||
progress_bar,
|
||||
row![
|
||||
|
|
@ -104,6 +135,19 @@ impl Styling {
|
|||
center(content).into()
|
||||
}
|
||||
|
||||
fn subscription(&self) -> Subscription<Message> {
|
||||
keyboard::on_key_press(|key, _modifiers| match key {
|
||||
keyboard::Key::Named(
|
||||
keyboard::key::Named::ArrowUp | keyboard::key::Named::ArrowLeft,
|
||||
) => Some(Message::PreviousTheme),
|
||||
keyboard::Key::Named(
|
||||
keyboard::key::Named::ArrowDown
|
||||
| keyboard::key::Named::ArrowRight,
|
||||
) => Some(Message::NextTheme),
|
||||
_ => None,
|
||||
})
|
||||
}
|
||||
|
||||
fn theme(&self) -> Theme {
|
||||
self.theme.clone()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -633,6 +633,21 @@ pub fn success(theme: &Theme, status: Status) -> Style {
|
|||
}
|
||||
}
|
||||
|
||||
/// A warning button; denoting a risky action.
|
||||
pub fn warning(theme: &Theme, status: Status) -> Style {
|
||||
let palette = theme.extended_palette();
|
||||
let base = styled(palette.warning.base);
|
||||
|
||||
match status {
|
||||
Status::Active | Status::Pressed => base,
|
||||
Status::Hovered => Style {
|
||||
background: Some(Background::Color(palette.warning.strong.color)),
|
||||
..base
|
||||
},
|
||||
Status::Disabled => disabled(base),
|
||||
}
|
||||
}
|
||||
|
||||
/// A danger button; denoting a destructive action.
|
||||
pub fn danger(theme: &Theme, status: Status) -> Style {
|
||||
let palette = theme.extended_palette();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue