GNOME.org
 

[gnome-shell/wip/snwh/more-papercut-fixes: 2/4] theme: Sync general label styles from libadwaita


commit 10aa41dbf412601dbdcd7909cde700aa23fa92d1
Author: Sam Hewitt <sam snwh org>
Date:   Mon Feb 7 15:31:02 2022 -0330

    theme: Sync general label styles from libadwaita

 data/theme/gnome-shell-sass/_common.scss           | 59 +++++++++++++++++++---
 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  3 +-
 data/theme/gnome-shell-sass/widgets/_calendar.scss | 47 ++++++++---------
 data/theme/gnome-shell-sass/widgets/_dash.scss     |  2 +-
 data/theme/gnome-shell-sass/widgets/_dialogs.scss  | 18 +++----
 .../gnome-shell-sass/widgets/_login-dialog.scss    |  2 +-
 .../gnome-shell-sass/widgets/_looking-glass.scss   |  7 ++-
 .../gnome-shell-sass/widgets/_message-list.scss    |  3 +-
 data/theme/gnome-shell-sass/widgets/_misc.scss     |  2 +-
 .../gnome-shell-sass/widgets/_network-dialog.scss  |  1 -
 data/theme/gnome-shell-sass/widgets/_osd.scss      |  2 +-
 data/theme/gnome-shell-sass/widgets/_panel.scss    |  2 +-
 data/theme/gnome-shell-sass/widgets/_popovers.scss |  6 +--
 .../gnome-shell-sass/widgets/_screen-shield.scss   |  2 +-
 .../gnome-shell-sass/widgets/_screenshot.scss      |  2 +-
 .../gnome-shell-sass/widgets/_search-results.scss  |  2 +-
 16 files changed, 94 insertions(+), 66 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index a782d8f3dd..c2ef88663f 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -55,6 +55,7 @@ $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.
 
 // icons
 $base_icon_size: 1.09em;
+$base_icon_size: 1.09em;
 // $base_icon_size: 16px;
 
 // Stage
@@ -65,13 +66,6 @@ stage {
 
 /* Common Stylings */
 
-// Text
-%status_text {
-  font-size: 2em;
-  font-weight: bold;
-  color: $osd_fg_color;
-}
-
 // osd panels
 %osd_panel {
   color: $osd_fg_color;
@@ -156,3 +150,54 @@ $bubble_button_radius:$base_border_radius*1.25;
     border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
   }
 }
+
+/* General Typography */
+
+%large_title {
+  font-weight: 300;
+  @include fontsize(24pt);
+}
+
+%title_1 {
+  font-weight: 800;
+  @include fontsize(20pt);
+}
+
+%title_2 {
+  font-weight: 800;
+  @include fontsize(15pt);
+}
+
+%title_3 {
+  font-weight: 700;
+  @include fontsize(15pt);
+}
+
+%title_4 {
+  font-weight: 700;
+  @include fontsize(13pt);
+}
+
+%heading {
+  font-weight: 700;
+  @include fontsize(11pt);
+}
+
+%caption_heading {
+  font-weight: 700;
+  @include fontsize(9pt);
+}
+
+%caption {
+  font-weight: 400;
+  @include fontsize(9pt);
+}
+
+%smaller {
+  font-weight: 400;
+  @include fontsize(8pt);
+}
+
+
+%monospace {font-family: monospace;}
+%numeric { font-feature-settings: "tnum";}
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 9f44473374..eadcad270e 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -50,8 +50,7 @@ $app_grid_fg_color: #fff;
 
     & .folder-name-label,
     & .folder-name-entry {
-      font-size: 18pt;
-      font-weight: 1000;
+      @extend %title_1;
     }
 
     & .folder-name-entry { width: 300px }
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index fee76b0c98..706080f25c 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -27,7 +27,7 @@
 .events-section-title {
   @include card($flat: true);
   color: $insensitive_fg_color;
-  font-weight: bold;
+  @extend %heading;
   padding: .4em;
 }
 
@@ -38,15 +38,13 @@
 
   // weekday label
   .day-label {
-    @include fontsize($base_font_size+1);
+    @extend %title_3;
     color: $insensitive_fg_color;
-    font-weight: bold;
   }
 
   // date label
   .date-label {
-    @include fontsize($base_font_size+7);
-    font-weight: 1000;
+    @extend %title_1;
   }
 }
 
@@ -58,7 +56,7 @@
   // month
   .calendar-month-label {
     color: lighten($fg_color,5%);
-    font-weight: bold;
+    @extend %heading;
     padding: 8px 0;
   }
 
