theme: Standardise text styleswip/jimmac/typography

Initial attempt to use standard text styles, in line with what's
being done for GTK (https://gitlab.gnome.org/GNOME/gtk/issues/1808).

This is just changing the sizes and weights for now. Spacing
adjustments will be required further down the line.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/594

1 files changed, 81 insertions, 83 deletions

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index e40014265..009a47253 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -188,7 +188,7 @@ StScrollBar {
 
 /* Modal Dialogs */
 
-.headline { font-size: 110%; }
+.headline { @extend %heading; }
 .lightbox { background-color: black; }
 .flashspot { background-color: white; }
 
@@ -205,8 +205,7 @@ StScrollBar {
   }
   .run-dialog-button-box { padding-top: 1em; }
   .run-dialog-label {
-    @include fontsize($font-size + 1.1);
-    font-weight: normal;
+    @extend %title-4;
     color: $fg_color;
     padding-bottom: .4em;
   }
@@ -214,8 +213,8 @@ StScrollBar {
 }
 
   .mount-dialog-subject,
-  .end-session-dialog-subject { //this should be a generic header class
-    @include fontsize($font-size * 1.3);
+  .end-session-dialog-subject {
+    @extend %title-2;
   }
 
 /* Message Dialog */
@@ -235,12 +234,12 @@ StScrollBar {
   }
 
   .message-dialog-title {
-    font-weight: bold;
+    @extend %title-2;
   }
 
   .message-dialog-subtitle {
+    @extend %heading;
     color: $fg_color;
-    font-weight: bold;
   }
 
 /* End Session Dialog */
@@ -301,7 +300,7 @@ StScrollBar {
   }
 
   .end-session-dialog-list-header {
-    font-weight: bold;
+    @extend %heading;
     &:rtl { text-align: right; }
   }
 
@@ -312,12 +311,11 @@ StScrollBar {
 
   .end-session-dialog-app-list-item-name,
   .end-session-dialog-session-list-item-name {
-    font-weight: bold;
+    @extend %heading;
   }
 
   .end-session-dialog-app-list-item-description {
     color: darken($fg_color,5%);
-    font-size: 10pt;
   }
 
 /* ShellMountOperation Dialogs */
@@ -373,11 +371,6 @@ StScrollBar {
     &:rtl { padding-left: 17px; }
   }
 
-  .mount-dialog-app-list-item-name {
-    font-size: 10pt;
-  }
-
-
 /* Password or Authentication Dialog */
 
 .prompt-dialog {
@@ -400,13 +393,11 @@ StScrollBar {
   }
 
   .prompt-dialog-error-label {
-    font-size: 10pt;
     color: $warning_color;
     padding-bottom: 8px;
   }
 
   .prompt-dialog-info-label {
-    font-size: 10pt;
     padding-bottom: 8px;
   }
 
@@ -415,7 +406,6 @@ StScrollBar {
   }
 
   .prompt-dialog-null-label {
-    font-size: 10pt;
     padding-bottom: 8px;
   }
 
@@ -471,7 +461,7 @@ StScrollBar {
   }
 
   .audio-selection-title {
-    font-weight: bold;
+    @extend %heading;
     text-align: center;
   }
 
@@ -555,9 +545,9 @@ StScrollBar {
     &:ltr { padding: .4em 1.75em .4em 0em; }
     &:rtl { padding: .4em 0em .4em 1.75em; }
     &:checked {
+      @extend %heading;
       background-color: $bg_color;
       box-shadow: inset 0 -1px 0px $_bubble_borders_color;
-      font-weight: bold;
     }
     &.selected {
       background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
@@ -628,7 +618,7 @@ StScrollBar {
   min-width: 64px;
   min-height: 64px;
 
-  .osd-monitor-label { font-size: 3em; }
+  .osd-monitor-label { @extend %title-1; }
   .level {
     height: 0.6em;
     -barlevel-height: 0.6em;
@@ -801,8 +791,8 @@ StScrollBar {
 /* TOP BAR */
 
 #panel {
+  @extend %heading;
   background-color: black;
-  font-weight: bold;
   height: 1.86em;
   font-feature-settings: "tnum";
 
@@ -834,9 +824,9 @@ StScrollBar {
   }
 
   .panel-button {
+    @extend %heading;
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
-    font-weight: bold;
     color: #ccc;
 
     .app-menu-icon {
@@ -933,28 +923,28 @@ StScrollBar {
     }
 
     .datemenu-today-button .day-label {
+      @extend %heading;
     }
 
     .datemenu-today-button .date-label {
-      font-size: 1.5em;
-      font-weight: 300;
+      @extend %large-title;
     }
 
     .world-clocks-header,
     .weather-header,
-    .events-section-title {
+    .events-section-title,
+    .calendar-month-label {
+      @extend %heading;
       color: darken($fg_color,40%);
-      font-weight: bold;
     }
 
     .weather-header.location {
-      font-weight: normal;
-      font-size: 0.9em;
+      @extend %caption;
     }
 
     .world-clocks-grid,
     .weather-grid {
-      spacing-rows: 0.4em;
+      spacing-rows: 0.8em;
       spacing-columns: 0.8em;
     }
 
@@ -962,35 +952,26 @@ StScrollBar {
       spacing: 0.4em;
     }
 
-    .world-clocks-city {
-      font-weight: bold;
-      font-size: 0.9em;
-    }
-
     .world-clocks-time {
-      color: darken($fg_color,20%);
-      font-feature-settings: "tnum";
-      font-size: 1.2em;
+        font-feature-settings: "tnum";
     }
 
     .world-clocks-timezone {
-      color: $fg_color;
+      color: darken($fg_color,40%);
       font-feature-settings: "tnum";
-      font-size: 0.9em;
+      @extend %caption;
     }
 
     .weather-forecast-icon {
-      icon-size: 2.18em;
+      icon-size: 32px;
     }
 
     .weather-forecast-time {
+      @extend %caption;
       color: darken($fg_color,40%);
-      font-size: 0.8em;
     }
 
     .calendar-month-label {
-      color: lighten($fg_color,5%);
-      font-weight: bold;
       padding: 8px 0;
       &:focus {}
     }
@@ -1008,7 +989,7 @@ StScrollBar {
       }
 
     .calendar-day-base {
-      font-size: 80%;
+      @extend %caption;
       text-align: center;
       width: 2.4em; height: 2.4em;
       padding: 0.1em;
@@ -1022,9 +1003,8 @@ StScrollBar {
         border-color: transparent; //avoid jumparound due to today
       }
       &.calendar-day-heading {  //day of week heading
-        color: lighten($fg_color,5%);
-        margin-top: 1em;
-        font-size: 70%;
+        color: darken($fg_color,40%);
+//        margin-top: 1em;
       }
     }
       .calendar-day { //border collapse hack - see calendar.js
@@ -1039,14 +1019,15 @@ StScrollBar {
         color: $insensitive_fg_color;
       }
       .calendar-today {
-        font-weight: bold;
+        @extend %caption-heading;
         //color: lighten($fg_color,10%);
         //background-color: darken($bg_color,5%);
         border: 1px solid $_bubble_borders_color;
       }
       .calendar-day-with-events {
+        @extend %caption-heading;
         color: lighten($fg_color,10%);
-        font-weight: bold;
+
         background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
       }
       .calendar-other-month-day {
@@ -1054,8 +1035,7 @@ StScrollBar {
         opacity: 0.5;
       }
       .calendar-week-number {
-        font-size: 70%;
-        font-weight: bold;
+        @extend %caption-heading;
         width: 2.3em; height: 1.8em;
         border-radius: 2px;
         padding: 0.5em 0 0;
@@ -1112,8 +1092,8 @@ StScrollBar {
           }
 
           .message-secondary-bin > .event-time {
+            @extend %caption;
             color: $fg_color;
-            font-size: 0.7em;
             /* HACK: the label should be baseline-aligned with a 1em label,
                      fake this with some bottom padding */
             padding-bottom: 0.13em;
@@ -1284,17 +1264,16 @@ StScrollBar {
   .nm-dialog-airplane-box { spacing: 12px; }
 
   .nm-dialog-airplane-headline {
-    font-weight: bold;
+    @extend %heading;
     text-align: center;
   }
 
   .nm-dialog-airplane-text { color: $fg_color; }
   .nm-dialog-header-icon { icon-size: 32px; }
   .nm-dialog-scroll-view { border: 2px solid $borders_color; }
-  .nm-dialog-header { font-weight: bold; }
+  .nm-dialog-header { @extend %title-2; }
 
   .nm-dialog-item {
-    font-size: 110%;
     border-bottom: 1px solid $borders_color;
     padding: 12px;
     spacing: 20px;
@@ -1401,7 +1380,7 @@ StScrollBar {
 
   #dash {
     @extend %overview-panel;
-    font-size: 9pt;
+    @extend %caption;
     padding: 4px 0;
     border-radius: 0px 9px 9px 0px;
 
@@ -1616,9 +1595,9 @@ StScrollBar {
   border: none;
 }
 
+// Search status, like "Searching..." and "No results"
 %status_text {
-  font-size: 2em;
-  font-weight: bold;
+  @extend %large-title;
   color: $osd_fg_color;
 }
 
@@ -1628,7 +1607,6 @@ StScrollBar {
 
   // Banners
   .notification-banner {
-    font-size: 11pt;
     width: 34em;
     margin: 5px;
     border-radius: $medium-radius;
@@ -1638,7 +1616,7 @@ StScrollBar {
     &:hover { background: $bg_color; }
     &, &:focus, &:active {
       background-color: $bg_color;
-      .message-title { color: $fg_color }
+      .message-title { color: $fg_color; }
       .message-content { color: $fg_color; }
     }
 
@@ -1665,18 +1643,6 @@ StScrollBar {
       border: none;
     }
   }
-  .summary-source-counter {
-    font-size: 10pt;
-    font-weight: bold;
-    height: 1.6em; width: 1.6em;
-    -shell-counter-overlap-x: 3px;
-    -shell-counter-overlap-y: 3px;
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-    border: 2px solid $fg_color;
-    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-    border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
-  }
 
   .secondary-icon { icon-size: 1.09em; }
 
@@ -1695,9 +1661,8 @@ StScrollBar {
     &:rtl { padding-left: 0; padding-right: 18pt; }
   }
   .chat-meta-message {
+    @extend %caption-heading;
     padding-left: 4px;
-    font-size: 9pt;
-    font-weight: bold;
     color: lighten($fg_color,18%);
     &:rtl { padding-left: 0; padding-right: 4px; }
   }
@@ -1983,8 +1948,7 @@ StScrollBar {
     }
   }
   .login-dialog-not-listed-label {
-    font-size: 90%;
-    font-weight: bold;
+    @extend %heading;
     color: darken($osd_fg_color,30%);
     padding-top: 1em;
   }
@@ -2013,8 +1977,7 @@ StScrollBar {
   .login-dialog-username,
   .user-widget-label {
     color: $osd_fg_color;
-    font-size: 120%;
-    font-weight: bold;
+    @extend %title-3;
     text-align: left;
     padding-left: 15px;
   }
@@ -2032,7 +1995,6 @@ StScrollBar {
 
   .login-dialog-prompt-label {
       color: darken($osd_fg_color, 20%);
-      font-size: 110%;
       padding-top: 1em;
   }
 
@@ -2104,7 +2066,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
 
 
 .screen-shield-notification-label {
-  font-weight: bold;
+  @extend %heading;
   padding: 0px 0px 0px 12px;
 }
 
@@ -2144,9 +2106,9 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
   }
   .labels { spacing: 4px; }
   .notebook-tab {
+    @extend %heading;
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
-    font-weight: bold;
     color: #ccc;
     transition-duration: 100ms;
     padding-left: .3em;
@@ -2207,7 +2169,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
   }
 
   .lg-extension-name {
-      font-weight: bold;
+      @extend %heading;
   }
 
   .lg-extension-meta {
@@ -2220,3 +2182,39 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
     border-radius: 4px;
     padding: 6px;
   }
+
+// text styles
+
+%large-title {
+   font-weight: 300;
+   font-size: 24pt;
+//   letter-spacing: 0.2rem;  This breaks the style 
+}
+%title-1 {
+   font-weight: 800;
+   font-size: 20pt;
+}
+%title-2 {
+   font-weight: 800;
+   font-size: 15pt;
+} 
+%title-3 {
+   font-weight: 700;
+   font-size: 15pt;
+}
+%title-4 {
+   font-weight: 700;
+   font-size: 13pt;
+}
+%heading {
+   font-weight: 700;
+   font-size: 11pt;
+}
+%caption-heading {
+   font-weight: 700;
+   font-size: 9pt;
+}
+%caption {
+   font-weight: 400;
+   font-size: 9pt;
+}