[gnome-shell-sass] theme: Stylesheet papercuts and other visual fixes

From: Florian Müllner <fmuellner src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell-sass] theme: Stylesheet papercuts and other visual fixes
Date: Mon, 14 Feb 2022 22:47:22 +0000 (UTC)
commit f0bbabd76b9631cbaa385d41cc26defc7d4b12ea
Author: Sam Hewitt <sam snwh org>
Date:   Mon Feb 7 14:52:40 2022 -0330

    theme: Stylesheet papercuts and other visual fixes
    
    - remove tiled preview corners; merge with misc.scss
    - sync general label styles from libadwaita
    - use variables in ibus css
    - remove redundant spacing variable as its equal to padding
    - use more global styles in screenshot css
    - tidy up entry styles
    - cleanup the networks dialog stylesheet
    - make colours less dark
    - cleanup the popover stylesheet
    - cleanup the mixins for tiles and overview icons
    - adjust the button style definitions on checked style
    - add osd button definitions
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2172>

 _colors.scss                       |   6 +-
 _common.scss                       | 123 ++++++++++++++++++++-------
 _drawing.scss                      | 166 +++++++++++++++++++++----------------
 _widgets.scss                      |   1 -
 widgets/_app-grid.scss             |  48 +++++------
 widgets/_buttons.scss              |   1 +
 widgets/_calendar.scss             | 111 ++++++++++---------------
 widgets/_dash.scss                 |  37 +++------
 widgets/_dialogs.scss              |  18 ++--
 widgets/_entries.scss              |   8 +-
 widgets/_ibus-popup.scss           |  29 +++----
 widgets/_keyboard.scss             |  19 +++--
 widgets/_login-dialog.scss         |  10 +--
 widgets/_looking-glass.scss        |  27 +++---
 widgets/_message-list.scss         |  23 ++---
 widgets/_misc.scss                 |   8 +-
 widgets/_network-dialog.scss       |  65 ++++-----------
 widgets/_notifications.scss        |   3 -
 widgets/_osd.scss                  |  25 ++++--
 widgets/_overview.scss             |   2 +-
 widgets/_panel.scss                |   8 +-
 widgets/_popovers.scss             | 141 +++++++++++++++----------------
 widgets/_screen-shield.scss        |   2 +-
 widgets/_screenshot.scss           |  95 +++++++--------------
 widgets/_search-entry.scss         |  26 ++----
 widgets/_search-results.scss       |  18 ++--
 widgets/_slider.scss               |   6 --
 widgets/_switcher-popup.scss       |   9 +-
 widgets/_tiled-previews.scss       |  19 -----
 widgets/_window-picker.scss        |  12 +--
 widgets/_workspace-switcher.scss   |   7 +-
 widgets/_workspace-thumbnails.scss |   2 +-
 32 files changed, 510 insertions(+), 565 deletions(-)
---
diff --git a/_colors.scss b/_colors.scss
index c659acd..55012a7 100644
--- a/_colors.scss
+++ b/_colors.scss
@@ -1,8 +1,8 @@
 // When color definition differs for dark and light variant,
 // it gets @if-ed depending on $variant
 
-$base_color: if($variant == 'light', #fff, darken(desaturate(#2a2a2a, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, #2a2a2a);
+$base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
+$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
 $selected_fg_color: #fff;
@@ -30,7 +30,7 @@ $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));
 
 // overview background color
-$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%)); 
+$system_bg_color: $base_color;
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/_common.scss b/_common.scss
index ff63061..f86de20 100644
--- a/_common.scss
+++ b/_common.scss
@@ -28,7 +28,6 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
 // padding, margin and spacing
 $base_padding: 6px;
 $base_margin: 4px;
-$base_spacing: 6px;
 
 // border radii
 $base_border_radius: 8px;
@@ -36,18 +35,17 @@ $base_border_radius: 8px;
 // radii of things that display over other things, e.g. popovers
 $modal_radius: $base_border_radius*2; // 24px
 
-// non-standard colors
-$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
-// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-
 // derived hover colors
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
 
 // derived active colors
-$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%));
-$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
+$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
+$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
+
+// derived checked colors
+$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
 
 // fonts
 $base_font_size: 11;
@@ -55,6 +53,7 @@ $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.
 
 // icons
 $base_icon_size: 1.09em;
+$large_icon_size: $base_icon_size*2; // 32px
 // $base_icon_size: 16px;
 
 // Stage
@@ -65,13 +64,6 @@ stage {
 
 /* Common Stylings */
 
-// Text
-%status_text {
-  font-size: 2em;
-  font-weight: bold;
-  color: $osd_fg_color;
-}
-
 // osd panels
 %osd_panel {
   color: $osd_fg_color;
@@ -97,42 +89,47 @@ stage {
   text-align: center;
 }
 
-// button styling
+// dialogs
+%bubble_panel {
+  color: $fg_color;
+  background-color: $bg_color;
+  border-radius: $base_border_radius*1.25 + 1px;
+  border: 1px solid $borders_edge;
+}
+
+// normal button styling
 %button {
   border-radius: $base_border_radius - 2px; // 6px
   border-style: solid;
   border-width: 1px;
-  min-height: 22px;
   font-weight: bold;
-  padding: $base_padding * 0.5 $base_padding * 4;
+  padding: $base_padding*.5 $base_padding*4;
 
   @include button(normal);
   &:focus { @include button(focus);}
   &:hover { @include button(hover);}
   &:insensitive { @include button(insensitive);}
-  &:active, &:checked { @include button(active);}
-}
-
-// dialogs
-%bubble_panel {
-  color: $fg_color;
-  background-color: $bg_color;
-  border-radius: $base_border_radius*1.25 + 1px;
-  border: 1px solid $borders_edge;
+  &:active { @include button(active);}
+  &:checked { @include button(checked);}
 }
 
 // buttons in dialogs/notifications
+// lighter in color and have a greater radius
+
 $bubble_button_radius:$base_border_radius*1.25;
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
 
 %bubble_button {
   padding: $base_padding * 2;
-  font-weight: bold;
+  font-weight: bold !important;
+  margin-right: 1px;
 
   @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);}
+  &:checked { @include button(checked, $c:$bubble_buttons_color);}
   
   &:first-child:ltr {
     border-radius: 0 0 0 $bubble_button_radius; 
@@ -140,7 +137,7 @@ $bubble_button_radius:$base_border_radius*1.25;
 
   &:last-child:ltr {
     border-radius: 0 0 $bubble_button_radius 0;
-    border-right-width: 0 !important;
+    margin-right: 0 !important;
   }
 
   &:first-child:rtl {
@@ -149,10 +146,72 @@ $bubble_button_radius:$base_border_radius*1.25;
 
   &:last-child:rtl {
     border-radius: 0 0 0 $bubble_button_radius;
-    border-left-width: 0 !important;
+    margin-right: 0 !important;
   }
 
   &:first-child:last-child {
     border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
+    margin-right: 0 !important;
   }
 }
+
+// buttons on OSD elements
+// that are undecorated by default and use OSD colors
+%osd_button {
+  @include button(undecorated);
+  &:insensitive { @include button(undecorated, $c:$osd_bg_color);}
+  &:focus { @include button(focus, $c:$osd_bg_color);}
+  &:hover { @include button(hover, $c:$osd_bg_color);}
+  &:active { @include button(active, $c:$osd_bg_color);}
+  &:outlined,&:checked { @include button(checked, $c:$osd_bg_color);}
+}
+
+/* General Typography */
+
+%large_title {
+  font-weight: 300;
+  @include fontsize(24);
+}
+
+%title_1 {
+  font-weight: 800;
+  @include fontsize(20);
+}
+
+%title_2 {
+  font-weight: 800;
+  @include fontsize(15);
+}
+
+%title_3 {
+  font-weight: 700;
+  @include fontsize(15);
+}
+
+%title_4 {
+  font-weight: 700;
+  @include fontsize(13);
+}
+
+%heading {
+  font-weight: 700;
+  @include fontsize(11);
+}
+
+%caption_heading {
+  font-weight: 700;
+  @include fontsize(9);
+}
+
+%caption {
+  font-weight: 400;
+  @include fontsize(9);
+}
+
+%smaller {
+  font-weight: 400;
+  @include fontsize(8);
+}
+
+%monospace {font-family: monospace;}
+%numeric { font-feature-settings: "tnum";}
diff --git a/_drawing.scss b/_drawing.scss
index 7e95384..10c1c3f 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -25,33 +25,40 @@
 
 // entries
 
-@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
+@mixin entry($t, $fc:$selected_bg_color) {
 //
 // Entries drawing function
 //
 // $t: entry type
 // $fc: focus color
-// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
 //
 // possible $t values:
 // normal, focus, insensitive
 //
 
   @if $t==normal {
-    background-color: $base_color;
-    border-color: $borders_color;
+    background-color: lighten($bg_color, 5%);
+    color: transparentize($fg_color,0.3);
+    border: 2px solid lighten($bg_color, 5%);
   }
+
   @if $t==focus {
-    border-color: if($fc==$selected_bg_color,
-              $selected_borders_color,
-              darken($fc,35%));
-    box-shadow: inset 0 0 0 2px $fc;
+    background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
+    border-color: $fc;
+    color: $fg_color;
+    &:hover {}
+  }
+
+  @if $t==hover {
+    background-color:lighten($hover_bg_color, 5%);
+    border-color:lighten($hover_bg_color, 5%);
+    color: transparentize($fg_color,0.3);
   }
-  @if $t==hover { }
+
   @if $t==insensitive {
+    background-color:lighten($insensitive_bg_color, 5%);
+    border-color: lighten($insensitive_bg_color, 5%);
     color: $insensitive_fg_color;
-    border-color: $insensitive_bg_color;
-    box-shadow: none;
   }
 }
 
@@ -85,18 +92,28 @@
       background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
       box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
     }
+    &:active {
+      background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+    }
   }
 
   // hover key
   @else if $t==hover {
     color: $tc;
-    background-color: lighten($c, if($variant == 'light', 8%, 5%));
+    background-color: lighten($c, 7%);
   }
 
   // active key
   @else if $t==active {
     color: $tc;
-    background-color: darken($c,3%);
+    background-color: lighten($c, 10%);
+  }
+
+  // checked key
+  @else if $t==checked {
+    color: $tc;
+    background-color: lighten($c, 15%);
   }
 
   // insensitive key
