update

src/sass/_variables.scss

@@ -21,7 +21,7 @@ $large-font-family: Roboto, "M+ 1c", Cantarell, Sans-Serif;
 // font sizes
 $root-font-size: if($laptop == 'false', 15px, 13px);
 $subheading-size: if($laptop == 'false', 17px, 15px);
-$base_font_size: if($laptop == 'false', 11, 10);
+$base_font_size: 11pt;
 
 // opacities
 $higher_opacity: 0.9;

src/sass/gnome-shell/_common.scss

@@ -33,47 +33,47 @@ stage {
 
 %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; }

src/sass/gnome-shell/_drawing.scss

@@ -17,10 +17,13 @@
   @return round($em_value) / 1000 * 1em;
 }
 
-// provide font size in rem, with px fallback
+// Mixin to convert provided font size in pt to em units
-@mixin fontsize($size: 24, $base: 16) {
+@mixin fontsize($size, $base: 16px, $unit: pt) {
-  font-size: round($size) + pt;
+  // if pt, convert into unitless value with the assumption: 1pt = 1.091px
-  //font-size: ($size / $base) * 1rem;
+  $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;
 }
 
 // Typography

src/sass/gnome-shell/_widgets-40-0.scss

@@ -33,7 +33,6 @@
 @import 'common/workspace-switcher';
 @import 'widgets-40-0/app-grid';
 @import 'widgets-40-0/dash';
-@import 'widgets-40-0/misc';
 @import 'widgets-40-0/overview';
 @import 'widgets-40-0/osd';
 @import 'widgets-40-0/panel';

src/sass/gnome-shell/_widgets-42-0.scss

@@ -33,7 +33,6 @@
 @import 'common/workspace-switcher';
 @import 'widgets-42-0/app-grid';
 @import 'widgets-40-0/dash';
-@import 'widgets-40-0/misc';
 @import 'widgets-40-0/overview';
 @import 'widgets-42-0/osd';
 @import 'widgets-40-0/panel';

src/sass/gnome-shell/_widgets-44-0.scss

@@ -33,7 +33,6 @@
 @import 'common/workspace-switcher';
 @import 'widgets-44-0/app-grid';
 @import 'widgets-40-0/dash';
-@import 'widgets-40-0/misc';
 @import 'widgets-40-0/overview';
 @import 'widgets-42-0/osd';
 @import 'widgets-40-0/panel';

src/sass/gnome-shell/_widgets-46-0.scss

@@ -31,7 +31,6 @@
 @import 'common/workspace-switcher';
 @import 'widgets-46-0/app-grid';
 @import 'widgets-46-0/dash';
-@import 'widgets-40-0/misc';
 @import 'widgets-46-0/message-list';
 @import 'widgets-46-0/notifications';
 @import 'widgets-40-0/overview';

src/sass/gnome-shell/common/_calendar.scss

@@ -102,13 +102,12 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
 
   // weekday label
   .day-label {
-    @include font(title);
     font-weight: bold;
   }
 
   // date label
   .date-label {
-    @include font(headline);
+    @extend %title_2;
   }
 }
 
@@ -124,12 +123,11 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
 
   // month
   .calendar-month-label {
+    @extend %heading;
     margin: 0;
     padding: $base_padding 0;
     color: $fg_color !important;
     background-color: transparent !important;
-    font-weight: bold;
-    font-size: 1em !important;
     text-align: center;
     text-shadow: none;
 
@@ -160,10 +158,11 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
 
   .calendar-day,
   .calendar-day-base {
-    @include font(caption);
+    @extend %numeric;
+    @extend %smaller;
     text-align: center;
-    width: $menuitem_size !important;
+    width: 3em !important;
-    height: $menuitem_size !important;
+    height: 3em !important;
     padding: 2px !important;
     margin: 2px !important;
     border-radius: $circular_radius;
@@ -261,6 +260,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
   }
 
   .calendar-week-number {
+    @extend %smaller;
     width: 22px;
     height: 16px;
     margin: 6px 6px 6px 4px;
@@ -268,12 +268,14 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
     border-radius: $bt_radius;
     background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
     color: $hint_fg_color;
-    font-size: inherit;
     font-weight: bold;
     text-align: center;
+    font-feature-settings: "tnum";
   }
 
   .calendar-day-heading {  //day of week heading
+    @extend %numeric;
+    @extend %smaller;
     width: $menuitem_size !important;
     height: $menuitem_size - 6px !important;
     margin: $base_margin;
@@ -281,7 +283,6 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
     // border-radius: $circular_radius;
     background-color: transparent !important;
     color: $hint_fg_color !important;
-    @include font(caption);
     font-weight: bold;
     text-align: center;
   }
@@ -309,30 +310,49 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
   }
 
   .events-title {
+    @extend %heading;
     color: $hint_fg_color;
-    font-weight: bold;
     text-shadow: none;
   }
 
