[gnome-shell/wip/snwh/more-papercut-fixes] theme: Stylesheet papercuts and other visual fixes

From: Sam Hewitt <snwh src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/snwh/more-papercut-fixes] theme: Stylesheet papercuts and other visual fixes
Date: Thu, 10 Feb 2022 17:30:05 +0000 (UTC)

commit 519a59cf59b885243ef12766a1b24cf2a4ed2144
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
    - clean up the networks dialog
    - make colours less dark
    - cleanup the popover menu item drawing
    - cleanup the mixins for tiles and overview icons
    - adjust the button style definitions on checked style
    - add osd button definitions

 data/theme/gnome-shell-sass/_colors.scss           |   6 +-
 data/theme/gnome-shell-sass/_common.scss           | 116 +++++++++++++++------
 data/theme/gnome-shell-sass/_drawing.scss          | 112 +++++++++++---------
 data/theme/gnome-shell-sass/_widgets.scss          |   1 -
 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  19 ++--
 data/theme/gnome-shell-sass/widgets/_buttons.scss  |   1 +
 data/theme/gnome-shell-sass/widgets/_calendar.scss |  67 ++++++------
 data/theme/gnome-shell-sass/widgets/_dash.scss     |   2 +-
 data/theme/gnome-shell-sass/widgets/_dialogs.scss  |  18 ++--
 data/theme/gnome-shell-sass/widgets/_entries.scss  |   8 +-
 .../gnome-shell-sass/widgets/_ibus-popup.scss      |  29 +++---
 data/theme/gnome-shell-sass/widgets/_keyboard.scss |  19 ++--
 .../gnome-shell-sass/widgets/_login-dialog.scss    |   4 +-
 .../gnome-shell-sass/widgets/_looking-glass.scss   |  27 +++--
 .../gnome-shell-sass/widgets/_message-list.scss    |   9 +-
 data/theme/gnome-shell-sass/widgets/_misc.scss     |   8 +-
 .../gnome-shell-sass/widgets/_network-dialog.scss  |  65 +++---------
 data/theme/gnome-shell-sass/widgets/_osd.scss      |   4 +-
 data/theme/gnome-shell-sass/widgets/_overview.scss |   2 +-
 data/theme/gnome-shell-sass/widgets/_panel.scss    |   6 +-
 data/theme/gnome-shell-sass/widgets/_popovers.scss |  92 ++++++++--------
 .../gnome-shell-sass/widgets/_screen-shield.scss   |   2 +-
 .../gnome-shell-sass/widgets/_screenshot.scss      |  93 ++++++-----------
 .../gnome-shell-sass/widgets/_search-entry.scss    |  24 ++---
 .../gnome-shell-sass/widgets/_search-results.scss  |  10 +-
 .../gnome-shell-sass/widgets/_switcher-popup.scss  |   6 +-
 .../gnome-shell-sass/widgets/_tiled-previews.scss  |  19 ----
 .../gnome-shell-sass/widgets/_window-picker.scss   |  12 +--
 .../widgets/_workspace-switcher.scss               |   2 +-
 .../widgets/_workspace-thumbnails.scss             |   2 +-
 data/theme/meson.build                             |   1 -
 31 files changed, 378 insertions(+), 408 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index c659acd747..55012a78db 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_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/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index a782d8f3dd..e230647f49 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_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($bubble_buttons_color,if($variant=='light', 9%, 2%));
-$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;
@@ -65,13 +63,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 +88,46 @@ 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, 4%));
 
 %bubble_button {
   padding: $base_padding * 2;
-  font-weight: bold;
+  font-weight: bold !important;
 
   @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; 
@@ -156,3 +151,64 @@ $bubble_button_radius:$base_border_radius*1.25;
     border-radius: 0 0 $bubble_button_radius $bubble_button_radius !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/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 7e953841eb..9d330755db 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_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 { }
+
+  @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==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;
   }
 }
 
@@ -90,13 +97,19 @@
   // 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
@@ -157,7 +170,16 @@
   // active button
   @else if $t==active {
     color: $tc;
-    background-color: mix($tc, $c, 2%);
+    background-color: mix($tc, $c, 9%);
+  }
+
+  // checked button
+  @else if $t==checked {
+    color: $tc;
+    background-color: mix($tc, $c, 11%);
+    &:hover {
+      background-color: mix($tc, $c, 13%);
+    }
   }
 
   // insensitive button
@@ -187,10 +209,16 @@
       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);
+    }
   }
 }
 
