From 6ba476b8e109a4d20507211246d5fc9a30335e61 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Mon, 24 Oct 2022 00:13:19 +0200
Subject: [PATCH] Tweak default button look

---
 qt/aqt/data/web/css/toolbar.scss |  2 +-
 sass/_button-mixins.scss         | 12 +++++++++---
 sass/_vars.scss                  | 12 ++++++------
 sass/buttons.scss                |  4 ++--
 ts/components/SpinBox.svelte     |  4 +++-
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss
index d0f690975..379d9f649 100644
--- a/qt/aqt/data/web/css/toolbar.scss
+++ b/qt/aqt/data/web/css/toolbar.scss
@@ -36,7 +36,7 @@ body {
     text-decoration: none;
     color: color(fg);
     display: inline-block;
-    @include button.base;
+    @include button.base($elevation: 0);
     border: none;
 }
 
diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss
index 542a00852..eacc87591 100644
--- a/sass/_button-mixins.scss
+++ b/sass/_button-mixins.scss
@@ -2,6 +2,7 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 @use "vars";
 @use "sass:color";
+@use "sass/elevation" as *;
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
@@ -19,7 +20,11 @@
     border-bottom-right-radius: var(--border-right-radius);
 }
 
-@mixin background($primary: false, $hover: true) {
+@mixin background($primary: false, $elevation: 1, $hover: true) {
+    @if $elevation != 0 {
+        @include elevation($elevation);
+    }
+
     @if $primary {
         background: linear-gradient(
             180deg,
@@ -61,7 +66,8 @@
     $with-hover: true,
     $with-active: true,
     $active-class: "",
-    $with-disabled: true
+    $with-disabled: true,
+    $elevation: 1
 ) {
     -webkit-appearance: none;
     cursor: pointer;
@@ -70,7 +76,7 @@
     } @else {
         border: none;
     }
-    @include background($primary, $hover: $with-hover);
+    @include background($primary, $elevation, $hover: $with-hover);
 
     @if ($primary) {
         color: white;
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 9b87f379f..b2f320644 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -70,7 +70,7 @@ $vars: (
             default: (
                 "Window background",
                 (
-                    light: palette(lightgray, 3),
+                    light: palette(lightgray, 2),
                     dark: palette(darkgray, 5),
                 ),
             ),
@@ -84,7 +84,7 @@ $vars: (
             inset: (
                 "Slightly darker than window background",
                 (
-                    light: palette(lightgray, 4),
+                    light: palette(lightgray, 3),
                     dark: palette(darkgray, 6),
                 ),
             ),
@@ -162,14 +162,14 @@ $vars: (
                     start: (
                         "Start value of default button gradient in hover state",
                         (
-                            light: palette(lightgray, 1),
+                            light: palette(lightgray, 0),
                             dark: palette(darkgray, 3),
                         ),
                     ),
                     end: (
                         "End value of default button gradient in hover state",
                         (
-                            light: palette(lightgray, 4),
+                            light: palette(lightgray, 2),
                             dark: palette(darkgray, 4),
                         ),
                     ),
@@ -402,8 +402,8 @@ $vars: (
             bg: (
                 "Background color of highlighted items",
                 (
-                    light: color.scale(palette(blue, 3), $alpha: -50%),
-                    dark: color.scale(palette(blue, 4), $alpha: -50%),
+                    light: color.scale(palette(blue, 6), $alpha: -40%),
+                    dark: color.scale(palette(blue, 3), $alpha: -50%),
                 ),
             ),
             fg: (
diff --git a/sass/buttons.scss b/sass/buttons.scss
index b6d87f504..2f00da897 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -1,6 +1,6 @@
 @use "vars";
 @use "button-mixins" as button;
-@use "elevation";
+@use "elevation" as *;
 
 :root {
     --focus-color: #{vars.palette-of(shadow-focus)};
@@ -25,7 +25,7 @@
 button {
     outline: none;
     @include button.base;
-    @include elevation.elevation(2);
+    @include elevation(2);
     border-radius: var(--border-radius-large);
     padding: 6px 12px;
     font-weight: 500;
diff --git a/ts/components/SpinBox.svelte b/ts/components/SpinBox.svelte
index 076d874a2..9e2c90678 100644
--- a/ts/components/SpinBox.svelte
+++ b/ts/components/SpinBox.svelte
@@ -102,6 +102,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         input {
             width: 100%;
             padding: 0.2rem 1.5rem 0.2rem 0.75rem;
+            background: var(--canvas-elevated);
+            color: var(--fg);
             border: none;
             outline: none;
             text-align: center;
@@ -120,7 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     button {
         opacity: 0;
         position: absolute;
-        @include button.base($border: false);
+        @include button.base($border: false, $elevation: 0);
 
         &.left {
             inset: 0 auto 0 0;