Skip to content

Commit

Permalink
Merge pull request #2607 from DavidAguilo/palette_warning
Browse files Browse the repository at this point in the history 
Feat: Add warning color to palette
  • Loading branch information
@hecrj
hecrj authored Jan 6, 2025
2 parents 2b4f428 + 8fc5762 commit b156087
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 5 deletions.
64 changes: 64 additions & 0 deletions core/src/theme/palette.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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
};

Expand All @@ -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)
};

Expand All @@ -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)
};

Expand All @@ -274,6 +304,7 @@ impl Palette {
text: color!(0xd0d0d0),
primary: color!(0x00b4ff),
success: color!(0x00c15a),
warning: color!(0xbe95ff), // Base 14
danger: color!(0xf62d0f),
};

Expand All @@ -285,6 +316,7 @@ impl Palette {
text: color!(0xfecdb2),
primary: color!(0xd1d1e0),
success: color!(0xb1b695),
warning: color!(0xf5d76e), // Honey
danger: color!(0xe06b75),
};
}
Expand All @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions examples/color_palette/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
},
)
Expand Down
54 changes: 49 additions & 5 deletions examples/styling/src/main.rs
View file
Original file line number Diff line number Diff line change
@@ -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()
}
Expand All @@ -28,6 +30,8 @@ enum Message {
SliderChanged(f32),
CheckboxToggled(bool),
TogglerToggled(bool),
PreviousTheme,
NextTheme,
}

impl Styling {
Expand All @@ -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()
};
}
}
}
}

Expand All @@ -57,9 +78,16 @@ impl Styling {
.padding(10)
.size(20);

let button = button("Submit")
.padding(10)
.on_press(Message::ButtonPressed);
let styled_button = |label| {
button(text(label).width(Fill).center())
.padding(10)
.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);
Expand All @@ -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![
Expand All @@ -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()
}
Expand Down
15 changes: 15 additions & 0 deletions widget/src/button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down

0 comments on commit b156087

Please sign in to comment.