@@ -198,29 +226,19 @@
 @mixin tile($color) {
   @extend %tile;
   background-color: transparent;
-
-  &:hover,
-  &:selected:hover {
-    background-color: transparentize($color, .85);
-  }
-
-  &: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);
-  }
-
-  &:outlined,
-  &:checked,
-  &:active {
-    background-color: transparentize(darken($osd_bg_color, 10%), .5);
+  &:active { background-color: transparentize($color, .84);}
+  &:outlined, &:checked {
+    background-color: transparentize($color, .81);
+    &:active { background-color: transparentize($color, .78);}
   }
 }
 
-
 // overview icons
 // mixin fo tiles in the overview
 @mixin overview_icon($color) {
@@ -228,19 +246,14 @@
     @extend %tile;
     color: $color;
   }
-
-  &:hover,
-  &:focus:hover,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($color, .9);
-    }
+  &:hover {
+    .overview-icon { background-color: transparentize($color, .9);}
   }
 
   &:focus {
-    .overview-icon {
-      background-color: transparentize($color, .95);
-      // border-color: $selected_bg_color;
+    .overview-icon { background-color: transparentize($color, .87);}
+    &:hover {
+      .overview-icon { background-color: transparentize($color, .84);}
     }
   }
 
@@ -251,15 +264,14 @@
     }
   }
 
-  &:active,
-  &:focus:active,
-  &:checked {
-    .overview-icon {
-      background-color: transparentize(darken($osd_bg_color, 10%), .5);
-    }
+  &:active {
+    .overview-icon { background-color: transparentize($color, .84);}
   }
-}
 
+  &:selected, &:checked {
+    .overview-icon {background-color: transparentize($color, .81);}
+  }
+}
 
 // styling for elements within popovers that look like notifications
 @mixin card($flat: false) {
diff --git a/data/theme/gnome-shell-sass/_widgets.scss b/data/theme/gnome-shell-sass/_widgets.scss
index 6896213e8f..4ed082f1f9 100644
--- a/data/theme/gnome-shell-sass/_widgets.scss
+++ b/data/theme/gnome-shell-sass/_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/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 9f44473374..06e23b6929 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/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;
@@ -27,7 +27,7 @@ $app_grid_fg_color: #fff;
     padding: 10px 8px 5px 8px;
 
     > StBoxLayout {
-      spacing: $base_spacing;
+      spacing: $base_padding;
     }
   }
 }
@@ -50,8 +50,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 }
@@ -75,8 +74,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;
@@ -106,7 +105,7 @@ $app_grid_fg_color: #fff;
 // 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; }
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_buttons.scss 
b/data/theme/gnome-shell-sass/widgets/_buttons.scss
index 709ac467c7..6a72c07966 100644
--- a/data/theme/gnome-shell-sass/widgets/_buttons.scss
+++ b/data/theme/gnome-shell-sass/widgets/_buttons.scss
@@ -2,4 +2,5 @@
 
 .button {
   @extend %button; // that's it
+  min-height: 22px;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index fee76b0c98..241e088db0 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -7,7 +7,7 @@
 
 // Calendar menu side column
 .datemenu-calendar-column {
-  spacing: $base_spacing;
+  spacing: $base_padding;
   border: none;
   border-style: solid;
   border-color: $borders_color;
@@ -20,14 +20,14 @@
   }
 
   .datemenu-displays-box {
-    spacing: $base_spacing;
+    spacing: $base_padding;
   }
 }
 
 .events-section-title {
   @include card($flat: true);
   color: $insensitive_fg_color;
-  font-weight: bold;
+  @extend %heading;
   padding: .4em;
 }
 
@@ -38,15 +38,13 @@
 
   // weekday label
   .day-label {
-    @include fontsize($base_font_size+1);
+    @extend %title_4;
     color: $insensitive_fg_color;
-    font-weight: bold;
   }
 
   // date label
   .date-label {
-    @include fontsize($base_font_size+7);
-    font-weight: 1000;
+    @extend %title_1;
   }
 }
 
@@ -58,7 +56,7 @@
   // month
   .calendar-month-label {
     color: lighten($fg_color,5%);
-    font-weight: bold;
+    @extend %heading;
     padding: 8px 0;
   }
 
@@ -80,14 +78,14 @@
   $calendar_day_size: 32px;
 
   .calendar-day-base {
-    @include fontsize($base_font_size - 3);
     text-align: center;
     padding: 0;
     margin: 2px;
     height: $calendar_day_size;
     width: $calendar_day_size;
     border-radius: $calendar_day_size * 0.5 + 2px;
-    font-feature-settings: "tnum";
+    @extend %numeric;
+    @extend %smaller;
     
     &:hover, &:focus { background-color: $hover_bg_color; }
     &:active,&:selected {
@@ -98,10 +96,10 @@
     // day of week heading
     &.calendar-day-heading {
       color: $insensitive_fg_color;
-      font-weight: 1000;
       padding-top: $base_padding;
       height: 16px !important; // force heading to be smaller height
-      @include fontsize($base_font_size - 2);
+      @extend %heading;
+      @extend %smaller;
     }
   }
 
@@ -176,23 +174,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);
   }
 }
 
