From 1097a579c87ba88d1bd137d3b23c3a301ed70887 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 21:13:02 +0500
Subject: [PATCH 01/16] stylesheet: Use lighter active states

It's more visible on dark and works better for recolorability.
---
 src/stylesheet/_colors.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index c6f0e18f9..b7c9af72a 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -20,14 +20,14 @@ $menu_color: $base_color;
 $view_hover_color: transparentize($text_color, .93);
 $view_selected_color: transparentize($text_color, .9);
 $view_selected_hover_color: transparentize($text_color, .87);
-$view_active_color: transparentize(black, .85);
+$view_active_color: transparentize($text_color, .84);
 $trough_color: transparentize($text_color, .85);
 $trough_hover_color: transparentize($text_color, .8);
-$trough_active_color: transparentize(black, .75);
+$trough_active_color: transparentize($text_color, .75);
 $fill_color: $selected_bg_color;
 $fill_text_color: $selected_fg_color;
 $fill_hover_color: mix($selected_bg_color, $text_color, 90%);
-$fill_active_color: mix($selected_bg_color, black, 80%);
+$fill_active_color: mix($selected_bg_color, $text_color, 80%);
 $slider_color: mix(white, $base_color, 80%);
 $slider_hover_color: white;
 
-- 
GitLab


From f1eeb94dc426ce64c94f82dc67abe3f6403f3d77 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:03:44 +0500
Subject: [PATCH 02/16] stylesheet: Unify spinbutton styles

Remove the special vertical style and use the same style as horizontal.
---
 src/stylesheet/widgets/_spin-button.scss | 113 +++++++++--------------
 1 file changed, 44 insertions(+), 69 deletions(-)

diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index f0492b470..1af5659a6 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -1,13 +1,37 @@
 spinbutton {
-  &:not(.vertical) {
-    // in this horizontal configuration, the whole spinbutton
-    // behaves as the entry, so we extend the entry styling
-    // and nuke the style on the internal entry
-    @extend %entry;
+  @extend %entry;
+
+  padding: 0;
+  border-spacing: 0;
+
+  /* :not here just to bump specificity above that of the list button styling */
+  > button.image-button.up:not(.flat),
+  > button.image-button.down:not(.flat) {
+    margin: 0;
+    color: mix($fg_color, $base_color, 90%);
+    background-image: none;
+    border-style: solid;
+    border-color: transparentize($borders_color, 0.7);
+    border-radius: 0;
+    box-shadow: none;
+
+    &:hover {
+      color: $fg_color;
+      background-color: darken($bg_color,5%);
+    }
 
-    padding: 0;
-    border-spacing: 0;
+    &:disabled {
+      color: transparentize($insensitive_fg_color, 0.7);
+      background-color: transparent;
+    }
+
+    &:active {
+      background-color: transparentize(black, 0.9);
+      box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+    }
+  }
 
+  &:not(.vertical) {
     > text {
       min-width: 28px;
       padding: 6px;
@@ -17,32 +41,11 @@ spinbutton {
     > button.image-button.up:not(.flat),
     > button.image-button.down:not(.flat) {
       min-height: 16px;
-      margin: 0;
       padding-bottom: 0;
       padding-top: 0;
-      color: mix($fg_color, $base_color, 90%);
-      background-image: none;
-      border-style: none none none solid;
-      border-color: transparentize($borders_color, 0.7);
-      border-radius: 0;
-      box-shadow: none;
-
-      &:dir(rtl) { border-style: none solid none none; }
-
-      &:hover {
-        color: $fg_color;
-        background-color: darken($bg_color,5%);
-      }
-
-      &:disabled {
-        color: transparentize($insensitive_fg_color, 0.7);
-        background-color: transparent;
-      }
+      border-width: 0 0 0 1px;
 
-      &:active {
-        background-color: transparentize(black, 0.9);
-        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
-      }
+      &:dir(rtl) { border-width: 0 1px 0 0; }
 
       &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
 
@@ -50,52 +53,24 @@ spinbutton {
     }
   }
 
-  // Vertical
   &.vertical {
-    // in the vertical configuration, we treat the spinbutton
-    // as a box, and tweak the style of the entry in the middle
-    // so that it's linked
-
-    // FIXME: this should not be set at all, but otherwise it gets the wrong
-    // color
-    &:disabled { color: $insensitive_fg_color; }
-
-    &:drop(active) {
-      border-color: transparent;
-      box-shadow: none;
-    }
-
     > text {
-      @extend %entry;
-
       min-height: 32px;
       min-width: 32px;
-      padding: 0;
-      border-radius: 0;
-
-      > block-cursor { @include entry(block_cursor); }
     }
 
-    > button {
-      min-height: 32px;
-      min-width: 32px;
-      padding: 0;
-
-      &.up { @extend %top_button; }
-
-      &.down { @extend %bottom_button; }
-    }
-
-    %top_button {
-      border-bottom-style: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+    /* :not here just to bump specificity above that of the list button styling */
+    > button.image-button.up:not(.flat),
+    > button.image-button.down:not(.flat) {
+      &:last-child {
+        border-width: 1px 0 0 0;
+        border-radius: 0 0 $button_radius $button_radius;
+      }
 
-    %bottom_button {
-      border-top-style: none;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      &:first-child {
+        border-width: 0 0 1px 0;
+        border-radius: $button_radius $button_radius 0 0;
+      }
     }
   }
 
-- 
GitLab


From f6196e9a61e0fc8a2afd0ccc6c7d18b187d59b6d Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:08:00 +0500
Subject: [PATCH 03/16] stylesheet: Remove redundant osd button special cases

---
 src/stylesheet/widgets/_misc.scss | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index 176b633c8..516c2ff64 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -39,8 +39,6 @@ separator {
                                                transparent 2px);
   background-clip: padding-box;
 
-  button { @extend %osd_button; }
-
   border { border: none; }
 }
 
@@ -64,17 +62,8 @@ video {
 .scale-popup {
   .osd & { @extend %osd; }
 
-  .osd & button.flat {  //FIXME: quick hack, redo properly
-    border-style: none;
-    border-radius: 5px;
-  }
-
   button { // +/- buttons on GtkVolumeButton popup
-    &:hover {
-      @extend %undecorated_button;
-      background-color: transparentize($fg_color,0.9);
-      border-radius: 5px;
-    }
+    @extend %button_basic_flat;
   }
 }
 
-- 
GitLab


From e5b40ec5894c9693eeced535a8217aa1889e27e8 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:10:00 +0500
Subject: [PATCH 04/16] stylesheet: Remove a trailing blank line

---
 src/stylesheet/widgets/_dropdowns.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stylesheet/widgets/_dropdowns.scss b/src/stylesheet/widgets/_dropdowns.scss
index 2ca81c915..e4bfb0268 100644
--- a/src/stylesheet/widgets/_dropdowns.scss
+++ b/src/stylesheet/widgets/_dropdowns.scss
@@ -48,4 +48,3 @@ combobox {
     }
   }
 }
-
-- 
GitLab


From 9015fb6ebfeeb9011df1941402decba88ab6c432 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:11:49 +0500
Subject: [PATCH 05/16] stylesheet: Use flat button style for calendar header

---
 src/stylesheet/widgets/_calendar.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index 89b535e2c..7fce9169e 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -6,9 +6,7 @@ calendar {
     border-bottom: 1px solid $borders_color;
 
     > button {
-      border: none;
-      background: none;
-      box-shadow: none;
+      @extend %button_basic_flat;
       border-radius: 0;
     }
   }
-- 
GitLab


From bb5ad300e55eef92cacd2a4c2614d29b4f8b64be Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:27:16 +0500
Subject: [PATCH 06/16] stylesheet: Transparentize disabled buttons

---
 src/stylesheet/_drawing.scss         | 35 ---------------------------
 src/stylesheet/widgets/_buttons.scss | 36 ++++------------------------
 2 files changed, 4 insertions(+), 67 deletions(-)

diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index 7018cdc1e..204ce6dda 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -167,30 +167,6 @@ $_default_button_c: lighten($bg_color,2%);
     box-shadow: none;
   }
 
-  @else if $t==insensitive {
-  //
-  // insensitive button
-  //
-    $_bg: if($c != $_default_button_c, mix($c, $base_color, 85%), $insensitive_bg_color);
-
-    color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color);
-    border-color: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color);
-    background-image: image($_bg);
-  }
-
-  @else if $t==insensitive-active {
-  //
-  // insensitive pushed button
-  //
-    $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%));
-    $_bc: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color);
-
-    color: if($c != $_default_button_c, mix($tc, $_bg, 60%), $insensitive_fg_color);
-    border-color: $_bc;
-    background-image: image($_bg);
-    box-shadow: none;
-  }
-
   @else if $t==osd {
   //
   // normal osd button
@@ -232,17 +208,6 @@ $_default_button_c: lighten($bg_color,2%);
     box-shadow: none;
   }
 
