Flatten buttons to match macOS style (#2159)

* Use button gradient only on hover

* Apply hover effect to main window buttons

* Apply arbitrary change to force recreation of colors.py

* Undo arbitrary change to fix props not being created

* Remember that the comments are used for regex matching

* Yet another try

* Revert "Yet another try"

This reverts commit eaef4805c1.

* Update _root-vars.scss

qt/aqt/data/web/css/toolbar.scss

@@ -3,7 +3,7 @@
 
 @use "root-vars";
 @use "sass/vars" as *;
-@use "sass/elevation";
+@use "sass/elevation" as *;
 @use "sass/button-mixins" as button;
 
 #header {
@@ -15,9 +15,14 @@
     border-radius: prop(border-radius);
     border-bottom-left-radius: prop(border-radius-large);
     border-bottom-right-radius: prop(border-radius-large);
-    @include button.base($with-hover: false);
+    @include button.base($with-hover: false, $with-active: false);
-    @include elevation.elevation(2);
     overflow: hidden;
+    padding: 0;
+    @include elevation(1, $opacity-boost: -0.08);
+    &:hover {
+        @include elevation(2);
+        transition: box-shadow 0.2s linear;
+    }
 }
 
 body {
@@ -37,7 +42,7 @@ body {
     text-decoration: none;
     color: color(fg);
     display: inline-block;
-    @include button.base($elevation: 0);
+    @include button.base;
     border: none;
     &:first-child {
         padding-left: 18px;

qt/aqt/stylesheets.py

@@ -4,13 +4,12 @@ from aqt import colors, props
 from aqt.theme import ThemeManager
 
 
-def button_gradient(start: str, end: str, shadow: str) -> str:
+def button_gradient(start: str, end: str) -> str:
     return f"""
 qlineargradient(
     spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
     stop:0 {start},
-    stop:0.94 {end}
+    stop:1 {end}
-    stop:1 {shadow}
 );
     """
 
@@ -109,13 +108,7 @@ QPushButton {{
 QPushButton,
 QTabBar::tab:!selected,
 QComboBox:!editable {{
-    background: {
+    background: {tm.var(colors.BUTTON_BG)};
-        button_gradient(
-            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
-        )
-    };
     border-bottom: 1px solid {tm.var(colors.SHADOW)};
 }}
 QPushButton:hover,
@@ -123,9 +116,8 @@ QTabBar::tab:hover,
 QComboBox:!editable:hover {{
     background: {
         button_gradient(
-            tm.var(colors.BUTTON_HOVER_GRADIENT_START),
+            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_HOVER_GRADIENT_END),
+            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
         )
     };
 }}
@@ -202,21 +194,14 @@ QComboBox::down-arrow {{
     image: url({tm.themed_icon("mdi:chevron-down")});
 }}
 QComboBox::drop-down {{
-    background: {
+    background: {tm.var(colors.BUTTON_BG)};
-        button_gradient(
-            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
-        )
-    };
     border-bottom: 1px solid {tm.var(colors.SHADOW)};
 }}
 QComboBox::drop-down:hover {{
     background: {
         button_gradient(
-            tm.var(colors.BUTTON_HOVER_GRADIENT_START),
+            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_HOVER_GRADIENT_END),
+            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
         )
     };
     border-bottom: 1px solid {tm.var(colors.SHADOW)};
@@ -262,11 +247,13 @@ QTabBar::tab:last {{
 }}
 QTabBar::tab:selected {{
     color: white;
+    background: {tm.var(colors.BUTTON_PRIMARY_BG)};
+}}
+QTabBar::tab:selected:hover {{
     background: {
             button_gradient(
             tm.var(colors.BUTTON_PRIMARY_GRADIENT_START),
             tm.var(colors.BUTTON_PRIMARY_GRADIENT_END),
-            tm.var(colors.SHADOW)
         )
     };
 }}
@@ -286,13 +273,7 @@ QHeaderView {{
 }}
 QHeaderView::section {{
     border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
-    background: {
+    background: {tm.var(colors.BUTTON_BG)};
-        button_gradient(
-            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
-        )
-    };
 }}
 QHeaderView::section:pressed,
 QHeaderView::section:pressed:!first {{
@@ -308,9 +289,8 @@ QHeaderView::section:pressed:!first {{
 QHeaderView::section:hover {{
     background: {
         button_gradient(
-            tm.var(colors.BUTTON_HOVER_GRADIENT_START),
+            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_HOVER_GRADIENT_END),
+            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
         )
     };
 }}
@@ -352,13 +332,7 @@ QSpinBox::down-button {{
     subcontrol-origin: border;
     width: 16px;
     border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
-    background: {
+    background: {tm.var(colors.BUTTON_BG)};
-        button_gradient(
-            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
-        )
-    };
 }}
 QSpinBox::up-button:pressed,
 QSpinBox::down-button:pressed {{
@@ -375,9 +349,8 @@ QSpinBox::up-button:hover,
 QSpinBox::down-button:hover {{
     background: {
         button_gradient(
-            tm.var(colors.BUTTON_HOVER_GRADIENT_START),
+            tm.var(colors.BUTTON_GRADIENT_START),
-            tm.var(colors.BUTTON_HOVER_GRADIENT_END),
+            tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.SHADOW)
         )
     };
 }}

sass/_button-mixins.scss

@@ -20,45 +20,31 @@
     border-bottom-right-radius: var(--border-right-radius);
 }
 
-@mixin background($primary: false, $elevation: 1, $hover: true) {
+@mixin background($primary: false, $hover: true) {
     @if $primary {
+        background: var(--button-primary-bg);
+        @if $hover {
+            &:hover {
                 background: linear-gradient(
                     180deg,
                     var(--button-primary-gradient-start) 0%,
                     var(--button-primary-gradient-end) 100%
                 );
-        @if $hover {
-            &:hover {
-                background: linear-gradient(
-                    180deg,
-                    var(--button-primary-hover-gradient-start) 0%,
-                    var(--button-primary-hover-gradient-end) 100%
-                );
                 border-color: var(--button-hover-border);
             }
         }
-        @if $elevation != 0 {
-            @include elevation($elevation, 0.2);
-        }
     } @else {
+        background: var(--button-bg);
+        @if $hover {
+            &:hover {
                 background: linear-gradient(
                     180deg,
                     var(--button-gradient-start) 0%,
                     var(--button-gradient-end) 100%
                 );
-        @if $hover {
-            &:hover {
-                background: linear-gradient(
-                    180deg,
-                    var(--button-hover-gradient-start) 0%,
-                    var(--button-hover-gradient-end) 100%
-                );
                 border-color: var(--button-hover-border);
             }
         }
-        @if $elevation != 0 {
-            @include elevation($elevation);
-        }
     }
 }
 
@@ -68,8 +54,7 @@
     $with-hover: true,
     $with-active: true,
     $active-class: "",
-    $with-disabled: true,
+    $with-disabled: true
-    $elevation: 1
 ) {
     -webkit-appearance: none;
     cursor: pointer;
@@ -78,11 +63,12 @@
             border: none;
         } @else {
             border: 1px solid var(--border-subtle);
+            border-bottom-color: var(--shadow);
         }
     } @else {
         border: none;
     }
-    @include background($primary, $elevation, $hover: $with-hover);
+    @include background($primary, $hover: $with-hover);
 
     @if ($primary) {
         color: white;
@@ -110,6 +96,7 @@
             color: var(--fg-disabled);
             box-shadow: none !important;
             background-color: var(--button-gradient-end);
+            border-bottom-color: var(--border-subtle);
         }
     }
 }

sass/_root-vars.scss

@@ -8,6 +8,7 @@
 /*! colors */
 :root {
     $colors: map.get($vars, colors);
+
     @each $name, $val in create-vars-from-map($colors, light) {
         @if str-index($name, "comment") == 1 {
             /*! #{$val} */
@@ -16,6 +17,7 @@
         }
     }
     color-scheme: light;
+
     &.night-mode {
         @each $name, $val in create-vars-from-map($colors, dark) {
             @if str-index($name, "comment") == 1 {

sass/_vars.scss

@@ -134,11 +134,11 @@ $vars: (
             ),
         ),
         button: (
-            disabled: (
+            bg: (
-                "Background color of disabled buttons",
+                "Background color of buttons",
                 (
-                    light: color.scale(palette(lightgray, 5), $alpha: -50%),
+                    light: white,
-                    dark: color.scale(palette(darkgray, 3), $alpha: -50%),
+                    dark: palette(darkgray, 4),
                 ),
             ),
             gradient: (
@@ -158,22 +158,6 @@ $vars: (
                 ),
             ),
             hover: (
-                gradient: (
-                    start: (
-                        "Start value of default button gradient in hover state",
-                        (
-                            light: palette(lightgray, 1),
-                            dark: palette(darkgray, 3),
-                        ),
-                    ),
-                    end: (
-                        "End value of default button gradient in hover state",
-                        (
-                            light: palette(lightgray, 2),
-                            dark: palette(darkgray, 4),
-                        ),
-                    ),
-                ),
                 border: (
                     "Border color of default button in hover state",
                     (
@@ -182,7 +166,21 @@ $vars: (
                     ),
                 ),
             ),
+            disabled: (
+                "Background color of disabled button",
+                (
+                    light: color.scale(palette(lightgray, 5), $alpha: -50%),
+                    dark: color.scale(palette(darkgray, 3), $alpha: -50%),
+                ),
+            ),
             primary: (
+                bg: (
+                    "Background color of primary button",
+                    (
+                        light: palette(blue, 4),
+                        dark: color.scale(palette(blue, 6), $saturation: -10%),
+                    ),
+                ),
                 gradient: (
                     start: (
                         "Start value of primary button gradient",
@@ -199,26 +197,8 @@ $vars: (
                         ),
                     ),
                 ),
-                hover: (
-                    gradient: (
-                        start: (
-                            "Start value of primary button gradient in hover state",
-                            (
-                                light: palette(blue, 3),
-                                dark: color.scale(palette(blue, 5), $saturation: -10%),
-                            ),
-                        ),
-                        end: (
-                            "End value of primary button gradient in hover state",
-                            (
-                                light: palette(blue, 5),
-                                dark: color.scale(palette(blue, 7), $saturation: -10%),
-                            ),
-                        ),
-                    ),
-                ),
                 disabled: (
-                    "Background of primary button in disabled state",
+                    "Background color of primary button in disabled state",
                     (
                         light: palette(blue, 3),
                         dark: color.scale(palette(blue, 5), $saturation: -10%),

sass/buttons.scss

@@ -25,9 +25,14 @@
 button {
     outline: none !important;
     @include button.base;
-    @include elevation(1);
     border-radius: var(--border-radius-large);
     padding: 8px 10px;
     font-weight: 500;
     margin: 0 4px;
+
+    @include elevation(1, $opacity-boost: -0.08);
+    &:hover {
+        @include elevation(2);
+        transition: box-shadow 0.2s linear;
+    }
 }

ts/components/LabelButton.svelte

@@ -39,7 +39,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     @use "sass/button-mixins" as button;
 
-    button {
+    .label-button {
         @include button.base($active-class: active);
         &.primary {
             @include button.base($primary: true);

ts/components/SpinBox.svelte

@@ -122,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, $elevation: 0);
+        @include button.base($border: false);
 
         &.left {
             inset: 0 auto 0 0;