+  .event-summary {
+    @extend %heading;
+  }
+
   .event-time {
     color: $hint_fg_color;
-    font-feature-settings: "tnum";
+    @extend %numeric;
-    @include fontsize($base_font_size - 2);
+    @extend %caption;
+  }
+
+  .event-placeholder {
+    color: $disabled_fg_color;
+    font-style: italic;
   }
 }
 
 // World Clock
 .world-clocks-button {
+  // title
+  .world-clocks-header {
+    @extend %heading;
+    color: $disabled_fg_color;
+
+    // change style when no world clocks are configured
+    &.no-world-clocks {
+      color: $fg_color;
+    }
+  }
+
   .world-clocks-city {
     color: $hint_fg_color;
     font-weight: bold;
-    @include fontsize($base_font_size - 1);
   }
 
   .world-clocks-time {
+    @extend %numeric;
+    font-weight: bold;
     color: $hint_fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 1);
 
     &:ltr { text-align: right; }
     &:rtl { text-align: left; }
@@ -340,8 +360,8 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
 
   .world-clocks-timezone {
     color: $hint_fg_color;
-    font-feature-settings: "tnum";
+    @extend %numeric;
-    @include fontsize($base_font_size - 2);
+    @extend %caption;;
   }
 }
 
@@ -362,13 +382,12 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
   }
 
   .weather-header {
+    @extend %heading;
     color: $alt_fg_color;
-    font-weight: bold;
 
     &.location {
       font-weight: normal;
       color: $hint_fg_color;
-      @include fontsize($base_font_size - 2);
     }
   }
 
@@ -378,9 +397,9 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
   }
 
   .weather-forecast-time {
+    @extend %numeric;
+    @include fontsize(10pt);
     color: $alt_fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 3);
     font-weight: normal;
     padding-top: 0.2em;
     padding-bottom: 0.4em;
@@ -391,6 +410,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
   }
 
   .weather-forecast-temp {
+    @extend %numeric;
     font-weight: bold;
   }
 }

src/sass/gnome-shell/common/_dash.scss

@@ -3,8 +3,6 @@
 $dash_placeholder_size: 32px;
 
 #dash {
-  @include fontsize($base_font_size - 2);
-
   .empty-dash-drop-target {
     width: $dash_placeholder_size;
     height: $dash_placeholder_size;

src/sass/gnome-shell/common/_dialogs.scss

@@ -34,7 +34,7 @@
 }
 
 .headline {
-  @include font(title);
+  @extend %title_4;
 }
 
 // modal dialog
@@ -92,12 +92,10 @@
 
   .message-dialog-title {
     text-align: center;
-    font-size: 18pt;
+    @extend %title_2;
-    font-weight: 800;
 
     &.lightweight {
-      font-size: 13pt;
+      @extend %title_4;
-      font-weight: 800;
     }
   }
 
@@ -110,7 +108,7 @@
 
   .dialog-list-title {
     text-align: center;
-    font-weight: bold;
+    @extend %heading;
   }
 
   .dialog-list-scrollview { max-height: 200px; }
@@ -123,7 +121,7 @@
       .dialog-list-item-title { font-weight: bold; }
       .dialog-list-item-description {
         color: $alt_fg_color;
-        @include font(title);
+        @extend %caption;
       }
     }
   }