-  @else if $t==osd-insensitive {
-  //
-  // insensitive osd button
-  //
-    color: $osd_insensitive_fg_color;
-    border-color: $osd_borders_color;
-    background-color: transparent;
-    background-image: image($osd_insensitive_bg_color);
-    background-clip: padding-box;
-  }
-
   @else if $t==undecorated {
   //
   // reset
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 9f73c252e..99ee151bc 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -36,10 +36,11 @@ button {
     &:checked:active { @include button(checked-active); }
 
     &:disabled {
-      @include button(insensitive);
+      filter: opacity(.5);
 
-      &:active,
-      &:checked { @include button(insensitive-active); }
+      label {
+        filter: none;
+      }
     }
 
     @at-root %button_basic_flat,
@@ -73,8 +74,6 @@ button {
           }
         }
       }
-
-      &:disabled { @include button(undecorated); }
     }
 
     &.image-button {
@@ -154,8 +153,6 @@ button {
     &:active,
     &:checked { @include button(osd-active); }
 
-    &:disabled { @include button(osd-insensitive); }
-
     &.flat {
       @include button(undecorated);
 
@@ -163,13 +160,6 @@ button {
 
       &:hover { @include button(osd-hover); }
 
-      &:disabled {
-        @include button(osd-insensitive);
-        background-image: none;
-        border-color: transparent;
-        box-shadow: none;
-      }
-
       &:active,
       &:checked { @include button(osd-active); }
     }
@@ -193,21 +183,6 @@ button {
       &:active,
       &:checked { @include button(active, $b_color, white); }
 
-      &.flat {
-        &:disabled {
-          @include button(undecorated);
-
-          color: transparentize($b_color, 0.2);
-        }
-      }
-
-      &:disabled {
-        @include button(insensitive);
-
-        &:active,
-        &:checked { @include button(insensitive-active, $b_color, white); }
-      }
-
       .osd & {
         @include button(osd, $b_color);
 
@@ -215,8 +190,6 @@ button {
 
         &:active,
         &:checked { @include button(osd-active, $b_color); }
-
-        &:disabled { @include button(osd-insensitive, $b_color); }
       }
     }
   }
@@ -303,7 +276,6 @@ button.color {
 
   @if $variant == 'light' {
     .osd &, & {
-      &:disabled,
       &:active,
       &:checked { colorswatch:only-child { box-shadow: none; }}
     }
-- 
GitLab


From da4ec199b62b5d09307ca0d1d6c0e15c813c89c1 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:38:16 +0500
Subject: [PATCH 07/16] stylesheet: Add a selected+active view color

This somehow fell through the cracks.
---
 src/stylesheet/_colors.scss          | 3 ++-
 src/stylesheet/_drawing.scss         | 6 ++++++
 src/stylesheet/widgets/_buttons.scss | 2 +-
 src/stylesheet/widgets/_lists.scss   | 2 +-
 src/stylesheet/widgets/_menus.scss   | 2 +-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index b7c9af72a..1a3049021 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -18,9 +18,10 @@ $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
 $menu_color: $base_color;
 $view_hover_color: transparentize($text_color, .93);
+$view_active_color: transparentize($text_color, .84);
 $view_selected_color: transparentize($text_color, .9);
 $view_selected_hover_color: transparentize($text_color, .87);
-$view_active_color: transparentize($text_color, .84);
+$view_selected_active_color: transparentize($text_color, .81);
 $trough_color: transparentize($text_color, .85);
 $trough_hover_color: transparentize($text_color, .8);
 $trough_active_color: transparentize($text_color, .75);
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index 204ce6dda..2dc1c2cc7 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -241,6 +241,12 @@ $_default_button_c: lighten($bg_color,2%);
     box-shadow: none;
     background-color: $view_selected_hover_color;
   }
+  @else if $t==undecorated-checked-active {
+    border-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    background-color: $view_selected_active_color;
+  }
 }
 
 @mixin overshoot($p, $c:$fg_color) {
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 99ee151bc..d29be03d6 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -70,7 +70,7 @@ button {
           @include button(undecorated-checked-hover);
 
           &:active {
-            @include button(undecorated-active);
+            @include button(undecorated-checked-active);
           }
         }
       }
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index d1f9ac55b..15dabb6ed 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -31,7 +31,7 @@ row {
       &.has-open-popup,
       &:hover { background-color: $view_selected_hover_color; }
 
-      &:active { background-color: $view_active_color; }
+      &:active { background-color: $view_selected_active_color; }
     }
   }
 
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 6af7304c8..6db921edd 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -93,7 +93,7 @@ popover.menu {
       background-color: $view_selected_color;
 
       &:active {
-        background-color: $view_active_color; // matching buttons
+        background-color: $view_selected_active_color; // matching buttons
       }
     }
 
-- 
GitLab


From 66dd0c4dbe096d76002149fcadad96290dd4914c Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 23:07:28 +0500
Subject: [PATCH 08/16] stylesheet: Remove special osd image button styles

There's no good reason to make singular osd image buttons circular. It's
undiscoverable and finicky. People can add .circular if they want that.
---
 src/stylesheet/widgets/_buttons.scss | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index d29be03d6..ed0a2237b 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -107,20 +107,10 @@ button {
 
   // big standalone buttons like in Documents pager
   &.osd {
-    min-width: 26px;
+    min-width: 32px;
     min-height: 32px;
 
-    &.image-button {
-      min-width: 30px;
-      &:only-child {
-        margin: 4px;
-        border-radius: 50%; // completely round when it is a single button
-        box-shadow: 0 1px 2px transparentize(black, 0.8); // drop shadow for the only child
-      };
-    }
-
     color: $osd_fg_color;
-    border-radius: 5px;
 
     @include button(osd);
 
-- 
GitLab


From 5a6e8ced12a6f778bf6e9333ac47060110107b7c Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:43:40 +0500
Subject: [PATCH 09/16] stylesheet: Add linebreaks in _colors.scss

---
 src/stylesheet/_colors.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 1a3049021..1da4f9891 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -17,18 +17,22 @@ $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), li
 $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
 $menu_color: $base_color;
+
 $view_hover_color: transparentize($text_color, .93);
 $view_active_color: transparentize($text_color, .84);
 $view_selected_color: transparentize($text_color, .9);
 $view_selected_hover_color: transparentize($text_color, .87);
 $view_selected_active_color: transparentize($text_color, .81);
+
 $trough_color: transparentize($text_color, .85);
 $trough_hover_color: transparentize($text_color, .8);
 $trough_active_color: transparentize($text_color, .75);
+
 $fill_color: $selected_bg_color;
 $fill_text_color: $selected_fg_color;
 $fill_hover_color: mix($selected_bg_color, $text_color, 90%);
 $fill_active_color: mix($selected_bg_color, $text_color, 80%);
+
 $slider_color: mix(white, $base_color, 80%);
 $slider_hover_color: white;
 
-- 
GitLab


From 9028bde544a2f7ce64c38349a8d29afa92f06e6b Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 22:49:56 +0500
Subject: [PATCH 10/16] stylesheet: Redo the message dialog action area

Use flat buttons, separate the top border. Prepare for the new button
style.
---
 src/stylesheet/widgets/_message-dialog.scss | 28 ++++++++++++---------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/stylesheet/widgets/_message-dialog.scss b/src/stylesheet/widgets/_message-dialog.scss
index 47cd71244..968b124f8 100644
--- a/src/stylesheet/widgets/_message-dialog.scss
+++ b/src/stylesheet/widgets/_message-dialog.scss
@@ -24,20 +24,24 @@ window.dialog.message {
       border-bottom-right-radius: $window_radius+1;
     }
 
-    .dialog-action-area button {
-      padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
-      border-radius: 0;
-      border-left-style: solid;
-      border-right-style: none;
-      border-bottom-style: none;
+    .dialog-action-area {
+      border-top: 1px solid $borders_color;
 
-      &:first-child {
-        border-left-style: none;
-        border-bottom-left-radius: 7px;
-      }
+      > button {
+        @extend %button_basic_flat;
+        padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
+        border-radius: 0;
+        border: none;
+        border-left: 1px solid $borders_color;
+
+        &:first-child {
+          border-bottom-left-radius: $window_radius+1;
+          border-left: none;
+        }
 
-      &:last-child {
-        border-bottom-right-radius: 7px;
+        &:last-child {
+          border-bottom-right-radius: $window_radius+1;
+        }
       }
     }
   }
-- 
GitLab


From ef0b1a9a36e727b0e6e2cc08abe72c2cfc706d23 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 23:00:09 +0500
Subject: [PATCH 11/16] stylesheet: Rework .linked

Add a bit of spacing and slight rounding for the inner corners.

We'll need this for the new button style.
---
 src/stylesheet/widgets/_linked.scss | 56 +++++++----------------------
 1 file changed, 12 insertions(+), 44 deletions(-)

diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index 448340889..68bbf225c 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -10,20 +10,23 @@ $_linked_widgets: ("%button",          ""),
                   ("%entry",           ""),
                   ("entry",            "");
 
+.linked {
+  border-spacing: 3px;
+}
+
 @each $widget, $child in $_linked_widgets {
   .linked:not(.vertical) > {
     #{$widget} {
       &:dir(ltr):not(:first-child) #{$child},
       &:dir(rtl):not(:last-child) #{$child} {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
       }
 
       &:dir(ltr):not(:last-child) #{$child},
       &:dir(rtl):not(:first-child) #{$child} {
-        border-right-style: none;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        border-top-right-radius: 2px;
+        border-bottom-right-radius: 2px;
       }
     }
   }
@@ -31,48 +34,13 @@ $_linked_widgets: ("%button",          ""),
   .linked.vertical {
     #{$widget} {
       &:not(:first-child) #{$child} {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
       }
 
       &:not(:last-child) #{$child} {
-        border-bottom-style: none;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-  }
-}
-
-%entry,
-entry {
-  // Vertically linked entries
-  // FIXME: take care of "colored" entries
-  .linked.vertical > & {
-    // brighter border between linked entries
-    &:not(:disabled) + entry:not(:disabled),
-    &:not(:disabled) + %entry:not(:disabled) {
-      border-top-color: mix($borders_color, $base_color, 30%);
-    }
-
-    // brighter border between linked insensitive entries
-    &:disabled + %entry:disabled,
-    &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
-
-    + %entry:drop(active):not(:only-child),
-    + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
-  }
-
-  @each $widget, $child in $_linked_widgets {
-    .linked:not(.vertical) > &:drop(active):not(:only-child) + {
-      #{$widget} #{$child} {
-        border-left-color: $drop_target_color;
-      }
-    }
-
-    .linked.vertical > &:drop(active):not(:only-child) + {
-      #{$widget} #{$child} {
-        border-top-color: $drop_target_color;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
       }
     }
   }