@@ -117,6 +134,8 @@
 // since buttons are all flat an borderless now the mixin is simpler
 
 @mixin button($t, $tc:$fg_color, $c:$bg_color) {
+
+$button_bg_color: mix($tc, $c, 5%);
 //
 // Button drawing function
 //
@@ -133,17 +152,20 @@
   // normal button
   @if $t==normal {
     color: $tc;
-    background-color: mix($tc, $c, 5%);
+    background-color: $button_bg_color;
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
-    background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%);
-    // border-color: lighten($tc, 3%);
+    background-color: mix($button_bg_color, $selected_bg_color, 90%);
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
     &:hover {
-      background-color: mix(mix($tc, $c, 7%), $selected_bg_color, 90%);
+      background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+    }
+    &:active {
+      background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
       box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
     }
   }
@@ -151,13 +173,21 @@
   // hover button
   @else if $t==hover {
     color: $tc;
-    background-color: mix($tc, $c, 7%);
+    background-color: lighten($button_bg_color, 3%);
   }
 
   // active button
   @else if $t==active {
     color: $tc;
-    background-color: mix($tc, $c, 2%);
+    background-color:  lighten($button_bg_color, 6%);
+  }
+
+  // checked button
+  @else if $t==checked {
+    color: $tc;
+    background-color: lighten($button_bg_color, 9%);
+    &:hover { background-color: lighten($button_bg_color, 12%);}
+    &:active { background-color: lighten($button_bg_color, 15%);}
   }
 
   // insensitive button
@@ -187,80 +217,74 @@
       color: transparentize($selected_fg_color, .5);
     }
   }
+
   // reset
   @else if $t==undecorated {
     background-color: transparent;
     background-color: none;
+    &:insensitive {
+      @include button(insensitive);
+      background-color: transparent;
+      color: transparentize($selected_fg_color, .5);
+    }
   }
 }
 
 // tile