@@ -202,29 +200,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; }
@@ -232,9 +227,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);
   }
 }
 
@@ -244,33 +239,31 @@
   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;
   }
@@ -280,6 +273,6 @@
   }
 
   .weather-forecast-temp {
-    font-weight: bold;
+    @extend %heading;
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 4a8a1f9b61..566400a4a1 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -9,7 +9,7 @@ $dash_border_radius: $modal_radius + 8px;
 
 // container for the dash
 #dash {
-  @include fontsize($base_font_size - 2);
+  @extend %caption;
   margin-top: $base_margin * 3;
   padding: $dash_padding;
 
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss 
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index add8f5d076..226241d697 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -1,7 +1,7 @@
 /* Modal Dialogs */
 
 .headline {
-  @include fontsize($base_font_size + 1);
+  @extend %title_1;
 }
 
 .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/data/theme/gnome-shell-sass/widgets/_entries.scss 
b/data/theme/gnome-shell-sass/widgets/_entries.scss
index 5a11945566..17e05cd2b0 100644
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss 
b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
index 6f820236ae..28f89f3369 100644
--- a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_keyboard.scss 
b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 43d5af8283..91d9a3d5cb 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_login-dialog.scss 
b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
index 6d16ac241a..c168bb8133 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -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;
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss 
b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
index e03457e28c..8639889e3e 100644
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 3cb2d53a29..11fe5228bf 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -7,8 +7,7 @@
   padding: 0;
 
   .message-list-placeholder { 
-    font-weight:1000; 
-    font-size: 18pt;
+    @extend %title_1;
     color: $insensitive_fg_color;
     spacing: 12px;
 
@@ -23,7 +22,7 @@
 
 
 .message-list-sections {
-  spacing: $base_spacing;
+  spacing: $base_padding;
   margin: 0; 
   padding-bottom: $base_padding;
 
@@ -34,7 +33,7 @@
 
 .message-list-section,
 .message-list-section-list {
-  spacing: $base_spacing;
+  spacing: $base_padding;
 }
 
 // do-not-disturb + clear button
@@ -42,7 +41,7 @@
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
   padding: $base_padding;
   margin: 0;
-  spacing: $base_spacing;
+  spacing: $base_padding;
 
   .dnd-button {
     // We need this because the focus outline isn't inset like for the buttons
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 0fe174a74e..740927824c 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_network-dialog.scss 
b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
index 51394ed39c..168ec3a798 100644
--- a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
+++ b/data/theme/gnome-shell-sass/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: $base_icon_size*2;}
 .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/data/theme/gnome-shell-sass/widgets/_osd.scss b/data/theme/gnome-shell-sass/widgets/_osd.scss
index 87f376d17f..b5ac47b3c6 100644
--- a/data/theme/gnome-shell-sass/widgets/_osd.scss
+++ b/data/theme/gnome-shell-sass/widgets/_osd.scss
@@ -4,9 +4,9 @@ $osd_levelbar_height:8px;
 
 .osd-window {
   @extend %osd_panel;
+  @extend %heading;
   text-align: center;
-  font-weight: bold;
-  spacing: $base_spacing * 2; // 12px
+  spacing: $base_padding * 2; // 12px
   margin: $base_margin * 8; // 32px
   min-width: 64px;
   min-height: 64px;
diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss 
b/data/theme/gnome-shell-sass/widgets/_overview.scss
index c593cebc4e..d8e70eaf22 100644
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 7e577e828c..83f49c6a8f 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/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
@@ -150,13 +150,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/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index d0bdfa985c..94de815ebf 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -4,7 +4,7 @@
 .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-border-radius: 0;
   -arrow-background-color: transparent;
   -arrow-border-color: transparent;
   -arrow-border-width: 0;
@@ -25,11 +25,7 @@
     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 {}
+    .popup-menu-content { padding: $base_padding*1.5; }
   }
 }
 
@@ -43,51 +39,44 @@
 }
 
 // menu items
+%menu_item,
 .popup-menu-item {
-  spacing: $base_spacing;
+  spacing: $base_padding;
   padding: $base_padding*1.5;
   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; }
+  &:hover { background-color: $hover_bg_color;}
 
-  &:hover {
-    background-color: $hover_bg_color;
+  &.selected,
+  &:checked {
+    background-color: $checked_bg_color;
   }
+  &:checked:hover { background-color: lighten($checked_bg_color, 3%);}
 
   &:checked {
-    background-color: $hover_bg_color;
     margin-bottom: 0;
-    box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
+    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;
   }
 
   &:active { 
-    background-color: lighten($active_bg_color,3%);
-    color: lighten($active_fg_color,3%);
+    background-color: $active_bg_color;
+    color: $active_fg_color;
   }
 
   &:insensitive { color: transparentize($fg_color,0.5);}
 }
 
+
 // all icons and other graphical elements
 .popup-inactive-menu-item {
   color: $fg_color;
 
   // "Open Windows" label
-  font-weight: bold;
-  font-size: smaller;
+  @extend %caption_heading;
 
   &:insensitive { color: $insensitive_fg_color; }
 }
@@ -95,21 +84,23 @@
 // 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;
   }
 
   .popup-menu-item {
@@ -120,6 +111,13 @@
     &:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
+
+    &:hover { background-color: lighten($hover_bg_color, 10%);}
+    &:checked {
+      background-color: lighten($checked_bg_color, 10%);
+      &:hover { background-color: lighten($checked_bg_color, 8%);}
+    }
+    &:active { background-color: lighten($active_bg_color, 10%);}
   }
 
   .popup-menu-section {
@@ -132,12 +130,9 @@
 
 // container for radio and check boxes
 .popup-menu-ornament {
+  @extend %heading;
   width: 1.2em;
-  font-weight: bold;
-  font-size: 1em;
-
-  &:ltr { text-align: right; };
-  &:rtl { text-align: left; };
+  text-align: center;
 }
 
 // separator
@@ -176,29 +171,28 @@
   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-ornament {
+    width: 0 !important;
+  }
 
   .popup-menu-item {
-    &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
-    &:rtl { padding-right:$base_padding;padding-left:$base_padding*2; }
+    @extend %menu_item;
+
+    &:ltr { padding-left:$base_padding;}
+    &:rtl { padding-right:$base_padding;}
   }
 
   // lock screen, shutdown, etc. buttons
   .popup-menu-icon { 
-    padding:0;
-    margin: 0 $base_margin;
     -st-icon-style: symbolic;
+    &:ltr {margin-right: $base_margin;}
+    &:rtl {margin-left: $base_margin;}
   }
 
-  // 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: 10px;}
+    &:rtl { margin-right: 10px;}
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss 
b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
index fec369724a..6550e5bc09 100644
--- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_screenshot.scss 
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 1113606ebc..5ac59a437d 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/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: $base_icon_size*2;}
 }
 