-- 
GitLab


From 4133dfd62112b35e8c8d0bc32744981582d21f44 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 23:12:10 +0500
Subject: [PATCH 12/16] stylesheet: Use currentColor instead of text color

Make things more recolorable. We'll need this for the new button style.
---
 src/stylesheet/_colors.scss        | 18 +++++++++---------
 src/stylesheet/widgets/_scale.scss | 10 ----------
 src/stylesheet/widgets/_trees.scss |  3 ++-
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 1da4f9891..0d626ea37 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -18,15 +18,15 @@ $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
 $menu_color: $base_color;
 
-$view_hover_color: transparentize($text_color, .93);
-$view_active_color: transparentize($text_color, .84);
-$view_selected_color: transparentize($text_color, .9);
-$view_selected_hover_color: transparentize($text_color, .87);
-$view_selected_active_color: transparentize($text_color, .81);
-
-$trough_color: transparentize($text_color, .85);
-$trough_hover_color: transparentize($text_color, .8);
-$trough_active_color: transparentize($text_color, .75);
+$view_hover_color: #{"alpha(currentColor, .07)"};
+$view_active_color: #{"alpha(currentColor, .16)"};
+$view_selected_color: #{"alpha(currentColor, .1)"};
+$view_selected_hover_color: #{"alpha(currentColor, .13)"};
+$view_selected_active_color: #{"alpha(currentColor, .19)"};
+
+$trough_color: #{"alpha(currentColor, .15)"};
+$trough_hover_color: #{"alpha(currentColor, .2)"};
+$trough_active_color: #{"alpha(currentColor, .25)"};
 
 $fill_color: $selected_bg_color;
 $fill_text_color: $selected_fg_color;
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 8baf8241a..041428be1 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -5,11 +5,6 @@
   @if $contrast == "high" {
     box-shadow: inset 0 0 0 1px $borders_color;
   }
