Merge pull request #2607 from DavidAguilo/palette_warning

Feat: Add warning color to palette

4 files changed, 129 insertions, 5 deletions

diff --git a/core/src/theme/palette.rs b/core/src/theme/palette.rs
index e0ff397a..00c38019 100644
--- a/core/src/theme/palette.rs
+++ b/core/src/theme/palette.rs
@@ -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 {
diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs
index 7f21003b..1a86b168 100644
--- a/examples/color_palette/src/main.rs
+++ b/examples/color_palette/src/main.rs
@@ -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(),
             },
         )
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index 534f5e32..594be4a7 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -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")
-            .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);
@@ -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()
     }
diff --git a/widget/src/button.rs b/widget/src/button.rs
index a2f9945c..11839d5e 100644
--- a/widget/src/button.rs
+++ b/widget/src/button.rs
@@ -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();