[gnome-shell/wip/snwh/style-updates] theme: rework the alt-tab switcher style

[Sam Hewitt <snwh src gnome org>]

commit 168f8a18b63ffd1d17c8ee74dbe33336dbc9f71c
Author: Sam Hewitt <sam snwh org>
Date:   Mon Jan 3 12:54:41 2022 -0330

    theme: rework the alt-tab switcher style

 data/theme/gnome-shell-sass/_colors.scss           |  2 +-
 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  2 +-
 data/theme/gnome-shell-sass/widgets/_dash.scss     |  2 +-
 .../gnome-shell-sass/widgets/_switcher-popup.scss  | 61 +++++++++++++++-------
 4 files changed, 46 insertions(+), 21 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index f62b556331..bc07e010cb 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -24,7 +24,7 @@ $osd_bg_color: transparentize(desaturate(#242424, 100%),0.04);
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
 $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  
mix($osd_fg_color, $osd_bg_color, 70%));
 $osd_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize($osd_fg_color, 0.99);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
 
 $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
 $system_bg_color: if($variant == 'light', #9a9996, darken(#242424, 2%)); 
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index c90c4a358c..c0e4862f84 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -97,7 +97,7 @@ $app_grid_fg_color: #fff;
   width: 5px;
   border-radius:5px;
   background-color: $osd_fg_color;
-  margin-bottom: 1px;
+  margin-bottom: 2px;
 }
 
 // Rename popup for app folders
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index e1a17e2f09..59482146c6 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -30,7 +30,7 @@ $dash_border_radius: $modal_radius + 8px;
     padding: $base_padding+2px;
   }
 
-  // Running app indicator (also shown in dash)
+  // Running app indicator (also shown in app grid)
   .app-well-app-running-dot {
     height: 5px;
     width: 5px;
diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss 
b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index 3fb80658ae..8335b05f65 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -1,37 +1,51 @@
 /* App Switcher */
 
+// same as dash
+$switcher_padding: $base_padding + 4px; // 10px
+$switcher_border_radius: $modal_radius + 8px;
+
+
+// the full screen container of the switcher
 .switcher-popup {
-  padding: 8px;
+  padding: 0;
   spacing: $base_spacing * 4;
 }
 
 // switcher onscreen panel
 .switcher-list {
   @extend %osd_panel;
+  padding: $switcher_padding;
+  border-radius: $switcher_border_radius;
+  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
+
+  // container for items in list
+  .switcher-list-item-container {
+    spacing: $base_spacing * 2;
+  }
 
+  // each item in the list
   .item-box {
-    padding: 8px;
-    border-radius: $base_border_radius + 1px;
-    border: 1px solid transparent;
+    @extend %icon_tile;
 
     &:outlined {
       background-color: transparentize($osd_fg_color, 0.7);
     }
 
+    &:hover,
     &:selected {
-      background-color: transparentize($osd_fg_color, 0.7);
-      color: $osd_fg_color;
+      background-color: transparentize($osd_fg_color, .9);
     }
-  }
 
-  // window thumbnails
-  .thumbnail-box {
-    padding: 2px;
-    spacing: $base_spacing;
-  }
+    &:focus {
+      background-color: transparentize($osd_fg_color, .7);
+      // border-color: $selected_bg_color;
+    }
 
-  .thumbnail {
-    width: 256px;
+    &:focus,
+    &:active,
+    &:checked {
+      background-color: transparentize(darken($osd_bg_color, 10%), .5);
+    }
   }
 
   .separator {
@@ -39,15 +53,26 @@
     background: $borders_color;
   }
 
-  .switcher-list-item-container {
-    spacing: $base_spacing * 2;
+  // container of thumbnails
+  .thumbnail-box {
+    padding: 2px;
+    spacing: $base_spacing;
+  }
+
+  // window thumbnail itself
+  .thumbnail {
+    width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js
+    border-radius:$base_border_radius;
   }
 }
 
+// arrow if app has multiple windows
 .switcher-arrow {
-  border-color: $osd_fg_color;
-  color: $osd_fg_color;
+  border-color: transparentize($osd_fg_color, 0.2);
+  color: transparentize($osd_fg_color, 0.2);
+
   &:highlighted {
+    border-color: $osd_fg_color;
     color: $osd_fg_color;
   }
 }