GNOME.org
 

[gnome-shell/wip/aday/standardise-text-styles] theme: Standardise text styles

commit 0376b07695a9ce65562ac1eb670a56b482bfa11b
Author: Allan Day <allanpday gmail com>
Date:   Wed Jun 19 11:10:28 2019 +0100

    theme: Standardise text styles
    
    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.

 data/theme/gnome-shell-sass/_common.scss  | 127 +++++++++++-------------------
 data/theme/gnome-shell-sass/_drawing.scss |  36 +++++++++
 2 files changed, 80 insertions(+), 83 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index e400142653..a6880e62be 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 { @include 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;
+    @include 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 {
+    @include title-2();
   }
 
 /* Message Dialog */
@@ -235,12 +234,12 @@ StScrollBar {
   }
 
   .message-dialog-title {
-    font-weight: bold;
+    @include title-2();
   }
 
   .message-dialog-subtitle {
     color: $fg_color;
-    font-weight: bold;
+    @include heading();
   }
 
 /* End Session Dialog */
@@ -301,7 +300,7 @@ StScrollBar {
   }
 
   .end-session-dialog-list-header {
-    font-weight: bold;
+    @include 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;
+    @include 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;
+    @include heading();
     text-align: center;
   }
 
@@ -557,7 +547,7 @@ StScrollBar {
     &:checked {
       background-color: $bg_color;
       box-shadow: inset 0 -1px 0px $_bubble_borders_color;
-      font-weight: bold;
+      @include heading();
     }
     &.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 { @include title-1(); }
   .level {
     height: 0.6em;
     -barlevel-height: 0.6em;
@@ -802,7 +792,7 @@ StScrollBar {
 
 #panel {
   background-color: black;
-  font-weight: bold;
+  @include heading();
   height: 1.86em;
   font-feature-settings: "tnum";
 
@@ -836,7 +826,7 @@ StScrollBar {
   .panel-button {
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
-    font-weight: bold;
+    @include heading();
     color: #ccc;
 
     .app-menu-icon {
@@ -933,28 +923,28 @@ StScrollBar {
     }
 
     .datemenu-today-button .day-label {
+      @include heading();
     }
 
     .datemenu-today-button .date-label {
-      font-size: 1.5em;
-      font-weight: 300;
+      @include large-title();
     }
 
     .world-clocks-header,
     .weather-header,
-    .events-section-title {
+    .events-section-title,
+    .calendar-month-label {
       color: darken($fg_color,40%);
-      font-weight: bold;
+      @include heading();
     }
 
     .weather-header.location {
-      font-weight: normal;
-      font-size: 0.9em;
+      @include 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;
+      @include caption();
     }
 
     .weather-forecast-icon {
-      icon-size: 2.18em;
+      icon-size: 32px;
     }
 
     .weather-forecast-time {
       color: darken($fg_color,40%);
-      font-size: 0.8em;
+      @include caption();
     }
 
     .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%;
+      @include 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,14 @@ StScrollBar {
         color: $insensitive_fg_color;
       }
       .calendar-today {
-        font-weight: bold;
+        @include caption-heading();
         //color: lighten($fg_color,10%);
         //background-color: darken($bg_color,5%);
         border: 1px solid $_bubble_borders_color;
       }
       .calendar-day-with-events {
         color: lighten($fg_color,10%);
-        font-weight: bold;
+        @include caption-heading();
         background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
       }
       .calendar-other-month-day {
@@ -1054,8 +1034,7 @@ StScrollBar {
         opacity: 0.5;
       }
       .calendar-week-number {
-        font-size: 70%;
-        font-weight: bold;
+        @include caption-heading();
         width: 2.3em; height: 1.8em;
         border-radius: 2px;
         padding: 0.5em 0 0;
@@ -1113,7 +1092,7 @@ StScrollBar {
 
           .message-secondary-bin > .event-time {
             color: $fg_color;
-            font-size: 0.7em;
+            @include caption();
             /* HACK: the label should be baseline-aligned with a 1em label,
                      fake this with some bottom padding */
             padding-bottom: 0.13em;
@@ -1284,17 +1263,16 @@ StScrollBar {
   .nm-dialog-airplane-box { spacing: 12px; }
 
   .nm-dialog-airplane-headline {
-    font-weight: bold;
+    @include 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 { @include title-2(); }
 
   .nm-dialog-item {
-    font-size: 110%;
     border-bottom: 1px solid $borders_color;
     padding: 12px;
     spacing: 20px;
@@ -1401,7 +1379,7 @@ StScrollBar {
 
   #dash {
     @extend %overview-panel;
-    font-size: 9pt;
+    @include caption();
     padding: 4px 0;
     border-radius: 0px 9px 9px 0px;
 
@@ -1616,9 +1594,9 @@ StScrollBar {
   border: none;
 }
 
+// Search status, like "Searching..." and "No results"
 %status_text {
-  font-size: 2em;
-  font-weight: bold;
+  @include large-title();
   color: $osd_fg_color;
 }
 
@@ -1628,7 +1606,6 @@ StScrollBar {
 
   // Banners
   .notification-banner {
-    font-size: 11pt;
     width: 34em;
     margin: 5px;
     border-radius: $medium-radius;
@@ -1638,7 +1615,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 +1642,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; }
 
@@ -1696,8 +1661,7 @@ StScrollBar {
   }
   .chat-meta-message {
     padding-left: 4px;
-    font-size: 9pt;
-    font-weight: bold;
+    @include caption-heading();
     color: lighten($fg_color,18%);
     &:rtl { padding-left: 0; padding-right: 4px; }
   }
@@ -1983,8 +1947,7 @@ StScrollBar {
     }
   }
   .login-dialog-not-listed-label {
-    font-size: 90%;
-    font-weight: bold;
+    @include heading();
     color: darken($osd_fg_color,30%);
     padding-top: 1em;
   }
@@ -2013,8 +1976,7 @@ StScrollBar {
   .login-dialog-username,
   .user-widget-label {
     color: $osd_fg_color;
-    font-size: 120%;
-    font-weight: bold;
+    @include title-3();
     text-align: left;
     padding-left: 15px;
   }
@@ -2032,7 +1994,6 @@ StScrollBar {
 
   .login-dialog-prompt-label {
       color: darken($osd_fg_color, 20%);
-      font-size: 110%;
       padding-top: 1em;
   }
 
@@ -2104,7 +2065,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
 
 
 .screen-shield-notification-label {
-  font-weight: bold;
+  @include heading();
   padding: 0px 0px 0px 12px;
 }
 
@@ -2146,7 +2107,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
   .notebook-tab {
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
-    font-weight: bold;
+    @include heading();
     color: #ccc;
     transition-duration: 100ms;
     padding-left: .3em;
@@ -2207,7 +2168,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
   }
 
   .lg-extension-name {
-      font-weight: bold;
+      @include heading();
   }
 
   .lg-extension-meta {
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 8f4611c34a..acb7a4ac41 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -1,5 +1,41 @@
 // Drawing mixins
 
+// text styles
+
+@mixin large-title() {
+   font-weight: 300;
+   font-size: 24pt;
+//   letter-spacing: 0.2rem;  This breaks the style 
+}
+@mixin title-1() {
+   font-weight: 800;
+   font-size: 20pt;
+}
+@mixin title-2() {
+   font-weight: 800;
+   font-size: 15pt;
+} 
+@mixin title-3() {
+   font-weight: 700;
+   font-size: 15pt;
+}
+@mixin title-4() {
+   font-weight: 700;
+   font-size: 13pt;
+}
+@mixin heading() {
+   font-weight: 700;
+   font-size: 11pt;
+}
+@mixin caption-heading() {
+   font-weight: 700;
+   font-size: 9pt;
+}
+@mixin caption() {
+   font-weight: 400;
+   font-size: 9pt;
+}
+
 // generic drawing of more complex things
 
 @function _widget_edge($c:$borders_edge) {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]