From 49c0b849c44de2f429828b1ca92b9fd67bf76257 Mon Sep 17 00:00:00 2001
From: Sam Hewitt <snwh@gnome.org>
Date: Wed, 29 Nov 2023 14:18:59 -0330
Subject: [PATCH] style: Improve text scaling support

- new drawing function to convert px to em, for select instances
- updated fontsize function to convert fonts in pt to em
- replace instances of discrete sizes with defined values
- fix instances where assets or icons did not scale along with text
- rework panel buttons to accommodate the scaling padding and icons
- new 'scalable' definitions for elements that follow text scaling

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3033>
---
 data/theme/gnome-shell-high-contrast.scss     |  1 -
 data/theme/gnome-shell-sass/_colors.scss      |  2 +
 data/theme/gnome-shell-sass/_common.scss      | 66 +++++++++-------
 data/theme/gnome-shell-sass/_drawing.scss     | 27 +++++--
 .../gnome-shell-sass/widgets/_app-grid.scss   | 44 +++++------
 .../gnome-shell-sass/widgets/_buttons.scss    | 15 ++--
 .../gnome-shell-sass/widgets/_calendar.scss   | 29 +++----
 .../theme/gnome-shell-sass/widgets/_dash.scss |  4 +-
 .../gnome-shell-sass/widgets/_dialogs.scss    | 40 +++++-----
 .../gnome-shell-sass/widgets/_entries.scss    | 10 +--
 .../gnome-shell-sass/widgets/_hotplug.scss    |  4 +-
 .../gnome-shell-sass/widgets/_ibus-popup.scss |  6 +-
 .../gnome-shell-sass/widgets/_keyboard.scss   | 21 +++---
 .../gnome-shell-sass/widgets/_login-lock.scss | 70 ++++++++---------
 .../widgets/_looking-glass.scss               | 11 ++-
 .../widgets/_message-list.scss                | 66 ++++++++--------
 .../theme/gnome-shell-sass/widgets/_misc.scss |  4 +-
 .../widgets/_notifications.scss               |  2 +-
 data/theme/gnome-shell-sass/widgets/_osd.scss | 22 +++---
 .../gnome-shell-sass/widgets/_overview.scss   |  2 +-
 .../gnome-shell-sass/widgets/_panel.scss      | 46 +++++++-----
 .../gnome-shell-sass/widgets/_popovers.scss   | 16 ++--
 .../widgets/_quick-settings.scss              | 75 ++++++++++---------
 .../gnome-shell-sass/widgets/_screenshot.scss | 74 +++++++++---------
 .../widgets/_search-entry.scss                |  8 +-
 .../widgets/_search-results.scss              | 16 ++--
 .../gnome-shell-sass/widgets/_slider.scss     |  4 +-
 .../widgets/_switcher-popup.scss              |  5 +-
 .../gnome-shell-sass/widgets/_switches.scss   |  2 +-
 .../widgets/_window-picker.scss               | 20 ++---
 .../widgets/_workspace-switcher.scss          |  2 +-
 .../widgets/_workspace-thumbnails.scss        |  2 +-
 js/ui/appDisplay.js                           |  2 +-
 js/ui/dateMenu.js                             |  2 +-
 js/ui/messageList.js                          |  8 +-
 35 files changed, 369 insertions(+), 359 deletions(-)

diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
index 00f247e73..67378203e 100644
--- a/data/theme/gnome-shell-high-contrast.scss
+++ b/data/theme/gnome-shell-high-contrast.scss
@@ -5,7 +5,6 @@ $variant: 'dark';
 @import "gnome-shell-sass/_common";
 @import "gnome-shell-sass/_widgets";
 
