From fdaa65e0641226a1643a758bb920820d14148eb1 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sun, 4 Dec 2022 02:48:09 +0100
Subject: [PATCH] Make button color and hover gradient fit together (#2232)

* Fix QMenu item not having different color on hover

due to the color changes in #2220.

* Remove strong border on pressed Qt widgets

* Make button gradient more subtle

by changing gradient-start on hover instead of gradient-end.

* Apply QPushButton style to QSpinBox buttons

* Improve margin of QComboBox arrow

* Make button-bg same color as button-gradient-end

This makes the hover gradient more subtle.
---
 qt/aqt/stylesheets.py | 55 ++++++++++++++-----------------------------
 sass/_vars.scss       | 10 ++++----
 2 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/qt/aqt/stylesheets.py b/qt/aqt/stylesheets.py
index f022a5faa..73f23db7d 100644
--- a/qt/aqt/stylesheets.py
+++ b/qt/aqt/stylesheets.py
@@ -83,8 +83,7 @@ QMenu::item {{
     margin-bottom: 4px;
 }}
 QMenu::item:selected {{
-    background-color: {tm.var(colors.CANVAS_INSET)};
-    color: {tm.var(colors.HIGHLIGHT_FG)};
+    background-color: {tm.var(colors.CANVAS_ELEVATED)};
     border-radius: {tm.var(props.BORDER_RADIUS)};
 }}
 QMenu::separator {{
@@ -107,13 +106,18 @@ QPushButton {{
 }}
 QPushButton,
 QTabBar::tab:!selected,
-QComboBox:!editable {{
+QComboBox:!editable,
+QComboBox::drop-down:editable,
+QSpinBox::up-button,
+QSpinBox::down-button {{
     background: {tm.var(colors.BUTTON_BG)};
     border-bottom: 1px solid {tm.var(colors.SHADOW)};
 }}
 QPushButton:hover,
 QTabBar::tab:hover,
-QComboBox:!editable:hover {{
+QComboBox:!editable:hover,
+QSpinBox::up-button,
+QSpinBox::down-button {{
     background: {
         button_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
@@ -122,8 +126,8 @@ QComboBox:!editable:hover {{
     };
 }}
 QPushButton:pressed,
-QComboBox:!editable:pressed {{
-    border: 1px solid {tm.var(colors.BORDER_STRONG)};
+QSpinBox::up-button,
+QSpinBox::down-button {{
     background: {
         button_pressed_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
@@ -181,30 +185,30 @@ QComboBox::item::icon:selected {{
     position: absolute;
 }}
 QComboBox::drop-down {{
-    margin: -1px;
-    subcontrol-origin: padding;
+    subcontrol-origin: border;
     padding: 2px;
+    padding-left: 4px;
+    padding-right: 4px;
     width: 16px;
     subcontrol-position: top right;
     border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
     border-top-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
     border-bottom-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
 }}
+QComboBox::drop-down:!editable {{
+    background: none;
+    border-color: transparent;
+}}
 QComboBox::down-arrow {{
     image: url({tm.themed_icon("mdi:chevron-down")});
 }}
-QComboBox::drop-down {{
-    background: {tm.var(colors.BUTTON_BG)};
-    border-bottom: 1px solid {tm.var(colors.SHADOW)};
-}}
-QComboBox::drop-down:hover {{
+QComboBox::drop-down:hover:editable {{
     background: {
         button_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
             tm.var(colors.BUTTON_GRADIENT_END),
         )
     };
-    border-bottom: 1px solid {tm.var(colors.SHADOW)};
 }}
     """
 
@@ -286,7 +290,6 @@ QHeaderView::section:first {{
 }}
 QHeaderView::section:pressed,
 QHeaderView::section:pressed:!first {{
-    border: 1px solid {tm.var(colors.BORDER_STRONG)};
     background: {
         button_pressed_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
@@ -341,28 +344,6 @@ QSpinBox::up-button,
 QSpinBox::down-button {{
     subcontrol-origin: border;
     width: 16px;
-    border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
-    background: {tm.var(colors.BUTTON_BG)};
-}}
-QSpinBox::up-button:pressed,
-QSpinBox::down-button:pressed {{
-    border: 1px solid {tm.var(colors.BORDER_STRONG)};
-    background: {
-        button_pressed_gradient(
-            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
-        )
-    }
-}}
-QSpinBox::up-button:hover,
-QSpinBox::down-button:hover {{
-    background: {
-        button_gradient(
-            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_GRADIENT_END),
-        )
-    };
 }}
 QSpinBox::up-button {{
     margin-bottom: -1px;
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 63bc6eb6e..e9125de1a 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -142,8 +142,8 @@ $vars: (
             bg: (
                 "Background color of buttons",
                 (
-                    light: white,
-                    dark: palette(darkgray, 4),
+                    light: palette(lightgray, 0),
+                    dark: color.scale(palette(darkgray, 4), $lightness: 5%),
                 ),
             ),
             gradient: (
@@ -151,14 +151,14 @@ $vars: (
                     "Start value of default button gradient",
                     (
                         light: white,
-                        dark: palette(darkgray, 4),
+                        dark: color.scale(palette(darkgray, 4), $lightness: 10%),
                     ),
                 ),
                 end: (
                     "End value of default button gradient",
                     (
-                        light: palette(lightgray, 3),
-                        dark: palette(darkgray, 5),
+                        light: palette(lightgray, 0),
+                        dark: color.scale(palette(darkgray, 4), $lightness: 5%),
                     ),
                 ),
             ),