@@ -140,7 +138,7 @@
   .run-dialog-description {
     text-align: center;
     color: $alt_fg_color;
-    @include font(title);
+    @extend %caption;
   }
 }
 
@@ -193,8 +191,7 @@
 .prompt-dialog-info-label,
 .prompt-dialog-null-label {
   text-align: center;
-  @include font(title);
+  @extend %caption;
-  margin: 6px;
 }
 
 .prompt-dialog-error-label {
@@ -249,3 +246,8 @@
   height: 300px;
   width: 300px;
 }
+
+/* Access portal dialog */
+.access-dialog {
+  text-align: center;
+}

src/sass/gnome-shell/common/_message-list.scss

@@ -23,8 +23,7 @@
   }
 
   .message-list-placeholder {
-    font-weight: 800;
+    @extend %title_2;
-    @include fontsize(15);
     color: $disabled_fg_color;
 
     // icon size and color
@@ -99,7 +98,7 @@
 
     > .event-time {
       color: $hint_fg_color;
-      font-size: 1em;
+      @extend %caption;
       /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
       padding-bottom: 0.13em;
 

src/sass/gnome-shell/common/_misc.scss

@@ -30,6 +30,14 @@
     border: none;
     box-shadow: inset 0 0 0 1px transparentize($light_alt_fg_color, 0.9);
   }
+
+  .popup-menu & {
+    color: $alt_fg_color;
+
+    StIcon {
+      background-color: $track_color;
+    }
+  }
 }
 
 .user-widget.vertical .user-icon {
@@ -53,6 +61,12 @@
 .caps-lock-warning-label {
   text-align: center;
   padding-bottom: 8px;
-  @include font(body-1);
   color: $warning_color;
+  @extend %caption;
+}
+
+/* Workspace animation */
+
+.workspace-animation {
+  background-color: rgba($osd_bg_color, 1);
 }

src/sass/gnome-shell/common/_notifications.scss

@@ -12,7 +12,6 @@
   border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(black, 0.15);
-  @include font(body-1);
 
   &:hover { background-color: rgba($menu_bg, 1); }
 

src/sass/gnome-shell/common/_popovers.scss

@@ -69,7 +69,6 @@ $popop_menuitem_radius: $po_radius - $base_padding;
 .popup-menu {
   min-width: 12em;
   color: $alt_fg_color;
-  @include font(body-1);
 
   //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
   &.panel-menu {
@@ -98,7 +97,6 @@ $popop_menuitem_radius: $po_radius - $base_padding;
   border-radius: $po_radius;
   border: solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
   border-width: if($variant=='light', 0, 1px);
-  @include font(body-1);
 }
 
 .popup-menu-item {

src/sass/gnome-shell/common/_search-results.scss

@@ -25,7 +25,6 @@
 #searchResultsContent {
   max-width: 1024px;
   spacing: $base_margin * 2;
-  @include font(body-1);
 }
 
 // search results sections "the boxes"

src/sass/gnome-shell/widgets-40-0/_app-grid.scss

@@ -14,8 +14,6 @@
 /* App Icons */
 .show-apps,
 .app-well-app {
-  @include font(body-1);
-
   .overview-icon.overview-icon-with-label {
    padding: 10px 12px 14px;
 

src/sass/gnome-shell/widgets-40-0/_misc.scss

@@ -1,12 +0,0 @@
-// Workspace animation
-.workspace-animation {
-  background-color: rgba($osd_bg_color, 1);
-}
-
-// reset prev/next month icons
-.calendar {
-  .calendar-change-month-back,
-  .calendar-change-month-forward {
-    padding: 0 2px;
-  }
-}

src/sass/gnome-shell/widgets-42-0/_app-grid.scss

@@ -14,8 +14,6 @@
 /* App Icons */
 .show-apps,
 .app-well-app {
-  @include font(body-1);
-
   .overview-icon.overview-icon-with-label {
    padding: 10px 12px 14px;