-.toggle-switch { width: 48px; }
 .toggle-switch {
   background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
   &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index ebb9a0171..5a8d6525f 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -37,7 +37,9 @@ $osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
 $osd_borders_color: transparentize($osd_fg_color, 0.9);
 $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
 
+// shadows
 $shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
+$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
 
 // buttons
 $button_mix_factor: if($variant == 'light', 12%, 9%);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 5b117ea71..965f35075 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -25,29 +25,39 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
 
 /* Global Values */
 
-// padding, margin and spacing
-$base_padding: 6px;
-$base_margin: 4px;
+// Base values of elemetns of the shell in their smallest "unit".
+// These are used in calculations elsewhere to have elements in proportion
+$base_font_size: 11pt;      // font size
+$base_padding: 6px;         // internal padding of elements
+$base_margin: 4px;          // margin between elements
+$base_border_radius: 8px;   // radii on all elements
 
-// border radii
-$base_border_radius: 8px;
+// Radius used to make sure elements that have rounded corners stay as such.
+// This is a workaround for 50% not working.
+$forced_circular_radius: 999px;
 
 // radii of things that display over other things, e.g. popovers
-$modal_radius: $base_border_radius*2; // 24px
+$modal_radius: $base_border_radius * 2;
 
 // Chroma key to flag when a background-color is always occluded, not visible.
 // This allows any box-shadow behind it to be rendered more efficiently by
 // omitting the middle rectangle.
 $invisible_occluded_bg_color: rgba(3,2,1,0);
 
-// fonts
-$base_font_size: 11;
-$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
+// Fixed icon sizes
+$base_icon_size: 16px;
+$medium_icon_size: $base_icon_size * 1.5; // 24px
+$large_icon_size: $base_icon_size * 2; // 32px
+
+// Scaled values
+// Used in elements that follow text scaling factors
+$scaled_padding: to_em(6px); // same as $base_padding
+
+// Used for symbolic icons that scale
+$scalable_icon_size: to_em(16px);
+$medium_scalable_icon_size: $scalable_icon_size * 1.5;
+$large_scalable_icon_size: $scalable_icon_size * 2;
 
-// icons
-$base_icon_size: 1.09em;
-$large_icon_size: $base_icon_size*2; // 32px
-// $base_icon_size: 16px;
 
 // Stage
 stage {
@@ -59,7 +69,7 @@ stage {
 
 // icon tiles
 %tile {
-  border-radius: $base_border_radius * 2; // 16px
+  border-radius: $base_border_radius * 2;
   padding: $base_padding;
   spacing: $base_padding;
   border: 2px solid transparent;
@@ -78,7 +88,7 @@ stage {
   border-style: solid;
   border-width: 1px;
   font-weight: bold;
-  padding: $base_padding*.5 $base_padding*4;
+  padding: $base_padding * .5 $base_padding * 4;
 }
 
 %button {
@@ -108,7 +118,7 @@ stage {
 // normal entry style
 %entry_common {
   border-radius: $base_border_radius;
-  padding: $base_padding*1.5 $base_padding*1.5;
+  padding: $base_padding * 1.5 $base_padding * 1.5;
   selection-background-color: $selected_bg_color;
   selected-color: $selected_fg_color;
 }
@@ -172,7 +182,7 @@ stage {
   border: 1px solid transparentize($light_1, 0.9);
   color: $light_1;
 
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
   padding: $base_padding $base_padding * 2;
   text-align: center;
 
@@ -185,47 +195,47 @@ stage {
 /* General Typography */
 %large_title {
   font-weight: 300;
-  @include fontsize(24);
+  @include fontsize(24pt);
 }
 
 %title_1 {
   font-weight: 800;
-  @include fontsize(20);
+  @include fontsize(20pt);
 }
 
 %title_2 {
   font-weight: 800;
-  @include fontsize(15);
+  @include fontsize(15pt);
 }
 
 %title_3 {
   font-weight: 700;
-  @include fontsize(15);
+  @include fontsize(15pt);
 }
 
 %title_4 {
   font-weight: 700;
-  @include fontsize(13);
+  @include fontsize(13pt);
 }
 
 %heading {
   font-weight: 700;
-  @include fontsize(11);
+  @include fontsize(11pt);
 }
 
 %caption_heading {
   font-weight: 700;
-  @include fontsize(9);
+  @include fontsize(9pt);
 }
 
 %caption {
   font-weight: 400;
-  @include fontsize(9);
+  @include fontsize(9pt);
 }
 
 %smaller {
   font-weight: 400;
-  @include fontsize(8);
+  @include fontsize(8pt);
 }
 
 %monospace {font-family: monospace;}
@@ -237,8 +247,8 @@ stage {
   color: $osd_fg_color;
   background-color: $osd_bg_color;
   border: 1px solid $osd_outer_borders_color;
-  border-radius: 999px;
-  padding: $base_padding*2;
+  border-radius: $forced_circular_radius;
+  padding: $base_padding * 2;
 
   @if $is_highcontrast {
     border: 2px solid $hc_inset_color;
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 404c4dc81..23e996ac2 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -7,10 +7,20 @@
   @return 0 1px $c;
 }
 
-// provide font size in rem, with px fallback
-@mixin fontsize($size: 24, $base: 16) {
-  font-size: round($size) + pt;
-  //font-size: ($size / $base) * 1rem;
+// Function to convert px values to em
+@function to_em($input, $base: 16px) {
+  // multiplied and divided by 1000 to make up for round() shortcoming
+  $em_value: ($input / $base) * 1.091 * 1000;
+  @return round($em_value) / 1000 * 1em;
+}
+
+// Mixin to convert provided font size in pt to em units
+@mixin fontsize($size, $base: 16px, $unit: pt) {
+  // if pt, convert into unitless value with the assumption: 1pt = 1.091px
+  $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
+  $rounded_size: round($adjusted_size / $base) / 1000;
+  font-size: $rounded_size * 1em;
+  // font-size: round($size) + pt;
 }
 
 @mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
@@ -326,7 +336,8 @@
 
 // styling for elements within popovers that look like notifications
 @mixin card($flat: false) {
-  border-radius: $base_border_radius*1.5;
+  border-radius: $base_border_radius * 1.5;
+  padding: $scaled_padding * 2;
   margin: $base_margin;
 
   @if $flat {
@@ -355,7 +366,7 @@
   font-weight: normal;
   spacing: $base_padding;
   transition-duration: 100ms;
-  padding: $base_padding*1.5 $base_padding*2;
+  padding: $base_padding * 1.5 $base_padding * 2;
 
   @if $flat {
     @include button(undecorated);
@@ -387,7 +398,7 @@
 
   transition-duration: 150ms;
   border: 3px solid transparent;
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
 
   font-weight: bold;
   background-color: transparent;
@@ -429,7 +440,7 @@
     #{$child_class} {
       transition-duration: 150ms;
       border: 3px solid transparent;
-      border-radius: 99px;
+      border-radius: $forced_circular_radius;
     }
 
     &:active, &:focus, &:checked {
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 1231f91e1..c0d1631da 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -21,8 +21,8 @@ $app_icon_size: 96px;
   @include overview_icon($system_fg_color);
 
   .overview-icon {
-    padding: $base_padding*2;
-    border-radius: $base_border_radius*3;
+    padding: $base_padding * 2;
+    border-radius: $base_border_radius * 3;
     color: $system_fg_color;
   }
   .overview-icon.overview-icon-with-label {
@@ -39,7 +39,7 @@ $app_icon_size: 96px;
 
 // expanded folder
 .app-folder-dialog {
-  border-radius: $modal_radius*4;
+  border-radius: $modal_radius * 4;
   background-color: $system_overlay_bg_color;
 
   @if $is_highcontrast {
@@ -51,8 +51,8 @@ $app_icon_size: 96px;
   }
 
   & .folder-name-container {
-    padding: 24px 36px 0;
-    spacing: 12px;
+    padding: $base_padding * 4 $base_padding * 6 0;
+    spacing: $base_padding * 2;
 
     & .folder-name-label,
     & .folder-name-entry {
@@ -66,15 +66,6 @@ $app_icon_size: 96px;
 
     /* FIXME: this is to keep the label in sync with the entry */
     & .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
-
-    & .edit-folder-button {
-      @extend %button;
-      padding: 0;
-      width: 36px;
-      height: 36px;
-      border-radius: 99px;
-      & > StIcon { icon-size: $base_icon_size }
-    }
   }
 
   & .icon-grid {
@@ -92,7 +83,7 @@ $app_icon_size: 96px;
 }
 
 .app-folder-dialog-container {
-  padding: $base_padding*2;
+  padding: $base_padding * 2;
   width: 720px;
   height: 720px;
 }
@@ -115,14 +106,15 @@ $app_icon_size: 96px;
 }
 
 // App Grid pagination indicators
+$page_indicator_size: 10px;
 .page-indicator {
   padding: $base_padding $base_padding * 2 0;
   transition-duration:400ms;
 
   .page-indicator-icon {
-    width: 10px;
-    height: 10px;
-    border-radius: 10px; // the same as height&width
+    width: $page_indicator_size;
+    height: $page_indicator_size;
+    border-radius: $forced_circular_radius;
     background-color: white;
     transition-duration: 400ms;
   }
@@ -136,7 +128,7 @@ $app_icon_size: 96px;
 .system-action-icon {
   background-color: transparentize($system_fg_color,.9);
   color: $system_fg_color;
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
   icon-size: $app_icon_size * 0.5;
   @if $is_highcontrast {
     box-shadow: inset 0 0 0 2px $hc_inset_color;
@@ -153,7 +145,7 @@ $app_icon_size: 96px;
     background-gradient-start: rgba(255, 255, 255, 0.05);
     background-gradient-end: transparent;
     background-gradient-direction: horizontal;
-    border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5;
+    border-radius: $modal_radius * 1.5 0px 0px $modal_radius * 1.5;
   }
 
   &.previous:ltr,
@@ -161,16 +153,16 @@ $app_icon_size: 96px;
     background-gradient-start: transparent;
     background-gradient-end: rgba(255, 255, 255, 0.05);
     background-gradient-direction: horizontal;
-    border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px;
+    border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px;
   }
 }
 
 .page-navigation-arrow {
-  margin: 6px;
-  padding: 18px;
-  width: 24px;
-  height: 24px;
-  border-radius: 99px;
+  margin: $base_padding;
+  padding: $base_padding * 3;
+  width: $medium_icon_size;
+  height: $medium_icon_size;
+  border-radius: $forced_circular_radius;
   transition-duration: 100ms;
 
   > StIcon { color: $system_fg_color;}
diff --git a/data/theme/gnome-shell-sass/widgets/_buttons.scss b/data/theme/gnome-shell-sass/widgets/_buttons.scss
index 84d23161f..18db60c91 100644
--- a/data/theme/gnome-shell-sass/widgets/_buttons.scss
+++ b/data/theme/gnome-shell-sass/widgets/_buttons.scss
@@ -1,19 +1,20 @@
 /* Buttons */
 
 .button {
-  @extend %button; // that's it
-  min-height: 22px;
+  @extend %button;
+  // uses scalable value since it's a text element
+  min-height: to_em(22px);
 }
 
 .icon-button {
-  @extend .button; // same style as buttons
+  @extend %button;
 
-  border-radius: 99px;
-  padding: $base_padding*2;
-  min-height: 16px;
+  border-radius: $forced_circular_radius; // is circular
+  padding: $scaled_padding * 2;
+  min-height: $scalable_icon_size;
 
   StIcon {
-    icon-size: $base_icon_size;
+    icon-size: $scalable_icon_size;
     -st-icon-style: symbolic;
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index fc054da38..5bc8cebe6 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -2,7 +2,7 @@
 
 // overall menu
 #calendarArea {
-  padding: $base_padding - 2px;
+  padding: $base_margin;
 }
 
 // Calendar menu side column
@@ -40,7 +40,7 @@
     // prev/next month icons
     .calendar-change-month-back StIcon,
     .calendar-change-month-forward StIcon {
-      icon-size: $base_icon_size;
+      icon-size: $scalable_icon_size;
     }
 
     // month label
@@ -50,12 +50,10 @@
     }
 
     .pager-button {
-      @extend .button, .flat;
-      padding: 0 !important;
-      height: 32px;
-      width: 32px;
-      margin: 2px;
-      border-radius: $base_border_radius;
+      @extend .icon-button, .flat;
+      margin: $base_margin * 0.5;
+      padding: $base_padding !important;
+      border-radius: $base_border_radius !important;
       transition-duration: 100ms;
     }
   }
@@ -66,7 +64,7 @@
     @extend %smaller;
     @extend .button, .flat;
 
-    border-radius: 99px;
+    border-radius: $forced_circular_radius;
     height: 3em !important;
     width: 3em !important;
     margin: 2px;
@@ -82,7 +80,7 @@
       height: 0.93em !important; // force heading to be smaller height
       padding-top: $base_padding !important;
       margin-bottom: 0;
-      border-radius: 9px;
+      border-radius: $base_border_radius * 1.5;
     }
 
     &.calendar-weekday {}
@@ -109,13 +107,13 @@
 
   // week number style
   .calendar-week-number {
-    @include fontsize($base_font_size - 4);
+    @extend %smaller;
     font-weight: bold;
     font-feature-settings: "tnum";
     text-align: center;
-    margin: 6px;
+    margin: $base_padding;
     padding: 0 $base_padding;
-    border-radius: 3px;
+    border-radius: $base_border_radius * 0.5;
     background-color: transparentize($fg_color, 0.9);
     color: $insensitive_fg_color;
 
@@ -128,7 +126,6 @@
 /* Events */
 .events-button {
   @include card;
-  padding: $base_padding * 2;
 
   .events-box {
     spacing: $base_padding;
@@ -154,7 +151,6 @@
 /* World clocks */
 .world-clocks-button {
   @include card;
-  padding: $base_padding * 2;
 
   .world-clocks-grid {
     spacing-rows: $base_padding;
@@ -193,7 +189,6 @@
 /* Weather */
 .weather-button {
   @include card;
-  padding: $base_padding * 2;
 
   .weather-box {
     spacing: $base_padding + $base_margin;
@@ -226,7 +221,7 @@
   }
 
   .weather-forecast-icon {
-    icon-size: $large_icon_size;
+    icon-size: $large_scalable_icon_size;
   }
 
   .weather-forecast-temp {
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 4af0ab0da..169d1e245 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -4,7 +4,7 @@
 $dash_background_color: $system_overlay_bg_color;
 
 $dash_placeholder_size: 32px;
-$dash_padding: $base_padding*2; // 12px
+$dash_padding: $base_padding * 2; // 12px
 $dash_border_radius: $modal_radius + $dash_padding;
 
 // container for the dash
@@ -53,7 +53,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
   // each app item on the dash
   .app-well-app .overview-icon {
     padding: $base_padding;
-    border-radius: $base_border_radius*2;
+    border-radius: $base_border_radius * 2;
   }
 
   // show apps button
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index 98b3b8ce5..48bb9c0ca 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -10,8 +10,8 @@
   box-shadow: inset 0 0 0 1px $outer_borders_color;
 
   .modal-dialog-content-box {
-    margin: 32px 40px;
-    spacing: 32px;
+    margin: $base_margin * 8 $base_margin * 10;
+    spacing: $base_margin * 8;
     max-width: 28em;
   }
 
@@ -32,7 +32,7 @@
 
 /* Message Dialog */
 .message-dialog-content {
-  spacing: 18px;
+  spacing: $base_padding * 3;
 
   .message-dialog-title {
     text-align: center;
@@ -45,7 +45,7 @@
 
 /* Dialog List */
 .dialog-list {
-  spacing: 18px;
+  spacing: $base_padding * 3;
 
   .dialog-list-title {
     text-align: center;
@@ -71,8 +71,8 @@
 /* Run Dialog */
 .run-dialog {
   .modal-dialog-content-box {
-    margin-top: 24px;
-    margin-bottom: 14px;
+    margin-top: $base_padding * 4;
+    margin-bottom: $base_padding * 2;
   }
   .run-dialog-entry { width: 20em; }
   .run-dialog-description {
@@ -88,25 +88,25 @@
   width: 28em;
 
   .modal-dialog-content-box {
-    margin-bottom: 24px;
+    margin-bottom: $base_margin * 6;
   }
 }
 
 .prompt-dialog-password-grid {
-  spacing-rows: 8px;
-  spacing-columns: 4px;
+  spacing-rows: $base_margin * 2;
+  spacing-columns: $base_margin;
 
   .prompt-dialog-password-entry {
     width: auto;
 
     // 4px (spacing) + 16px (spinner-width)
-    &:ltr { margin-left: 20px; }
-    &:rtl { margin-right: 20px; }
+    &:ltr { margin-left: $base_margin+$base_icon_size; }
+    &:rtl { margin-right: $base_margin+$base_icon_size; }
   }
 }
 
 .prompt-dialog-password-layout {
-  spacing: 8px;
+  spacing: $base_margin * 2;
 }
 
 .prompt-dialog-password-entry {
@@ -129,30 +129,30 @@
 
 .polkit-dialog-user-layout {
   text-align: center;
-  spacing: 8px;
-  margin-bottom: 6px;
+  spacing: $base_margin * 2;
+  margin-bottom: $base_padding;
 
   .polkit-dialog-user-root-label { color: $warning_color; }
 }
 
 /* Audio selection dialog */
 .audio-device-selection-dialog {
-  .modal-dialog-content-box { margin-bottom: 28px; }
-  .audio-selection-box { spacing: 20px; }
+  .modal-dialog-content-box { margin-bottom: $base_margin * 7; }
+  .audio-selection-box { spacing: $base_margin * 5; }
 }
 
 .audio-selection-device {
-  border-radius: $base_border_radius*2;
+  border-radius: $base_border_radius * 2;
   &:hover,&:focus { background-color: $hover_bg_color; }
-  &:active { 
+  &:active {
     background-color: $selected_bg_color;
     color: $selected_fg_color;
   }
 }
 
 .audio-selection-device-box {
-  padding: 20px;
-  spacing: 20px;
+  padding: $base_margin * 5;
+  spacing: $base_margin * 5;
 }
 
 .audio-selection-device-icon {
diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss b/data/theme/gnome-shell-sass/widgets/_entries.scss
index a10546fa9..41e10f766 100644
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/widgets/_entries.scss
@@ -4,17 +4,17 @@ StEntry {
   @extend %entry;
 
   StIcon.capslock-warning {
-    icon-size: $base_icon_size;
+    icon-size: $scalable_icon_size;
     warning-color: $warning_color;
-    padding: 0 4px;
+    padding: 0 $base_margin;
   }
 
   StIcon.peek-password {
-    icon-size: $base_icon_size;
-    padding: 0 4px;
+    icon-size: $scalable_icon_size;
+    padding: 0 $base_margin;
   }
 
   StLabel.hint-text {
-    margin-left: 2px;
+    margin-left: $base_margin * 0.5;
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_hotplug.scss b/data/theme/gnome-shell-sass/widgets/_hotplug.scss
index acd0265dc..f20626b5e 100644
--- a/data/theme/gnome-shell-sass/widgets/_hotplug.scss
+++ b/data/theme/gnome-shell-sass/widgets/_hotplug.scss
@@ -5,6 +5,6 @@
 }
 
 .hotplug-notification-item-icon {
-  icon-size: 24px;
-  padding: 0 4px;
+  icon-size: $medium_icon_size;
+  padding: 0 $base_margin;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
index 8cbaa9521..c1c0cfad8 100644
--- a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
@@ -17,7 +17,7 @@
 }
 
 .candidate-box {
-  padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
+  padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
   border-radius: $base_border_radius;
   &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
   &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
@@ -25,8 +25,8 @@
 
 .candidate-page-button-box {
   height: 2em;
-  .vertical & { padding-top: $base_padding*2; }
-  .horizontal & { padding-left: $base_padding*2; }
+  .vertical & { padding-top: $base_padding * 2; }
+  .horizontal & { padding-left: $base_padding * 2; }
 }
 
 .candidate-page-button {
diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 1dc6b953c..99d86337a 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -1,7 +1,7 @@
 /* On-screen Keyboard */
 
 $key_size: 1.2em;
-$key_border_radius: $base_border_radius + 4px; // 12px
+$key_border_radius: $base_border_radius * 1.25;
 $key_bg_color:  darken($osd_fg_color, 70%);
 // $default_key_bg_color: darken($key_bg_color, 4%);
 $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
@@ -31,8 +31,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
 // the keys
 .keyboard-key {
-
-  @include fontsize($base_font_size + 5);
+  @include fontsize($base_font_size + 5pt);
   font-weight: bold;
   min-height: $key_size;
   min-width: $key_size;
@@ -80,9 +79,9 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   }
 
   &.shift-key-lowercase {}
-  
+
   // pressed shift has different style
-  &.shift-key-uppercase { 
+  &.shift-key-uppercase {
     background-color: lighten($key_bg_color, 20%);
     color: $osd_bg_color;
     &:hover {
@@ -92,12 +91,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   }
 
   // size of icons on keys
-  StIcon { icon-size: 24px; }
+  StIcon { icon-size: $medium_icon_size; }
 }
 
 // long press on a key popup
 .keyboard-subkeys {
-  -arrow-border-radius: $base_border_radius*2;
+  -arrow-border-radius: $base_border_radius * 2;
   -arrow-background-color: $osd_bg_color;
   -arrow-border-width: 1px;
   -arrow-border-color: lighten($osd_bg_color, 9%);
@@ -136,18 +135,18 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
 // suggestions
 .word-suggestions {
-  @include fontsize($base_font_size + 1);
+  @extend %title_4;
   spacing: 12px;
   min-height: 17pt;
-  padding: $base_padding*2;
+  padding: $base_padding * 2;
   color: $osd_fg_color;
 
   // each suggestion
   StButton {
     margin: 0 3px;
     min-width: 32px;
-    border-radius: $base_border_radius - 2px;
-    padding: 0px $base_padding*3;
+    border-radius: 4px;
+    padding: 0px $base_padding * 3;
 
     @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
 
diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
index 8677ae748..feff37d38 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -28,13 +28,13 @@ $_gdm_dialog_width: 23em;
   }
 
   &.cancel-button {
-    padding: $base_padding*1.5;
+    padding: $base_padding * 1.5;
   }
 }
 
 .login-dialog-button-box {
   width: $_gdm_dialog_width;
-  spacing: $base_padding*2;
+  spacing: $base_padding * 2;
 }
 
 .login-dialog-logo-bin {
@@ -46,10 +46,10 @@ $_gdm_dialog_width: 23em;
 .login-dialog-user-selection-box { padding: 100px 0px; }
 
 .login-dialog-not-listed-label {
-  @include fontsize($base_font_size);
+  @extend %heading;
   font-weight: bold;
   color: darken($_gdm_fg,30%);
-  padding: $base_padding*2;
+  padding: $base_padding * 2;
 
   .login-dialog-not-listed-button:focus &,
   .login-dialog-not-listed-button:hover & {
@@ -62,7 +62,7 @@ $_gdm_dialog_width: 23em;
 
 .login-dialog-auth-list-view { -st-vfade-offset: 1em; }
 .login-dialog-auth-list {
-  spacing: 6px;
+  spacing: $base_padding;
   margin-left: 2em;
 }
 .login-dialog-auth-list-title {
@@ -70,8 +70,8 @@ $_gdm_dialog_width: 23em;
 }
 
 .login-dialog-auth-list-item {
-  border-radius: $base_border_radius*2;
-  padding: 4px;
+  border-radius: $base_border_radius * 2;
+  padding: $base_margin;
   color: darken($_gdm_fg,30%);
 
   &:focus, &:selected {
@@ -81,22 +81,20 @@ $_gdm_dialog_width: 23em;
 }
 
 .login-dialog-auth-list-label {
-  @include fontsize($base_font_size + 2);
+  @extend %title_4;
   font-weight: bold;
-  padding-left: 15px;
-
-  &:ltr { padding-left: 14px; text-align: left; }
-  &:rtl { padding-right: 14px; text-align: right; }
+  &:ltr { padding-left: $base_padding * 2.5; text-align: left; }
+  &:rtl { padding-right: $base_padding * 2.5; text-align: right; }
 }
 
 .login-dialog-user-list-view { -st-vfade-offset: 1em; }
 
 .login-dialog-user-list {
-  spacing: 12px;
+  spacing: $base_padding * 2;
   width: $_gdm_dialog_width;
 
   .login-dialog-user-list-item {
-    border-radius: $base_border_radius + 4px;
+    border-radius: $base_border_radius + $base_margin;
     padding: $base_padding;
     background-color: transparentize($_gdm_fg, .95);
     color: $_gdm_fg;
@@ -110,7 +108,7 @@ $_gdm_dialog_width: 23em;
 
     .login-dialog-timed-login-indicator {
       height: 2px;
-      margin-top: 6px;
+      margin-top: $base_padding;
       background-color: darken($_gdm_fg, 30%);
     }
 
@@ -141,7 +139,7 @@ $_gdm_dialog_width: 23em;
 }
 
 .login-dialog-prompt-layout {
-  spacing: $base_padding*2;
+  spacing: $base_padding * 2;
   width: 26em;
 }
 
@@ -178,7 +176,7 @@ $_gdm_dialog_width: 23em;
 
   .unlock-dialog-clock-time {
     @extend %numeric;
-    @include fontsize(72);
+    @include fontsize(72pt);
     font-weight: 200;
   }
 
@@ -189,8 +187,8 @@ $_gdm_dialog_width: 23em;
 
   .unlock-dialog-clock-hint {
     margin-top: 2em;
-    padding: $base_padding $base_padding*3;
-    border-radius: $base_border_radius*2;
+    padding: $base_padding $base_padding * 3;
+    border-radius: $base_border_radius * 2;
     font-weight: bold;
   }
 }
@@ -205,8 +203,8 @@ $_gdm_dialog_width: 23em;
 }
 
 .unlock-dialog-notifications-container {
-  margin: 12px;
-  spacing: 6px;
+  margin: $base_margin * 3;
+  spacing: $base_padding;
   width: $_gdm_dialog_width;
   background-color: transparent;
 
@@ -217,7 +215,7 @@ $_gdm_dialog_width: 23em;
 
   .notification,
   .unlock-dialog-notification-source {
-    padding: 12px 16px;
+    padding: $base_margin * 3 $base_margin * 4;
     border: none;
     background-color: transparentize($_gdm_fg,0.9);
     color: $_gdm_fg;
@@ -228,17 +226,17 @@ $_gdm_dialog_width: 23em;
 }
 
 .unlock-dialog-notification-label {
-  padding-left: 12px;
+  padding-left: $base_padding * 2;
   padding-right: 0;
-  &:rtl { padding-right: 12px; padding-left: 0; }
+  &:rtl { padding-right: $base_padding * 2; padding-left: 0; }
 }
 
 .unlock-dialog-notification-count-text {
   font-weight: bold;
-  padding: 0 12px;
+  padding: 0 $base_padding * 2;
   color: $_gdm_fg;
   background-color: transparentize($_gdm_fg, 0.9);
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
 }
 
 
@@ -251,17 +249,19 @@ $_gdm_dialog_width: 23em;
 
   // layout of the user list
   &.horizontal {
-    spacing: $base_padding*3;
+    spacing: $base_padding * 3;
     .user-widget-label {
       @extend %title_3;
     }
 
     .user-icon {
+      border-radius: $forced_circular_radius;
+
       & StIcon {
-        padding: 12px;
-        icon-size: $base_icon_size*2;
-        width: $base_icon_size*3;
-        height:  $base_icon_size*3;
+        padding: $base_padding * 2;
+        icon-size: $base_icon_size * 2;
+        width: $base_icon_size * 3;
+        height:  $base_icon_size * 3;
         background-color: transparentize($_gdm_fg, 0.9);
       }
     }
@@ -269,7 +269,7 @@ $_gdm_dialog_width: 23em;
 
   // layout of the login prompt
   &.vertical {
-    spacing: $base_padding*4;
+    spacing: $base_padding * 4;
 
     .user-widget-label {
       @extend %title_1;
@@ -278,11 +278,11 @@ $_gdm_dialog_width: 23em;
     }
 
     .user-icon {
-      icon-size: $base_icon_size*10;
+      icon-size: $base_icon_size * 10;
 
       & StIcon {
-        padding: 32px;
-        icon-size: $base_icon_size*4;
+        padding: $base_padding * 4;
+        icon-size: $base_icon_size * 4;
         background-color: transparentize($_gdm_fg, 0.9);
       }
     }
diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
index 7cd81e446..37ce4b76e 100644
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -29,7 +29,7 @@
 
     .lg-toolbar-button {
       @extend %osd_button;
-      padding: $base_padding $base_padding*2;
+      padding: $base_padding $base_padding * 2;
 
       & > StIcon { icon-size: $base_icon_size; }
     }
@@ -41,9 +41,9 @@
 
   .notebook-tab {
     @extend %osd_button;
-    -natural-hpadding: $base_padding*2;
-    -minimum-hpadding: $base_padding*2;
-    padding: $base_padding $base_padding*2;
+    -natural-hpadding: $base_padding * 2;
+    -minimum-hpadding: $base_padding * 2;
+    padding: $base_padding $base_padding * 2;
   }
 
   StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
@@ -54,7 +54,7 @@
 
   StEntry {
     @extend %osd_entry;
-    min-height: 22px;
+    min-height: to_em(22px);
   }
 
   .shell-link {
@@ -97,7 +97,6 @@
 }
 
 .lg-extension {
-  padding: $base_padding*2;
   @include card;
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 9a9144b80..6e4d9f60a 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -16,8 +16,8 @@
 
     // icon size and color
     > StIcon {
-      icon-size: $base_icon_size*3; // 48px
-      margin-bottom: $base_margin*3;
+      icon-size: $scalable_icon_size * 3; // 48px
+      margin-bottom: $base_margin * 3;
       -st-icon-style: symbolic;
     }
   }
@@ -63,6 +63,7 @@
 // message bubbles
 .message {
   @include card;
+  padding: 0 !important;
 
   // icon container
   .message-icon-bin {
@@ -73,7 +74,7 @@
 
     // icon size and color
     > StIcon {
-      icon-size: $large_icon_size; // 32px
+      icon-size: $large_icon_size;
       -st-icon-style: symbolic;
     }
 
@@ -87,44 +88,43 @@
   // content
   .message-content {
     spacing: 4px;
-    padding: ($base_padding*1.5);
-    margin-bottom: $base_margin*2;
+    padding: ($base_padding * 1.5);
+    margin-bottom: $base_margin * 2;
   }
 
-  // title
-  .message-title {
-    font-weight: bold;
-    /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
-    padding-top: 0.57em;
-  }
+  .message-title-box {
+    spacing: $base_padding;
+    // title
+    .message-title {
+      font-weight: bold;
+    }
 
-  // secondary container in title box
-  .message-secondary-bin {
-    padding: 0 $base_margin * 2;
+    // secondary container in title box
+    .message-secondary-bin {
 
-    // notification time stamp
-    > .event-time {
-      color: transparentize($fg_color, 0.5);
-      @include fontsize($base_font_size - 2);
-      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
-      padding-bottom: 0.13em;
+      // notification time stamp
+      > .event-time {
+        @extend %caption;
+        color: transparentize($fg_color, 0.5);
+        padding-bottom: to_em(1px);
 
-      &:ltr { text-align: right };
-      &:rtl { text-align: left };
+        &:ltr { text-align: right };
+        &:rtl { text-align: left };
+      }
     }
   }
 
+
   // close button
   .message-close-button {
+    @extend .icon-button;
     color: $fg_color;
     background-color: transparentize($fg_color, 0.8);
-    border-radius: 99px;
-    padding: $base_padding - 1px;
+    padding: 0 !important;
+    border: 5px transparent solid;
     margin: 1px;
     &:hover {background-color: transparentize($fg_color, 0.7);}
     &:active {background-color: transparentize($fg_color, 0.8);}
-
-    > StIcon { icon-size: $base_icon_size; }
   }
 
   // body
@@ -138,14 +138,14 @@
 
 /* Media Controls */
 .message-media-control {
-  padding: 0 $base_padding*3;
-  margin: $base_padding*2 0;
+  padding: 0 $base_padding * 3;
+  margin: $base_padding * 2 0;
   border-radius: $base_border_radius;
   color: $fg_color;
 
   @if $is_highcontrast {
     border: 1px solid $hc_inset_color;
-    margin: $base_padding*2 2px;
+    margin: $base_padding * 2 2px;
   }
 
   // colors are lightened since the media controls are in a card
@@ -167,15 +167,15 @@
   }
 
   // fix margin for last button
-  &:last-child:ltr { margin-right: $base_margin*3; }
-  &:last-child:rtl { margin-left: $base_margin*3; }
+  &:last-child:ltr { margin-right: $base_margin * 3; }
+  &:last-child:rtl { margin-left: $base_margin * 3; }
 
   & StIcon { icon-size: $base_icon_size; }
 }
 
 // album-art
 .media-message-cover-icon {
-  icon-size: $base_icon_size*3 !important; // 48px
+  icon-size: $base_icon_size * 3 !important; // 48px
   border-radius: $base_border_radius;
 
   // when there is no artwork
@@ -185,6 +185,6 @@
     border: 1px solid transparent;
     border-radius: $base_border_radius;
     icon-size: $large_icon_size !important; // 32px
-    padding: ($base_padding*2 + 2); // 16px
+    padding: ($base_padding * 2 + 2); // 16px
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 8c127de3b..d681e6eeb 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -8,12 +8,12 @@
 .user-icon {
   background-size: contain;
   color: $osd_fg_color;
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
   icon-size: $base_icon_size * 4; // 64px
 
   & StIcon {
     background-color: transparentize($osd_fg_color,0.95);
-    border-radius: 99px;
+    border-radius: $forced_circular_radius;
     padding: $base_padding * 2 ; // 12px
     width: $base_icon_size * 2.5; height:  $base_icon_size * 2.5; // 40px;
   }
diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index edf66c84d..e98739745 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -52,8 +52,8 @@ $notification_banner_width: 34em;
 }
 
 .chat-meta-message {
+  @extend %caption;
   padding-left: 4px;
-  @include fontsize($base_font_size - 2);
   font-weight: bold;
   color: lighten($fg_color,18%);
   &:rtl { padding-left: 0; padding-right: 4px; }
diff --git a/data/theme/gnome-shell-sass/widgets/_osd.scss b/data/theme/gnome-shell-sass/widgets/_osd.scss
index 3562f16f8..55cf44ac3 100644
--- a/data/theme/gnome-shell-sass/widgets/_osd.scss
+++ b/data/theme/gnome-shell-sass/widgets/_osd.scss
@@ -7,30 +7,30 @@ $osd_levelbar_height:6px;
   @extend %heading;
   text-align: center;
   font-weight: bold;
-  spacing: $base_padding * 2; // 12px
+  spacing: $base_padding * 2;
   padding: $base_padding * 2 $base_padding * 3;
-  & > * { spacing: 8px; }
+  & > * { spacing: $base_margin * 2; }
   margin-bottom: 4em;
 
-  StIcon { icon-size:$large_icon_size;}
+  StIcon { icon-size: $large_icon_size;}
 
   StLabel {
-    &:ltr { margin-right: 6px; }
-    &:rtl { margin-left: 6px; }
+    &:ltr { margin-right: $base_padding; }
+    &:rtl { margin-left: $base_padding; }
   }
 
   .level {
-    margin-bottom: 4px;
-    &:first-child { margin-bottom: 0px; }
+    margin-bottom: $base_margin;
+    &:first-child { margin-bottom: 0; }
 
-    min-width:$base_icon_size * 10;
+    min-width: 160px;
     -barlevel-height: $osd_levelbar_height;
     -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
     -barlevel-active-background-color: $osd_fg_color;
     -barlevel-overdrive-color: $destructive_color;
-    -barlevel-overdrive-separator-width: 3px;
-    &:ltr { margin-right: 6px; }
-    &:rtl { margin-left: 6px; }
+    -barlevel-overdrive-separator-width: $base_padding * 0.5;
+    &:ltr { margin-right: $base_padding; }
+    &:rtl { margin-left: $base_padding; }
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss b/data/theme/gnome-shell-sass/widgets/_overview.scss
index 301875e19..117213e87 100644
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -9,5 +9,5 @@
 }
 
 .overview-controls {
-  padding-bottom: 32px;
+  padding-bottom: $base_margin * 8;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 6e7b3be14..7d7fcb087 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -27,33 +27,37 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 
     // status area icons
     .system-status-icon {
-      icon-size: $base_icon_size;
-      padding: $base_padding - 1px;
+      icon-size: $scalable_icon_size;
+      padding: $base_padding;
       margin: 0 $base_margin;
     }
 
-    .panel-status-indicators-box .system-status-icon,
-    .panel-status-menu-box .system-status-icon {
-      margin: 0;
-    }
-
     // app menu icon
     .app-menu-icon {
       -st-icon-style: symbolic;
       // dimensions of the icon are hardcoded
     }
 
-    &#panelActivities {
-      -natural-hpadding: $base_padding * 2.5;
+    // reduce margin between icons in combined menu
+    .panel-status-menu-box,
+    .panel-status-indicators-box {
+      spacing: $base_margin;
 
+      > .system-status-icon {
+        padding: 0;
+      }
+    }
+
+    &#panelActivities {
       & StBoxLayout {
+        padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
         spacing: 5px;
       }
 
       & .workspace-dot {
-        border-radius: 999px;
-        min-width: 8px;
-        min-height: 8px;
+        border-radius: $forced_circular_radius;
+        min-width: $scalable_icon_size * 0.5;
+        min-height: $scalable_icon_size * 0.5;
         background-color: $panel_fg_color;
       }
     }
@@ -62,11 +66,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     &.screen-recording-indicator,
     &.screen-sharing-indicator {
       StBoxLayout {
-        spacing: $base_padding;
+        spacing: $scaled_padding;
       }
 
       StIcon {
-        icon-size: $base_icon_size;
+        icon-size: $scalable_icon_size;
       }
     }
 
@@ -88,6 +92,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       .clock {
         // the highlighted child
       }
+
+      .messages-indicator {
+        icon-size: $scalable_icon_size;
+      }
     }
   }
 
@@ -137,13 +145,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 
 // App Menu
 #appMenu {
-  spacing: $base_padding;
+  spacing: $scaled_padding;
   .label-shadow { color: transparent; }
 }
 
 #appMenu .panel-status-menu-box {
-  padding: 0 $base_padding;
-  spacing: $base_padding;
+  padding: 0 $scaled_padding;
+  spacing: $scaled_padding;
 }
 
 
@@ -151,7 +159,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 .clock-display-box {
   spacing: 2px;
   .clock {
-    padding-left: $base_padding * 2;
-    padding-right: $base_padding * 2;
+    padding-left: $scaled_padding * 2;
+    padding-right: $scaled_padding * 2;
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index a6ed06d3a..827380afd 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -2,13 +2,13 @@
 
 $menu_bg_color: $bg_color;
 $menuitem_bg_color: lighten($menu_bg_color, 4%);
-$menuitem_border_radius: $base_border_radius*1.5;
+$menuitem_border_radius: $base_border_radius * 1.5;
 
 $submenu_bg_color: lighten($menu_bg_color, 7%);
 
 // the popover itself
 .popup-menu-boxpointer {
-  -arrow-rise: $base_margin+2px; // distance from the panel & screen edge
+  -arrow-rise: $base_padding; // distance from the panel & screen edge
 }
 
 // container of the popover menu
@@ -26,7 +26,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
 .popup-menu-content {
   padding: $base_padding;
   background-color: $bg_color;
-  border-radius: $modal_radius*1.25;
+  border-radius: $modal_radius * 1.25;
   border: 1px solid $outer_borders_color;
   box-shadow: 0 2px 4px 0 $shadow_color;
 }
@@ -67,7 +67,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
 // symbolic icons in popover
 .popup-menu-arrow,
 .popup-menu-icon {
-  icon-size: 16px !important; // for some reason the variable doesn't work here
+  icon-size: $scalable_icon_size;
 }
 
 // popover submenus
@@ -103,8 +103,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
 
 // container for radio and check boxes
 .popup-menu-ornament {
-  icon-size: $base_icon_size !important;
-  width: $base_icon_size;
+  icon-size: $scalable_icon_size !important;
+  width: $scalable_icon_size;
 }
 
 // separator
@@ -144,8 +144,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
     // "Open Windows" label
     > StLabel {
       @extend %caption_heading;
-      &:ltr {margin-right: $base_margin*2;}
-      &:rtl {margin-left: $base_margin*2;}
+      &:ltr {margin-right: $base_margin * 2;}
+      &:rtl {margin-left: $base_margin * 2;}
     }
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 723afe7db..f07a57e80 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -1,45 +1,45 @@
 .quick-settings {
-  padding: $base_padding*3;
-  border-radius: $modal_radius*2.25;
+  padding: $base_padding * 3;
+  border-radius: $modal_radius * 2.25;
 
   .icon-button, .button {
-    padding: $base_padding*1.75;
+    padding: $base_padding * 1.75;
   }
 }
 
 .quick-settings-grid {
-  spacing-rows: $base_padding*2;
-  spacing-columns: $base_padding*2;
+  spacing-rows: $base_padding * 2;
+  spacing-columns: $base_padding * 2;
 }
 
 .quick-toggle, .quick-menu-toggle {
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
   min-width: 12em;
   max-width: 12em;
-  min-height: 48px;
+  min-height: $scalable_icon_size * 3; // use icon size so the button scales
   border:none;
 }
 
 .quick-toggle {
   &:checked { @include button(default, $c:$selected_bg_color); }
 
-  & > StBoxLayout { spacing: $base_padding*1.5; }
+  & > StBoxLayout { spacing: $base_padding * 1.5; }
 
   /* Move padding into the box; this is to allow menu arrows
      to extend to the border */
   &.button { padding: 0; }
-  & > StBoxLayout { padding: 0 $base_padding*2; }
-  &:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
-  &:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
+  & > StBoxLayout { padding: 0 $base_padding * 2; }
+  &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
+  &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
 
   .quick-toggle-title { font-weight: bold; }
 
   & StBoxLayout > .quick-toggle-subtitle {
+    @extend %caption;
     font-weight: normal;
-    font-size: 12px;
   }
 
-  .quick-toggle-icon { icon-size: $base_icon_size; }
+  .quick-toggle-icon { icon-size: $scalable_icon_size; }
 }
 
 .quick-menu-toggle {
@@ -47,17 +47,17 @@
     min-width: auto;
     max-width: auto;
 
-    &:ltr { border-radius: 99px 0 0 99px; }
-    &:ltr > StBoxLayout { padding-right: $base_padding*1.5; }
-    &:rtl { border-radius: 0 99px 99px 0; }
-    &:rtr > StBoxLayout { padding-left: $base_padding*1.5; }
+    &:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
+    &:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
+    &:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
+    &:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
 
-    &:ltr:last-child { border-radius: 99px; }
-    &:rtl:last-child { border-radius: 99px; }
+    &:ltr:last-child { border-radius: $forced_circular_radius; }
+    &:rtl:last-child { border-radius: $forced_circular_radius; }
   }
 
   & .quick-toggle-arrow {
-    padding: $base_padding $base_padding*1.75;
+    padding: $scaled_padding $scaled_padding * 1.75;
     border-width: 0;
     border-color: transparentize($fg_color, .75);
 
@@ -67,11 +67,11 @@
     }
 
     &:ltr {
-      border-radius: 0 99px 99px 0;
+      border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
       border-left-width: 1px;
     }
     &:rtl {
-      border-radius: 99px 0 0 99px;
+      border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
       border-right-width: 1px;
     }
   }
@@ -85,7 +85,7 @@
   .slider-bin {
     &:focus {@include button(focus);}
     padding: $base_padding;
-    border-radius: 99px;
+    border-radius: $forced_circular_radius;
   }
 }
 
@@ -96,20 +96,23 @@
   background-color: $bg_color !important;
   color: $fg_color !important;
 
-  border-radius: $base_border_radius*3;
-  padding: $base_padding*2;
-  margin: $base_padding*2 $base_padding*3 0;
+  border-radius: $base_border_radius * 3;
 
-  .popup-menu-item > StIcon { -st-icon-style: symbolic; }
+  margin: $base_padding * 2 $base_padding * 3 0;
+
+  .popup-menu-item > StIcon {
+    -st-icon-style: symbolic;
+    icon-size: $scalable_icon_size;
+  }
 
   & .header {
-    spacing-rows: 0.5 * $base_padding;
-    spacing-columns: $base_padding*2;
-    padding-bottom: 2 * $base_padding;
+    spacing-rows: $base_padding * 0.5;
+    spacing-columns: $base_padding * 2;
+    padding-bottom: $base_padding * 2;
 
     & .icon {
-      icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
-      border-radius: 999px;
+      icon-size: $medium_scalable_icon_size;
+      border-radius: $forced_circular_radius;
       padding: 1.5 * $base_padding;
       background-color: transparentize($fg_color, 0.8);
 
@@ -133,7 +136,7 @@
 }
 
 .quick-settings-system-item {
-  & > StBoxLayout { spacing: 2 * $base_padding; }
+  & > StBoxLayout { spacing: $base_padding * 2; }
 
   & .power-item {
     min-height: 0;
@@ -147,7 +150,7 @@
 }
 
 .nm-network-item {
-  .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
+  .wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
 }
 
 .bt-device-item {
@@ -172,10 +175,10 @@
 // background apps
 
 .background-apps-quick-toggle {
-  min-height: 40px;
+  min-height: to_em(40px);
   background-color: transparent;
 
-  & StIcon { icon-size: $base_icon_size !important; }
+  & StIcon { icon-size: $scalable_icon_size !important; }
 }
 
 .background-app-item {
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 16274ab3c..b51236b6f 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -1,16 +1,7 @@
 // Screenshot UI
-.icon-label-button-container {
-  spacing: $base_padding;
-  @extend %caption;
-
-  StIcon { icon-size: 32px;}
-}
-
-$screenshot_ui_panel_padding: $base_padding*3;
-$screenshot_ui_shot_cast_margin: 21px;
-$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
-$screenshot_ui_shot_cast_spacing: 3px;
 
+$screenshot_ui_panel_padding: $base_padding * 3;
+$screenshot_ui_panel_border_radius: $modal_radius * 2;
 $screenshot_ui_button_red: $error_color;
 
 .screenshot-ui-panel {
@@ -18,7 +9,7 @@ $screenshot_ui_button_red: $error_color;
   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;
+  padding-bottom: $screenshot_ui_panel_padding - $base_padding;
   margin-bottom: 4em;
   spacing: $base_padding * 2;
 }
@@ -26,31 +17,38 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-close-button {
   @extend .window-close; // copy window close button
   padding: $base_padding !important; // but with more padding
-  margin-top: 12px;
+  margin-top: $base_margin * 3;
   box-shadow: 0 2px 4px 0 $shadow_color;
-  &.left { margin-left: 12px;}
-  &.right { margin-right: 12px;}
+  &.left { margin-left: $base_margin * 3;}
+  &.right { margin-right: $base_margin * 3;}
 }
 
 .screenshot-ui-type-button {
   @extend %osd_button_flat;
   min-width: 48px;
-  padding: $base_padding * 2 $base_padding * 3 !important;
+  padding: $base_padding * 2 $base_padding * 3;
   border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
+
+  .icon-label-button-container {
+    @extend %caption;
+    spacing: $scaled_padding;
+
+    > StIcon { icon-size: $large_icon_size;}
+  }
 }
 
 .screenshot-ui-capture-button {
-  width: 36px;
-  height: 36px;
-  border-radius: 99px;
+  width: $large_icon_size;
+  height: $large_icon_size;
+  border-radius: $forced_circular_radius;
   border: 4px $osd_fg_color;
-  padding: 4px;
+  padding: $base_margin;
 
   .screenshot-ui-capture-button-circle {
     background-color: $osd_fg_color;
     transition-duration: 200ms;
     &:hover, &:focus { background-color: $hover_bg_color;}
-    border-radius: 99px;
+    border-radius: $forced_circular_radius;
   }
 
   &:hover, &:focus {
@@ -84,29 +82,27 @@ $screenshot_ui_button_red: $error_color;
 
 .screenshot-ui-shot-cast-container {
   background-color: transparentize($osd_fg_color,0.9);
-  border-radius: $modal_radius;
-  padding: $screenshot_ui_shot_cast_spacing;
-  spacing: $screenshot_ui_shot_cast_spacing;
-
+  border-radius: $forced_circular_radius;
+  padding: $base_padding * 0.5;
+  spacing: $base_padding * 0.5;
 
   @if $is_highcontrast {
     box-shadow: inset 0 0 0 1px $hc_inset_color;
   }
-
-  &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
-  &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
 }
 
+// non-standard button style
 .screenshot-ui-shot-cast-button {
-  padding: $base_padding $base_padding*2;
+  padding: $base_padding $base_padding * 2;
   background-color: transparent;
-  border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
-  StIcon { icon-size: $base_icon_size;}
+  border-radius: $forced_circular_radius;
 
   @if $is_highcontrast {
     box-shadow: inset 0 0 0 1px $hc_inset_color;
   }
 
+  > StIcon { icon-size: $base_icon_size;}
+
   &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
   &:active { background-color: transparentize($osd_fg_color, .5);}
   &:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
@@ -115,9 +111,7 @@ $screenshot_ui_button_red: $error_color;
 
 .screenshot-ui-show-pointer-button {
   @extend %osd_button_flat;
-  border-radius: 99px;
-  padding: $base_padding * 2 !important;
-  StIcon { icon-size: $base_icon_size;}
+  @extend .icon-button;
 }
 
 .screenshot-ui-area-indicator-shade {
@@ -135,11 +129,11 @@ $screenshot_ui_button_red: $error_color;
 }
 
 .screenshot-ui-area-selector-handle {
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
   background-color: white;
   box-shadow: 0 1px 3px 2px $shadow_color;
-  width: 24px;
-  height: 24px;
+  width: $medium_icon_size;
+  height: $medium_icon_size;
 }
 
 .screenshot-ui-window-selector {
@@ -166,9 +160,9 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-window-selector-check {
   transition-duration: 200ms;
   color: transparent;
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
   border-width: 12px;
-  icon-size: 24px;
+  icon-size: $medium_icon_size;
 }
 
 .screenshot-ui-window-selector-window {
@@ -205,5 +199,5 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-tooltip {
   @extend %tooltip;
   text-align: center;
-  -y-offset: 24px;
+  -y-offset: $base_margin * 6;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
index 8b766ba0d..1f24d3c5e 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -1,15 +1,15 @@
 // Search entry
 .search-entry {
-  border-radius: 99px;
-  margin-top: $base_padding*2;
+  border-radius: $forced_circular_radius;
+  margin-top: $base_padding * 2;
   margin-bottom: $base_padding;
   width: 24em;
 
   @extend %system_entry;
 
   .search-entry-icon {
-    icon-size: $base_icon_size;
+    icon-size: $scalable_icon_size;
     margin-top: 2px; // center vertically
-    padding: 0 4px;
+    padding: 0 $base_margin;
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index b281ba5b5..9fdfd104b 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -12,11 +12,11 @@
 // search results sections "the boxes"
 .search-section {
   // This should be equal to #searchResultsContent spacing
-  spacing: $base_padding*3;
+  spacing: $base_padding * 3;
 
   // separator (unstyled)
   .search-section-separator {
-    height: $base_margin*2; // use it as a spacer
+    height: $base_margin * 2; // use it as a spacer
     background-color: transparent;
   }
 }
@@ -25,14 +25,14 @@
 .search-section-content {
   background-color: $system_overlay_bg_color;
   color: $system_fg_color;
-  border-radius: $modal_radius*1.5;
-  padding: $base_padding*2;
-  margin:0 $base_margin*3;
+  border-radius: $modal_radius * 1.5;
+  padding: $base_padding * 2;
+  margin:0 $base_margin * 3;
 }
 
 %search_section_content_item {
   @include tile_button($system_fg_color);
-  border-radius: $base_border_radius+3px;
+  border-radius: $base_border_radius * 1.65;
 }
 
 // "no results" text
@@ -42,8 +42,8 @@
 }
 
 .grid-search-results {
-  spacing: $base_padding*5;
-  margin:0 $base_margin*3;
+  spacing: $base_padding * 5;
+  margin:0 $base_margin * 3;
 }
 
 // Search results with icons
diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss b/data/theme/gnome-shell-sass/widgets/_slider.scss
index 40ac34652..0c444f755 100644
--- a/data/theme/gnome-shell-sass/widgets/_slider.scss
+++ b/data/theme/gnome-shell-sass/widgets/_slider.scss
@@ -1,12 +1,12 @@
 /* Slider */
 
-$slider_size: 16px;
+$slider_size: $scalable_icon_size;
 
 .slider {
   // slider trough
   -barlevel-height: 4px;
   -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough
-  -barlevel-border-width: 2px; 
+  -barlevel-border-width: 2px;
   -barlevel-border-color: transparent; // trough border color
   // fill style
   -barlevel-active-background-color: $selected_bg_color;
diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index 5136c3cfe..9168ed911 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -1,7 +1,8 @@
 /* App Switcher */
 
 // same as dash
-$switcher_padding: $base_padding*2;
+$switcher_padding: $base_padding * 2;
+$switcher_radius: $modal_radius + $switcher_padding;
 
 
 // the full screen container of the switcher
@@ -14,7 +15,7 @@ $switcher_padding: $base_padding*2;
 .switcher-list {
   @extend %osd_panel;
   padding: $switcher_padding;
-  border-radius: $modal_radius+$switcher_padding;
+  border-radius: $switcher_radius;
   box-shadow: 0 8px 8px 0 $shadow_color;
 
   // container for items in list
diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss
index b6d8fe830..d6ce671c6 100644
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -10,7 +10,7 @@ $switch_width: 48px;
   width: $switch_width;
   background-size: contain;
   background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg"));
-  &:checked { 
+  &:checked {
     background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index b46366a86..613a9d65a 100644
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -1,18 +1,10 @@
 /* Window Picker */
-
-$window_picker_spacing: $base_padding; // 6px
-$window_picker_padding: $base_padding * 2; // 12px
-
-$window_thumbnail_label_color: transparentize($system_bg_color, 0.4);
-
 $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
-$window_close_button_size: 30px;
-$window_close_button_padding: 3px;
 
 // Window picker
 .window-picker {
   // Space between window thumbnails
-  spacing: $window_picker_spacing;
+  spacing: $base_padding;
 }
 
 // Window titles
@@ -24,14 +16,14 @@ $window_close_button_padding: 3px;
 .window-close {
   background-color: $window_close_button_color;
   color: $system_fg_color;
-  border-radius: 99px;
+  border-radius: $forced_circular_radius;
   box-shadow: 0 2px 4px 0 $shadow_color;
-  padding: $window_close_button_padding;
-  height: $window_close_button_size;
-  width: $window_close_button_size;
+  padding: $base_padding * 0.5;
+  height: $large_icon_size;
+  width: $large_icon_size;
   transition-duration: 100ms;
 
-  & StIcon { icon-size: 24px; } // uses non standard icon size
+  & StIcon { icon-size: $medium_icon_size; }
 
   &:hover {
     background-color: lighten($window_close_button_color, 7%);
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
index f06130ba9..f3e069f78 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -1,6 +1,6 @@
 /* Workspace Switcher */
 
-$ws_indicator_height: $large_icon_size;
+$ws_indicator_height: 48px;
 $ws_dot_active: $ws_indicator_height / 3;
 $ws_dot_inactive: $ws_indicator_height / 6;
 
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
index 9e58e921b..f8f5a1477 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
@@ -9,7 +9,7 @@
   .workspace-thumbnail {
     color: $system_fg_color;
     background-color: lighten($system_bg_color, 10%);
-    border-radius: $base_border_radius*0.5;
+    border-radius: $base_border_radius * 0.5;
     border: 1px solid transparent;
 
     @if $is_highcontrast {
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index b03f024ac..82ce48b09 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -2607,7 +2607,7 @@ export const AppFolderDialog = GObject.registerClass({
 
         // Edit button
         this._editButton = new St.Button({
-            style_class: 'edit-folder-button',
+            style_class: 'icon-button',
             button_mask: St.ButtonMask.ONE,
             toggle_mode: true,
             reactive: true,
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 1d6d22685..525923c0e 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -729,7 +729,7 @@ const MessagesIndicator = GObject.registerClass(
 class MessagesIndicator extends St.Icon {
     _init() {
         super._init({
-            icon_size: 16,
+            style_class: 'messages-indicator',
             visible: false,
             y_expand: true,
             y_align: Clutter.ActorAlign.CENTER,
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index b86ab37eb..5797c6dde 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -358,16 +358,20 @@ export const Message = GObject.registerClass({
         this._mediaControls = new St.BoxLayout();
         hbox.add_child(this._mediaControls);
 
-        let titleBox = new St.BoxLayout();
+        let titleBox = new St.BoxLayout({style_class: 'message-title-box'});
         contentBox.add_child(titleBox);
 
-        this.titleLabel = new St.Label({style_class: 'message-title'});
+        this.titleLabel = new St.Label({
+            style_class: 'message-title',
+            y_align: Clutter.ActorAlign.END,
+        });
         this.setTitle(title);
         titleBox.add_child(this.titleLabel);
 
         this._secondaryBin = new St.Bin({
             style_class: 'message-secondary-bin',
             x_expand: true, y_expand: true,
+            y_align: Clutter.ActorAlign.END,
         });
         titleBox.add_child(this._secondaryBin);