[libadwaita/wip/exalm/lists-style: 1/6] stylesheet: Simplify list styles

[Alexander Mikhaylenko <alexm src gnome org>]

commit b75d9fad789c31f9a47e49c813c46eb2af662695
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue May 18 00:35:23 2021 +0500

    stylesheet: Simplify list styles
    
    Use the same grey colors for all types of list. At this point
    .navigation-sidebar and dropdown styles simply specify border-radius etc,
    but not background.
    
    Remove the box-shadow for active.
    
    Add a few overrides for .content to keep an active style.
    
    Remove overrides from buttons, checks, switches, scales, links and color
    swatches, they were only needed because blue selection was too different
    from background.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/126

 src/stylesheet/widgets/_buttons.scss       | 15 --------------
 src/stylesheet/widgets/_checks.scss        |  6 ------
 src/stylesheet/widgets/_color-chooser.scss |  2 --
 src/stylesheet/widgets/_dropdowns.scss     |  6 ------
 src/stylesheet/widgets/_links.scss         | 10 ---------
 src/stylesheet/widgets/_lists.scss         | 33 ++++++++++++++----------------
 src/stylesheet/widgets/_scale.scss         | 14 -------------
 src/stylesheet/widgets/_sidebars.scss      | 28 -------------------------
 src/stylesheet/widgets/_switch.scss        | 12 -----------
 9 files changed, 15 insertions(+), 111 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 9afc21dc..7c3a29b3 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -93,21 +93,6 @@ button {
     }
   }
 
-  @at-root %button_selected, & {
-    row:selected & {
-      @if $variant == 'light' { border-color: $selected_borders_color; }
-    }
-
-    @at-root %button_selected_flat, &.flat {
-      row:selected & {
-        &:not(:active):not(:checked):not(:hover):not(disabled) {
-          color: $selected_fg_color;
-          border-color: transparent;
-        }
-      }
-    }
-  }
-
   // big standalone buttons like in Documents pager
   &.osd {
     min-width: 26px;
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 68419e8e..fc7957de 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -48,12 +48,6 @@ radio {
     }
   }
 
-  @if $variant == 'light' {
-    // the borders of the light variant versions of checks and radios are too similar in luminosity to the 
selected background
-    // color, hence we need special casing.
-    row:selected & { border-color: $checkradio_borders_color; }
-  }
-
   .osd & {
     @include button(osd);
 
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index bac6e9fa..d077d06e 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -126,8 +126,6 @@ colorswatch {
     }
   }
 
-  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
-
   &#editor-color-sample {
     border-radius: 4px;
 
diff --git a/src/stylesheet/widgets/_dropdowns.scss b/src/stylesheet/widgets/_dropdowns.scss
index 22e2d4ae..f5a1d988 100644
--- a/src/stylesheet/widgets/_dropdowns.scss
+++ b/src/stylesheet/widgets/_dropdowns.scss
@@ -45,12 +45,6 @@ combobox {
 
       & > row {
         padding: 8px;
-
-        &:selected {
-          outline-color: $alt_focus_border_color;
-          color: $text-color;
-          background-color: $menu_selected_color;
-        }
       }
     }
 
diff --git a/src/stylesheet/widgets/_links.scss b/src/stylesheet/widgets/_links.scss
index c21e1ea8..6b87b5d8 100644
--- a/src/stylesheet/widgets/_links.scss
+++ b/src/stylesheet/widgets/_links.scss
@@ -5,28 +5,18 @@ link {
 
   &:visited {
     color: $link_visited_color;
-
-    *:selected & { color: mix($selected_fg_color, $link_visited_color, 60%); }
   }
 
   &:hover {
     $_fg: lighten($link_color, 10%);
     color: $_fg;
-
-    *:selected & { color: mix($selected_fg_color, $_fg, 90%); }
   }
 
   &:active {
     color: $link_color;
-
-    *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
   }
 
   &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); }
