Merge pull request #2811 from iced-rs/palette-tweaks

Tweak `Palette` Generation

core/src/theme/palette.rs

@@ -29,17 +29,17 @@ 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),
     };
 
     /// 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 {
-        let white_contrast = relative_contrast(background, Color::WHITE);
-        let black_contrast = relative_contrast(background, Color::BLACK);
+        return text;
+    }
 
-        if white_contrast >= black_contrast {
-            Color::WHITE
-        } else {
-            Color::BLACK
-        }
+    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 {
+        mix(Color::WHITE, background, 0.05)
+    } else {
+        mix(Color::BLACK, background, 0.05)
     }
 }
 

examples/styling/src/main.rs

@@ -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,15 +110,29 @@ 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),
             text_input,
             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)

examples/todos/snapshots/creates_a_new_task.sha256

@@ -1 +1 @@
-3160686067cb7c738802009cdf2f3c5f5a5bd8c89ada70517388b7adbe64c313
+0ef7325a79ce31c83759529ed478c8b4848c40c2867193624ef9673b9e21ff53

widget/src/button.rs

@@ -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),

widget/src/checkbox.rs

@@ -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,
     }

widget/src/container.rs

@@ -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()

widget/src/progress_bar.rs

@@ -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`].

widget/src/slider.rs

@@ -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(),

widget/src/text_input.rs

@@ -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,
     };