[gnome-shell-sass] stylesheet: Fixes and missed updates for the 42 refresh

[Florian Müllner <fmuellner src gnome org>]

commit 7b4bae48ef9e9f25608d14a65073de14ad26ba7a
Author: Sam Hewitt <sam snwh org>
Date:   Mon Jan 17 13:14:25 2022 -0330

    stylesheet: Fixes and missed updates for the 42 refresh
    
    - increase the looking glass outer radii
    - adjust the colours to be less dark
    - fix oversized notification close icon
    - fix separators and reduce padding in popovers
    - fix colour mismatch in switch assets
    - fix color of no-notifications asset
    - rename assets to be consistent with dark-as-default scheme
    - update checkbox assets
    - fix calendar today border
    - reduce icon size of placeholder notifications icon
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2111>

 _colors.scss                |  8 ++++----
 widgets/_calendar.scss      |  5 +----
 widgets/_check-box.scss     |  6 +++---
 widgets/_looking-glass.scss |  3 ++-
 widgets/_message-list.scss  |  7 ++++---
 widgets/_popovers.scss      | 38 ++++++++++++++++++++++----------------
 widgets/_switches.scss      |  4 ++--
 7 files changed, 38 insertions(+), 33 deletions(-)
---
diff --git a/_colors.scss b/_colors.scss
index 32f7c81..31698b2 100644
--- a/_colors.scss
+++ b/_colors.scss
@@ -1,15 +1,15 @@
 // When color definition differs for dark and light variant,
 // it gets @if-ed depending on $variant
 
-$base_color: if($variant == 'light', #fff, lighten(desaturate(#242424, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, #242424);
+$base_color: if($variant == 'light', #fff, lighten(desaturate(#2a2a2a, 20%), 2%));
+$bg_color: if($variant == 'light', #f6f5f4, #2a2a2a);
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
 $selected_fg_color: #fff;
 $selected_bg_color: if($variant == 'light', #3584e4, #1c71d8);
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 
30%));
 
-$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 3%));
+$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 4%));
 $borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%));
 
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
@@ -22,7 +22,7 @@ $success_color: if($variant == 'light', #2ec27e, #26a269);
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
 
 $osd_fg_color: white;
-$osd_bg_color: transparentize(desaturate(#242424, 100%),0.04);
+$osd_bg_color: transparentize(desaturate($bg_color, 100%),0.04);
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
 $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  
mix($osd_fg_color, $osd_bg_color, 70%));
 $osd_borders_color: transparentize(black, 0.3);
diff --git a/widgets/_calendar.scss b/widgets/_calendar.scss
index 1d05258..5ce908a 100644
--- a/widgets/_calendar.scss
+++ b/widgets/_calendar.scss
@@ -87,7 +87,6 @@
     height: $calendar_day_size;
     width: $calendar_day_size;
     border-radius: $calendar_day_size * 0.5 + 2px;
-    border: 1px solid transparent; //avoid jumparound due to today
     font-feature-settings: "tnum";
     
     &:hover, &:focus { background-color: $hover_bg_color; }
@@ -128,8 +127,6 @@
   // Today
   .calendar-today {
     background-color: $selected_bg_color;
-    border: 1px solid transparent;
-    font-weight: bold;
     color: $selected_fg_color !important;
 
     &:hover,&:focus {
@@ -149,7 +146,7 @@
   }
 
   .calendar-day-with-events {
-    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today.svg"), 
url("resource:///org/gnome/shell/theme/calendar-today-dark.svg"));
+    background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/calendar-today-light.svg"), 
url("resource:///org/gnome/shell/theme/calendar-today.svg"));
     background-size: contain;
     &.calendar-work-day {
       color: lighten($fg_color,10%);
diff --git a/widgets/_check-box.scss b/widgets/_check-box.scss
index fc71467..d2dabf2 100644
--- a/widgets/_check-box.scss
+++ b/widgets/_check-box.scss
@@ -1,7 +1,7 @@
 /* Check Boxes */
 
 // these are equal to the size of the SVG assets
-$check_height: 22px;
+$check_height: 24px;
 $check_width: 24px;
 
 
@@ -10,9 +10,9 @@ $check_width: 24px;
   StBin {
     width: $check_width;
     height: $check_height;
-    background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg");
+    background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/checkbox-off-light.svg"), 
url("resource:///org/gnome/shell/theme/checkbox-off.svg"));
   }
-  &:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); }
+  &:focus StBin { background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), 
url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; }
   &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
   &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
 }