-@mixin tile($color) {
+@mixin tile_button($color, $flat: true) {
   @extend %tile;
-  background-color: transparent;
-
-  &:hover,
-  &:selected:hover {
-    background-color: transparentize($color, .85);
+  @if $flat {
+    background-color: transparent;
+  } @else {
+    background-color: transparentize($color, .84);
   }
-
-  &:focus:hover {
-    background-color: transparentize($color, .8);
+  &:hover { background-color: transparentize($color, .9);}
+  &:selected, &:focus {
+    background-color: transparentize($color, .87);
+    &:hover { background-color: transparentize($color, .84);}
+    &:active { background-color: transparentize($color, .87);}
   }
-
-  &:selected,
-  &:focus {
-    background-color: transparentize($color, .9);
+  &:active { background-color: transparentize($color, .84);}
+  &:outlined, &:checked {
+    background-color: transparentize($color, .81);
+    &:active { background-color: transparentize($color, .78);}
+    &:hover { background-color: transparentize($color, .75);}
   }
-
-  &:outlined,
-  &:checked,
-  &:active {
-    background-color: transparentize(darken($osd_bg_color, 10%), .5);
+  &:drop {
+    border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
+    background-color: transparentize($selected_bg_color, .8);
   }
 }
 
-
-// overview icons
-// mixin fo tiles in the overview
-@mixin overview_icon($color) {
-  .overview-icon {
-    @extend %tile;
-    color: $color;
-  }
-
-  &:hover,
-  &:focus:hover,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($color, .9);
-    }
+// overview icon, dash, app grid
+@mixin overview_icon($color, $flat: true) {
+  .overview-icon { @extend %tile; }
+  @if $flat {
+    .overview-icon { background-color: transparent;}
+  } @else {
+    .overview-icon { background-color: transparentize($color, .81);}
   }
+  &:hover .overview-icon { background-color: transparentize($color, .9);}
 
-  &:focus {
-    .overview-icon {
-      background-color: transparentize($color, .95);
-      // border-color: $selected_bg_color;
-    }
+  &:selected .overview-icon,
+  &:focus .overview-icon {
+    background-color: transparentize($color, .87);
+    &:hover .overview-icon { background-color: transparentize($color, .84);}
+    &:active .overview-icon { background-color: transparentize($color, .87);}
   }
-
-  &:drop {
-    .overview-icon {
-      border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
-      background-color: transparentize($selected_bg_color, .8);
-    }
+  &:active .overview-icon { background-color: transparentize($color, .84);}
+  &:outlined .overview-icon,
+  &:checked .overview-icon {
+    background-color: transparentize($color, .81);
+    &:active .overview-icon { background-color: transparentize($color, .78);}
+    &:hover .overview-icon { background-color: transparentize($color, .75);}
   }
-
-  &:active,
-  &:focus:active,
-  &:checked {
-    .overview-icon {
-      background-color: transparentize(darken($osd_bg_color, 10%), .5);
-    }
+  &:drop .overview-icon {
+    border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
+    background-color: transparentize($selected_bg_color, .8);
   }
 }
 
-
 // styling for elements within popovers that look like notifications
 @mixin card($flat: false) {
   border-radius: $base_border_radius;
diff --git a/_widgets.scss b/_widgets.scss
index 6896213..4ed082f 100644
--- a/_widgets.scss
+++ b/_widgets.scss
@@ -44,7 +44,6 @@
 // A11y / misc
 @import 'widgets/a11y';
 @import 'widgets/misc';
-@import 'widgets/tiled-previews';
 @import 'widgets/keyboard';
 @import 'widgets/looking-glass';
 // Lock / login screens
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index 9f44473..05a7175 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -4,10 +4,10 @@ $app_icon_size: 96px;
 
 // app icons
 .icon-grid {
-  row-spacing: $base_spacing * 2;
-  column-spacing: $base_spacing * 2;
-  max-row-spacing: $base_spacing * 12;
-  max-column-spacing: $base_spacing * 12;
+  row-spacing: $base_padding * 2;
+  column-spacing: $base_padding * 2;
+  max-row-spacing: $base_padding * 12;
+  max-column-spacing: $base_padding * 12;
   page-padding-top: $base_padding * 4;
   page-padding-bottom: $base_padding * 4;
   page-padding-left: $base_padding * 2;
@@ -16,31 +16,28 @@ $app_icon_size: 96px;
 
 /* App Icons */
 
-$app_grid_fg_color: #fff;
-
 // Icon tiles in the app grid
-.app-well-app,
-%app_well_app {
-  @include overview_icon($app_grid_fg_color);
+.app-well-app {
+  @include overview_icon($osd_fg_color);
 
+  .overview-icon {
+    padding: $base_padding*2;
+  }
   .overview-icon.overview-icon-with-label {
-    padding: 10px 8px 5px 8px;
-
     > StBoxLayout {
-      spacing: $base_spacing;
+      spacing: $base_padding;
     }
   }
 }
 
-/* App Folders */
+// app folders
 .app-well-app.app-folder {
-  background-color: $dash_background_color;
-  border-radius: $base_border_radius * 2; // same as %tile
+  @include overview_icon($osd_fg_color, $flat: false);
 }
 
 // expanded folder
-.app-folder-dialog { //style like the dash
-  border-radius: 48px;
+.app-folder-dialog {
+  border-radius: $modal_radius*2;
   background-color: $dash_background_color;
   padding: 12px 0px 12px 0px;
 
@@ -50,8 +47,7 @@ $app_grid_fg_color: #fff;
 
     & .folder-name-label,
     & .folder-name-entry {
-      font-size: 18pt;
-      font-weight: 1000;
+      @extend %title_1;
     }
 
     & .folder-name-entry { width: 300px }
@@ -61,7 +57,6 @@ $app_grid_fg_color: #fff;
 
     & .edit-folder-button {
       @include button(undecorated);
-      padding: 0;
       width: 36px;
       height: 36px;
       border-radius: 18px;
@@ -75,8 +70,8 @@ $app_grid_fg_color: #fff;
   }
 
   & .icon-grid {
-    row-spacing: $base_spacing * 2;
-    column-spacing: $base_spacing * 5;
+    row-spacing: $base_padding * 2;
+    column-spacing: $base_padding * 5;
     page-padding-top: 0;
     page-padding-bottom: 0;
     page-padding-left: 0;
@@ -99,23 +94,18 @@ $app_grid_fg_color: #fff;
   height: 5px;
   width: 5px;
   border-radius:5px;
+  margin-bottom: 8px;
   background-color: $osd_fg_color;
-  margin-bottom: 2px;
 }
 
 // Rename popup for app folders
 .rename-folder-popup {
   .rename-folder-popup-item {
-    spacing: $base_spacing;
+    spacing: $base_padding;
     &:ltr, &:rtl { padding: 0 $base_padding * 2; }
   }
 }
 
-// right-click app menu
-.app-menu {
-  max-width: 27.25em;
-}
-
 // App Grid pagination indicators
 .page-indicator {
   padding: $base_padding $base_padding * 2 0;
diff --git a/widgets/_buttons.scss b/widgets/_buttons.scss
index 709ac46..6a72c07 100644
--- a/widgets/_buttons.scss
+++ b/widgets/_buttons.scss
@@ -2,4 +2,5 @@
 
 .button {
   @extend %button; // that's it
+  min-height: 22px;
 }
diff --git a/widgets/_calendar.scss b/widgets/_calendar.scss
index 4e58946..43900b3 100644
--- a/widgets/_calendar.scss
+++ b/widgets/_calendar.scss
@@ -1,19 +1,16 @@
 /* Date/Time Menu */
 
 // overall menu
-#calendarArea {}
+#calendarArea {
+  padding: $base_padding;
+}
 
 // Calendar menu side column
 .datemenu-calendar-column {
-  spacing: $base_spacing;
-  border: none;
-  border-style: solid;
-  border-color: $borders_color;
-
+  spacing: $base_padding;
   &:ltr {padding-left: $base_padding;}
   &:rtl {padding-right: $base_padding;}
-
-  .datemenu-displays-box {spacing: $base_spacing;}
+  .datemenu-displays-box {spacing: $base_padding;}
 }
 
 /* today button (the date) */
@@ -23,21 +20,19 @@
 
   // weekday label
   .day-label {
-    @include fontsize($base_font_size+1);
-    color: $insensitive_fg_color;
-    font-weight: bold;
+    @extend %heading;
   }
 
   // date label
   .date-label {
-    @include fontsize($base_font_size+7);
-    font-weight: 1000;
+    @extend %title_2;
   }
 }
 
 /* Calendar */
 .calendar {
   @include card(flat);
+  margin-top: 0;
 
   // month header
   .calendar-month-header {
@@ -50,9 +45,10 @@
 
     // month label
     .calendar-month-label {
-      font-weight: bold;
+      color: lighten($fg_color,5%);
+      @extend %heading;
+      padding: 8px 0;
     }
-
     .pager-button {
       background-color: transparent;
       height: 32px;
@@ -67,24 +63,23 @@
   $calendar_day_size: 32px;
 
   .calendar-day-base {
-    @include fontsize($base_font_size - 3);
     text-align: center;
     margin: 2px;
-    height: $calendar_day_size;
-    width: $calendar_day_size;
-    border-radius: $calendar_day_size * 0.5 + 2px;
-    font-feature-settings: "tnum";
+    padding: 0 !important;
+    height: $calendar_day_size !important;
+    width: $calendar_day_size !important;
+    border-radius: 99px;
+    @extend %numeric;
+    @extend %smaller;
     
     &:hover {background-color: $hover_bg_color;}
     &:focus {
-      font-weight: 1000;
       background-color: mix($bg_color, $selected_bg_color, 80%);
       color: $selected_fg_color;
-      box-shadow: 0 0 0 2px transparentize($selected_bg_color, 0.4);
+      box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
     }
 
     &:active,&:selected {
-      font-weight: 1000;
       color: $active_fg_color;
       background-color: $active_bg_color;
       &:focus {
@@ -97,20 +92,14 @@
       color: $insensitive_fg_color;
       padding-top: $base_padding;
       height: 16px !important; // force heading to be smaller height
-      @include fontsize($base_font_size - 2);
+      font-weight: bold;
+      @extend %smaller;
     }
   }
 
-  .calendar-day {
-    border-width: 0; // border collapse hack - see calendar.js
-  }
-
+  .calendar-day {}
   .calendar-work-day {}
-
-  .calendar-nonwork-day {
-    color: $insensitive_fg_color;
-  }
-
+  .calendar-nonwork-day {color: $insensitive_fg_color;}
   .calendar-other-month-day {
     color: transparentize($fg_color, 0.5);
     &.calendar-nonwork-day {
@@ -118,11 +107,10 @@
     }
   }
 
-
   // Today
   .calendar-today {
     background-color: $selected_bg_color;
-    font-weight: 1000;
+    font-weight: 800;
     color: $selected_fg_color !important;
 
     &:hover,&:focus {
@@ -144,10 +132,6 @@
   .calendar-day-with-events {
     background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
     background-size: contain;
-    &.calendar-work-day {
-      color: lighten($fg_color,10%);
-      font-weight: bold;
-    }
   }
 
   .calendar-week-number {
@@ -155,7 +139,7 @@
     font-weight: bold;
     font-feature-settings: "tnum";
     margin: 6px;
-    padding: $base_padding;
+    padding: 0 $base_padding;
     border-radius: 3px;
     background-color: darken($bg_color, 2%);
     color: $insensitive_fg_color
@@ -168,23 +152,23 @@
   padding: $base_padding * 2;
 
   .events-box {
-    spacing: $base_spacing;
+    spacing: $base_padding;
   }
 
   .events-list {
-    spacing: 2 * $base_spacing;
+    spacing: 2 * $base_padding;
   }
 
   .events-title {
+    @extend %heading;
     color: $insensitive_fg_color;
-    font-weight: bold;
     margin-bottom: $base_margin;
   }
 
   .event-time {
+    @extend %numeric;
+    @extend %caption;
     color: $insensitive_fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 1);
   }
 }
 
@@ -194,29 +178,26 @@
   padding: $base_padding * 2;
 
   .world-clocks-grid {
-    spacing-rows: $base_spacing;
-    spacing-columns: $base_spacing * 2;
+    spacing-rows: $base_padding;
+    spacing-columns: $base_padding * 2;
   }
 
   // title
   .world-clocks-header {
+    @extend %heading;
     color: $insensitive_fg_color;
-    font-weight: bold;
   }
 
   // city label
   .world-clocks-city {
     color: $fg_color;
-    @include fontsize($base_font_size);
-    font-weight: normal;
   }
 
   // timezone time
   .world-clocks-time {
-    font-weight: bold;
+    @extend %heading;
+    @extend %numeric;
     color: $fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size);
 
     &:ltr {text-align: right;}
     &:rtl {text-align: left;}
@@ -224,9 +205,9 @@
 
   // timezone offset label
   .world-clocks-timezone {
+    @extend %numeric;
+    @extend %caption;
     color: $insensitive_fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 1);
   }
 }
 
@@ -236,42 +217,40 @@
   padding: $base_padding * 2;
 
   .weather-box {
-    spacing: $base_spacing + $base_margin;
+    spacing: $base_padding + $base_margin;
   }
 
   .weather-header-box {
-    spacing: $base_spacing;
+    spacing: $base_padding;
   }
 
   .weather-header {
     color: $insensitive_fg_color;
-    font-weight: bold;
+    @extend %heading;
 
     &.location {
       font-weight: normal;
-      @include fontsize($base_font_size - 1);
     }
   }
 
   .weather-grid {
-    spacing-rows: $base_spacing;
-    spacing-columns: $base_spacing * 2;
+    spacing-rows: $base_padding;
+    spacing-columns: $base_padding * 2;
   }
 
   .weather-forecast-time {
+    @extend %numeric;
+    @extend %caption;
     color: darken($fg_color,30%);
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 2);
-    font-weight: normal;
     padding-top: 0.2em;
     padding-bottom: 0.4em;
   }
 
   .weather-forecast-icon {
-    icon-size: $base_icon_size * 2;
+    icon-size: $large_icon_size;
   }
 
   .weather-forecast-temp {
-    font-weight: bold;
+    @extend %heading;
   }
 }
diff --git a/widgets/_dash.scss b/widgets/_dash.scss
index 9d820e7..462e663 100644
--- a/widgets/_dash.scss
+++ b/widgets/_dash.scss
@@ -2,16 +2,13 @@
 
 $dash_background_color: lighten($system_bg_color, 5%);
 $dash_placeholder_size: 32px;
-$dash_padding: $base_padding + 4px; // 10px
-$dash_spacing: $base_padding / 4;
-$dash_bottom_margin: $base_margin * 4;
-$dash_border_radius: $modal_radius + 8px;
+$dash_padding: $base_padding*2; // 12px
+$dash_border_radius: $modal_radius + $dash_padding;
 
 // container for the dash
 #dash {
-  @include fontsize($base_font_size - 2);
-  margin-top: $base_margin * 3;
-  padding: $dash_padding;
+  @extend %caption;
+  margin: 2em;
 
   .placeholder {
     // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@@ -25,19 +22,9 @@ $dash_border_radius: $modal_radius + 8px;
     height: $dash_placeholder_size;
   }
 
-  // icon on the dash
-  .overview-icon {
-    padding: $base_padding+2px;
-  }
-
   // Running app indicator (also shown in app grid)
   .app-well-app-running-dot {
-    height: 5px;
-    width: 5px;
-    border-radius:5px;
-    background-color: $osd_fg_color;
-    margin-top: 2px;
-    margin-bottom: 12px;
+    margin-bottom: 15px; // hardcoded
   }
 }
 
@@ -45,29 +32,25 @@ $dash_border_radius: $modal_radius + 8px;
 .dash-background {
   background-color: $dash_background_color;
   border-radius: $dash_border_radius;
-  margin-bottom: 0; // this keeps things vertically centered
   padding: $dash_padding;
+  spacing: $base_padding;
 }
 
 // items on the dash
 .dash-item-container {
-
   // each app item on the dash
-  .app-well-app {
-    margin: 2px;
+  .app-well-app .overview-icon {
+    margin: 0 4px;
+    padding: $base_padding;
   }
 
   // show apps button
-  .show-apps {
-    @include overview_icon($osd_fg_color);
-    margin: 2px;
-  }
+  .show-apps { @include overview_icon($osd_fg_color);}
 }
 
 // separator between favourites and running apps
 .dash-separator {
   width: 1px;
-  margin: 0 $base_margin*2;
   background-color: $borders_color;
 }
 
diff --git a/widgets/_dialogs.scss b/widgets/_dialogs.scss
index add8f5d..6ac4e8f 100644
--- a/widgets/_dialogs.scss
+++ b/widgets/_dialogs.scss
@@ -1,7 +1,7 @@
 /* Modal Dialogs */
 
 .headline {
-  @include fontsize($base_font_size + 1);
+  @extend %title_4;
 }
 
 .modal-dialog {
@@ -34,13 +34,9 @@
 
   .message-dialog-title {
     text-align: center;
-    font-size: 18pt;
-    font-weight: 800;
+    @extend %title_2;
 
-    &.lightweight {
-      font-size: 13pt;
-      font-weight: 800;
-    }
+    &.lightweight { @extend %title_4;}
   }
   .message-dialog-description { text-align: center; }
 }
@@ -51,7 +47,7 @@
 
   .dialog-list-title {
     text-align: center;
-    font-weight: bold;
+    @extend %heading;
   }
 
   .dialog-list-scrollview { max-height: 200px; }
@@ -64,7 +60,7 @@
       .dialog-list-item-title { font-weight: bold; }
       .dialog-list-item-description {
         color: darken($fg_color,5%);
-        @include fontsize($base_font_size - 1);
+        @extend %caption;
       }
     }
   }
@@ -78,7 +74,7 @@
   }
   .run-dialog-entry { width: 20em; }
   .run-dialog-description {
-    @include fontsize($base_font_size - 1);
+    @extend %caption;
     text-align: center;
     color: darken($fg_color, 20%);
   }
@@ -119,7 +115,7 @@
 .prompt-dialog-info-label,
 .prompt-dialog-null-label {
   text-align: center;
-  @include fontsize($base_font_size - 1);
+  @extend %caption;
 }
 
 .prompt-dialog-error-label {
diff --git a/widgets/_entries.scss b/widgets/_entries.scss
index 5a11945..6be6760 100644
--- a/widgets/_entries.scss
+++ b/widgets/_entries.scss
@@ -3,23 +3,27 @@
 StEntry {
   border-radius: $base_border_radius;
   padding: 8px;
-  border-width: 0;
   color: $fg_color;
+
   @include entry(normal);
-  //&:hover { @include entry(hover);}
+  &:hover { @include entry(hover);}
   &:focus { @include entry(focus);}
   &:insensitive { @include entry(insensitive);}
+
   selection-background-color: $selected_bg_color;
   selected-color: $selected_fg_color;
+
   StIcon.capslock-warning {
     icon-size: 16px;
     warning-color: $warning_color;
     padding: 0 4px;
   }
+
   StIcon.peek-password {
     icon-size: $base_icon_size;
     padding: 0 4px;
   }
+
   StLabel.hint-text {
     margin-left: 2px;
     color: transparentize($fg_color, 0.3);
diff --git a/widgets/_ibus-popup.scss b/widgets/_ibus-popup.scss
index 6f82023..28f89f3 100644
--- a/widgets/_ibus-popup.scss
+++ b/widgets/_ibus-popup.scss
@@ -5,31 +5,32 @@
 }
 
 .candidate-popup-content {
-  padding: 0.5em;
-  spacing: 0.3em;
+  padding: $base_padding;
+  spacing: $base_padding;
+  @extend .popup-menu-content;
 }
 
 .candidate-index {
-  padding: 0 0.5em 0 0;
-  color: darken($fg_color,10%);
+  padding: 0;
+  padding-right: $base_padding;
+  color: $insensitive_fg_color;
 }
 
 .candidate-box {
-  padding: 0.3em 0.5em 0.3em 0.5em;
+  padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
   border-radius: $base_border_radius;
-  &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
+  &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+  &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
 }
 
 .candidate-page-button-box {
   height: 2em;
-  .vertical & { padding-top: 0.5em; }
-  .horizontal & { padding-left: 0.5em; }
+  .vertical & { padding-top: $base_padding*2; }
+  .horizontal & { padding-left: $base_padding*2; }
 }
 
-.candidate-page-button {
-  padding: 4px;
-}
+.candidate-page-button { padding: $base_padding;}
 
-.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; }
+.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; 
border-right-width: 0;box-shadow: none;}
+.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: 
none;}
+.candidate-page-button-icon { icon-size: $base_icon_size; }
diff --git a/widgets/_keyboard.scss b/widgets/_keyboard.scss
index 43d5af8..91d9a3d 100644
--- a/widgets/_keyboard.scss
+++ b/widgets/_keyboard.scss
@@ -44,8 +44,9 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   @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);}
+  &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
   &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+  &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
 
   &:grayed { //FIXMEy
     background-color: darken($bg_color, 3%);
@@ -56,16 +57,18 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   // non-character keys
   &.default-key {
     @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
-    &:hover, &:checked {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
+    &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
     &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
+    &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
     border-radius: $key_border_radius;
   }
 
   // enter key is suggested-action
   &.enter-key {
     @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);}
+    &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
+    &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
+    &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
     border-radius: $key_border_radius;
     color: $osd_fg_color;
   }
@@ -94,15 +97,16 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   -arrow-border-color: lighten($osd_bg_color, 9%);
   -arrow-base: 20px;
   -arrow-rise: 10px;
-  -boxpointer-gap: $base_spacing;
+  -boxpointer-gap: $base_padding;
   padding: $base_padding;
 
   .keyboard-key {
     @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);}
+    &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
     &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+    &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
 
     border-radius:$key_border_radius;
   }
@@ -142,7 +146,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
     @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
 
     &:focus { @include keyboard_key(focus);}
-    &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+    &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
     &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+    &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
   }
 }
diff --git a/widgets/_login-dialog.scss b/widgets/_login-dialog.scss
index 6d16ac2..2572f97 100644
--- a/widgets/_login-dialog.scss
+++ b/widgets/_login-dialog.scss
@@ -48,8 +48,8 @@
   .login-dialog-session-list-button {
     padding: 0;
     border-radius: 99px;
-    width: $base_icon_size * 2;
-    height: $base_icon_size * 2;
+    width: $large_icon_size;
+    height: $large_icon_size;
     border-color: darken($system_bg_color, 3%);
     background-color: darken($system_bg_color, 3%);
 
@@ -76,7 +76,7 @@
 }
 
 .login-dialog-not-listed-label {
-  @include fontsize($base_font_size - 1);
+  @extend %caption;
   font-weight: bold;
   color: darken($osd_fg_color,30%);
   padding-top: 1em;
@@ -158,7 +158,7 @@
 .login-dialog-prompt-layout {
   padding-top: 24px;
   padding-bottom: 12px;
-  spacing: $base_spacing * 2;
+  spacing: $base_padding * 2;
   width: 23em;
 }
 
@@ -185,8 +185,8 @@
 // Custom styling for unlock entry
 .unlock-dialog {
   StEntry {
+    border:none !important;
     &:focus { 
-      box-shadow:none;
       background-color: transparentize($fg_color, 0.9);
     }
     &:insensitive { 
diff --git a/widgets/_looking-glass.scss b/widgets/_looking-glass.scss
index e03457e..8639889 100644
--- a/widgets/_looking-glass.scss
+++ b/widgets/_looking-glass.scss
@@ -8,7 +8,7 @@
   border: 1px solid $osd_outer_borders_color;
   color: $osd_fg_color;
   padding: $base_padding;
-  spacing: $base_spacing;
+  spacing: $base_padding;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 
   & > #Toolbar {
@@ -16,7 +16,7 @@
     padding: $base_padding;
     border-radius: 0;
     background-color: transparent;
-    spacing: $base_spacing;
+    spacing: $base_padding;
 
     .lg-toolbar-button {
       padding: $base_padding $base_padding*2;
@@ -27,7 +27,7 @@
   }
 
   .labels { 
-    spacing: $base_spacing;
+    spacing: $base_padding;
   }
 
   .notebook-tab {
@@ -54,8 +54,8 @@
     }
   }
 
-  StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; }
-  StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; }
+  StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
+  StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
 }
 
 .lg-dialog {
@@ -83,12 +83,12 @@
 }
 
 .lg-completions-text {
-  font-size: .9em;
+  @extend %caption;
   font-style: italic;
 }
 
 .lg-obj-inspector-title {
-  spacing: $base_spacing;
+  spacing: $base_padding;
 }
 
 .lg-obj-inspector-button {
@@ -103,7 +103,7 @@
 
 .lg-extensions-list {
   padding: $base_padding;
-  spacing: $base_spacing;
+  spacing: $base_padding;
 }
 
 .lg-extension {
@@ -112,11 +112,11 @@
 }
 
 .lg-extension-name {
-  font-weight: bold;
+  @extend %heading;
 }
 
 .lg-extension-meta {
-  spacing: $base_spacing;
+  spacing: $base_padding;
 }
 
 // Inspector
@@ -128,7 +128,7 @@
 }
 
 .lg-debug-flag-button {
-  StLabel { padding: $base_spacing, 2 * $base_spacing; }
+  StLabel { padding: $base_padding, 2 * $base_padding; }
 
   color: $fg_color;
   &:hover { color: lighten($fg_color, 20%); }
@@ -136,8 +136,7 @@
 }
 
 .lg-debug-flags-header {
-  padding-top: 2 * $base_spacing;
-  font-size: 120%;
-  font-weight: bold;
+  padding-top: 2 * $base_padding;
   padding: $base_padding;
+  @extend %title_2;
 }
diff --git a/widgets/_message-list.scss b/widgets/_message-list.scss
index 0dc2092..ac2e8ef 100644
--- a/widgets/_message-list.scss
+++ b/widgets/_message-list.scss
@@ -4,20 +4,15 @@
 // main list
 .message-list {
   width: 32em;
-  border: none;
-  border-style: solid;
-  border-color: $borders_color;
-  padding: $base_padding;
+  border: solid $borders_color;
 
   // padding and margins to account for scrollbar
   &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
   &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
 
   .message-list-placeholder { 
-    font-weight:1000; 
-    font-size: 18pt;
-    color: transparentize($fg_color, .8);
-    spacing: 12px;
+    @extend %title_2;
+    color: transparentize($insensitive_fg_color, .5);
 
     // icon size and color
     > StIcon {
@@ -29,7 +24,7 @@
 }
 
 .message-list-sections {
-  spacing: $base_spacing;
+  spacing: $base_padding;
   margin: 0; 
   padding-bottom: $base_padding;
 
@@ -40,15 +35,15 @@
 
 .message-list-section,
 .message-list-section-list {
-  spacing: $base_spacing;
+  spacing: $base_padding;
 }
 
 // do-not-disturb + clear button
 .message-list-controls {
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
   padding: $base_padding;
-  margin: 0;
-  spacing: $base_spacing;
+  spacing: $base_padding;
+  @extend %heading;
 
   .dnd-button {
     // We need this because the focus outline isn't inset like for the buttons
@@ -80,7 +75,7 @@
 
     // icon size and color
     > StIcon {
-      icon-size: $base_icon_size*2; // 32px
+      icon-size: $large_icon_size; // 32px
       -st-icon-style: symbolic;
     }
 
@@ -177,7 +172,7 @@
     background-color: $bg_color;
     border: 1px solid transparent;
     border-radius: $base_border_radius;
-    icon-size: $base_icon_size * 2 !important; // 32px
+    icon-size: $large_icon_size !important; // 32px
     padding: ($base_padding*2 + 2); // 16px
   }
 }
diff --git a/widgets/_misc.scss b/widgets/_misc.scss
index 0fe174a..7409278 100644
--- a/widgets/_misc.scss
+++ b/widgets/_misc.scss
@@ -48,7 +48,7 @@
 .caps-lock-warning-label {
   text-align: center;
   padding-bottom: 8px;
-  @include fontsize($base_font_size - 1);
+  @extend %caption;
   color: $warning_color;
 }
 
@@ -57,3 +57,9 @@
 .workspace-animation {
   background-color: $system_bg_color;
 }
+
+/* Tiled window previews */
+.tile-preview {
+  background-color: transparentize($selected_bg_color,0.5);
+  border: 1px solid $selected_bg_color;
+}
diff --git a/widgets/_network-dialog.scss b/widgets/_network-dialog.scss
index 51394ed..11e4e67 100644
--- a/widgets/_network-dialog.scss
+++ b/widgets/_network-dialog.scss
@@ -1,4 +1,4 @@
-/* Network Dialogs */
+/* Select Network dialogs */
 .nm-dialog {
   max-height: 34em;
   min-height: 31em;
@@ -10,70 +10,39 @@
   padding: 24px;
 }
 
-.nm-dialog-airplane-box { spacing: 12px; }
-
-.nm-dialog-airplane-headline {
-  font-weight: bold;
-  text-align: center;
-}
-
-.nm-dialog-airplane-text { color: $fg_color; }
-
-// header
-.nm-dialog-header {
-  font-weight: bold;
-}
-.nm-dialog-subheader {
-  color: $insensitive_fg_color;
-}
-
-.nm-dialog-header-icon {
-  icon-size: $base_icon_size * 2;
-}
+.nm-dialog-header { @extend %heading; }
+.nm-dialog-subheader { color: $insensitive_fg_color;}
+.nm-dialog-header-icon { icon-size: $large_icon_size;}
 .nm-dialog-header-hbox { spacing: 10px; }
 
-// airplane mode
-.nm-dialog-airplane-headline {
-  font-weight: bold;
-}
-
-.nm-dialog-airplane-text {
-  color: $insensitive_fg_color;
-}
-
-// list of networks
 .nm-dialog-scroll-view {
-  border: none;
   padding:$base_padding;
   border-radius: $base_border_radius;
-  background-color: darken($bg_color, 3%);
+  background-color: $base_color;
 }
 
-// list item
 .nm-dialog-item {
-  @include fontsize($base_font_size);
-  border: none;
   padding: $base_padding * 2;
-  spacing: 0px;
-  text-shadow: none;
-  icon-shadow: none;
 
   &:selected {
     background-color: $selected_bg_color;
-    color: $selected_fg_color;
-
     border-radius: $base_border_radius - 3px;
+    color: $selected_fg_color;
   }
-
-  &:hover {
-    background-color:$hover_bg_color;
-  }
+  &:hover { background-color:$hover_bg_color;}
 }
 
-// icons in list
 .nm-dialog-icon { icon-size: $base_icon_size; }
-.nm-dialog-icons { spacing: $base_spacing * 2; }
+.nm-dialog-icons { spacing: $base_padding * 2; }
 
 // no networks
-.no-networks-label { color: $insensitive_fg_color; }
 .no-networks-box { spacing: $base_padding; }
+.no-networks-label { color: $insensitive_fg_color; }
+
+// airplane mode
+.nm-dialog-airplane-box {
+  text-align: center;
+  spacing: 12px;
+}
+.nm-dialog-airplane-headline { @extend %title_3;}
+.nm-dialog-airplane-text { color: $insensitive_fg_color;}
diff --git a/widgets/_notifications.scss b/widgets/_notifications.scss
index 194a5a4..7866767 100644
--- a/widgets/_notifications.scss
+++ b/widgets/_notifications.scss
@@ -4,9 +4,6 @@ $notification_banner_height: 64px;
 $notification_banner_width: 34em;
 $notification_banner_radius: $base_border_radius*1.5;
 
-// make radius of buttons fit in bubble corner (banner radius - width of focus ring)
-$notification_button_radius: ($notification_banner_radius - 2px);
-
 // Banner notifications
 .notification-banner {
   min-height: $notification_banner_height;
diff --git a/widgets/_osd.scss b/widgets/_osd.scss
index e3d0707..e4fb0e5 100644
--- a/widgets/_osd.scss
+++ b/widgets/_osd.scss
@@ -4,20 +4,27 @@ $osd_levelbar_height:6px;
 
 .osd-window {
   @extend %osd_panel;
+  @extend %heading;
   text-align: center;
   font-weight: bold;
-  &, & > * { spacing: $base_spacing * 2; } // 12px
-  margin: 4em;
+  spacing: $base_padding * 2; // 12px
+  padding: $base_padding * 2 $base_padding * 3;
+  & > * { spacing: 8px; }
+  margin-bottom: 4em;
 
-  StIcon {
-    icon-size:$base_icon_size * 2;
-
-    &:first-child:last-child { padding: 0 $base_padding * 2; }
-  }
+  StIcon { icon-size:$large_icon_size;}
 
   .osd-monitor-label { font-size: 3em; }
   
+  StLabel {
+    &:ltr { margin-right: 6px; }
+    &:rtl { margin-left: 6px; }
+  }
+
   .level {
+    margin-bottom: 4px;
+    &:first-child { margin-bottom: 0px; }
+
     height: $osd_levelbar_height;
     min-width:$base_icon_size * 10;
     -barlevel-height: $osd_levelbar_height;
@@ -25,8 +32,8 @@ $osd_levelbar_height:6px;
     -barlevel-active-background-color: $osd_fg_color;
     -barlevel-overdrive-color: $destructive_color;
     -barlevel-overdrive-separator-width: 3px;
-    &:ltr {margin-right: 16px;}
-    &:rtl {margin-left: 16px;}
+    &:ltr { margin-right: 6px; }
+    &:rtl { margin-left: 6px; }
   }
 }
 
diff --git a/widgets/_overview.scss b/widgets/_overview.scss
index c593ceb..d8e70ea 100644
--- a/widgets/_overview.scss
+++ b/widgets/_overview.scss
@@ -1,7 +1,7 @@
 /* OVERVIEW */
 
 .controls-manager, .secondary-monitor-workspaces {
-  spacing: $base_spacing * 2;
+  spacing: $base_padding * 2;
 }
 
 #overviewGroup {
diff --git a/widgets/_panel.scss b/widgets/_panel.scss
index feeb1a7..3fc57eb 100644
--- a/widgets/_panel.scss
+++ b/widgets/_panel.scss
@@ -10,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   background-color: $panel_bg_color;
   font-weight: bold;
   height: $panel_height;
-  font-feature-settings: "tnum";
+  @extend %numeric;
   transition-duration: $panel_transition_duration;
 
   // transparent panel on lock & login screens
@@ -42,7 +42,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
 
       StBoxLayout {
-        spacing: $base_spacing;
+        spacing: $base_padding;
       }
 
       StIcon {
@@ -186,13 +186,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 
 // App Menu
 #appMenu {
-  spacing: $base_spacing;
+  spacing: $base_padding;
   .label-shadow { color: transparent; }
 }
 
 #appMenu .panel-status-menu-box {
   padding: 0 $base_padding;
-  spacing: $base_spacing;
+  spacing: $base_padding;
 }
 
 
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index c0e3414..06031b5 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -2,15 +2,6 @@
 
 // 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: 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
 }
 
@@ -23,107 +14,101 @@
   &.panel-menu {
     -boxpointer-gap: $base_margin+2px; // distance from the panel
     margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
-
-    // style the menu content instead
-    .popup-menu-content {
-      padding: $base_padding*1.5;
-    }
-
-    .popup-menu-item {}
   }
 }
 
-// popover content;
+// popover content
 .popup-menu-content {
   padding: $base_padding;
-  border-radius: $modal_radius;
-  border: 1px solid $borders_edge; 
+  // account for margin oddities
+  padding-top: $base_padding - 2px !important;
+  padding-bottom: $base_padding - 2px !important;
+  border-radius: $modal_radius - 2px;
+  border: 1px solid $borders_edge;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
   background-color: $bg_color;
 }
 
 // menu items
 .popup-menu-item {
-  spacing: $base_spacing;
-  padding: $base_padding*1.5;
+  padding: $base_padding*1.5 $base_padding*2;
   margin: 2px 0;
   border-radius: $base_border_radius;
   transition: 0.2s all ease;
+  background-color: transparent;
 
-  &:ltr {padding-right:$base_padding; padding-left: 0;}
-  &:rtl {padding-right: 0; padding-left:$base_padding;}
+  &:focus, &:hover {
+   background-color: $hover_bg_color !important;
+   &:active { background-color: $active_bg_color !important;}
+ }
 
-  &:hover {
-    background-color: $hover_bg_color;
-  }
+  &:checked {background-color: $checked_bg_color !important;}
 
   &:checked {
-    background-color: $hover_bg_color;
     margin-bottom: 0;
-    box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 3%);
+    box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
     border-radius: $base_border_radius $base_border_radius 0 0;
-    
-    &:hover {
-      background-color: lighten($hover_bg_color, 5%);
-    }
-  }
-
-  &.selected {
-    background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
-    color: $fg_color;
+    &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
+    &:active { background-color: lighten($checked_bg_color, 5%) !important;}
   }
 
   &:active {
-    background-color: lighten($active_bg_color,3%);
-    color: lighten($active_fg_color,3%);
+    background-color: lighten($active_bg_color, 5%);
+    color: $active_fg_color;
   }
 
   &:insensitive {color: transparentize($fg_color,0.5);}
 }
 
-// all icons and other graphical elements
+
+// all other graphical elements (sliders)
 .popup-inactive-menu-item {
   color: $fg_color;
-
-  // "Open Windows" label
-  font-weight: bold;
-  font-size: smaller;
-
-  &:insensitive {color: $insensitive_fg_color;}
+  &:insensitive { color: $insensitive_fg_color; }
 }
 
 // symbolic icons in popover
 .popup-menu-arrow,
 .popup-menu-icon {
-  icon-size: 16px !important;
+  icon-size: 16px !important; // for some reason the variable doesn't work here
 }
 
 .popup-menu-arrow {
-  margin-right: $base_margin;
+  &:ltr {margin-right: $base_margin;}
+  &:rtl {margin-left: $base_margin;}
 }
 
+
 // popover submenus
 .popup-sub-menu {
-  border:none;
-  background-color: $hover_bg_color;
+  background-color: $checked_bg_color;
   border-radius: 0 0 $base_border_radius $base_border_radius;
 
   .popup-menu-ornament {
-    min-width: 14px !important;
+    min-width: $base_icon_size !important;
   }
 
+  // submenu specific styles
   .popup-menu-item {
     border-radius: 0;
     margin: 0;
-    padding: $base_padding*1.5 $base_padding*2;
 
     &:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
+
+    &:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
+    &:checked {
+      background-color: lighten($checked_bg_color, 10%) !important;
+      &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
+    }
+    &:active { background-color: lighten($active_bg_color, 10%) !important;}
   }
 
   .popup-menu-section {
-    .popup-menu-item:last-child:hover {border-radius: 0 }
+    .popup-menu-item:last-child {
+      &:hover,&:focus {border-radius: 0;}
+    }
     &:last-child .popup-menu-item:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
@@ -132,9 +117,9 @@
 
 // container for radio and check boxes
 .popup-menu-ornament {
+  @extend %heading;
   width: 1.2em;
-  font-weight: bold;
-  font-size: 1em;
+  text-align: center !important;
 
   &:ltr {text-align: right;};
   &:rtl {text-align: left;};
@@ -175,30 +160,42 @@
 .aggregate-menu {
   min-width: 22em;
 
-  // this is unneeded in at the top-level this menu, hide it
-  .popup-menu-ornament {width:0;padding:0;margin:0;}
-
-  .popup-menu-item {
-    &:ltr {padding-left:$base_padding;padding-right:$base_padding*2;}
-    &:rtl {padding-right:$base_padding;padding-left:$base_padding*2;}
-  }
+  // this is unneeded at the top-level in this menu, hide it
+  .popup-menu-ornament { width: 0 !important; }
 
   // lock screen, shutdown, etc. buttons
   .popup-menu-icon {
-    padding:0;
-    margin: 0 $base_margin;
     -st-icon-style: symbolic;
+    &:ltr {margin-right: $base_margin*2;}
+    &:rtl {margin-left: $base_margin*2;}
   }
 
-  // account for icons in submenus with padding
+  // account for ornaments in submenus with padding
   .popup-sub-menu .popup-menu-item > :first-child {
-    &:ltr {
-      padding-left: 0;
-      margin-left: $base_icon_size;
-    }
-    &:rtl {
-      padding-right: 0;
-      margin-right: $base_icon_size;
+    // this value is hardcoded for visual effect
+    &:ltr { margin-left: $base_margin*2;}
+    &:rtl { margin-right: $base_margin*2;}
+  }
+}
+
+// right-click (and panel) app menu
+.app-menu {
+  max-width: 27.25em;
+  .popup-menu-content { margin: $base_margin;}
+
+  &.panel-menu {
+    .popup-menu-content { margin: 0;} // avoid doubling up margin
+  }
+
+  // this is unneeded at the top-level in this menu, hide it
+  .popup-menu-ornament { width: 0 !important; }
+
+  .popup-inactive-menu-item:first-child {
+    // "Open Windows" label
+    > StLabel {
+      @extend %caption_heading;
+      &:ltr {margin-right: $base_margin*2;}
+      &:rtl {margin-left: $base_margin*2;}
     }
   }
 }
diff --git a/widgets/_screen-shield.scss b/widgets/_screen-shield.scss
index fec3697..6550e5b 100644
--- a/widgets/_screen-shield.scss
+++ b/widgets/_screen-shield.scss
@@ -11,7 +11,7 @@
 .unlock-dialog-clock-time {
   font-size: 64pt;
   padding-top: 42px;
-  font-feature-settings: "tnum";
+  @extend %numeric;
 }
 
 .unlock-dialog-clock-date {
diff --git a/widgets/_screenshot.scss b/widgets/_screenshot.scss
index 1113606..458c6f0 100644
--- a/widgets/_screenshot.scss
+++ b/widgets/_screenshot.scss
@@ -1,75 +1,50 @@
 // Screenshot UI
 .icon-label-button-container {
-  spacing: $base_spacing;
-  font-size: $base_font_size - 3pt;
+  spacing: $base_padding;
+  @extend %caption;
 
-  StIcon {
-    icon-size: 32px;
-  }
+  StIcon { icon-size: 32px;}
 }
 
-$screenshot_ui_panel_padding: 18px;
+$screenshot_ui_panel_padding: $base_padding*3;
 $screenshot_ui_shot_cast_margin: 21px;
-$screenshot_ui_shot_cast_border_radius: 12px;
-$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
+$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
 $screenshot_ui_shot_cast_spacing: 3px;
 
-$screenshot_ui_button_red: #e01b24;
+$screenshot_ui_button_red: $error_color;
 
 .screenshot-ui-panel {
-  background-color: $osd_bg_color;
+  @extend %osd_panel;
   border-radius: $screenshot_ui_panel_border_radius;
   padding: $screenshot_ui_panel_padding;
   // Reduce the bottom padding a little to accommodate the large capture button.
   padding-bottom: $screenshot_ui_panel_padding - 6px;
-  margin-bottom: $base_margin * 8;
+  margin-bottom: 4em;
   spacing: $base_padding * 2;
 }
 
 .screenshot-ui-close-button {
-  background-color: $osd_bg_color;
-  color: $osd_fg_color;
-  border-radius: 99px;
-  padding: 6px;
-  height: 30px;
-  width: 30px;
-  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
-  margin-top: 8px;
-
+  @extend .window-close;  // copy window close button
+  padding: $base_padding; // but with more padding
   &.left { margin-left: 8px; }
   &.right { margin-right: 8px; }
-
-  & StIcon { icon-size: 24px; }
-
-  &:hover {
-    background-color: lighten($osd_bg_color, 15%);
-  }
-
-  &:active {
-    color: transparentize($osd_fg_color, 0.2);
-    background-color: darken($osd_bg_color, 5%);
-  }
 }
 
 .screenshot-ui-type-button {
-  padding: $base_padding * 2 $base_padding * 3;
+  @extend %osd_button;
+  padding: $base_padding * 2 $base_padding * 3 !important;
   border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
-  font-weight: bold;
-  &:hover, &:focus { background-color: $hover_bg_color; }
-  &:active { background-color: $active_bg_color; }
-  &:checked { background-color: $hover_bg_color; }
-  &:insensitive { color: $insensitive_fg_color; }
 }
 
 .screenshot-ui-capture-button {
   width: 36px;
   height: 36px;
   border-radius: 99px;
-  border: 4px white;
+  border: 4px $osd_fg_color;
   padding: 4px;
 
   .screenshot-ui-capture-button-circle {
-    background-color: white;
+    background-color: $osd_fg_color;
     transition-duration: 200ms;
     &:hover, &:focus { background-color: $hover_bg_color; }
     border-radius: 99px;
@@ -77,13 +52,13 @@ $screenshot_ui_button_red: #e01b24;
 
   &:hover, &:focus {
     .screenshot-ui-capture-button-circle {
-      background-color: darken(white, 15%);
+      background-color: darken($osd_fg_color, 15%);
     }
   }
 
   &:active {
     .screenshot-ui-capture-button-circle {
-      background-color: darken(white, 50%);
+      background-color: darken($osd_fg_color, 50%);
     }
   }
 
@@ -108,7 +83,7 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-shot-cast-container {
   background-color: $hover_bg_color;
-  border-radius: $screenshot_ui_shot_cast_border_radius;
+  border-radius: $modal_radius;
   padding: $screenshot_ui_shot_cast_spacing;
   spacing: $screenshot_ui_shot_cast_spacing;
 
@@ -117,39 +92,31 @@ $screenshot_ui_button_red: #e01b24;
 }
 
 .screenshot-ui-shot-cast-button {
-  padding: $base_padding $base_padding * 1.5;
+  padding: $base_padding $base_padding*2;
   background-color: transparent;
   &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
-  &:active { background-color: $active_bg_color; }
+  &:active { background-color: lighten($active_bg_color,5%); }
   &:checked { background-color: white; color: black; }
 
-  border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
+  border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
 
-  StIcon {
-    icon-size: $base_icon_size;
-  }
+  StIcon { icon-size: $base_icon_size; }
 }
 
 .screenshot-ui-show-pointer-button {
-  padding: $base_padding * 2;
+  @extend %osd_button;
   border-radius: 99px;
-  background-color: $hover_bg_color;
-  &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
-  &:active { background-color: $active_bg_color; }
-  &:checked { background-color: darken($hover_bg_color, 10%); }
-
-  StIcon {
-    icon-size: $base_icon_size;
-  }
+  padding: $base_padding * 2 !important;
+  StIcon { icon-size: $base_icon_size; }
 }
 
 .screenshot-ui-area-indicator-shade {
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba(0,0,0,.3);
 }
 
 .screenshot-ui-area-selector {
   .screenshot-ui-area-indicator-shade {
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(0,0,0,.5);
   }
 
   .screenshot-ui-area-indicator-selection {
@@ -160,7 +127,7 @@ $screenshot_ui_button_red: #e01b24;
 .screenshot-ui-area-selector-handle {
   border-radius: 99px;
   background-color: white;
-  box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
   width: 24px;
   height: 24px;
 }
@@ -182,7 +149,7 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-window-selector-window-border {
   transition-duration: 200ms;
-  border-radius: 18px;
+  border-radius: $modal_radius;
   border: 6px transparent;
 }
 
@@ -215,10 +182,10 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-screen-selector {
   transition-duration: 200ms;
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0,0,0,.5);
 
-  &:hover { background-color: rgba(0, 0, 0, .3); }
-  &:active { background-color: rgba(0, 0, 0, .7); }
+  &:hover { background-color: rgba(0,0,0,.3); }
+  &:active { background-color: rgba(0,0,0,.7); }
   &:checked {
     background-color: transparent;
     border: 2px white;
diff --git a/widgets/_search-entry.scss b/widgets/_search-entry.scss
index 409fff0..faca50e 100644
--- a/widgets/_search-entry.scss
+++ b/widgets/_search-entry.scss
@@ -5,29 +5,19 @@ $search_entry_height: 36px;
 
 %search_entry,
 .search-entry {
-  background-color: lighten($bg_color, 5%);
-  border-width: 2px;
-  border-color: transparent;
   border-radius: $search_entry_height * 0.5; // half the height
-  color: transparentize($fg_color,0.3);
-  margin-top: $base_spacing * 2;
-  margin-bottom: $base_spacing;
+
+  margin-top: $base_padding * 2;
+  margin-bottom: $base_padding;
   padding: $base_padding+1 $base_padding+3;
   width: $search_entry_width;
-  
-  &:hover {
-    background-color: lighten($hover_bg_color, 5%);
-    color: lighten($hover_fg_color, 5%);
-  }
 
-  &:focus {
-    border-style: solid;
-    border-color: $selected_bg_color;
-    color: $fg_color;
-    box-shadow: none;
-  }
+  @include entry(normal);
+  &:hover { @include entry(hover);}
+  &:focus { @include entry(focus);}
+  &:insensitive { @include entry(insensitive);}
 
-  .search-entry-icon { 
+  .search-entry-icon {
     color: inherit;
     icon-size: $base_icon_size;
     margin-top: 2px; // center vertically
diff --git a/widgets/_search-results.scss b/widgets/_search-results.scss
index c377ba6..4ad3f08 100644
--- a/widgets/_search-results.scss
+++ b/widgets/_search-results.scss
@@ -26,29 +26,29 @@
   box-shadow: none;
   text-shadow: none;
   color: $osd_fg_color;
-  padding: $base_padding * 3;
+  padding: $base_padding*2;
   margin: $base_margin;
   // This is the space between the provider icon and the results container
 }
 
 %search_section_content_item {
-  @include tile($osd_fg_color);
-
+  @include tile_button($osd_fg_color);
+  margin: $base_margin;
   border-radius: $base_border_radius !important;
 }
 
 // "no results" text
 .search-statustext {
-  @extend %status_text;
+  @extend %large_title;
 }
 
 .grid-search-results {
-  spacing: $base_spacing * 6;
+  spacing: $base_padding * 6;
 }
 
 // Search results with icons
 .grid-search-result {
-  @extend %app_well_app;
+  @extend .app-well-app;
 }
 
 // search result provider
@@ -57,7 +57,7 @@
 
   // content
   .list-search-provider-content {
-    spacing: $base_spacing * 2;
+    spacing: $base_padding * 2;
 
     // provider labels
     .list-search-provider-details {
@@ -69,7 +69,7 @@
 
 // search results list
 .list-search-results {
-  spacing: $base_spacing;
+  spacing: $base_padding;
 }
 
 // search result listitem
@@ -83,7 +83,7 @@
 
   // list item title (with leading icon)
   .list-search-result-title {
-    spacing: $base_spacing * 2;
+    spacing: $base_padding * 2;
     // font-weight: bold;
   }
 
diff --git a/widgets/_slider.scss b/widgets/_slider.scss
index 04de5a2..500249a 100644
--- a/widgets/_slider.scss
+++ b/widgets/_slider.scss
@@ -3,7 +3,6 @@
 $slider_size: 16px;
 
 .slider {
-  height: $slider_size;
   // slider trough
   -barlevel-height: 4px;
   -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), 
transparentize($fg_color, 0.8)); //background of the trough
@@ -20,9 +19,4 @@ $slider_size: 16px;
   -slider-handle-radius: $slider_size * 0.5; // half the size of the size
   -slider-handle-border-width: 0;
   -slider-handle-border-color: transparent; // because 0 width
-  margin: 0 $base_padding;
-
-  color: $fg_color;
-  &:hover { color: $hover_bg_color; }
-  &:active { color: $active_bg_color; }
 }
diff --git a/widgets/_switcher-popup.scss b/widgets/_switcher-popup.scss
index b3144a2..892d335 100644
--- a/widgets/_switcher-popup.scss
+++ b/widgets/_switcher-popup.scss
@@ -8,7 +8,7 @@ $switcher_border_radius: $modal_radius + 8px;
 // the full screen container of the switcher
 .switcher-popup {
   padding: 0;
-  spacing: $base_spacing * 4;
+  spacing: $base_padding * 4;
 }
 
 // switcher onscreen panel
@@ -20,12 +20,13 @@ $switcher_border_radius: $modal_radius + 8px;
 
   // container for items in list
   .switcher-list-item-container {
-    spacing: $base_spacing * 2;
+    spacing: $base_padding * 2;
   }
 
   // each item in the list
   .item-box {
-    @include tile($osd_fg_color);
+
+    @include tile_button($osd_fg_color);
   }
 
   .separator {
@@ -36,7 +37,7 @@ $switcher_border_radius: $modal_radius + 8px;
   // container of thumbnails
   .thumbnail-box {
     padding: 2px;
-    spacing: $base_spacing;
+    spacing: $base_padding;
   }
 
   // window thumbnail itself
diff --git a/widgets/_window-picker.scss b/widgets/_window-picker.scss
index fa3f191..e494f6d 100644
--- a/widgets/_window-picker.scss
+++ b/widgets/_window-picker.scss
@@ -1,10 +1,11 @@
 /* Window Picker */
 
-$window_picker_spacing: $base_spacing; // 6px
+$window_picker_spacing: $base_padding; // 6px
 $window_picker_padding: $base_padding * 2; // 12px
 
 $window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
 
+$window_close_button_color: darken(transparentize($osd_bg_color, .05), 3%);
 $window_close_button_size: 30px;
 $window_close_button_padding: 3px;
 
@@ -24,24 +25,23 @@ $window_close_button_padding: 3px;
 
 // Close button
 .window-close {
-  background-color: $osd_bg_color;
+  background-color: $window_close_button_color;
   color: $osd_fg_color;
   border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
   padding: $window_close_button_padding;
   height: $window_close_button_size;
   width: $window_close_button_size;
-  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
   transition-duration: 300ms;
 
-  & StIcon { icon-size: 24px; }
+  & StIcon { icon-size: 24px; } // uses non standard icon size
 
   &:hover {
-    background-color: lighten($osd_bg_color, 15%);
+    background-color: mix($osd_fg_color, $window_close_button_color, 15%);
   }
 
   &:active {
     color: transparentize($osd_fg_color, 0.2);
-    background-color: darken($osd_bg_color, 5%);
+    background-color: darken($window_close_button_color, 5%);
   }
 }
 
diff --git a/widgets/_workspace-switcher.scss b/widgets/_workspace-switcher.scss
index 1996e09..f06130b 100644
--- a/widgets/_workspace-switcher.scss
+++ b/widgets/_workspace-switcher.scss
@@ -1,13 +1,14 @@
 /* Workspace Switcher */
 
-$ws_indicator_height: $base_icon_size * 2;
+$ws_indicator_height: $large_icon_size;
 $ws_dot_active: $ws_indicator_height / 3;
 $ws_dot_inactive: $ws_indicator_height / 6;
 
 .workspace-switcher {
   @extend %osd_panel;
-  margin: 4em;
-  spacing: $base_spacing * 2;
+  margin-bottom: 4em;
+  spacing: $base_padding * 2;
+  padding: $base_padding * 2 $base_padding * 3;
 }
 
 .ws-switcher-indicator {
diff --git a/widgets/_workspace-thumbnails.scss b/widgets/_workspace-thumbnails.scss
index 508ac25..0a1867c 100644
--- a/widgets/_workspace-thumbnails.scss
+++ b/widgets/_workspace-thumbnails.scss
@@ -3,7 +3,7 @@
 // thumbnails in overview
 .workspace-thumbnails {
   visible-width: 32px; //amount visible before hover
-  spacing: $base_spacing;
+  spacing: $base_padding;
   padding: $base_padding;
 
   .workspace-thumbnail {
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]