From 20a5227eca5d566427ecdfdb132ec9bd4becc2f1 Mon Sep 17 00:00:00 2001
From: Ashley Wulber <ashley@system76.com>
Date: Mon, 7 Aug 2023 16:57:25 -0400
Subject: [PATCH] refactor: add button components to theme because they have
 different overlays than others when they are hovered or pressed

---
 cosmic-theme/src/model/derivation.rs | 10 +++++++
 cosmic-theme/src/model/theme.rs      | 42 ++++++++++++++++++++++++++++
 src/theme/mod.rs                     | 12 ++++----
 src/widget/spin_button/mod.rs        |  9 +++---
 4 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/cosmic-theme/src/model/derivation.rs b/cosmic-theme/src/model/derivation.rs
index e70aad9..c35e8c1 100644
--- a/cosmic-theme/src/model/derivation.rs
+++ b/cosmic-theme/src/model/derivation.rs
@@ -153,6 +153,16 @@ where
         }
     }
 
+    /// helper for producing a button component
+    pub fn colored_button(base: C, overlay: C, on_button: C, accent: C) -> Self {
+        let mut component = Component::colored_component(base, overlay, accent);
+        component.on = on_button.clone();
+        let mut on_disabled = on_button.into();
+        on_disabled.alpha = 0.5;
+        component.on_disabled = on_disabled.into();
+        component
+    }
+
     /// helper for producing a component color theme
     pub fn component(
         base: C,
diff --git a/cosmic-theme/src/model/theme.rs b/cosmic-theme/src/model/theme.rs
index f6e80b2..76c7305 100644
--- a/cosmic-theme/src/model/theme.rs
+++ b/cosmic-theme/src/model/theme.rs
@@ -38,6 +38,16 @@ pub struct Theme<C> {
     pub destructive: Component<C>,
     /// warning element colors
     pub warning: Component<C>,
+    /// accent button element colors
+    pub accent_button: Component<C>,
+    /// suggested button element colors
+    pub success_button: Component<C>,
+    /// destructive button element colors
+    pub destructive_button: Component<C>,
+    /// warning button element colors
+    pub warning_button: Component<C>,
+    /// text button element colors
+    pub text_button: Component<C>,
     /// button component styling
     pub button: Component<C>,
     /// palette
@@ -766,6 +776,38 @@ impl ThemeBuilder {
                 is_high_contrast,
                 p_ref.neutral_8,
             ),
+            accent_button: Component::colored_button(
+                accent.clone(),
+                p_ref.neutral_10.to_owned(),
+                p_ref.neutral_0.to_owned(),
+                accent.clone(),
+            ),
+            success_button: Component::colored_button(
+                success,
+                p_ref.neutral_10.to_owned(),
+                p_ref.neutral_0.to_owned(),
+                accent.clone(),
+            ),
+            destructive_button: Component::colored_button(
+                destructive,
+                p_ref.neutral_10.to_owned(),
+                p_ref.neutral_0.to_owned(),
+                accent.clone(),
+            ),
+            warning_button: Component::colored_button(
+                warning,
+                p_ref.neutral_10.to_owned(),
+                p_ref.neutral_0.to_owned(),
+                accent.clone(),
+            ),
+            text_button: Component::component(
+                Srgba::new(0.0, 0.0, 0.0, 0.0),
+                p_ref.neutral_10,
+                accent,
+                p_ref.neutral_9,
+                is_high_contrast,
+                p_ref.neutral_8,
+            ),
             palette: palette.inner(),
             spacing,
             corner_radii,
diff --git a/src/theme/mod.rs b/src/theme/mod.rs
index 8f3e457..dd2f8e4 100644
--- a/src/theme/mod.rs
+++ b/src/theme/mod.rs
@@ -233,13 +233,13 @@ impl Button {
     fn cosmic<'a>(&'a self, theme: &'a Theme) -> &CosmicComponent {
         let cosmic = theme.cosmic();
         match self {
-            Button::Primary => &cosmic.accent,
+            Button::Primary => &cosmic.accent_button,
             Button::Secondary => &theme.current_container().component,
-            Button::Positive => &cosmic.success,
-            Button::Destructive => &cosmic.destructive,
-            Button::Text => &theme.current_container().component,
-            Button::Link => &cosmic.accent,
-            Button::LinkActive => &cosmic.accent,
+            Button::Positive => &cosmic.success_button,
+            Button::Destructive => &cosmic.destructive_button,
+            Button::Text => &cosmic.text_button,
+            Button::Link => &cosmic.accent_button,
+            Button::LinkActive => &cosmic.accent_button,
             Button::Transparent => &TRANSPARENT_COMPONENT,
             Button::Deactivated => &theme.current_container().component,
             Button::Card => &theme.current_container().component,
diff --git a/src/widget/spin_button/mod.rs b/src/widget/spin_button/mod.rs
index c069422..27bdb32 100644
--- a/src/widget/spin_button/mod.rs
+++ b/src/widget/spin_button/mod.rs
@@ -12,7 +12,7 @@ use apply::Apply;
 use iced::{
     alignment::{Horizontal, Vertical},
     widget::{button, container, row},
-    Alignment, Background, Length,
+    Alignment, Length,
 };
 
 pub struct SpinButton<'a, Message> {
@@ -98,11 +98,12 @@ fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance {
     let basic = &theme.cosmic();
     let mut neutral_10 = basic.palette.neutral_10;
     neutral_10.alpha = 0.1;
-    let accent = &theme.cosmic().accent;
+    let accent = &basic.accent;
+    let corners = &basic.corner_radii;
     iced_style::container::Appearance {
         text_color: Some(basic.palette.neutral_10.into()),
-        background: Some(Background::Color(neutral_10.into())),
-        border_radius: 24.0.into(),
+        background: None,
+        border_radius: corners.radius_s.into(),
         border_width: 0.0,
         border_color: accent.base.into(),
     }