theme: Papercut fixes from 42 refresh

- simplified drawing functions
- refactored button drawing
- dropped arrow from all popovers
- cleaned out some legacy css
- fixed many of the issues in #4969

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2150>

24 files changed, 275 insertions, 304 deletions

diff --git a/_colors.scss b/_colors.scss
index 31698b2..c659acd 100644
--- a/_colors.scss
+++ b/_colors.scss
@@ -1,7 +1,7 @@
 // When color definition differs for dark and light variant,
 // it gets @if-ed depending on $variant
 
-$base_color: if($variant == 'light', #fff, lighten(desaturate(#2a2a2a, 20%), 2%));
+$base_color: if($variant == 'light', #fff, darken(desaturate(#2a2a2a, 20%), 2%));
 $bg_color: if($variant == 'light', #f6f5f4, #2a2a2a);
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
@@ -9,12 +9,11 @@ $selected_fg_color: #fff;
 $selected_bg_color: if($variant == 'light', #3584e4, #1c71d8);
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
 
-$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 4%));
+$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
 $borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%));
 
 $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%));
-$top_hilight: $borders_edge;
 
 $warning_color: if($variant == 'light', #e5a50a, #f5c211);;
 $error_color: if($variant == 'light', #e01b24, #c01c28);
diff --git a/_common.scss b/_common.scss
index 4ad7b7c..a782d8f 100644
--- a/_common.scss
+++ b/_common.scss
@@ -89,7 +89,7 @@ stage {
 }
 
 // icon tiles
-%icon_tile {
+%tile {
   border-radius: $base_border_radius * 2; // 16px
   padding: $base_padding;
   border: 2px solid transparent;
@@ -103,6 +103,7 @@ stage {
   border-style: solid;
   border-width: 1px;
   min-height: 22px;
+  font-weight: bold;
   padding: $base_padding * 0.5 $base_padding * 4;
 
   @include button(normal);
@@ -121,20 +122,17 @@ stage {
 }
 
 // buttons in dialogs/notifications
-// styled to have no shadow and be lighter in color
 $bubble_button_radius:$base_border_radius*1.25;
 
 %bubble_button {
   padding: $base_padding * 2;
-  border: 0 solid $bg_color !important; 
-  border-radius: 0;
-  border-right-width: 1px !important; 
-
-  @include button(normal, $bubble_buttons_color, $shadow: none);
-  &:insensitive { @include button(insensitive, $shadow: none); }
-  &:focus { @include button(focus, $shadow: none); }
-  &:hover { @include button(hover, $bubble_buttons_color, $shadow: none); }
-  &:active { @include button(active, $bubble_buttons_color, $shadow: none); }
+  font-weight: bold;
+
+  @include button(normal, $c:$bubble_buttons_color);
+  &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
+  &:focus { @include button(focus, $c:$bubble_buttons_color);}
+  &:hover { @include button(hover, $c:$bubble_buttons_color);}
+  &:active { @include button(active, $c:$bubble_buttons_color);}
   
   &:first-child:ltr {
     border-radius: 0 0 0 $bubble_button_radius; 
@@ -153,30 +151,8 @@ $bubble_button_radius:$base_border_radius*1.25;
     border-radius: 0 0 0 $bubble_button_radius;
     border-left-width: 0 !important;
   }
-}
-
-// styling for elements within popovers that look like notifications
-@mixin notification_bubble($flat: false) {
-  border-width: 0px;
-  border-style: solid;
-  border-radius: $base_border_radius;
-  margin: $base_margin;
-
-  @if $flat {
-    @include button(undecorated);
-  } @else {
-    @include button(normal);
-  }
-
-  &:focus {
-    @include button(focus);
-  }
-
-  &:hover {
-    @include button(hover);
-  }
 
-  &:active {
-    @include button(active);
+  &:first-child:last-child {
+    border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
   }
 }
diff --git a/_drawing.scss b/_drawing.scss
index 634fd4d..7e95384 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -40,7 +40,6 @@
   @if $t==normal {
     background-color: $base_color;
     border-color: $borders_color;
-
   }
   @if $t==focus {
     border-color: if($fc==$selected_bg_color,
@@ -56,72 +55,74 @@
   }
 }
 
-// buttons
-
-@function draw_border_color ($c) {
-  //
-  // colored buttons want the border form the base color
-  //
-  @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
-}
-
-@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
-//
-// calculate the color of text shadows
+// On-screen Keyboard
+@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
 //
-// $tc is the text color
-// $bg is the background color
+// Keyboard key drawing function
 //
-  $lbg: lightness($bg)/100%;
-  @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
-  @else { @return rgba(0,0,0,1-$lbg*0.8); }
-}
-
-@function draw_button_hilight_color($c) {
-//
-// calculate the right top highlight color for buttons
+// $t:    key type,
+// $c:    base key color for colored* types
+// $tc:   optional text color for colored* types
 //
-// $c: base color;
+// possible $t values:
+// normal, hover, active, insensitive, insensitive-active,
+// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
+// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
-  @if lightness($c)>90% { @return white; }
-  @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
-  @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
-  @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
-  @else { @return rgba(255,255,255, 0.1); }
-}
 
-@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
-//
-// helper function for the text emboss effect
-//
-// $tc is the optional text color, not the shadow color
-//
-// TODO: this functions needs a way to deal with special cases
-//
+  // normal key
+  @if $t==normal {
+    color: $tc;
+    background-color: lighten($c, 3%);
+  }
 
-  $shadow: draw_text_shadow_color($tc, $bg);
+  // focused key
+  @if $t==focus {
+    color: $tc;
+    background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
+    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+    &:hover {
+      background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+    }
+  }
 
-  @if lightness($tc)<50% {
-    text-shadow: 0 1px $shadow;
-    icon-shadow: 0 1px $shadow;
+  // hover key
+  @else if $t==hover {
+    color: $tc;
+    background-color: lighten($c, if($variant == 'light', 8%, 5%));
   }
-  @else {
-    text-shadow: 0 -1px $shadow;
-    icon-shadow: 0 -1px $shadow;
+
+  // active key
+  @else if $t==active {
+    color: $tc;
+    background-color: darken($c,3%);
+  }
+
+  // insensitive key
+  @else if $t==insensitive {
+    color: $insensitive_fg_color;
+    background-color: $insensitive_bg_color;
+  }
+
+  // reset
+  @else if $t==undecorated {
+    background-color: transparent;
+    background-image: none;
   }
 }
 
-@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
+
+// buttons
+// since buttons are all flat an borderless now the mixin is simpler
+
+@mixin button($t, $tc:$fg_color, $c:$bg_color) {
 //
 // Button drawing function
 //
 // $t:    button type,
-// $c:    base button color for colored* types
-// $tc:   optional text color for colored* types
-// $edge: set to none to not draw the bottom edge or specify a color to not
-//        use the default one
-// $shadow: set to none to not draw the drop shadow or specify a color to not
-//          use the default one
+// $c:    base button colors, derived from fg_color
+// $tc:    base button colors, derived from fg_color
 //
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
@@ -129,81 +130,107 @@
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
 
-  $hilight_color: draw_button_hilight_color($c);
-  $button_edge: if($edge == none, none, draw_widget_edge($edge));
-  $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
-  $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
-
   // normal button
   @if $t==normal {
     color: $tc;
-    background-color: lighten($c, 3%);
-    border-color: lighten($c, 3%);
-    @include draw_shadows($button_shadow);
-    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-    text-shadow: none;
-    icon-shadow: none;
+    background-color: mix($tc, $c, 5%);
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
-    background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
-    // border-color: lighten($c, 3%);
+    background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%);
+    // border-color: lighten($tc, 3%);
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
-    text-shadow: none;
-    icon-shadow: none;
+    &:hover {
+      background-color: mix(mix($tc, $c, 7%), $selected_bg_color, 90%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+    }
   }
 
   // hover button
   @else if $t==hover {
     color: $tc;
-    background-color: lighten($c, if($variant == 'light', 8%, 5%));
-    border-color: lighten($c, if($variant == 'light', 8%, 5%));
-    @include draw_shadows($button_shadow);
-    text-shadow: none;
-    icon-shadow: none;
+    background-color: mix($tc, $c, 7%);
   }
 
   // active button
   @else if $t==active {
     color: $tc;
-    background-color: darken($c,3%);
-    border-color: darken($c,3%);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: none;
+    background-color: mix($tc, $c, 2%);
   }
 
   // insensitive button
   @else if $t==insensitive {
-    color: $insensitive_fg_color;
-    border-color: $insensitive_bg_color;
-    background-color: $insensitive_bg_color;
-    box-shadow: none;
-    text-shadow: none;
-    icon-shadow: none;
+    color: transparentize($tc, 0.5);
+    background-color: transparentize($tc, .95);
   }
 
+  // default/suggested button
+  @else if $t==default {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+    &:focus {
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+    }
+    &:hover, &:focus { 
+      background-color: lighten($selected_bg_color, 5%);
+      color: lighten($selected_fg_color, 5%);
+    }
+    &:active {
+      background-color: darken($selected_bg_color, 7%);
+      color: darken($selected_fg_color, 7%);
+    }
+    &:insensitive {
+      @include button(insensitive);
+      background-color: transparentize($selected_bg_color, .5);
+      color: transparentize($selected_fg_color, .5);
+    }
+  }
   // reset
   @else if $t==undecorated {
-    border-color: transparent;
     background-color: transparent;
-    background-image: none;
-    @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
-    text-shadow: none;
-    icon-shadow: none;
+    background-color: none;
+  }
+}
+
+// tile
+@mixin tile($color) {
+  @extend %tile;
+  background-color: transparent;
+
+  &:hover,
+  &:selected:hover {
+    background-color: transparentize($color, .85);
+  }
+
+  &:focus:hover {
+    background-color: transparentize($color, .8);
+  }
+
+  &:selected,
+  &:focus {
+    background-color: transparentize($color, .9);
+  }
+
+  &:outlined,
+  &:checked,
+  &:active {
+    background-color: transparentize(darken($osd_bg_color, 10%), .5);
   }
 }
 
+
 // overview icons
+// mixin fo tiles in the overview
 @mixin overview_icon($color) {
   .overview-icon {
-    @extend %icon_tile;
+    @extend %tile;
     color: $color;
   }
 
   &:hover,
+  &:focus:hover,
   &:selected {
     .overview-icon {
       background-color: transparentize($color, .9);
@@ -212,23 +239,50 @@
 
   &:focus {
     .overview-icon {
-      background-color: transparentize($color, .7);
+      background-color: transparentize($color, .95);
       // border-color: $selected_bg_color;
     }
   }
 
   &:drop {
     .overview-icon {
-      border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
+      border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
       background-color: transparentize($selected_bg_color, .8);
     }
   }
 
-  &:focus,
   &:active,
+  &:focus:active,
   &:checked {
     .overview-icon {
       background-color: transparentize(darken($osd_bg_color, 10%), .5);
     }
   }
 }
+
+
+// styling for elements within popovers that look like notifications
+@mixin card($flat: false) {
+  border-radius: $base_border_radius;
+  margin: $base_margin;
+  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+
+  @if $flat {
+    @include button(undecorated);
+    box-shadow: none !important;
+  } @else {
+    @include button(normal);
+  }
+
+  &:focus {
+    @include button(focus);
+  }
+
+  &:hover {
+    @include button(hover);
+  }
+
+  &:active {
+    @include button(active);
+  }
+}
diff --git a/_high-contrast-colors.scss b/_high-contrast-colors.scss
index 0b615f2..54f6853 100644
--- a/_high-contrast-colors.scss
+++ b/_high-contrast-colors.scss
@@ -1,7 +1,6 @@
 // When color definition differs for dark and light variant,
 // it gets @if ed depending on $variant
 
-
 $base_color: #222;
 $bg_color: #000;
 $fg_color: #fff;
@@ -13,7 +12,6 @@ $borders_color: darken($bg_color,12%);
 $borders_edge: transparentize($fg_color, 0.9);
 $link_color: lighten($selected_bg_color,20%);
 $link_visited_color: lighten($selected_bg_color,10%);
-$top_hilight: $borders_edge;
 
 $warning_color: #f57900;
 $error_color: #cc0000;
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index 0bc5c74..9f44473 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -21,7 +21,7 @@ $app_grid_fg_color: #fff;
 // Icon tiles in the app grid
 .app-well-app,
 %app_well_app {
-  @include overview-icon($app_grid_fg_color);
+  @include overview_icon($app_grid_fg_color);
 
   .overview-icon.overview-icon-with-label {
     padding: 10px 8px 5px 8px;
@@ -35,7 +35,7 @@ $app_grid_fg_color: #fff;
 /* App Folders */
 .app-well-app.app-folder {
   background-color: $dash_background_color;
-  border-radius: $base_border_radius * 2; // same as %icon_tile
+  border-radius: $base_border_radius * 2; // same as %tile
 }
 
 // expanded folder
@@ -60,7 +60,7 @@ $app_grid_fg_color: #fff;
     & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
 
     & .edit-folder-button {
-      @include button(undecorated, $shadow: none);
+      @include button(undecorated);
       padding: 0;
       width: 36px;
       height: 36px;
diff --git a/widgets/_calendar.scss b/widgets/_calendar.scss
index 5ce908a..fee76b0 100644
--- a/widgets/_calendar.scss
+++ b/widgets/_calendar.scss
@@ -25,7 +25,7 @@
 }
 
 .events-section-title {
-  @include notification_bubble($flat: true);
+  @include card($flat: true);
   color: $insensitive_fg_color;
   font-weight: bold;
   padding: .4em;
@@ -33,7 +33,7 @@
 
 /* today button (the date) */
 .datemenu-today-button {
-  @include notification_bubble($flat: true);
+  @include card($flat: true);
   padding: $base_padding * 1.5;
 
   // weekday label
@@ -52,7 +52,7 @@
 
 /* Calendar */
 .calendar {
-  @include notification_bubble;
+  @include card;
   padding: $base_padding;
 
   // month
@@ -172,7 +172,7 @@
 
 /* Events */
 .events-button {
-  @include notification_bubble;
+  @include card;
   padding: $base_padding * 2;
 
   .events-box {
@@ -198,7 +198,7 @@
 
 /* World clocks */
 .world-clocks-button {
-  @include notification_bubble;
+  @include card;
   padding: $base_padding * 2;
 
   .world-clocks-grid {
@@ -240,7 +240,7 @@
 
 /* Weather */
 .weather-button {
-  @include notification_bubble;
+  @include card;
   padding: $base_padding * 2;
 
   .weather-box {
diff --git a/widgets/_check-box.scss b/widgets/_check-box.scss
index d2dabf2..1480ade 100644
--- a/widgets/_check-box.scss
+++ b/widgets/_check-box.scss
@@ -15,4 +15,4 @@ $check_width: 24px;
   &:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; }
   &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
   &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
-}
\ No newline at end of file
+}
diff --git a/widgets/_dash.scss b/widgets/_dash.scss
index 014844d..4a8a1f9 100644
--- a/widgets/_dash.scss
+++ b/widgets/_dash.scss
@@ -36,6 +36,7 @@ $dash_border_radius: $modal_radius + 8px;
     width: 5px;
     border-radius:5px;
     background-color: $osd_fg_color;
+    margin-top: 2px;
     margin-bottom: 12px;
   }
 }
@@ -53,7 +54,6 @@ $dash_border_radius: $modal_radius + 8px;
 
   // each app item on the dash
   .app-well-app {
-    padding:0;
     margin: 2px;
   }
 
@@ -61,7 +61,6 @@ $dash_border_radius: $modal_radius + 8px;
   .show-apps {
     @include overview_icon($osd_fg_color);
     margin: 2px;
-    padding: 0;
   }
 }
 
@@ -69,7 +68,7 @@ $dash_border_radius: $modal_radius + 8px;
 .dash-separator {
   width: 1px;
   margin: 0 $base_margin*2;
-  background-color: transparentize($borders_color,0.5);
+  background-color: transparentize($borders_color,0.2);
 }
 
 // OSD Tooltip
diff --git a/widgets/_dialogs.scss b/widgets/_dialogs.scss
index d23bc04..add8f5d 100644
--- a/widgets/_dialogs.scss
+++ b/widgets/_dialogs.scss
@@ -144,8 +144,7 @@
 }
 
 .audio-selection-device {
-  border: 1px solid $bubble_borders_color;
-  border-radius: 12px;
+  border-radius: $base_border_radius*2;
   &:hover,&:focus { background-color: $hover_bg_color; }
   &:active { 
     background-color: $selected_bg_color;
diff --git a/widgets/_ibus-popup.scss b/widgets/_ibus-popup.scss
index eead703..6f82023 100644
--- a/widgets/_ibus-popup.scss
+++ b/widgets/_ibus-popup.scss
@@ -32,4 +32,4 @@
 
 .candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
 .candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;  }
-.candidate-page-button-icon { icon-size: 1em; }
\ No newline at end of file
+.candidate-page-button-icon { icon-size: 1em; }
diff --git a/widgets/_keyboard.scss b/widgets/_keyboard.scss
index 4a5dbc6..43d5af8 100644
--- a/widgets/_keyboard.scss
+++ b/widgets/_keyboard.scss
@@ -32,12 +32,6 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 // the keys
 .keyboard-key {
 
-  @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
-
-  &:focus { @include button(focus);}
-  &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
-  &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
-
   @include fontsize($base_font_size + 5);
   font-weight: bold;
   min-height: $key_size;
@@ -45,6 +39,13 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   border-width: 1px;
   border-style: solid;
   border-radius: $key_border_radius;
+  box-shadow: 0 1px 0 0 $shadow_color;
+
+  @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
+
+  &:focus { @include keyboard_key(focus);}
+  &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+  &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
 
   &:grayed { //FIXMEy
     background-color: darken($bg_color, 3%);
@@ -54,17 +55,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
   // non-character keys
   &.default-key {
-    @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
-    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);}
+    @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
+    &:hover, &:checked {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
+    &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
     border-radius: $key_border_radius;
   }
 
   // enter key is suggested-action
   &.enter-key {
-    @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), $tc:$selected_fg_color);}
-    &:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);}
+    @include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
+    &:hover, &:checked { @include keyboard_key(hover, lighten($selected_bg_color, 3%), $selected_fg_color);}
+    &:active {@include keyboard_key(active, darken($selected_bg_color, 2%), $selected_fg_color);}
     border-radius: $key_border_radius;
     color: $osd_fg_color;
   }
@@ -97,11 +98,11 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   padding: $base_padding;
 
   .keyboard-key {
-    @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
+    @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
 
-    &:focus { @include button(focus);}
-    &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
+    &:focus { @include keyboard_key(focus);}
+    &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+    &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
 
     border-radius:$key_border_radius;
   }
@@ -138,10 +139,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
     border-radius: $base_border_radius - 2px;
     padding: $base_padding $base_padding*3;
 
-    @include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
+    @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
 
-    &:focus { @include button(focus);}
-    &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
+    &:focus { @include keyboard_key(focus);}
+    &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+    &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
   }
 }
diff --git a/widgets/_login-dialog.scss b/widgets/_login-dialog.scss
index f2d8296..6d16ac2 100644
--- a/widgets/_login-dialog.scss
+++ b/widgets/_login-dialog.scss
@@ -13,14 +13,6 @@
 
   $_gdm_bg: $system_bg_color;
 
-  StEntry {
-    @if $variant=='dark' {
-      $_gdm_entry_bg: darken($system_bg_color, 3%);
-      background-color: $_gdm_entry_bg;
-      color: $fg_color;
-    }
-  }
-
   .modal-dialog-button-box { spacing: 3px; }
   .modal-dialog-button {
     padding: 4px 18px;
@@ -47,26 +39,7 @@
       color: transparentize($osd_fg_color, 0.3);
     }
     &:default {
-      @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-      border-color: $selected_bg_color;
-      &:hover, &:focus { 
-        @include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
-        $_def_hover_c: lighten($selected_bg_color, 5%);
-        background-color: $_def_hover_c;
-        border-color: $_def_hover_c;
-      }
-      &:active {
-        @include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
-        $_def_active_c: darken($selected_bg_color, 5%);
-        background-color: $_def_active_c;
-        border-color: $_def_active_c;
-      }
-      &:insensitive {
-        @include button(insensitive);
-        border-color: darken($selected_bg_color, 10%);
-        background-color: darken($selected_bg_color, 10%);
-        color: transparentize($selected_fg_color, 0.3);
-      }
+      @include button(default);
     }
   }
 
@@ -198,3 +171,34 @@
   @include fontsize($base_font_size + 1);
   padding-top: 1em;
 }
+
+.login-dialog {
+  StEntry {
+    @if $variant=='dark' {
+      $_gdm_entry_bg: darken($system_bg_color, 3%);
+      background-color: $_gdm_entry_bg;
+      color: $fg_color;
+    }
+  }
+}
+
+// Custom styling for unlock entry
+.unlock-dialog {
+  StEntry {
+    &:focus { 
+      box-shadow:none;
+      background-color: transparentize($fg_color, 0.9);
+    }
+    &:insensitive { 
+      color: transparentize($fg_color, 0.5);
+      background-color: transparentize($fg_color, 0.95);
+    }
+  }
+
+  .cancel-button,
+  .switch-user-button,
+  .login-dialog-session-list-button {
+    border-color: transparent;
+    background-color: transparentize($fg_color, 0.9);
+  }
+}
diff --git a/widgets/_looking-glass.scss b/widgets/_looking-glass.scss
index 6cda270..e52e263 100644
--- a/widgets/_looking-glass.scss
+++ b/widgets/_looking-glass.scss
@@ -100,7 +100,7 @@
 
 .lg-extension {
   padding: $base_padding*2;
-  @include notification_bubble;
+  @include card;
 }
 
 .lg-extension-name {
@@ -132,4 +132,4 @@
   font-size: 120%;
   font-weight: bold;
   padding: $base_padding;
-}
\ No newline at end of file
+}
diff --git a/widgets/_message-list.scss b/widgets/_message-list.scss
index b99004d..3cb2d53 100644
--- a/widgets/_message-list.scss
+++ b/widgets/_message-list.scss
@@ -61,7 +61,7 @@
 
 // message bubbles
 .message {
-  @include notification_bubble;
+  @include card;
 
   // icon container
   .message-icon-bin {
@@ -148,7 +148,7 @@
   border-radius: $base_border_radius;
   color: $fg_color;
 
-  // colors are lightened since the media controls are in a notification_bubble
+  // colors are lightened since the media controls are in a card
   &:hover {
     background-color: lighten($hover_bg_color, 5%);
     color: $fg_color;
diff --git a/widgets/_network-dialog.scss b/widgets/_network-dialog.scss
index 13e5c34..51394ed 100644
--- a/widgets/_network-dialog.scss
+++ b/widgets/_network-dialog.scss
@@ -76,4 +76,4 @@
 
 // no networks
 .no-networks-label { color: $insensitive_fg_color; }
-.no-networks-box { spacing: $base_padding; }
\ No newline at end of file
+.no-networks-box { spacing: $base_padding; }
diff --git a/widgets/_osd.scss b/widgets/_osd.scss
index f85124c..87f376d 100644
--- a/widgets/_osd.scss
+++ b/widgets/_osd.scss
@@ -42,4 +42,4 @@ $osd_levelbar_height:8px;
 
 .resize-popup {
   @extend %osd_panel;
-}
\ No newline at end of file
+}
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index 3ddca4f..d0bdfa9 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -2,12 +2,14 @@
 
 // the popover itself
 .popup-menu-boxpointer {
+  // override popover styles for panel menus so
+  // we can draw a box shadow and no arrow
   -arrow-border-radius: $modal_radius;
-  -arrow-background-color: $bg_color;
-  -arrow-border-color: $borders_color;
-  -arrow-border-width: 1px;
-  -arrow-base: 24px;
-  -arrow-rise: 12px; 
+  -arrow-background-color: transparent;
+  -arrow-border-color: transparent;
+  -arrow-border-width: 0;
+  -arrow-base: 0;
+  -arrow-rise: $base_margin; // use this as top margin
   -arrow-box-shadow: none; // dreaming bugzilla #689995
   margin: $base_margin; // used as distance from the screen edge
 }
@@ -20,25 +22,10 @@
   //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
   &.panel-menu {
     -boxpointer-gap: $base_margin+2px; // distance from the panel
-    
-    // override popover styles for panel menus so
-    // we can draw a box shadow and no arrow
-    -arrow-border-radius: $modal_radius;
-    -arrow-background-color: transparent;
-    -arrow-border-color: transparent;
-    -arrow-border-width: 0;
-    -arrow-base: 0;
-    -arrow-rise: $base_margin; // use this as top margin
-    -arrow-box-shadow: none; // dreaming bugzilla #689995
-    
     margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
 
     // style the menu content instead
     .popup-menu-content {
-      border-radius: $modal_radius;
-      border: 1px solid $borders_color; 
-      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
-      background-color: $bg_color;
       padding: $base_padding*1.5;
     }
 
@@ -49,6 +36,10 @@
 // popover content;
 .popup-menu-content {
   padding: $base_padding;
+  border-radius: $modal_radius;
+  border: 1px solid $borders_edge; 
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  background-color: $bg_color;
 }
 
 // menu items
@@ -59,8 +50,8 @@
   border-radius: $base_border_radius;
   transition: 0.2s all ease;
 
-  &:ltr { padding-right:1.75em; padding-left: 0; }
-  &:rtl { padding-right: 0; padding-left:1.75em; }
+  &:ltr { padding-right:$base_padding; padding-left: 0; }
+  &:rtl { padding-right: 0; padding-left:$base_padding; }
 
   &:hover {
     background-color: $hover_bg_color;
@@ -68,14 +59,12 @@
 
   &:checked {
     background-color: $hover_bg_color;
-    font-weight: bold;
-
     margin-bottom: 0;
     box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
     border-radius: $base_border_radius $base_border_radius 0 0;
     
     &:hover {
-      background-color: darken($hover_bg_color, 4%);
+      background-color: lighten($hover_bg_color, 5%);
     }
   }
 
@@ -85,8 +74,8 @@
   }
 
   &:active { 
-    background-color: $active_bg_color;
-    color: $active_fg_color;
+    background-color: lighten($active_bg_color,3%);
+    color: lighten($active_fg_color,3%);
   }
 
   &:insensitive { color: transparentize($fg_color,0.5);}
@@ -106,8 +95,6 @@
 // symbolic icons in popover
 .popup-menu-arrow,
 .popup-menu-icon { 
-  margin: 0;
-  padding:0;
   icon-size: 16px !important;
 }
 
@@ -117,32 +104,27 @@
 
 // popover submenus
 .popup-sub-menu {
-  background-color: $hover_bg_color;
   border:none;
+  background-color: $hover_bg_color;
   border-radius: 0 0 $base_border_radius $base_border_radius;
-  padding: 0;
-  margin-top: 0;
-  &:active {
-    background-color: transparent;
-  }
-  
+
   .popup-menu-ornament {
     min-width: 14px !important;
   }
 
   .popup-menu-item {
-    margin: 0;
     border-radius: 0;
+    margin: 0;
     padding: $base_padding*1.5 $base_padding*2;
 
-    &:last-child:hover{
+    &:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
   }
 
   .popup-menu-section {
     .popup-menu-item:last-child:hover { border-radius: 0 }
-    &:last-child .popup-menu-item:last-child:hover {
+    &:last-child .popup-menu-item:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
   }
@@ -160,16 +142,11 @@
 
 // separator
 .popup-separator-menu-item {
-  padding: 0;
-
-  &:ltr { padding-right:$base_padding; padding-left: 0; }
-  &:rtl { padding-right: 0; padding-left:$base_padding; }
-
+  padding:0;
+  margin: 4px 0;
 
   .popup-separator-menu-item-separator {
     height: 1px; //not really the whole box
-    margin: 0 !important;
-    padding: 0 !important;
     background-color: $borders_color;
   }
 
@@ -199,7 +176,7 @@
   min-width: 22em;
 
   // this is unneeded in at the top-level this menu, hide it
-  .popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;}
+  .popup-menu-ornament {width:0;padding:0;margin:0;}
 
   .popup-menu-item {
     &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
@@ -213,8 +190,8 @@
     -st-icon-style: symbolic;
   }
 
+  // account for icons in submenus with padding
   .popup-sub-menu .popup-menu-item > :first-child {
-    // account for icons in submenus with padding
     &:ltr {
       padding-left: 0;
       margin-left: $base_icon_size;
diff --git a/widgets/_screen-shield.scss b/widgets/_screen-shield.scss
index e289fdb..fec3697 100644
--- a/widgets/_screen-shield.scss
+++ b/widgets/_screen-shield.scss
@@ -25,10 +25,11 @@
 }
 
 .unlock-dialog-notifications-container {
-  margin: 12px 0;
+  margin: 12px;
   spacing: 6px;
   width: 23em;
   background-color: transparent;
+
   .summary-notification-stack-scrollview {
     padding-top: 0;
     padding-bottom: 0;
@@ -36,39 +37,36 @@
 
   .notification,
   .unlock-dialog-notification-source {
-    padding: 12px 6px;
+    padding: 12px 16px;
     border: none;
-    background-color: transparentize($osd_bg_color,0.7);
+    background-color: transparentize($osd_fg_color,0.9);
     color: $osd_fg_color;
     border-radius: $modal_radius;
 
-    &.critical { background-color: transparentize($osd_bg_color,0.1) }
+    &.critical { background-color: transparentize($osd_fg_color,0.8) }
   }
 }
 
 .unlock-dialog-notification-label {
-  padding: 0px 0px 0px 12px;
+  padding: 0 0 0 12px;
 }
 
 .unlock-dialog-notification-count-text {
-  weight: bold;
-  padding: 0 6px;
-  color: $osd_bg_color;
-  background-color: transparentize($osd_fg_color, 0.7);
+  font-weight: bold;
+  padding: 0 12px;
+  color: $osd_fg_color;
+  background-color: transparentize($osd_fg_color, 0.9);
   border-radius: 99px;
-  margin-right: 12px;
-
 }
 
 .screen-shield-background { //just the shadow, really
   background: black;
-  box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
 }
 
 #lockDialogGroup {
   background-color: $system_bg_color;
 }
-
 #unlockDialogNotifications {
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($bg_color,0.7);
diff --git a/widgets/_scrollbars.scss b/widgets/_scrollbars.scss
index 5d50994..c1de7ad 100644
--- a/widgets/_scrollbars.scss
+++ b/widgets/_scrollbars.scss
@@ -26,4 +26,4 @@ StScrollBar {
     &:hover { background-color: mix($fg_color, $bg_color, 80%); }
     &:active { background-color: $selected_bg_color; }
   }
-}
\ No newline at end of file
+}
diff --git a/widgets/_search-results.scss b/widgets/_search-results.scss
index 787311a..c377ba6 100644
--- a/widgets/_search-results.scss
+++ b/widgets/_search-results.scss
@@ -32,23 +32,9 @@
 }
 
 %search_section_content_item {
-  @extend %icon_tile;
+  @include tile($osd_fg_color);
 
-  border-radius: $base_border_radius;
-
-  color: $osd_fg_color;
-
-  &:focus,
-  &:hover,
-  &:selected {
-    background-color: transparentize($osd_fg_color, .9);
-    transition-duration: 200ms;
-  }
-
-  &:active,
-  &:checked {
-    background-color: transparentize(darken($osd_bg_color, 10%), .1);
-  }
+  border-radius: $base_border_radius !important;
 }
 
 // "no results" text
diff --git a/widgets/_slider.scss b/widgets/_slider.scss
index 8f6c49e..04de5a2 100644
--- a/widgets/_slider.scss
+++ b/widgets/_slider.scss
@@ -25,4 +25,4 @@ $slider_size: 16px;
   color: $fg_color;
   &:hover { color: $hover_bg_color; }
   &:active { color: $active_bg_color; }
-}
\ No newline at end of file
+}
diff --git a/widgets/_switcher-popup.scss b/widgets/_switcher-popup.scss
index 8335b05..b3144a2 100644
--- a/widgets/_switcher-popup.scss
+++ b/widgets/_switcher-popup.scss
@@ -25,27 +25,7 @@ $switcher_border_radius: $modal_radius + 8px;
 
   // each item in the list
   .item-box {
-    @extend %icon_tile;
-
-    &:outlined {
-      background-color: transparentize($osd_fg_color, 0.7);
-    }
-
-    &:hover,
-    &:selected {
-      background-color: transparentize($osd_fg_color, .9);
-    }
-
-    &:focus {
-      background-color: transparentize($osd_fg_color, .7);
-      // border-color: $selected_bg_color;
-    }
-
-    &:focus,
-    &:active,
-    &:checked {
-      background-color: transparentize(darken($osd_bg_color, 10%), .5);
-    }
+    @include tile($osd_fg_color);
   }
 
   .separator {
diff --git a/widgets/_switches.scss b/widgets/_switches.scss
index 3f7bdc5..b6d8fe8 100644
--- a/widgets/_switches.scss
+++ b/widgets/_switches.scss
@@ -13,4 +13,4 @@ $switch_width: 48px;
   &:checked { 
     background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
   }
-}
\ No newline at end of file
+}
diff --git a/widgets/_tiled-previews.scss b/widgets/_tiled-previews.scss
index a9d000f..2d8691d 100644
--- a/widgets/_tiled-previews.scss
+++ b/widgets/_tiled-previews.scss
@@ -16,4 +16,4 @@ $tile_corner_radius: $base_border_radius + 1px;
 
 .tile-preview-left.tile-preview-right.on-primary {
   border-radius: $tile_corner_radius $tile_corner_radius 0 0;
-}
\ No newline at end of file
+}