From 00b1599c7abe58ee16f07b63bf1abefdd157d16f Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 13:31:51 +0500
Subject: [PATCH 01/13] stylesheet: Don't duplicate styling for toolbars

These buttons can just inherit the flat style.
---
 src/stylesheet/widgets/_buttons.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 7c3a29b34..cc1e83212 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -348,11 +348,7 @@ button {
 
 .toolbar button {
   margin: 1px;
-  @extend %undecorated_button;
-
-  &:hover { @include button(undecorated-hover); }
-  &:active { @include button(undecorated-active); }
-  &:disabled { @include button(undecorated); }
+  @extend %button_basic_flat;
 }
 
 button.color {
-- 
GitLab


From 4406770a812c769884d5119281c7deb13e8e56c8 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 13:32:46 +0500
Subject: [PATCH 02/13] stylesheet: Nest toolbar button style under toolbars

---
 src/stylesheet/widgets/_buttons.scss  | 7 -------
 src/stylesheet/widgets/_toolbars.scss | 5 +++++
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index cc1e83212..d248c3f3a 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -344,13 +344,6 @@ button {
   &:not(:last-child) > button { @extend %linked_not_bottom; }
 }
 
-/* oldstyle toolbar buttons */
-
-.toolbar button {
-  margin: 1px;
-  @extend %button_basic_flat;
-}
-
 button.color {
   padding: 4px;
 
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 92423c409..d3ebc7330 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -22,6 +22,11 @@
   // toolbar separators
   &.horizontal > separator { margin: 4px 0; }
   &.vertical > separator { margin: 0 4px; }
+
+  button {
+    margin: 1px;
+    @extend %button_basic_flat;
+  }
 }
 
 /****************
-- 
GitLab


From 3d47ba502c2641bb49ce2a0a40c56d4838b0fca8 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 13:35:02 +0500
Subject: [PATCH 03/13] stylesheet: Remove button margins in .toolbar

We can just increase padding and spacing instead, that way we don't break
.linked.
---
 src/stylesheet/widgets/_toolbars.scss | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index d3ebc7330..912dbf52e 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -1,6 +1,6 @@
 .toolbar {
-  padding: 4px;
-  border-spacing: 4px;
+  padding: 5px;
+  border-spacing: 5px;
   background-color: $bg_color;
 
   // on OSD
@@ -8,7 +8,7 @@
 
   // stand-alone OSD toolbars
   &.osd {
-    padding: 13px;
+    padding: 14px;
     border: none;
     border-radius: 5px;
     background-color: $osd_bg_color;
@@ -20,11 +20,10 @@
   }
 
   // toolbar separators
-  &.horizontal > separator { margin: 4px 0; }
-  &.vertical > separator { margin: 0 4px; }
+  &.horizontal > separator { margin: 5px 0; }
+  &.vertical > separator { margin: 0 5px; }
 
   button {
-    margin: 1px;
     @extend %button_basic_flat;
   }
 }
-- 
GitLab


From f453a3c8f3cbe9b8e3b3d543114a3adcf38f0c8c Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 13:39:24 +0500
Subject: [PATCH 04/13] stylesheet: Extend button for the color chooser add
 button

---
 src/stylesheet/widgets/_color-chooser.scss | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index d077d06ec..9385acc3c 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -104,17 +104,13 @@ colorswatch {
   }
 
   &#add-color-button {
-    border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
-
-    &:only-child { border-radius: $_colorswatch_radius; }
-
     > overlay {
-      @include button(normal);
-    }
+      @extend %button_basic;
 
-    &.activatable:hover > overlay {
-      @include button(hover);
+      border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
     }
+
+    &:only-child > overlay { border-radius: $_colorswatch_radius; }
   }
 
   &:disabled {
-- 
GitLab


From 3b4248c54af0f050b24ac3043a153fc3bb5803ad Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 13:41:43 +0500
Subject: [PATCH 05/13] stylesheet: Extend button for the inline menu buttons

---
 src/stylesheet/widgets/_menus.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 1b7ac8827..6af7304c8 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -5,7 +5,7 @@ popover.menu {
     padding: 0 $menu_padding;
 
     button.image-button.model {
-      @include button(undecorated);
+      @extend %button_basic_flat;
 
       min-height: 30px;
       min-width: 30px;
-- 
GitLab


From 7876b7455e4be593bb4f084e61f0271e0b609c7f Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 13:43:29 +0500
Subject: [PATCH 06/13] stylesheet: Remove a redundant style from notebook
 arrows

---
 src/stylesheet/widgets/_notebook.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index bf0060d06..89947c47b 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -106,7 +106,6 @@ notebook {
 
     > tabs > arrow {
       @extend %button_basic;
-
       @extend %button_basic_flat;
 
       min-height: 16px;
@@ -120,8 +119,6 @@ notebook {
         border-color: transparent;
         box-shadow: none;
       }
-
-      &:disabled { @include button(undecorated); }
     }
 
     > tabs > tab {
-- 
GitLab


From d0491d9354f3edaf3df4adc79c6ac92f3d026a35 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 15:07:05 +0500
Subject: [PATCH 07/13] stylesheet: Drop .osd for spinbuttons

This style doesn't work correctly even in GTK3, while .osd spinbutton works
fine. With this I'm assuming it's a very old leftover.
---
 src/stylesheet/widgets/_spin-button.scss | 47 ------------------------
 1 file changed, 47 deletions(-)

diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index e8d4a5672..f0492b470 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -48,42 +48,6 @@ spinbutton {
 
       &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
     }
-
-    .osd {
-      > button.image-button.up:not(.flat),
-      > button.image-button.down:not(.flat) {
-        @include button(undecorated);
-
-        color: $osd_fg_color;
-        border-style: none none none solid;
-        border-color: transparentize($osd_borders_color, 0.3);
-        border-radius: 0;
-        box-shadow: none;
-
-        &:dir(rtl) { border-style: none solid none none; }
-
-        &:hover {
-          @include button(undecorated);
-
-          color: $osd_fg_color;
-          border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-          background-color: darken($osd_bg_color,10%);
-          box-shadow: none;
-        }
-
-        &:disabled {
-          @include button(undecorated);
-
-          color: $osd_insensitive_fg_color;
-          border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-          box-shadow: none;
-        }
-
-        &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
-
-        &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
-      }
-    }
   }
 
   // Vertical
@@ -135,17 +99,6 @@ spinbutton {
     }
   }
 
-  // OSD vertical
-  .osd &.vertical > button:first-child {
-    @include button(osd);
-
-    &:hover { @include button(osd-hover);}
-
-    &:active { @include button(osd-active); }
-
-    &:disabled { @include button(osd-insensitive); }
-  }
-
   // Misc
   treeview &:not(.vertical) {
     min-height: 0;
-- 
GitLab


From 13d43cf72aa63d0533a58da1ca9f84ce57bda2bf Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 15:13:29 +0500
Subject: [PATCH 08/13] stylesheet: Move magnifier style to
 _text-selection.scss

---
 src/stylesheet/widgets/_popovers.scss       | 4 ----
 src/stylesheet/widgets/_text-selection.scss | 4 ++++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/stylesheet/widgets/_popovers.scss b/src/stylesheet/widgets/_popovers.scss
index ff7bb0be7..513891f00 100644
--- a/src/stylesheet/widgets/_popovers.scss
+++ b/src/stylesheet/widgets/_popovers.scss
@@ -60,7 +60,3 @@ popover.background {
     button { @extend %osd_button; }
   }
 }
-
-magnifier {
-  background-color: $base_color;
-}
diff --git a/src/stylesheet/widgets/_text-selection.scss b/src/stylesheet/widgets/_text-selection.scss
index 2d6ed4797..b76030148 100644
--- a/src/stylesheet/widgets/_text-selection.scss
+++ b/src/stylesheet/widgets/_text-selection.scss
@@ -24,3 +24,7 @@ cursor-handle {
     transform: translateX(1px) translateY(4px) rotate(45deg);
   }
 }
+
+magnifier {
+  background-color: $base_color;
+}
-- 
GitLab


From 8931fa336dc809d4f8977073fde9d8b152ed79a2 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 15:30:26 +0500
Subject: [PATCH 09/13] stylesheet: Use selected/hover/active view styles for
 flat buttons

Less redundancy, and this allows us to remove headerbar overrides for .flat
and also fixes the concerns from https://gitlab.gnome.org/GNOME/libadwaita/-/merge_requests/91#note_1093606
---
 src/stylesheet/_drawing.scss            | 25 ++++++++++++++-----------
 src/stylesheet/widgets/_buttons.scss    | 17 +++++++++++++++--
 src/stylesheet/widgets/_header-bar.scss | 13 +------------
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index d34a0de3e..7018cdc1e 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -256,22 +256,25 @@ $_default_button_c: lighten($bg_color,2%);
     border-color: transparent;
     background-image: none;
     box-shadow: none;
-    @if $variant == 'light' {
-      background-color: darken($c,14%);
-    } @else {
-      background-color: darken($c,1%);
-    }
+    background-color: $view_hover_color;
   }
   @else if $t==undecorated-active {
     border-color: transparent;
     background-image: none;
     box-shadow: none;
-    @if $variant == 'light' {
-      background-color: darken($c,20%);
-    }
-    @else {
-      background-color: darken($c,5%);
-    }
+    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;
   }
 }
 
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index d248c3f3a..c24000bda 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -55,12 +55,25 @@ button {
         @include button(undecorated-hover);
         transition: $button_transition;
         transition-duration: 500ms;
+
+        &:active {
+          @include button(undecorated-active);
+        }
       }
-      &:active,
+
       &:checked {
-        @include button(undecorated-active);
+        @include button(undecorated-checked);
         transition: $button_transition;
+
+        &:hover {
+          @include button(undecorated-checked-hover);
+
+          &:active {
+            @include button(undecorated-active);
+          }
+        }
       }
+
       &:disabled { @include button(undecorated); }
     }
 
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 4ea84f4e1..9a834c6fd 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -36,7 +36,7 @@ headerbar {
 
   /* Darken switchbuttons for headerbars. issue #1588 */
   stackswitcher > button:checked,
-  button.toggle: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%);
@@ -109,7 +109,6 @@ windowcontrols {
   border-spacing: 6px;
 
   button {
-    @extend %button_basic;
     @extend %button_basic_flat;
 
     border-radius: 9999px;
@@ -120,16 +119,6 @@ windowcontrols {
   }
 }
 
-// special case hover colors inside a headerbar
-headerbar button.flat,
-headerbar windowcontrols button {
-  &:hover {
-    @include button(undecorated-hover,$c:darken($headerbar_bg_color,6%));
-  }
-  &:active,
-  &:checked { @include button(undecorated-active,$c:darken($headerbar_bg_color,10%)); }
-}
-
 /******************
  * AdwWindowTitle *
  ******************/
-- 
GitLab


From f21aec17bef56172719e30932df93bf3d5c7f3bc Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 16:28:50 +0500
Subject: [PATCH 10/13] stylesheet: Split all linked styles into a separate
 file

---
 src/stylesheet/_widgets.scss           |   1 +
 src/stylesheet/meson.build             |   1 +
 src/stylesheet/widgets/_buttons.scss   |  69 -----------
 src/stylesheet/widgets/_dropdowns.scss |  44 -------
 src/stylesheet/widgets/_entries.scss   |  43 -------
 src/stylesheet/widgets/_linked.scss    | 164 +++++++++++++++++++++++++
 6 files changed, 166 insertions(+), 156 deletions(-)
 create mode 100644 src/stylesheet/widgets/_linked.scss

diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 315dc720b..ae2a02061 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -11,6 +11,7 @@
 @import 'widgets/header-bar';
 @import 'widgets/labels';
 @import 'widgets/level-bar';
+@import 'widgets/linked';
 @import 'widgets/links';
 @import 'widgets/lists';
 @import 'widgets/menus';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 932172aa2..7accf4150 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -33,6 +33,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_header-bar.scss',
       'widgets/_labels.scss',
       'widgets/_level-bar.scss',
+      'widgets/_linked.scss',
       'widgets/_links.scss',
       'widgets/_lists.scss',
       'widgets/_menus.scss',
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index c24000bda..9f73c252e 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -249,10 +249,6 @@ button {
     > box > box > label { font-weight: bold; }
   }
 
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked.vertical > & { @extend %linked_vertical; }
-
   menubutton.circular &,
   &.circular { // force circular button shape
     min-width: 32px;
@@ -284,48 +280,6 @@ button {
   }
 }
 
-
-%linked_not_left {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-%linked_not_right {
-  border-right-style: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-// 1st/last child are at text start/end
-%linked {
-  &:dir(ltr) {
-    &:not(:first-child) { @extend %linked_not_left; }
-    &:not(:last-child) { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) { @extend %linked_not_right; }
-    &:not(:last-child) { @extend %linked_not_left; }
-  }
-}
-
-%linked_not_top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-%linked_not_bottom {
-  border-bottom-style: none;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-%linked_vertical {
-  &:not(:first-child) { @extend %linked_not_top; }
-
-  &:not(:last-child) { @extend %linked_not_bottom; }
-}
-
 %undecorated_button {
   background-color: transparent;
   background-image: none;
@@ -334,29 +288,6 @@ button {
               0 1px transparentize(white, 1);
 }
 
-.linked:not(.vertical) > menubutton,
-.linked:not(.vertical) > dropdown,
-.linked:not(.vertical) > colorbutton,
-.linked:not(.vertical) > fontbutton {
-  &:dir(ltr) {
-    &:not(:first-child) > button { @extend %linked_not_left; }
-    &:not(:last-child) > button { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > button { @extend %linked_not_right; }
-    &:not(:last-child) > button { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > menubutton,
-.linked.vertical > dropdown,
-.linked.vertical > colorbutton,
-.linked.vertical > fontbutton {
-  &:not(:first-child) > button { @extend %linked_not_top; }
-  &:not(:last-child) > button { @extend %linked_not_bottom; }
-}
-
 button.color {
   padding: 4px;
 
diff --git a/src/stylesheet/widgets/_dropdowns.scss b/src/stylesheet/widgets/_dropdowns.scss
index f5a1d9884..2ca81c915 100644
--- a/src/stylesheet/widgets/_dropdowns.scss
+++ b/src/stylesheet/widgets/_dropdowns.scss
@@ -22,13 +22,6 @@ combobox {
     padding-right: 9px;
   }
 
-  &.linked {
-    button:nth-child(2) {
-      &:dir(ltr) { @extend %linked_not_left; }
-      &:dir(rtl) { @extend %linked_not_right; }
-    }
-  }
-
   &:drop(active) { // FIXME: untested
     box-shadow: none;
 
@@ -56,40 +49,3 @@ combobox {
   }
 }
 
-// the combo is a composite widget so the way we do button linking doesn't
-// work, special case needed. See
-// https://bugzilla.gnome.org/show_bug.cgi?id=733979
-
-.linked:not(.vertical) > combobox {
-  &:dir(ltr) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > combobox {
-  &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
-  &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
-}
-
-.linked:not(.vertical) > appchooserbutton {
-  &:dir(ltr) {
-    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_left; }
-    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_right; }
-    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > appchooserbutton {
-  &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_top; }
-  &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_bottom; }
-}
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 57be96b4e..095de9744 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -95,49 +95,6 @@ entry {
       box-shadow: none;
     }
   }
-
-   // linked entries
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked:not(.vertical) > &:drop(active) + &,
-  .linked:not(.vertical) > &:drop(active) + button,
-  .linked:not(.vertical) > &:drop(active) + menubutton > button,
-  .linked:not(.vertical) > &:drop(active) + dropdown > button,
-  .linked:not(.vertical) > &:drop(active) + colorbutton > button,
-  .linked:not(.vertical) > &:drop(active) + fontbutton > button,
-  .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
-  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
-
-  // Vertically linked entries
-  // FIXME: take care of "colored" entries
-  .linked.vertical > & {
-    @extend %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; }
-
-    &:drop(active):not(:only-child) {
-      + %entry,
-      + entry,
-      + button,
-      + menubutton > button,
-      + dropdown > button,
-      + colorbutton > button,
-      + fontbutton > button,
-      + appchooserbutton > combobox > box > button.combo,
-      + combobox > box > button.combo { border-top-color: $drop_target_color; }
-    }
-  }
 }
 
 treeview entry {
diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
new file mode 100644
index 000000000..3d94caf8a
--- /dev/null
+++ b/src/stylesheet/widgets/_linked.scss
@@ -0,0 +1,164 @@
+%linked_not_left {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+%linked_not_right {
+  border-right-style: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+%linked_not_top {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+%linked_not_bottom {
+  border-bottom-style: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+// 1st/last child are at text start/end
+%linked {
+  &:dir(ltr) {
+    &:not(:first-child) { @extend %linked_not_left; }
+    &:not(:last-child) { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) { @extend %linked_not_right; }
+    &:not(:last-child) { @extend %linked_not_left; }
+  }
+}
+
+%linked_vertical {
+  &:not(:first-child) { @extend %linked_not_top; }
+
+  &:not(:last-child) { @extend %linked_not_bottom; }
+}
+
+%button,
+button {
+  .linked:not(.vertical) > & { @extend %linked; }
+
+  .linked.vertical > & { @extend %linked_vertical; }
+}
+
+.linked:not(.vertical) > menubutton,
+.linked:not(.vertical) > dropdown,
+.linked:not(.vertical) > colorbutton,
+.linked:not(.vertical) > fontbutton {
+  &:dir(ltr) {
+    &:not(:first-child) > button { @extend %linked_not_left; }
+    &:not(:last-child) > button { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) > button { @extend %linked_not_right; }
+    &:not(:last-child) > button { @extend %linked_not_left; }
+  }
+}
+
+.linked.vertical > menubutton,
+.linked.vertical > dropdown,
+.linked.vertical > colorbutton,
+.linked.vertical > fontbutton {
+  &:not(:first-child) > button { @extend %linked_not_top; }
+  &:not(:last-child) > button { @extend %linked_not_bottom; }
+}
+
+// the combo is a composite widget so the way we do button linking doesn't
+// work, special case needed. See
+// https://bugzilla.gnome.org/show_bug.cgi?id=733979
+
+.linked:not(.vertical) > combobox {
+  &:dir(ltr) {
+    &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
+    &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
+    &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
+  }
+}
+
+.linked.vertical > combobox {
+  &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
+  &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
+}
+
+.linked:not(.vertical) > appchooserbutton {
+  &:dir(ltr) {
+    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_left; }
+    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_right; }
+    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_left; }
+  }
+}
+
+.linked.vertical > appchooserbutton {
+  &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_top; }
+  &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_bottom; }
+}
+
+dropdown,
+combobox {
+  &.linked {
+    button:nth-child(2) {
+      &:dir(ltr) { @extend %linked_not_left; }
+      &:dir(rtl) { @extend %linked_not_right; }
+    }
+  }
+}
+
+%entry,
+entry {
+   // linked entries
+  .linked:not(.vertical) > & { @extend %linked; }
+
+  .linked:not(.vertical) > &:drop(active) + &,
+  .linked:not(.vertical) > &:drop(active) + button,
+  .linked:not(.vertical) > &:drop(active) + menubutton > button,
+  .linked:not(.vertical) > &:drop(active) + dropdown > button,
+  .linked:not(.vertical) > &:drop(active) + colorbutton > button,
+  .linked:not(.vertical) > &:drop(active) + fontbutton > button,
+  .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
+  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
+
+  // Vertically linked entries
+  // FIXME: take care of "colored" entries
+  .linked.vertical > & {
+    @extend %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; }
+
+    &:drop(active):not(:only-child) {
+      + %entry,
+      + entry,
+      + button,
+      + menubutton > button,
+      + dropdown > button,
+      + colorbutton > button,
+      + fontbutton > button,
+      + appchooserbutton > combobox > box > button.combo,
+      + combobox > box > button.combo { border-top-color: $drop_target_color; }
+    }
+  }
+}
-- 
GitLab


From c3c00624812611511a4416f05a4e236d12379f8f Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 16:47:53 +0500
Subject: [PATCH 11/13] stylesheet: Refactor linked styles

List all the linked widgets in a single variable, avoid duplicating it.
---
 src/stylesheet/widgets/_linked.scss | 144 ++++++++--------------------
 1 file changed, 39 insertions(+), 105 deletions(-)

diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index 3d94caf8a..cc39cdb8c 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -1,3 +1,15 @@
+// .linked >        element            child
+$_linked_widgets: ("%button",          ""),
+                  ("button",           ""),
+                  ("menubutton",       "> button"),
+                  ("dropdown",         "> button"),
+                  ("colorbutton",      "> button"),
+                  ("fontbutton",       "> button"),
+                  ("combobox",         "> box > button.combo"),
+                  ("appchooserbutton", "> combobox > box > button.combo"),
+                  ("%entry",           ""),
+                  ("entry",            "");
+
 %linked_not_left {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -20,93 +32,27 @@
   border-bottom-right-radius: 0;
 }
 
-// 1st/last child are at text start/end
-%linked {
-  &:dir(ltr) {
-    &:not(:first-child) { @extend %linked_not_left; }
-    &:not(:last-child) { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) { @extend %linked_not_right; }
-    &:not(:last-child) { @extend %linked_not_left; }
-  }
-}
-
-%linked_vertical {
-  &:not(:first-child) { @extend %linked_not_top; }
-
-  &:not(:last-child) { @extend %linked_not_bottom; }
-}
-
-%button,
-button {
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked.vertical > & { @extend %linked_vertical; }
-}
-
-.linked:not(.vertical) > menubutton,
-.linked:not(.vertical) > dropdown,
-.linked:not(.vertical) > colorbutton,
-.linked:not(.vertical) > fontbutton {
-  &:dir(ltr) {
-    &:not(:first-child) > button { @extend %linked_not_left; }
-    &:not(:last-child) > button { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > button { @extend %linked_not_right; }
-    &:not(:last-child) > button { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > menubutton,
-.linked.vertical > dropdown,
-.linked.vertical > colorbutton,
-.linked.vertical > fontbutton {
-  &:not(:first-child) > button { @extend %linked_not_top; }
-  &:not(:last-child) > button { @extend %linked_not_bottom; }
-}
-
-// the combo is a composite widget so the way we do button linking doesn't
-// work, special case needed. See
-// https://bugzilla.gnome.org/show_bug.cgi?id=733979
-
-.linked:not(.vertical) > combobox {
-  &:dir(ltr) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > combobox {
-  &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
-  &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
-}
+@each $widget, $child in $_linked_widgets {
+  .linked:not(.vertical) > {
+    #{$widget}:dir(ltr) {
+      &:not(:first-child) #{$child} { @extend %linked_not_left; }
+      &:not(:last-child) #{$child} { @extend %linked_not_right; }
+    }
 
-.linked:not(.vertical) > appchooserbutton {
-  &:dir(ltr) {
-    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_left; }
-    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_right; }
+    #{$widget}:dir(rtl) {
+      &:not(:first-child) #{$child} { @extend %linked_not_right; }
+      &:not(:last-child) #{$child} { @extend %linked_not_left; }
+    }
   }
 
-  &:dir(rtl) {
-    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_right; }
-    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_left; }
+  .linked.vertical {
+    #{$widget} {
+      &:not(:first-child) #{$child} { @extend %linked_not_top; }
+      &:not(:last-child) #{$child} { @extend %linked_not_bottom; }
+    }
   }
 }
 
-.linked.vertical > appchooserbutton {
-  &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_top; }
-  &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_bottom; }
-}
-
 dropdown,
 combobox {
   &.linked {
@@ -119,23 +65,9 @@ combobox {
 
 %entry,
 entry {
-   // linked entries
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked:not(.vertical) > &:drop(active) + &,
-  .linked:not(.vertical) > &:drop(active) + button,
-  .linked:not(.vertical) > &:drop(active) + menubutton > button,
-  .linked:not(.vertical) > &:drop(active) + dropdown > button,
-  .linked:not(.vertical) > &:drop(active) + colorbutton > button,
-  .linked:not(.vertical) > &:drop(active) + fontbutton > button,
-  .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
-  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
-
   // Vertically linked entries
   // FIXME: take care of "colored" entries
   .linked.vertical > & {
-    @extend %linked_vertical;
-
     // brighter border between linked entries
     &:not(:disabled) + entry:not(:disabled),
     &:not(:disabled) + %entry:not(:disabled) {
@@ -148,17 +80,19 @@ entry {
 
     + %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;
+      }
+    }
 
-    &:drop(active):not(:only-child) {
-      + %entry,
-      + entry,
-      + button,
-      + menubutton > button,
-      + dropdown > button,
-      + colorbutton > button,
-      + fontbutton > button,
-      + appchooserbutton > combobox > box > button.combo,
-      + combobox > box > button.combo { border-top-color: $drop_target_color; }
+    .linked.vertical > &:drop(active):not(:only-child) + {
+      #{$widget} #{$child} {
+        border-top-color: $drop_target_color;
+      }
     }
   }
 }
-- 
GitLab


From d5201221e82673cb6a49d9dc5d01f13a6443cca4 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 17:31:12 +0500
Subject: [PATCH 12/13] stylesheet: Remove a redundant linked style

Originally it was fixing https://bugzilla.gnome.org/show_bug.cgi?id=760524
but that bug isn't reproducible anymore.
---
 src/stylesheet/widgets/_linked.scss | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index cc39cdb8c..2844ce72a 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -53,16 +53,6 @@ $_linked_widgets: ("%button",          ""),
   }
 }
 
-dropdown,
-combobox {
-  &.linked {
-    button:nth-child(2) {
-      &:dir(ltr) { @extend %linked_not_left; }
-      &:dir(rtl) { @extend %linked_not_right; }
-    }
-  }
-}
-
 %entry,
 entry {
   // Vertically linked entries
-- 
GitLab


From 8fa389fce233d01e97edbaccd7cf58a210848011 Mon Sep 17 00:00:00 2001
From: Alexander Mikhaylenko <alexm@gnome.org>
Date: Sun, 23 May 2021 17:39:24 +0500
Subject: [PATCH 13/13] stylesheet: Inline %linked_not_*

These are only used once now, no point in keeping them separate.
---
 src/stylesheet/widgets/_linked.scss | 53 ++++++++++++-----------------
 1 file changed, 22 insertions(+), 31 deletions(-)

diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index 2844ce72a..448340889 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -10,45 +10,36 @@ $_linked_widgets: ("%button",          ""),
                   ("%entry",           ""),
                   ("entry",            "");
 
-%linked_not_left {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-%linked_not_right {
-  border-right-style: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-%linked_not_top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-%linked_not_bottom {
-  border-bottom-style: none;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
 @each $widget, $child in $_linked_widgets {
   .linked:not(.vertical) > {
-    #{$widget}:dir(ltr) {
-      &:not(:first-child) #{$child} { @extend %linked_not_left; }
-      &:not(:last-child) #{$child} { @extend %linked_not_right; }
-    }
+    #{$widget} {
+      &:dir(ltr):not(:first-child) #{$child},
+      &:dir(rtl):not(:last-child) #{$child} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
 
-    #{$widget}:dir(rtl) {
-      &:not(:first-child) #{$child} { @extend %linked_not_right; }
-      &:not(:last-child) #{$child} { @extend %linked_not_left; }
+      &: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;
+      }
     }
   }
 
   .linked.vertical {
     #{$widget} {
-      &:not(:first-child) #{$child} { @extend %linked_not_top; }
-      &:not(:last-child) #{$child} { @extend %linked_not_bottom; }
+      &:not(:first-child) #{$child} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:not(:last-child) #{$child} {
+        border-bottom-style: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }
 }
-- 
GitLab