From 968a14784f9b3e997abc5e2cd6ccc4e2611134f0 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Mon, 12 Dec 2022 06:41:23 +0100
Subject: [PATCH] Add slight inset shadow to hovered buttons (#2267)

* Replace border-with inset shadow on button hover

* Align gradient-end with base color for primary buttons too

to achieve a more natural hover effect.
---
 sass/_button-mixins.scss | 4 ++--
 sass/_vars.scss          | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss
index 054e22c93..19d69b5be 100644
--- a/sass/_button-mixins.scss
+++ b/sass/_button-mixins.scss
@@ -30,7 +30,6 @@
                     var(--button-primary-gradient-start) 0%,
                     var(--button-primary-gradient-end) 100%
                 );
-                border-color: var(--button-hover-border);
             }
         }
     } @else {
@@ -42,7 +41,8 @@
                     var(--button-gradient-start) 0%,
                     var(--button-gradient-end) 100%
                 );
-                border-color: var(--button-hover-border);
+                /* Makes distinguishing hover state in light theme easier */
+                @include impressed-shadow(0.2);
             }
         }
     }
diff --git a/sass/_vars.scss b/sass/_vars.scss
index e9125de1a..ef16063a2 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -182,7 +182,7 @@ $vars: (
                 bg: (
                     "Background color of primary button",
                     (
-                        light: palette(blue, 5),
+                        light: color.scale(palette(blue, 6), $lightness: 5%),
                         dark: color.scale(palette(blue, 7), $saturation: -10%),
                     ),
                 ),
@@ -190,15 +190,15 @@ $vars: (
                     start: (
                         "Start value of primary button gradient",
                         (
-                            light: palette(blue, 4),
+                            light: palette(blue, 5),
                             dark: color.scale(palette(blue, 6), $saturation: -10%),
                         ),
                     ),
                     end: (
                         "End value of primary button gradient",
                         (
-                            light: palette(blue, 6),
-                            dark: color.scale(palette(blue, 8), $saturation: -10%),
+                            light: color.scale(palette(blue, 6), $lightness: 5%),
+                            dark: color.scale(palette(blue, 7), $saturation: -10%),
                         ),
                     ),
                 ),