-
-  // OSD
-  .osd & {
-    background-color: transparentize($osd_text_color, .85);
-  }
 }
 
 %scale_highlight {
@@ -39,11 +34,6 @@ scale {
     // in media player to indicate how much video stream as been cached
     > fill {
       @extend %scale_trough;
-
-      // OSD
-      .osd & {
-        background-color: mix($osd_fg_color, $osd_borders_color, 25%);
-      }
     }
 
     > slider {
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index 38a479230..66d3a7afa 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -1,5 +1,6 @@
 // To be used for opaque elements overlaid atop the selected row
-$treeview_selection_opaque: mix(opacify($view_selected_color, 1), $base_color, 100% * alpha($view_selected_color));
+$treeview_selection_default: transparentize($text_color, .9);
+$treeview_selection_opaque: mix(opacify($treeview_selection_default, 1), $base_color, 100% * alpha($treeview_selection_default));
 
 columnview.view,
 treeview.view {
-- 
GitLab


From 50ba8d2d48eb9de9d01909d162c1cca32b846486 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 13:52:46 +0500
Subject: [PATCH 13/16] stylesheet: Overhaul button styles

Use a flat recolorable overlay style. Adjust padding and min sizes
everywhere to accommodate for removed borders.

Remove the .osd style as the regular style already works for it.

Simplify transitions, make sure they actually work.

Make sure buttons like .suggested-action.flat work as expected in all
states.

Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/147
Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/153
Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/155
Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/193
---
 src/stylesheet/_colors.scss                |  10 +
 src/stylesheet/_drawing.scss               | 155 -------------
 src/stylesheet/widgets/_buttons.scss       | 247 ++++++++++++---------
 src/stylesheet/widgets/_color-chooser.scss |   1 +
 src/stylesheet/widgets/_file-chooser.scss  |   4 +-
 src/stylesheet/widgets/_header-bar.scss    |  10 +-
 src/stylesheet/widgets/_menus.scss         |  18 +-
 src/stylesheet/widgets/_notebook.scss      |   4 -
 src/stylesheet/widgets/_popovers.scss      |   5 -
 src/stylesheet/widgets/_spin-button.scss   |  21 +-
 src/stylesheet/widgets/_toolbars.scss      |   8 +-
 src/stylesheet/widgets/_trees.scss         |   5 +-
 12 files changed, 185 insertions(+), 303 deletions(-)

diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 0d626ea37..dab29663c 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -28,6 +28,13 @@ $trough_color: #{"alpha(currentColor, .15)"};
 $trough_hover_color: #{"alpha(currentColor, .2)"};
 $trough_active_color: #{"alpha(currentColor, .25)"};
 
+$button_color: #{"alpha(currentColor, .1)"};
+$button_hover_color: #{"alpha(currentColor, .15)"};
+$button_active_color: #{"alpha(currentColor, .25)"};
+$button_checked_color: #{"alpha(currentColor, .2)"};
+$button_checked_hover_color: #{"alpha(currentColor, .25)"};
+$button_checked_active_color: #{"alpha(currentColor, .35)"};
+
 $fill_color: $selected_bg_color;
 $fill_text_color: $selected_fg_color;
 $fill_hover_color: mix($selected_bg_color, $text_color, 90%);
@@ -44,7 +51,10 @@ $scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color,
 $warning_color: #f57900;
 $error_color: #cc0000;
 $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
+$suggested_color: if($variant == 'light', $selected_bg_color, $selected_bg_color);
+$suggested_text_color: if($variant == 'light', darken($suggested_color, 10%), lighten($suggested_color, 20%));
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
+$destructive_text_color: if($variant == 'light', darken($destructive_color, 10%), lighten($destructive_color, 20%));
 
 $osd_fg_color: #eeeeec;
 $osd_text_color: white;
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index 2dc1c2cc7..0a269c184 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -94,161 +94,6 @@
   @else { @return darken($c, 15%); }
 }
 
-$_default_button_c: lighten($bg_color,2%);
-@mixin button($t, $c:$_default_button_c, $tc:$fg_color) {
-//
-// Button drawing function
-//
-// $t:    button type,
-// $c:    base button color for colored* types
-// $tc:   optional text color for colored* types
-//
-// possible $t values:
-// normal, hover, active, checked-hover, checked-active, insensitive, insensitive-active,
-// osd, osd-hover, osd-active, osd-insensitive, undecorated
-//
-  $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
-
-  @if $t==normal {
-  //
-  // normal button
-  //
-    color: $tc;
-    outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
-    border-color: if($c!=$_default_button_c, _border_color($c, true), $borders_color); //tint if not default button color
-    background-image: if($variant == 'light', linear-gradient(to top, darken($c, 2%) 2px, $c),
-                                              linear-gradient(to top, darken($c,1%) 2px, $c));
-    @include _shadows($_button_shadow);
-  }
-
-  @else if $t==hover {
-  //
-  // hovered button
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    @if $variant == 'light' {
-      background-image: linear-gradient(to top, darken($c,16%), darken($c,8%) 1px);
-      @include _shadows($_button_shadow);
-    }
-    @else {
-      background-image: linear-gradient(to top, darken($c,4%) 20%, darken($c, 3%) 90%);
-      @include _shadows($_button_shadow);
-    }
-  }
-
-  @else if $t==active {
-  //
-  // pushed button
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%)));
-    box-shadow: none;
-  }
-
-  @else if $t==checked-hover {
-  //
-  // pushed togglebutton hover
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 18%)), image(darken($c, 12%)));
-    box-shadow: none;
-  }
-
-  @else if $t==checked-active {
-  //
-  // pushed togglebutton pushed further :)
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 22%)), image(darken($c, 14%)));
-    box-shadow: none;
-  }
-
-  @else if $t==osd {
-  //
-  // normal osd button
-  //
-    $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color);
-
-    color: $osd_fg_color;
-    outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
-    border-color: $osd_borders_color;
-    background-color: transparent;
-    background-image: image($_bg);
-    background-clip: padding-box;
-  }
-
-  @else if $t==osd-hover {
-  //
-  // active osd button
-  //
-    $_bg: if($c != $_default_button_c, transparentize($c, 0.3), darken($osd_bg_color, 10%));
-
-    color: white;
-    border-color: $osd_borders_color;
-    background-color: transparent;
-    background-image: image($_bg);
-    background-clip: padding-box;
-  }
-
-  @else if $t==osd-active {
-  //
-  // active osd button
-  //
-    $_bg: if($c != $_default_button_c, $c, darken($osd_bg_color, 20%));
-
-    color: white;
-    border-color: $osd_borders_color;
-    background-color: transparent;
-    background-image: image($_bg);
-    background-clip: padding-box;
-    box-shadow: none;
-  }
-
-  @else if $t==undecorated {
-  //
-  // reset
-  //
-    border-color: transparent;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
-  }
-  @else if $t==undecorated-hover {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_hover_color;
-  }
-  @else if $t==undecorated-active {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_active_color;
-  }
-  @else if $t==undecorated-checked {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_color;
-  }
-  @else if $t==undecorated-checked-hover {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_hover_color;
-  }
-  @else if $t==undecorated-checked-active {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_active_color;
-  }
-}
-
 @mixin overshoot($p, $c:$fg_color) {
 //
 // overshoot
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index ed0a2237b..7d389bd35 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -11,29 +11,38 @@ button {
   @at-root %button_basic, & {
     min-height: 24px;
     min-width: 16px;
-    padding: 4px 9px;
-    border: 1px solid;
+    padding: 5px 10px;
     border-radius: $button_radius;
-    transition: $button_transition;
+    background-color: $button_color;
 
-    @include button(normal);
+    @if $contrast == 'high' {
+      box-shadow: inset 0 0 0 1px $borders_color;
+    }
 
     @include focus-ring();
+    transition: $button_transition;
 
     &:hover {
-      @include button(hover);
+      background-color: $button_hover_color;
     }
 
     &.keyboard-activating,
-    &:active,
+    &:active {
+      background-color: $button_active_color;
+    }
+
     &:checked {
-      @include button(active);
+      background-color: $button_checked_color;
 
-      transition-duration: 50ms;
-    }
+      &:hover {
+        background-color: $button_checked_hover_color;
+      }
 
-    &:checked:hover { @include button(checked-hover); }
-    &:checked:active { @include button(checked-active); }
+      &.keyboard-activating,
+      &:active {
+        background-color: $button_checked_active_color;
+      }
+    }
 
     &:disabled {
       filter: opacity(.5);
@@ -43,53 +52,20 @@ button {
       }
     }
 
-    @at-root %button_basic_flat,
-    &.flat {
-      @include button(undecorated);
-      // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
-      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
-      // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
-      // in this case the duration is increased.
-      transition: none;
-
-      &:hover {
-        @include button(undecorated-hover);
-        transition: $button_transition;
-        transition-duration: 500ms;
-
-        &:active {
-          @include button(undecorated-active);
-        }
-      }
-
-      &:checked {
-        @include button(undecorated-checked);
-        transition: $button_transition;
-
-        &:hover {
-          @include button(undecorated-checked-hover);
-
-          &:active {
-            @include button(undecorated-checked-active);
-          }
-        }
-      }
-    }
-
     &.image-button {
       min-width: 24px;
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 6px;
+      padding-right: 6px;
     }
 
     &.text-button {
-      padding-left: 16px;
-      padding-right: 16px;
+      padding-left: 17px;
+      padding-right: 17px;
     }
 
     &.text-button.image-button {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 9px;
+      padding-right: 9px;
 
       label {
         padding-left: 8px;
@@ -100,8 +76,7 @@ button {
     @at-root %button_basic_drop_active,
     &:drop(active) {
       color: $drop_target_color;
-      border-color: $drop_target_color;
-      box-shadow: inset 0 0 0 1px $drop_target_color;
+      box-shadow: inset 0 0 0 2px $drop_target_color;
     }
   }
 
@@ -110,78 +85,132 @@ button {
     min-width: 32px;
     min-height: 32px;
 
-    color: $osd_fg_color;
+    @include focus-ring($outer: true, $offset: 1px);
+    transition: $button_transition;
 
-    @include button(osd);
+    color: $osd_fg_color;
+    background-color: $osd_bg_color;
 
-    border: none;
-    box-shadow: none;
+    @if $contrast == 'high' {
+      box-shadow: 0 0 0 1px currentColor;
+    }
 
     &:hover {
-      @include button(osd-hover);
+      color: white;
+      background-color: lighten($osd_bg_color, 10%);
+    }
 
-      border: none;
-      box-shadow: none;
+    &.keyboard-activating,
+    &:active {
+      color: white;
+      background-color: lighten($osd_bg_color, 20%);
     }
 
-    &:active,
     &:checked {
-      @include button(osd-active);
+      background-color: lighten($osd_bg_color, 15%);
 
-      border: none;
-      box-shadow: none;
+      &:hover {
+        background-color: lighten($osd_bg_color, 25%);
+      }
+
+      &.keyboard-activating,
+      &:active {
+        background-color: lighten($osd_bg_color, 30%);
+      }
+    }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
     }
   }
 
-  //overlay / OSD style
-  @at-root %osd_button,
-  .osd & {
-    @include button(osd);
+  // Suggested and Destructive Action buttons
+  @each $b_type, $b_color in (suggested-action, $suggested_color),
+                             (destructive-action, $destructive_color) {
+    &.#{$b_type} {
+      color: white;
+      background-color: $b_color;
 
-    &:hover { @include button(osd-hover); }
+      box-shadow: none;
 
-    &:active,
-    &:checked { @include button(osd-active); }
+      @include focus-ring($outer: true, $offset: 1px);
+      transition: $button_transition;
 
-    &.flat {
-      @include button(undecorated);
+      &:hover {
+        background-color: shade($b_color, 0.95);
+      }
 
-      box-shadow: none;
+      &.keyboard-activating,
+      &:active {
+        background-color: shade($b_color, 0.8);
+      }
 
-      &:hover { @include button(osd-hover); }
+      &:checked {
+        background-color: shade($b_color, 0.85);
 
-      &:active,
-      &:checked { @include button(osd-active); }
+        &:hover {
+          background-color: shade($b_color, 0.8);
+        }
+
+        &.keyboard-activating,
+        &:active {
+          background-color: shade($b_color, 0.7);
+        }
+      }
     }
   }
 
-  // Suggested and Destructive Action buttons
-  @each $b_type, $b_color in (suggested-action, $selected_bg_color),
-                             (destructive-action, $destructive_color) {
-    &.#{$b_type} {
-      @include button(normal, $b_color, white);
-      @include focus-ring($fc: $alt_focus_border_color);
+  @at-root %button_basic_flat,
+  &.flat {
+    background-color: transparent;
+    @include focus-ring();
+    transition: $button_transition;
 
-      &.flat {
-        @include button(undecorated);
+    box-shadow: none;
 
-        color: $b_color; //FIXME: does it work on the dark variant?
+    @if $contrast == 'high' {
+      &:hover,
+      &.keyboard-activating,
+      &:active,
+      &:checked {
+        box-shadow: inset 0 0 0 1px $borders_color;
       }
+    }
+
+    &:hover {
+      background-color: $view_hover_color;
+    }
 
-      &:hover { @include button(hover, $b_color, white); }
+    &.keyboard-activating,
+    &:active {
+      background-color: $view_active_color;
+    }
 
-      &:active,
-      &:checked { @include button(active, $b_color, white); }
+    &:checked {
+      background-color: $view_selected_color;
 
-      .osd & {
-        @include button(osd, $b_color);
+      &:hover {
+        background-color: $view_selected_hover_color;
+      }
 
-        &:hover { @include button(osd-hover, $b_color); }
+      &.keyboard-activating,
+      &:active {
+        background-color: $view_selected_active_color;
+      }
+    }
 
-        &:active,
-        &:checked { @include button(osd-active, $b_color); }
+    @each $b_type, $b_color in (suggested-action, $suggested_text_color),
+                               (destructive-action, $destructive_text_color) {
+      &.#{$b_type} {
+        color: $b_color;
       }
     }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
+    }
   }
 
   stackswitcher > & {
@@ -214,8 +243,8 @@ button {
 
   menubutton.circular &,
   &.circular { // force circular button shape
-    min-width: 32px;
-    min-height: 32px;
+    min-width: 34px;
+    min-height: 34px;
     padding: 0;
     border-radius: 9999px;
 
@@ -252,15 +281,13 @@ button {
 }
 
 button.color {
-  padding: 4px;
+  padding: 5px;
 
   > colorswatch:only-child {
     &, > overlay { border-radius: 0; }
 
     @if $variant == 'light' {
       box-shadow: 0 1px $shadow_color;
-
-      .osd & { box-shadow: none; }
     }
   }
 
@@ -276,21 +303,23 @@ button.color {
 /* tone down as per new designs, see issue #1473 */
 %outline_button,
 button.outline {
-  @extend %undecorated_button;
-  border: 1px solid transparentize($borders_color, .5);
-
-  &:hover { @include button(hover); }
+  @extend %button_basic_flat;
 
-  &:active,
-  &:checked { @include button(active); }
+  @if $contrast == 'high' {
+    box-shadow: inset 0 0 0 1px $borders_color;
+  }
+  @else {
+    box-shadow: inset 0 0 0 1px #{"alpha(currentColor, .15)"};
 
-  @each $b_type, $b_color in (suggested-action, $selected_bg_color),
-                             (destructive-action, $destructive_color) {
-    &.#{$b_type} { // allow colored buttons in lists #3643
-      @include button(normal, $b_color, white);
-      @include focus-ring($fc: $alt_focus_border_color);
+    &:hover, &:active, &:checked {
+      box-shadow: none;
     }
   }
+
+  // Specificity bump
+  &:drop(active) {
+    @extend %button_basic_drop_active;
+  }
 }
 
 menubutton {
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index 9385acc3c..a8935c47e 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -107,6 +107,7 @@ colorswatch {
     > overlay {
       @extend %button_basic;
 
+      border: none;
       border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
     }
 
diff --git a/src/stylesheet/widgets/_file-chooser.scss b/src/stylesheet/widgets/_file-chooser.scss
index c7d59366c..a7111bb7a 100644
--- a/src/stylesheet/widgets/_file-chooser.scss
+++ b/src/stylesheet/widgets/_file-chooser.scss
@@ -25,8 +25,8 @@ filechooser {
 
   pathbar > button {
     &.text-button, &.image-button, & {
-      padding-left: 4px;
-      padding-right: 4px;
+      padding-left: 5px;
+      padding-right: 5px;
     }
 
     &.text-button.image-button label {
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 9a834c6fd..62dc49a9e 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -50,15 +50,15 @@ headerbar {
     windowcontrols {
       button,
       menubutton {
-        min-height: 26px;
-        min-width: 26px;
+        min-height: 28px;
+        min-width: 28px;
         margin: 0;
         padding: 0;
       }
 
       menubutton button {
-        min-height: 20px;
-        min-width: 20px;
+        min-height: 22px;
+        min-width: 22px;
         margin: 0;
         padding: 4px;
       }
@@ -112,7 +112,7 @@ windowcontrols {
     @extend %button_basic_flat;
 
     border-radius: 9999px;
-    padding: 6px;
+    padding: 7px;
     margin: 0 2px;
     min-width: 0;
     min-height: 0;
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 6db921edd..0f5eed147 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -14,7 +14,13 @@ popover.menu {
       outline: none;
       transition: none;
 
-      &:selected { background: image($view_selected_color); }
+      &:selected {
+        background-color: $view_selected_color;
+
+        &:active {
+          background-color: $view_selected_active_color;
+        }
+      }
     }
   }
 
@@ -24,10 +30,14 @@ popover.menu {
     button.circular.image-button.model {
       @extend %outline_button;
 
+      outline: none;
       padding: 11px;
-      &:focus {
-         background-color: $view_selected_color;
-         border-color: $view_selected_color;
+      &:selected {
+        background-color: $view_selected_color;
+
+        &:active {
+          background-color: $view_selected_active_color;
+        }
       }
     }
   }
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index 89947c47b..eb262fd5f 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -113,10 +113,6 @@ notebook {
       border-radius: 0;
 
       &:hover:not(:active) {
-        background-clip: padding-box;
-        background-image: none;
-        background-color: transparentize(white, 0.7);
-        border-color: transparent;
         box-shadow: none;
       }
     }
diff --git a/src/stylesheet/widgets/_popovers.scss b/src/stylesheet/widgets/_popovers.scss
index 513891f00..627a77982 100644
--- a/src/stylesheet/widgets/_popovers.scss
+++ b/src/stylesheet/widgets/_popovers.scss
@@ -54,9 +54,4 @@ popover.background {
       box-shadow: none;
     }
   }
-
-  &.touch-selection,
-  &.magnifier {
-    button { @extend %osd_button; }
-  }
 }
diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index 1af5659a6..4d00e847d 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -8,26 +8,20 @@ spinbutton {
   > button.image-button.up:not(.flat),
   > button.image-button.down:not(.flat) {
     margin: 0;
-    color: mix($fg_color, $base_color, 90%);
-    background-image: none;
+    background: none;
     border-style: solid;
     border-color: transparentize($borders_color, 0.7);
     border-radius: 0;
     box-shadow: none;
+    color: inherit;
 
     &:hover {
-      color: $fg_color;
-      background-color: darken($bg_color,5%);
-    }
-
-    &:disabled {
-      color: transparentize($insensitive_fg_color, 0.7);
-      background-color: transparent;
+      color: $text_color;
+      background-color: $view_hover_color;
     }
 
     &:active {
-      background-color: transparentize(black, 0.9);
-      box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+      background-color: $view_active_color;
     }
   }
 
@@ -41,6 +35,7 @@ spinbutton {
     > button.image-button.up:not(.flat),
     > button.image-button.down:not(.flat) {
       min-height: 16px;
+      min-width: 22px;
       padding-bottom: 0;
       padding-top: 0;
       border-width: 0 0 0 1px;
@@ -55,8 +50,8 @@ spinbutton {
 
   &.vertical {
     > text {
-      min-height: 32px;
-      min-width: 32px;
+      min-height: 30px;
+      min-width: 30px;
     }
 
     /* :not here just to bump specificity above that of the list button styling */
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 912dbf52e..88650b7ec 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -43,8 +43,8 @@ searchbar > revealer > box {
   background-color: mix($bg_color, $borders_color, 70%);
 
  .close {
-    min-width: 16px;
-    min-height: 16px;
+    min-width: 18px;
+    min-height: 18px;
     padding: 4px;
     border-radius: 50%;
     @extend %button_basic_flat;
@@ -91,8 +91,8 @@ infobar {
   }
 
  .close {
-    min-width: 16px;
-    min-height: 16px;
+    min-width: 18px;
+    min-height: 18px;
     padding: 4px;
     border-radius: 50%;
     @extend %button_basic_flat;
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index 66d3a7afa..c6eafb1ab 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -128,7 +128,8 @@ treeview.view {
 %column_header_button {
   padding: 0 6px;
   background-image: none;
-  border-style: none none solid solid;
+  border-style: solid;
+  border-width: 0 0 1px 1px;
   border-color: $treeview_borders_color;
   border-radius: 0;
 
@@ -137,7 +138,7 @@ treeview.view {
     background-image: none;
   }
 
-  &:last-child { border-right-style: none; }
+  &:last-child { border-right-width: 0; }
 }
 
 /********************************************************
-- 
GitLab


From 31e6473c3ce2d9599c657b704b16df43a7c86fc7 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 21:04:01 +0500
Subject: [PATCH 14/16] stylesheet: Lighten up entry borders

Match the new buttons.
---
 src/stylesheet/_drawing.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index 0a269c184..09786bb88 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -53,13 +53,13 @@
 
   @if $t==normal {
     color: $text_color;
-    border-color: $borders_color;
+    border-color: mix($borders_color, $base_color, 75%);
     background-color: $base_color;
     // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
   }
   @if $t==insensitive {
     color: $insensitive_fg_color;
-    border-color: $borders_color;
+    border-color: mix($borders_color, $insensitive_bg_color, 75%);
     background-color: $insensitive_bg_color;
   }
   @if $t==osd {
-- 
GitLab


From e3b3120955f1f37884c9ed08335ec2d4959b775a Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 01:57:00 +0500
Subject: [PATCH 15/16] stylesheet: Lighten header bar

Remove the checked buttons override.

Lighten up AdwTabBar to match it.

Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/149
---
 src/stylesheet/_colors.scss             |  2 +-
 src/stylesheet/widgets/_header-bar.scss | 37 +++++++------------------
 src/stylesheet/widgets/_tab-view.scss   |  2 +-
 3 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index dab29663c..a9840a265 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -15,7 +15,7 @@ $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentiz
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
 $dark_fill: mix($borders_color, $bg_color, 50%);
-$headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
+$headerbar_bg_color: $bg_color;
 $menu_color: $base_color;
 
 $view_hover_color: #{"alpha(currentColor, .07)"};
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 62dc49a9e..d4d614e1e 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -1,17 +1,10 @@
-$_header_bar_color: darken($bg_color, 10%);
-$_header_bar_gradient: linear-gradient(to top, darken($_header_bar_color, 2%), lighten($_header_bar_color, 1%));
-
-@if $variant == 'dark' {
-  $_header_bar_gradient: linear-gradient(to top, lighten($_header_bar_color, 4%), lighten($_header_bar_color, 6%));
-}
-
 headerbar {
   padding: 0 6px;
   min-height: 46px;
   border-width: 0 0 1px;
   border-style: solid;
   border-color: $alt_borders_color;
-  background-image: $_header_bar_gradient;
+  background-color: $headerbar_bg_color;
 
   > windowhandle > box {
     &,
@@ -22,7 +15,7 @@ headerbar {
   }
 
   &:backdrop {
-    background-image: linear-gradient(to top, $bg_color, $bg_color);
+    background-color: $headerbar_bg_color;
 
     transition: $backdrop_transition;
 
@@ -34,15 +27,6 @@ headerbar {
     }
   }
 
-  /* Darken switchbuttons for headerbars. issue #1588 */
-  stackswitcher > button:checked,
-  button:not(.flat).toggle:checked {
-
-    background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
-    border-color: darken($borders_color, 3%);
-    border-top-color: darken($borders_color, 8%);
-  }
-
   &.default-decoration {
     min-height: 28px;
     padding: 4px;
@@ -143,22 +127,21 @@ windowtitle {
 
 window.devel {
   headerbar {
-    $c: darken($bg_color, 10%);
     $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
-               linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
-               $_header_bar_gradient;
+               linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8));
+
     @if $variant == 'dark' {
       $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
-                 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
-                 $_header_bar_gradient;
+                 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9));
     }
 
-    background: $bg_color $gradient;
+    background: $headerbar_bg_color $gradient;
 
     &:backdrop {
-      background: $bg_color cross-fade(5% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
-                  linear-gradient(to right, transparent 65%, transparent),
-                  linear-gradient(to top, $bg_color, $bg_color);
+      $gradient: cross-fade(5% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+                 linear-gradient(to right, transparent 65%, transparent);
+
+      background: $headerbar_bg_color $gradient;
     }
   }
 }
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index de13d2f6d..39bdd2166 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -1,4 +1,4 @@
-$tab_bg: darken($bg_color, if($variant == 'dark', 6%, 12%));
+$tab_bg: darken($headerbar_bg_color, 6%);
 
 @mixin undershoot-gradient($dir) {
   @if $variant == 'dark' {
-- 
GitLab


From f61a914a8f058f8c51fd8e53256b19bf0ab3cbc3 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Thu, 10 Jun 2021 23:29:25 +0500
Subject: [PATCH 16/16] stylesheet: Brighten accent color for dark variant

We finally can do it.

Remove a bunch of dark variant overrides as well.

Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/182
---
 src/stylesheet/_colors.scss          | 18 +++++++++---------
 src/stylesheet/widgets/_buttons.scss |  8 +++-----
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index a9840a265..8b0d70cf2 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -7,13 +7,13 @@ $bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%
 $fg_color: if($variant == 'light', #2e3436, #eeeeec);
 
 $selected_fg_color: #ffffff;
-$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
+$selected_bg_color: if($variant == 'light', #3584e4, #62a0ea);
+$selected_borders_color: darken($selected_bg_color, 15%);
 $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
 $alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
 $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
-$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
-$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
+$link_color:darken($selected_bg_color, 10%);
+$link_visited_color: darken($selected_bg_color, 20%);
 $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: $bg_color;
 $menu_color: $base_color;
@@ -46,13 +46,13 @@ $slider_hover_color: white;
 $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
 $scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
 $scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
-$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
+$scrollbar_slider_active_color: darken($selected_bg_color, 10%);
 
 $warning_color: #f57900;
 $error_color: #cc0000;
 $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
-$suggested_color: if($variant == 'light', $selected_bg_color, $selected_bg_color);
-$suggested_text_color: if($variant == 'light', darken($suggested_color, 10%), lighten($suggested_color, 20%));
+$suggested_color: $selected_bg_color;
+$suggested_text_color: if($variant == 'light', darken($suggested_color, 10%), lighten($suggested_color, 10%));
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
 $destructive_text_color: if($variant == 'light', darken($destructive_color, 10%), lighten($destructive_color, 20%));
 
@@ -78,7 +78,7 @@ $insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 //special cased widget colors
 $suggested_bg_color: $selected_bg_color;
 $suggested_border_color: $selected_borders_color;
-$focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3));
+$focus_border_color:  transparentize($selected_bg_color, 0.5);
 $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
 $dim_label_opacity: 0.55;
 
@@ -98,7 +98,7 @@ $dim_label_opacity: 0.55;
   $insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 
   //focus rings
-  $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.2), transparentize(white, 0.4));
+  $focus_border_color: transparentize($selected_bg_color, 0.2);
   $alt_focus_border_color: if($variant == 'light', white, transparentize(white,0.4));
 
   $dim_label_opacity: 0.9;
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 7d389bd35..8d68c80ae 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -1,9 +1,7 @@
 // stuff for .needs-attention
-$_dot_color: if($variant=='light', $selected_bg_color,
-                                   lighten($selected_bg_color,15%));
 @keyframes needs_attention {
-  from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
-  to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
+  from { background-image: radial-gradient(farthest-side, $selected_bg_color 0%, transparentize($selected_bg_color, 1) 0%); }
+  to { background-image: radial-gradient(farthest-side, $selected_bg_color 95%, transparentize($selected_bg_color, 1)); }
 }
 
 %button,
@@ -257,7 +255,7 @@ button {
   // simulates the shadow labels and icons normally have in buttons.
   animation: needs_attention 150ms ease-in;
 
-  background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
+  background-image: radial-gradient(farthest-side, $selected_bg_color 96%, transparentize($selected_bg_color, 1));
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
 
-- 
GitLab