Differentiate secondary color from primary

2025-08-06 19:37:14 +02:00 · 2025-08-06 19:37:14 +02:00 · 53c059bf88
commit 53c059bf88
parent af3125842d
26 changed files with 70 additions and 45 deletions
--- a/core/src/theme/palette.rs
+++ b/core/src/theme/palette.rs
@ -530,8 +530,8 @@ impl Secondary {
    /// Generates a set of [`Secondary`] colors from the base and text colors.
    pub fn generate(base: Color, text: Color) -> Self {
        let weak = mix(deviate(base, 0.1), text, 0.2);
-        let base = mix(deviate(base, 0.3), text, 0.3);
-        let strong = mix(deviate(base, 0.5), text, 0.4);
+        let strong = mix(deviate(base, 0.3), text, 0.2);
+        let base = mix(deviate(base, 0.2), text, 0.2);

        Self {
            base: Pair::new(base, text),
--- a/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256
@ -1 +1 @@
-a9dbcf00a56523cb77a48a860337d703e121b3043f918a89a7430b3fe974ed6f
+0650eb2c27c21c5d48e1e00031a52d8471d8a3b4e827ad502c4628914f5c1c13
--- a/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256
@ -1 +1 @@
-e949dfd23b9921f042d7878afc0c5919d1e8ddb89f25084c348ca90d3da164f4
+2c7df7feb07ec72e2e1ec9027764524116e92c75f4ac8701813cc2b006b20bbd
--- a/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256
@ -1 +1 @@
-26892d6343cc78505a6964194c2c88f804f2c839672dd445b90ee08f2145fb59
+8466dc0975c0bc7c06ed3c45df51e99b9d384394f8c3689b15231a872ba1262f
--- a/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256
+++ b/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256
@ -1 +1 @@
-f07ddc4dae94892e59ae9a5ea557dc45a545b7507aee48b5b6eecec060aa436a
+1c8f13cfb5d0bbbeb24b80ed35671e8a93d208d79ac4dbd069fe65c4a53c50c2
--- a/examples/styling/snapshots/dark-tiny-skia.sha256
+++ b/examples/styling/snapshots/dark-tiny-skia.sha256
@ -1 +1 @@
-8954349935620f4f207806ba3e991cab14d38c06212adb9cc60c3d205643277f
+a1d30652db2cce98b5b86e8e29d776e2fc9091056aff8861cd54fa061161ed47
--- a/examples/styling/snapshots/dracula-tiny-skia.sha256
+++ b/examples/styling/snapshots/dracula-tiny-skia.sha256
@ -1 +1 @@
-c33c96a485bf846250b50c6bc401689a5adcc7414646230622cb222cb01b0657
+8c01615169803510f1cd4d051721b415adc7147672238aff1275fa3741edb507
--- a/examples/styling/snapshots/ferra-tiny-skia.sha256
+++ b/examples/styling/snapshots/ferra-tiny-skia.sha256
@ -1 +1 @@
-19facc84f7170c90a56937be354f65797480751b363e75d35632dd06de81bdbe
+0b10823a1d218c145214ff2dcf751584669a3ca1d3e777a2cd618479a809523e
--- a/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256
+++ b/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256
@ -1 +1 @@
-d4c72cf79bad7b58b91973c98499b6e69aa573e0c92528d6da86daff424a1341
+26bc668c55650c6c25a14f76feeb1d1f78a96835aaac7a5f57b48b838cb28b14
--- a/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256
+++ b/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256
@ -1 +1 @@
-3e51e3e29533bc2c8a5546c3d7530cf6c28851efe231c84066282b7f0b83a9d5
+7536e4551d9d26e66096f9730ae1e4a3c1aae8a9b0a1aa522b310a9d85bf0a09
--- a/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256
+++ b/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256
@ -1 +1 @@
-43abf367bca146772d67ba274e49f45c2e2d434eef59f8a4021a4c4f317210c9
+d579b14db1650e907f925302f23c53ebaba370aef6410cfa48fef70ab3138d1f
--- a/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256
+++ b/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256
@ -1 +1 @@
-323cbd9ab675b6215e5d41a6aea3ca77e1eb603e52e616615424c948042c610d
+0ebabb128a0d6d0eed9afc7f0546bfc7d591af482c4b652b47f88a43c4a02101
--- a/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256
+++ b/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256
@ -1 +1 @@
-703da759aee50cd629b888dfa5e393cc84f992c5f1ff57e758dbb7884f09e40c
+60e1c95159caddb8bd7b8360e32ffd75472be37c4fcbd8ad23dabd0d000a4ec1
--- a/examples/styling/snapshots/light-tiny-skia.sha256
+++ b/examples/styling/snapshots/light-tiny-skia.sha256
@ -1 +1 @@
-e103068f6f973180a51758ca57508909a303f9d7a21de67373ab9fb69496558c
+7399c44d0824fd4959201decd9f901d17607d8368867b04c20530aff556d3373
--- a/examples/styling/snapshots/moonfly-tiny-skia.sha256
+++ b/examples/styling/snapshots/moonfly-tiny-skia.sha256
@ -1 +1 @@
-25eddc9e1301afa074e1c6ad892b881b5376ffe4b8f3d69649d41f6d2c5e656b
+79ffced2a78689bac1a40ab154a478b4fff87154ee4a8bbf023d922c86b7d53b
--- a/examples/styling/snapshots/nightfly-tiny-skia.sha256
+++ b/examples/styling/snapshots/nightfly-tiny-skia.sha256
@ -1 +1 @@
-2902f753890617a6fe2b2cc660ef04966f98c8aa145aefe97244a7641c8a7d0b
+17c632cbef607502ed2c438f409a1c9bee382d9084c38772021f1f2a4ad3908c
--- a/examples/styling/snapshots/nord-tiny-skia.sha256
+++ b/examples/styling/snapshots/nord-tiny-skia.sha256
@ -1 +1 @@
-e032a82182b8d1fc83491b375d7139873ac6f8cf113f176344c4c67b61230738
+359f7f2c1d7f87e6e0eb80a9a28f70f033d6321ba028d32bc372030b718ed481
--- a/examples/styling/snapshots/oxocarbon-tiny-skia.sha256
+++ b/examples/styling/snapshots/oxocarbon-tiny-skia.sha256
@ -1 +1 @@
-53527388bc3ffdcfcf14fdf93c293b9bc1dd8adfa54c8aa5d85ef62ccb38803f
+a908d8f154f2baf67455380b5d8b39003c08ba0c80f39e71d4bcd2377bc784fc
--- a/examples/styling/snapshots/solarized_dark-tiny-skia.sha256
+++ b/examples/styling/snapshots/solarized_dark-tiny-skia.sha256
@ -1 +1 @@
-a2a5f4fed4573afc6a0ddc0fe5b9ce7d1edb265f53355c2506238fb3a28fa070
+8d6c2bab1f6e9a8db1e2acc8eb76334170e046b709a36dd4ad4d86f8d47346a4
--- a/examples/styling/snapshots/solarized_light-tiny-skia.sha256
+++ b/examples/styling/snapshots/solarized_light-tiny-skia.sha256
@ -1 +1 @@
-4a6ec64d15f05f955b672b68d3c2f39f66c3b6f4762306cea0706905fb0324ed
+085b968f9c2705d877f238907f2d0afbd890580ea86beae3db8dffda26cd7095
--- a/examples/styling/snapshots/tokyo_night-tiny-skia.sha256
+++ b/examples/styling/snapshots/tokyo_night-tiny-skia.sha256
@ -1 +1 @@
-3ea751423c27ba0279e34290a3dcfc3f6e11bfb81fbb17d114a5c3048e34d15d
+74812d50467787ce39a33ad6bc89411d7b8bc0b13e1bbd45838fcc27c75aee98
--- a/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256
+++ b/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256
@ -1 +1 @@
-4b5a26ee94b1eb231b394e8d853130aea4175725536e93d3c8a3bccb26c24952
+433fc3c5209201d7fc4eed136566ad1116b1620176cc32c116d1390f45a146af
--- a/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256
+++ b/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256
@ -1 +1 @@
-8e0a90a2c02ed2cd4a471089234f8a5c00c9f994437ea48ab7bc02e055faa83b
+e1cbe8742f000921c86924056e9a45f95ee2a2a973743bf9f37fee65baccfb9b
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@ -4,7 +4,7 @@ use iced::widget::{
    pick_list, progress_bar, row, scrollable, slider, text, text_input,
    toggler, vertical_rule, vertical_space,
 };
-use iced::{Center, Element, Fill, Subscription, Theme};
+use iced::{Center, Element, Fill, Shrink, Subscription, Theme};

 pub fn main() -> iced::Result {
    iced::application(Styling::default, Styling::update, Styling::view)
@ -78,16 +78,37 @@ impl Styling {
            .padding(10)
            .size(20);

-        let styled_button = |label| {
-            button(text(label).width(Fill).center())
-                .padding(10)
-                .on_press(Message::ButtonPressed)
-        };
+        let buttons = {
+            let styles = [
+                ("Primary", button::primary as fn(&Theme, _) -> _),
+                ("Secondary", button::secondary),
+                ("Success", button::success),
+                ("Warning", button::warning),
+                ("Danger", button::danger),
+            ];

-        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 styled_button =
+                |label| button(text(label).width(Fill).center()).padding(10);
+
+            column![
+                row(styles.into_iter().map(|(name, style)| styled_button(
+                    name
+                )
+                .on_press(Message::ButtonPressed)
+                .style(style)
+                .into()))
+                .spacing(10)
+                .align_y(Center),
+                row(styles.into_iter().map(|(name, style)| styled_button(
+                    name
+                )
+                .style(style)
+                .into()))
+                .spacing(10)
+                .align_y(Center),
+            ]
+            .spacing(10)
+        };

        let slider =
            || slider(0.0..=100.0, self.slider_value, Message::SliderChanged);
@ -100,16 +121,21 @@ impl Styling {
            "You did it!"
        ])
        .width(Fill)
-        .height(100);
+        .height(Fill);

-        let checkbox = checkbox("Check me!", self.checkbox_value)
+        let check = checkbox("Check me!", self.checkbox_value)
            .on_toggle(Message::CheckboxToggled);

-        let toggler = toggler(self.toggler_value)
+        let check_disabled = checkbox("Disabled", self.checkbox_value);
+
+        let toggle = toggler(self.toggler_value)
            .label("Toggle me!")
            .on_toggle(Message::TogglerToggled)
            .spacing(10);

+        let disabled_toggle =
+            toggler(self.toggler_value).label("Disabled").spacing(10);
+
        let card = {
            container(
                column![
@ -128,18 +154,17 @@ impl Styling {
            choose_theme,
            horizontal_rule(1),
            text_input,
-            row![primary, success, warning, danger]
-                .spacing(10)
-                .align_y(Center),
+            buttons,
            slider(),
            progress_bar(),
            row![
                scroll_me,
-                row![vertical_rule(1), column![checkbox, toggler].spacing(20)]
-                    .spacing(20)
+                vertical_rule(1),
+                column![check, check_disabled, toggle, disabled_toggle]
+                    .spacing(10)
            ]
            .spacing(10)
-            .height(100)
+            .height(Shrink)
            .align_y(Center),
            card
        ]
--- a/widget/src/checkbox.rs
+++ b/widget/src/checkbox.rs
@ -571,7 +571,7 @@ pub fn primary(theme: &Theme, status: Status) -> Style {
        ),
        Status::Disabled { is_checked } => styled(
            palette.background.weak.color,
-            palette.background.weak,
+            palette.background.weaker,
            palette.primary.base.text,
            palette.background.strong,
            is_checked,
--- a/widget/src/toggler.rs
+++ b/widget/src/toggler.rs
@ -580,7 +580,7 @@ pub fn default(theme: &Theme, status: Status) -> Style {
                palette.background.weak.color
            }
        }
-        Status::Disabled => palette.background.base.color,
+        Status::Disabled => palette.background.weakest.color,
    };

    Style {