-
-  @at-root %link_selected,
-  &:selected,
-  *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
 }
 
 link {
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 822bda98..7bcf2a85 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -19,28 +19,27 @@ list {
 }
 
 row {
-  @include focus-ring();
+  @include focus-ring($focus-state: 'focus-visible:focus-within');
 
   &.activatable {
     &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
+    &:hover { background-color: $menu_hover_color; }
 
-    &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), 
transparentize($fg_color, 0.95)); }
-
-    &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
+    &:active { background-color: $menu_active_color; }
 
     &:selected {
-      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
-
       &.has-open-popup,
-      &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
+      &:hover { background-color: $menu_selected_hover_color; }
+
+      &:active { background-color: $menu_active_color; }
     }
   }
 
   &:selected {
-    outline-color: $alt_focus_border_color;
-
-    @extend %selected_items;
+    background-color: $menu_selected_color;
   }
+
+  &:disabled { color: gtkalpha(currentColor, .55); }
 }
 
 /*******************************************************
@@ -99,12 +98,6 @@ popover.background.combo > contents {
       min-height: 50px;
       border-bottom: 1px solid transparentize($borders_color, 0.5);
 
-      &:selected {
-        outline-color: $alt_focus_border_color;
-        color: $text-color;
-        background-color: $menu_selected_color;
-      }
-
       &:first-child {
         border-top-left-radius: $popover_radius - 2;
         border-top-right-radius: $popover_radius - 2;
@@ -244,9 +237,13 @@ listview.content {
       background-color: $base_color;
     }
 
-    &:not(.expander):not(:active):hover.activatable:not(:selected),
-    &.expander row.header:not(:active):hover.activatable:not(:selected) {
+    &:not(.expander):hover.activatable:not(:selected),
+    &.expander row.header:hover.activatable:not(:selected) {
       background-color: mix($fg_color, $base_color, 5%);
+
+      &:active {
+        background-color: mix($fg_color, $base_color, 10%);
+      }
     }
 
     &,
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 0af58cf6..6e916027 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -10,14 +10,6 @@
    border-color: $insensitive_borders_color;
   }
 
-  // ...on selected list rows
-  row:selected & {
-    &:disabled, & {
-      outline-color: $alt_focus_border_color;
-      border-color: $selected_borders_color;
-    }
-  }
-
   // OSD
   .osd & {
     border-color: $osd_borders_color;
@@ -37,9 +29,6 @@
     border-color: transparent;
   }
 
-  // ...on selected list rows
-  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
-
   // OSD
   .osd & {
     border-color: $osd_borders_color;
@@ -110,9 +99,6 @@ scale {
 
       &:disabled { @include button(insensitive); }
 
-      // ...on selected list rows
-      row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
-
       // OSD
       .osd & {
         @include button(osd);
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 4ee4acb9..e522f102 100644
--- a/src/stylesheet/widgets/_sidebars.scss
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -57,33 +57,6 @@ separator.sidebar {
     padding: 0 8px;
     border-radius: $menu_radius;
     margin: 0 $menu_margin 2px;
-    @include focus-ring($focus-state: 'focus-visible:focus-within');
-
-    &:selected {
-      background-color: $menu_selected_color;
-      color: inherit;
-    }
-
-    &.activatable {
-      &.has-open-popup,
-      &:hover {
-        background-color: $menu_hover_color;
-      }
-
-      &:selected {
-        &.has-open-popup,
-        &:hover {
-          background-color: $menu_selected_hover_color;
-        }
-      }
-
-      &:active,
-      &:selected:active {
-        background-color: $menu_active_color;
-      }
-    }
-
-    &:disabled { color: gtkalpha(currentColor, .55); }
   }
 }
 
@@ -123,7 +96,6 @@ placessidebar {
     @at-root button.sidebar-button {
       @extend %button_basic_flat;
 
-      @extend %button_selected_flat;
       min-height: 26px;
       min-width: 26px;
       margin-top: 3px;
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index b28db6e9..5aeb1841 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -46,16 +46,4 @@ switch {
   &:checked > slider { border: 1px solid $switch_borders_color; }
 
   &:disabled > slider { @include button(insensitive); }
-
-
-  row:selected & {
-    outline-color: $alt_focus_border_color;
-
-    @if $variant == 'light' {
-      box-shadow: none;
-      border-color: $switch_borders_color;
-
-      > slider { &:checked, & { border-color: $switch_borders_color; } }
-    }
-  }
 }