\ No newline at end of file
diff --git a/widgets/_looking-glass.scss b/widgets/_looking-glass.scss
index 2b9cb83..6cda270 100644
--- a/widgets/_looking-glass.scss
+++ b/widgets/_looking-glass.scss
@@ -3,12 +3,13 @@
 // Dialog
 #LookingGlassDialog {
   background-color: $osd_bg_color;
-  border-radius: 0 0 $base_border_radius $base_border_radius;
+  border-radius: 0 0 $modal_radius $modal_radius;
   border-top-width: 0;
   border: 1px solid $osd_outer_borders_color;
   color: $osd_fg_color;
   padding: $base_padding;
   spacing: $base_spacing;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 
   & > #Toolbar {
     border: none;
diff --git a/widgets/_message-list.scss b/widgets/_message-list.scss
index a583283..c7e84cb 100644
--- a/widgets/_message-list.scss
+++ b/widgets/_message-list.scss
@@ -14,7 +14,8 @@
 
     // icon size and color
     > StIcon {
-      icon-size: $base_icon_size*4; // 32px
+      icon-size: $base_icon_size*3; // 48px
+      margin-bottom: $base_margin*3;
       -st-icon-style: symbolic;
     }
   }
@@ -119,8 +120,8 @@
     color: $fg_color;
     background-color: transparentize($fg_color, 0.9);
     border-radius: 99px;
-    padding: $base_padding;
-    margin: 0;
+    padding: $base_padding - 1px;
+    margin: 1px;
     &:hover { 
       background-color: transparentize($fg_color, 0.8);
     }
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index 7a88e30..f523ec6 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -39,7 +39,7 @@
       border: 1px solid $borders_color; 
       box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
       background-color: $bg_color;
-      padding: $base_padding * 2;
+      padding: $base_padding*1.5;
     }
 
     .popup-menu-item {}
@@ -54,7 +54,7 @@
 // menu items
 .popup-menu-item {
   spacing: $base_spacing;
-  padding: $base_padding*2;
+  padding: $base_padding*1.5;
   margin: 2px 0;
   border-radius: $base_border_radius;
   transition: 0.2s all ease;
@@ -125,8 +125,6 @@
   &:active {
     background-color: transparent;
   }
-
-  
   
   .popup-menu-ornament {
     min-width: 14px !important;
@@ -141,10 +139,6 @@
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
   }
-
-  .popup-separator-menu-item {
-    margin: 0;
-  }
 }
 
 // container for radio and check boxes
@@ -161,16 +155,28 @@
 .popup-separator-menu-item {
   padding: 0;
 
+  &:ltr { padding-right:$base_padding; padding-left: 0; }
+  &:rtl { padding-right: 0; padding-left:$base_padding; }
+
+
   .popup-separator-menu-item-separator {
-    //-margin-horizontal: 24px;
     height: 1px; //not really the whole box
-    margin: $base_margin 4em;
-    background-color: lighten($borders_color, 2%);
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: $borders_color;
+  }
+
+  .popup-menu-ornament {
+    width: 0 !important;
+  }
+
+  .popup-sub-menu & {
+    padding: 0;
+    margin-right: 2.5em !important; // account for ornament
+    background-color: transparent;
 
-    .popup-sub-menu & { //submenu separators
-      margin: 0 4em 0 3em; // balance it in the middle
-      padding:0 !important;
-      background-color: darken($hover_bg_color, 5%);
+    .popup-separator-menu-item-separator {
+      background-color: lighten($borders_color, 7%);
     }
   }
 }
@@ -183,7 +189,7 @@
 
 // system status menu
 .aggregate-menu {
-  min-width: 21em;
+  min-width: 22em;
 
   // this is unneeded in at the top-level this menu, hide it
   .popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;}
diff --git a/widgets/_switches.scss b/widgets/_switches.scss
index 30a0f0d..3f7bdc5 100644
--- a/widgets/_switches.scss
+++ b/widgets/_switches.scss
@@ -9,8 +9,8 @@ $switch_width: 48px;
   height: $switch_height;
   width: $switch_width;
   background-size: contain;
-  background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/toggle-off.svg"),url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"));
+  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 { 
-    background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/toggle-on.svg"),url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"));
+    background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
   }
 }
\ No newline at end of file