@@ -80,14 +78,14 @@
   $calendar_day_size: 32px;
 
   .calendar-day-base {
-    @include fontsize($base_font_size - 3);
     text-align: center;
     padding: 0;
     margin: 2px;
     height: $calendar_day_size;
     width: $calendar_day_size;
     border-radius: $calendar_day_size * 0.5 + 2px;
-    font-feature-settings: "tnum";
+    @extend %numeric;
+    @extend %smaller;
     
     &:hover, &:focus { background-color: $hover_bg_color; }
     &:active,&:selected {
@@ -98,10 +96,10 @@
     // day of week heading
     &.calendar-day-heading {
       color: $insensitive_fg_color;
-      font-weight: 1000;
       padding-top: $base_padding;
       height: 16px !important; // force heading to be smaller height
-      @include fontsize($base_font_size - 2);
+      @extend %heading;
+      @extend %smaller;
     }
   }
 
@@ -184,15 +182,15 @@
   }
 
   .events-title {
+    @extend %heading;
     color: $insensitive_fg_color;
-    font-weight: bold;
     margin-bottom: $base_margin;
   }
 
   .event-time {
+    @extend %numeric;
+    @extend %caption;
     color: $insensitive_fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 1);
   }
 }
 
@@ -208,23 +206,20 @@
 
   // title
   .world-clocks-header {
+    @extend %heading;
     color: $insensitive_fg_color;
-    font-weight: bold;
   }
 
   // city label
   .world-clocks-city {
     color: $fg_color;
-    @include fontsize($base_font_size);
-    font-weight: normal;
   }
 
   // timezone time
   .world-clocks-time {
-    font-weight: bold;
+    @extend %heading;
+    @extend %numeric;
     color: $fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size);
 
     &:ltr { text-align: right; }
     &:rtl { text-align: left; }
@@ -232,9 +227,9 @@
 
   // timezone offset label
   .world-clocks-timezone {
+    @extend %numeric;
+    @extend %caption;
     color: $insensitive_fg_color;
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 1);
   }
 }
 
@@ -253,11 +248,10 @@
 
   .weather-header {
     color: $insensitive_fg_color;
-    font-weight: bold;
+    @extend %heading;
 
     &.location {
       font-weight: normal;
-      @include fontsize($base_font_size - 1);
     }
   }
 
@@ -267,10 +261,9 @@
   }
 
   .weather-forecast-time {
+    @extend %numeric;
+    @extend %caption;
     color: darken($fg_color,30%);
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 2);
-    font-weight: normal;
     padding-top: 0.2em;
     padding-bottom: 0.4em;
   }
@@ -280,6 +273,6 @@
   }
 
   .weather-forecast-temp {
-    font-weight: bold;
+    @extend %heading;
   }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 4a8a1f9b61..566400a4a1 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -9,7 +9,7 @@ $dash_border_radius: $modal_radius + 8px;
 
 // container for the dash
 #dash {
-  @include fontsize($base_font_size - 2);
+  @extend %caption;
   margin-top: $base_margin * 3;
   padding: $dash_padding;
 
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss 
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index add8f5d076..226241d697 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -1,7 +1,7 @@
 /* Modal Dialogs */
 
 .headline {
-  @include fontsize($base_font_size + 1);
+  @extend %title_1;
 }
 
 .modal-dialog {
@@ -34,13 +34,9 @@
 
   .message-dialog-title {
     text-align: center;
-    font-size: 18pt;
-    font-weight: 800;
+    @extend %title_2;
 
-    &.lightweight {
-      font-size: 13pt;
-      font-weight: 800;
-    }
+    &.lightweight { @extend %title_4;}
   }
   .message-dialog-description { text-align: center; }
 }
@@ -51,7 +47,7 @@
 
   .dialog-list-title {
     text-align: center;
-    font-weight: bold;
+    @extend %heading;
   }
 
   .dialog-list-scrollview { max-height: 200px; }
@@ -64,7 +60,7 @@
       .dialog-list-item-title { font-weight: bold; }
       .dialog-list-item-description {
         color: darken($fg_color,5%);
-        @include fontsize($base_font_size - 1);
+        @extend %caption;
       }
     }
   }
@@ -78,7 +74,7 @@
   }
   .run-dialog-entry { width: 20em; }
   .run-dialog-description {
-    @include fontsize($base_font_size - 1);
+    @extend %caption;
     text-align: center;
     color: darken($fg_color, 20%);
   }
