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

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

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,

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::Positive => &cosmic.success_button,
-            Button::Destructive => &cosmic.destructive,
+            Button::Destructive => &cosmic.destructive_button,
-            Button::Text => &theme.current_container().component,
+            Button::Text => &cosmic.text_button,
-            Button::Link => &cosmic.accent,
+            Button::Link => &cosmic.accent_button,
-            Button::LinkActive => &cosmic.accent,
+            Button::LinkActive => &cosmic.accent_button,
             Button::Transparent => &TRANSPARENT_COMPONENT,
             Button::Deactivated => &theme.current_container().component,
             Button::Card => &theme.current_container().component,

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())),
+        background: None,
-        border_radius: 24.0.into(),
+        border_radius: corners.radius_s.into(),
         border_width: 0.0,
         border_color: accent.base.into(),
     }