[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 14:45:23 +0000 (UTC)

commit 1efe265c836d7135c06da016823b7c63872a0e7c
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
    - add osd button definitions

 data/theme/gnome-shell-sass/_common.scss           | 79 +++++++++++++++---
 data/theme/gnome-shell-sass/_drawing.scss          |  7 ++
 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 ++---
 .../gnome-shell-sass/widgets/_ibus-popup.scss      | 29 +++----
 data/theme/gnome-shell-sass/widgets/_keyboard.scss |  2 +-
 .../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  |  3 +-
 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 |  8 +-
 .../gnome-shell-sass/widgets/_screen-shield.scss   |  2 +-
 .../gnome-shell-sass/widgets/_screenshot.scss      | 93 +++++++---------------
 .../gnome-shell-sass/widgets/_search-entry.scss    |  4 +-
 .../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 -
 29 files changed, 223 insertions(+), 224 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index a782d8f3dd..fa284ec09b 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;
@@ -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;
@@ -102,15 +94,15 @@ stage {
   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);}
+  &:active { @include button(active);}
+  &:checked { @include button(checked);}
 }
 
 // dialogs
@@ -126,13 +118,14 @@ $bubble_button_radius:$base_border_radius*1.25;
 
 %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 +149,65 @@ $bubble_button_radius:$base_border_radius*1.25;
     border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
   }
 }
+
+// osd buttons {
+%osd_button {
+  font-weight: bold;
+  @include button(normal, $c:$osd_bg_color);
+  &:insensitive { @include button(insensitive, $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);}
+  &:checked { @include button(checked, $c:$osd_bg_color);}
+}
+
+/* General Typography */
+
+%large_title {
+  font-weight: 300;
+  @include fontsize(24pt);
+}
+
+%title_1 {
+  font-weight: 800;
+  @include fontsize(20pt);
+}
+
+%title_2 {
+  font-weight: 800;
+  @include fontsize(15pt);
+}
+
+%title_3 {
+  font-weight: 700;
+  @include fontsize(15pt);
+}
+
+%title_4 {
+  font-weight: 700;
+  @include fontsize(13pt);
+}
+
+%heading {
+  font-weight: 700;
+  @include fontsize(11pt);
+}
+
+%caption_heading {
+  font-weight: 700;
+  @include fontsize(9pt);
+}
+
+%caption {
+  font-weight: 400;
+  @include fontsize(9pt);
+}
+
+%smaller {
+  font-weight: 400;
+  @include fontsize(8pt);
+}
+
+
+%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..4291bb974e 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -160,6 +160,13 @@
     background-color: mix($tc, $c, 2%);
   }
 
+  // checked button
+  @else if $t==checked {
+    color: $tc;
+    background-color: darken(mix($tc, $c, 2%), 5%);
+  }
+
+
   // insensitive button
   @else if $t==insensitive {
     color: transparentize($tc, 0.5);
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..83ff79ca0f 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_3;
     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/_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..dcdcc7b157 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -94,7 +94,7 @@ $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 {
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..7fc63fb14d 100644
--- a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
@@ -51,7 +51,6 @@
 
 // list item
 .nm-dialog-item {
-  @include fontsize($base_font_size);
   border: none;
   padding: $base_padding * 2;
   spacing: 0px;
@@ -72,7 +71,7 @@
 
 // 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; }
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..706544aab6 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -44,7 +44,7 @@
 
 // menu items
 .popup-menu-item {
-  spacing: $base_spacing;
+  spacing: $base_padding;
   padding: $base_padding*1.5;
   margin: 2px 0;
   border-radius: $base_border_radius;
@@ -86,8 +86,7 @@
   color: $fg_color;
 
   // "Open Windows" label
-  font-weight: bold;
-  font-size: smaller;
+  @extend %caption_heading;
 
   &:insensitive { color: $insensitive_fg_color; }
 }
@@ -132,9 +131,8 @@
 
 // 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; };
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..cb33002f31 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -10,8 +10,8 @@ $search_entry_height: 36px;
   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;
   
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]