@@ -119,7 +115,7 @@
 .prompt-dialog-info-label,
 .prompt-dialog-null-label {
   text-align: center;
-  @include fontsize($base_font_size - 1);
+  @extend %caption;
 }
 
 .prompt-dialog-error-label {
diff --git a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss 
b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
index 6d16ac241a..b159a7f505 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -76,7 +76,7 @@
 }
 
 .login-dialog-not-listed-label {
-  @include fontsize($base_font_size - 1);
+  @extend %caption;
   font-weight: bold;
   color: darken($osd_fg_color,30%);
   padding-top: 1em;
diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss 
b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
index e03457e28c..04e7167598 100644
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -83,7 +83,7 @@
 }
 
 .lg-completions-text {
-  font-size: .9em;
+  @extend %caption;
   font-style: italic;
 }
 
@@ -112,7 +112,7 @@
 }
 
 .lg-extension-name {
-  font-weight: bold;
+  @extend %heading;
 }
 
 .lg-extension-meta {
@@ -137,7 +137,6 @@
 
 .lg-debug-flags-header {
   padding-top: 2 * $base_spacing;
-  font-size: 120%;
-  font-weight: bold;
   padding: $base_padding;
+  @extend %title_2;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 3cb2d53a29..d5d1ef4262 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -7,8 +7,7 @@
   padding: 0;
 
   .message-list-placeholder { 
-    font-weight:1000; 
-    font-size: 18pt;
+    @extend %title_1;
     color: $insensitive_fg_color;
     spacing: 12px;
 
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 7e443d568f..740927824c 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -48,7 +48,7 @@
 .caps-lock-warning-label {
   text-align: center;
   padding-bottom: 8px;
-  @include fontsize($base_font_size - 1);
+  @extend %caption;
   color: $warning_color;
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss 
b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
index 51394ed39c..b3ffe90276 100644
--- a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
@@ -51,7 +51,6 @@
 
 // list item
 .nm-dialog-item {
-  @include fontsize($base_font_size);
   border: none;
   padding: $base_padding * 2;
   spacing: 0px;
diff --git a/data/theme/gnome-shell-sass/widgets/_osd.scss b/data/theme/gnome-shell-sass/widgets/_osd.scss
index 87f376d17f..a964ca87a1 100644
--- a/data/theme/gnome-shell-sass/widgets/_osd.scss
+++ b/data/theme/gnome-shell-sass/widgets/_osd.scss
@@ -4,8 +4,8 @@ $osd_levelbar_height:8px;
 
 .osd-window {
   @extend %osd_panel;
+  @extend %heading;
   text-align: center;
-  font-weight: bold;
   spacing: $base_spacing * 2; // 12px
   margin: $base_margin * 8; // 32px
   min-width: 64px;
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 7e577e828c..c1322b098d 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -10,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   background-color: $panel_bg_color;
   font-weight: bold;
   height: $panel_height;
-  font-feature-settings: "tnum";
+  @extend %numeric;
   transition-duration: $panel_transition_duration;
 
   // transparent panel on lock & login screens
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index d0bdfa985c..0376d5ccd9 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -86,8 +86,7 @@
   color: $fg_color;
 
   // "Open Windows" label
-  font-weight: bold;
-  font-size: smaller;
+  @extend %caption_heading;
 
   &:insensitive { color: $insensitive_fg_color; }
 }
@@ -132,9 +131,8 @@
 
 // container for radio and check boxes
 .popup-menu-ornament {
+  @extend %heading;
   width: 1.2em;
-  font-weight: bold;
-  font-size: 1em;
 
   &:ltr { text-align: right; };
   &:rtl { text-align: left; };
diff --git a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss 
b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
index fec369724a..6550e5bc09 100644
--- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
@@ -11,7 +11,7 @@
 .unlock-dialog-clock-time {
   font-size: 64pt;
   padding-top: 42px;
-  font-feature-settings: "tnum";
+  @extend %numeric;
 }
 
 .unlock-dialog-clock-date {
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss 
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 1113606ebc..1d920d5c94 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -1,7 +1,7 @@
 // Screenshot UI
 .icon-label-button-container {
   spacing: $base_spacing;
-  font-size: $base_font_size - 3pt;
+  @extend %caption;
 
   StIcon {
     icon-size: 32px;
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss 
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index c377ba61ff..46d39c0bc0 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -39,7 +39,7 @@
 
 // "no results" text
 .search-statustext {
-  @extend %status_text;
+  @extend %large_title;
 }
 
 .grid-search-results {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]