-$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; }
   &: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/data/theme/gnome-shell-sass/widgets/_search-entry.scss 
b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
index 409fff0ce9..122a3a5220 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -5,27 +5,17 @@ $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 { 
     color: inherit;
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss 
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index c377ba61ff..3ece1b44d4 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -39,11 +39,11 @@
 
 // "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
@@ -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/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss 
b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index b3144a2198..726b5001ba 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/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,7 +20,7 @@ $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
@@ -36,7 +36,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/data/theme/gnome-shell-sass/widgets/_window-picker.scss 
b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index fa3f191945..e494f6d8a1 100644
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/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/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss 
b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
index 69cf4148bc..2a30a891a8 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -18,7 +18,7 @@ $ws_border_radius: $modal_radius + 8px;
   background: transparent;
   border: none;
   border-radius: 0;
-  spacing: $base_spacing * 2;
+  spacing: $base_padding * 2;
 }
 
 .ws-switcher-box {
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss 
b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
index 508ac25361..0a1867cc89 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
+++ b/data/theme/gnome-shell-sass/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 {
diff --git a/data/theme/meson.build b/data/theme/meson.build
index 8467325506..26471b6792 100644
--- a/data/theme/meson.build
+++ b/data/theme/meson.build
@@ -37,7 +37,6 @@ theme_sources = files([
   'gnome-shell-sass/widgets/_slider.scss',
   'gnome-shell-sass/widgets/_switcher-popup.scss',
   'gnome-shell-sass/widgets/_switches.scss',
-  'gnome-shell-sass/widgets/_tiled-previews.scss',
   'gnome-shell-sass/widgets/_window-picker.scss',
   'gnome-shell-sass/widgets/_workspace-switcher.scss',
   'gnome-shell-sass/widgets/_workspace-thumbnails.scss'
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]