Rebase against gnome 45

gnome-shell-light.scss

@@ -0,0 +1,6 @@
+$variant: 'light';
+
+@import "gnome-shell-sass/_colors"; //use gtk colors
+@import "gnome-shell-sass/_drawing";
+@import "gnome-shell-sass/_common";
+@import "gnome-shell-sass/_widgets";

gnome-shell-sass/_colors.scss

@@ -22,14 +22,14 @@ $outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
 
-$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
+$warning_color: if($variant == 'light', $yellow_4, $yellow_3);
-$error_color: if($variant == 'light', $red_3, $red_4);
+$error_color: if($variant == 'light', $red_4, $red_3);
 $success_color: if($variant == 'light', $green_4, $green_5);
 $destructive_color: $error_color;
 
 // color definitions for OSD elements
-$osd_fg_color: if($variant == 'light', $_dark_base_color, $light_1);
+$osd_fg_color: $light_1;
-$osd_bg_color: if($variant == 'light', $light_3, lighten($_dark_base_color, 5%));
+$osd_bg_color: lighten($_dark_base_color, 5%);
 
 // derived osd colors
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);

gnome-shell-sass/_common.scss

@@ -90,6 +90,7 @@ stage {
   &:selected,
   &:active { @include button(active);}
   &:checked { @include button(checked);}
+  &.default { @include button(default);}
 
   &.flat {
     @include button(normal, $flat:true);
@@ -99,6 +100,7 @@ stage {
     &:selected,
     &:active { @include button(active, $flat:true);}
     &:checked { @include button(checked, $flat:true);}
+    &.default { @include button(default, $flat:false);}
   }
 }
 
@@ -167,6 +169,7 @@ stage {
 // tooltip
 %tooltip {
   background-color: transparentize(black, 0.1);
+  border: 1px solid transparentize($light_1, 0.9);
   color: $light_1;
 
   border-radius: 99px;
@@ -174,6 +177,7 @@ stage {
   text-align: center;
 
   @if $is_highcontrast {
+    background-color: black;
     border-color: $hc_inset_color;
   }
 }
@@ -245,9 +249,9 @@ stage {
 %osd_entry {
   @extend %entry_common;
   @include entry(normal, $c:$osd_fg_color,);
-  &:hover { @include entry(hover, $c:$osd_fg_color,);}
+  &:hover { @include entry(hover, $c:$osd_fg_color);}
-  &:focus { @include entry(focus, $c:$osd_fg_color,);}
+  &:focus { @include entry(focus, $c:$osd_fg_color);}
-  &:insensitive { @include entry(insensitive, $c:$osd_fg_color,);}
+  &:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
 
   StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
 }
@@ -255,18 +259,18 @@ stage {
 // buttons on OSD elements
 %osd_button {
   @extend %button_common;
-  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
+  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
-  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
-  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
-  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
-  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
-  &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
 }
 
 %osd_button_flat {
   @extend %osd_button;
-  @include button(undecorated);
+  @include button(undecorated, $osd:true);
-  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
 }
 
 /* System Elements */
@@ -275,13 +279,14 @@ stage {
 %system_entry {
   @extend %entry_common;
   @include entry(normal, $c:$system_fg_color,);
-  &:hover { @include entry(hover, $c:$system_fg_color,);}
+  &:hover { @include entry(hover, $c:$system_fg_color);}
-  &:focus { @include entry(focus, $c:$system_fg_color,);}
+  &:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
-  &:insensitive { @include entry(insensitive, $c:$system_fg_color,);}
+  &:insensitive { @include entry(insensitive, $c:$system_fg_color);}
 
   StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
 }
 
+
 // buttons
 %system_button {
   @include button(normal, $tc:$system_fg_color, $c:$system_bg_color);

gnome-shell-sass/_drawing.scss

@@ -25,7 +25,7 @@
 
 
 // Text entries
-@mixin entry($t, $c) {
+@mixin entry($t, $c, $fc:$selected_bg_color) {
 //
 // Entries drawing function
 //
@@ -46,8 +46,8 @@
   }
 
   @if $t==focus {
-    background-color: mix(transparentize($c, 0.75), $selected_bg_color, 95%);
+    background-color: mix(transparentize($c, 0.75), $fc, 95%);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+    box-shadow: inset 0 0 0 2px transparentize($fc, 0.3);
     color: $c;
     &:hover {}
   }
@@ -143,11 +143,15 @@
 //
 // since buttons are all flat an borderless now the mixin is simpler
 
-@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) {
+@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false) {
 
   $button_bg_color: mix($tc, $c, $button_mix_factor);
   transition-duration: 100ms;
 
+  @if $osd {
+    $button_bg_color: transparentize($tc, 0.9);
+  }
+
   // normal button
   @if $t==normal {
     color: $tc;
@@ -210,8 +214,8 @@
 
   // insensitive button
   @else if $t==insensitive {
-    color: transparentize($tc, 0.5);
+    color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
-    background-color: transparentize($tc, .95);
+    background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
   }
 
   // default/suggested button
@@ -245,7 +249,6 @@
     &:insensitive {
       @include button(insensitive);
       background-color: transparent;
-      color: transparentize($selected_fg_color, .5);
     }
   }
 }
@@ -344,9 +347,6 @@
   transition-duration: 100ms;
   padding: $base_padding*1.5 $base_padding*2;
 
-  &:ltr {padding-left: $base_padding;}
-  &:rtl {padding-right: $base_padding;}
-
   @if $flat {
     @include button(undecorated);
     box-shadow: none !important;
@@ -360,3 +360,85 @@
   &:active {@include button(active, $c:$bg);}
   &:checked {@include button(checked, $c:$bg);}
 }
+
+//
+// Panel menu/button drawing function
+//
+// $bg: background color, derived from $panel_fg_color
+// $fg: foreground color, also derived from $panel_fg_color
+//
+// $flat:               if true, the button is filled instead of transparent
+// $highlighted_child:  if true, applies some special overrides for to a
+//                      child element, see _panel.scss for details
+// $child_class:        class name of the child element
+//
+
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
+
+  transition-duration: 150ms;
+  border: 3px solid transparent;
+  border-radius: 99px;
+
+  font-weight: bold;
+  background-color: transparent;
+  color: $fg;
+
+  @if $flat {
+    box-shadow: none;
+
+    &:active, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
+      &:hover {
+        box-shadow: inset 0 0 0 100px transparentize($fg, 0.65);
+      }
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
+    }
+
+  } @else {
+    box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
+
+    &:active, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px $bg;
+      &:hover {
+        box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
+      }
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
+    }
+  }
+
+  // some overrides to style a child element
+  @if $highlighted_child {
+    box-shadow: none !important;
+
+    #{$child_class} {
+      transition-duration: 150ms;
+      border: 3px solid transparent;
+      border-radius: 99px;
+    }
+
+    &:active, &:focus, &:checked {
+      box-shadow: none !important;
+
+      #{$child_class} {
+        box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
+
+        &:hover {
+          box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important;
+        }
+      }
+    }
+
+    &:hover {
+      box-shadow: none !important;
+      #{$child_class} {
+        box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
+      }
+    }
+  }
+}

gnome-shell-sass/widgets/_app-grid.scss

@@ -40,9 +40,9 @@ $app_icon_size: 96px;
 // expanded folder
 .app-folder-dialog {
   border-radius: $modal_radius*4;
-  background-color: $bg_color;
+  background-color: $system_overlay_bg_color;
   padding: $base_padding*2;
-  box-shadow:inset 0 0 0 1px $outer_borders_color;
+  box-shadow:inset 0 0 0 1px $system_borders_color;
 
   @if $is_highcontrast {
     box-shadow:inset 0 0 0 2px $hc_inset_color;
@@ -59,7 +59,7 @@ $app_icon_size: 96px;
 
     & .folder-name-entry {
       width: 12em;
-      border-radius: $base_border_radius*2;
+      color: $system_fg_color !important;
     }
 
     /* FIXME: this is to keep the label in sync with the entry */
@@ -122,6 +122,7 @@ $app_icon_size: 96px;
     height: 10px;
     border-radius: 10px; // the same as height&width
     background-color: white;
+    transition-duration: 400ms;
   }
 }
 
@@ -168,6 +169,7 @@ $app_icon_size: 96px;
   width: 24px;
   height: 24px;
   border-radius: 99px;
+  transition-duration: 100ms;
 
   > StIcon { color: $system_fg_color;}
 

gnome-shell-sass/widgets/_calendar.scss

@@ -48,110 +48,80 @@
       @extend %heading;
       padding: 8px 0;
     }
+
     .pager-button {
-      background-color: transparent;
+      @extend .button, .flat;
+      padding: 0 !important;
       height: 32px;
       width: 32px;
       margin: 2px;
       border-radius: $base_border_radius;
-      &:hover, &:focus {background-color: $hover_bg_color;}
+      transition-duration: 100ms;
-      &:active {background-color: $active_bg_color;}
-      @if $is_highcontrast {
-        border:1px solid $hc_inset_color;
-      }
     }
   }
 
-  $calendar_day_size: 3em;
+  // day style
-
+  .calendar-day {
-  .calendar-day-base {
-    text-align: center;
-    margin: 2px;
-    padding: 0 !important;
-    height: $calendar_day_size !important;
-    width: $calendar_day_size !important;
-    border-radius: 99px;
-    transition-duration: 100ms;
     @extend %numeric;
     @extend %smaller;
+    @extend .button, .flat;
 
-    &:hover {background-color: $hover_bg_color;}
+    border-radius: 99px;
-    &:focus {
+    height: 3em !important;
-      background-color: mix($bg_color, $selected_bg_color, 80%);
+    width: 3em !important;
-      color: inherit;
+    margin: 2px;
-      box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+    padding: 0 !important;
-    }
+    font-weight: 600;
-
+    text-align: center;
-    &:active,&:selected {
+    transition-duration: 100ms;
-      color: $active_fg_color;
-      background-color: $active_bg_color;
-      &:focus {
-        background-color: mix($active_bg_color, $selected_bg_color, 80%);
-      }
-    }
 
     // day of week heading
     &.calendar-day-heading {
+      background-color: transparent;
       color: $insensitive_fg_color;
-      padding-top: $base_padding;
+      height: 0.93em !important; // force heading to be smaller height
-      height: 16px !important; // force heading to be smaller height
+      padding-top: $base_padding !important;
-      font-weight: 600;
+      margin-bottom: 0;
-      @extend %smaller;
-    }
-  }
-
-  .calendar-day {
-    font-weight: 600;
-    @if $is_highcontrast {
-      border:1px solid $hc_inset_color;
       border-radius: 9px;
     }
-  }
+
-  .calendar-work-day {}
+    &.calendar-weekday {}
-  .calendar-nonwork-day {color: $insensitive_fg_color;}
+
-  .calendar-other-month-day {
+    &.calendar-weekend {
-    color: transparentize($fg_color, 0.5);
+      color: $insensitive_fg_color;
-    &.calendar-nonwork-day {
+    }
-      color: transparentize($insensitive_fg_color, 0.5);
+
+    &.calendar-other-month {
+      color: transparentize($insensitive_fg_color, 0.7) !important;
+      font-weight: normal;
+    }
+
+    &.calendar-today {
+      @extend .button, .default;
+      color: $selected_fg_color; /* override weekends */
+    }
+
+    &.calendar-day-with-events {
+      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;
     }
   }
 
-  // Today
+  // week number style
-  .calendar-today {
-    background-color: $selected_bg_color;
-    font-weight: 800;
-    color: $selected_fg_color !important;
-
-    &:hover,&:focus {
-      background-color:lighten($selected_bg_color, 3%);
-      color: inherit;
-    }
-
-    &:active,&:selected {
-      background-color: $selected_bg_color;
-      color: inherit;
-
-      &:hover,&:focus {
-        background-color:lighten($selected_bg_color, 3%);
-        color: inherit;
-      }
-    }
-  }
-
-  .calendar-day-with-events {
-    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-week-number {
     @include fontsize($base_font_size - 4);
     font-weight: bold;
     font-feature-settings: "tnum";
+    text-align: center;
     margin: 6px;
     padding: 0 $base_padding;
     border-radius: 3px;
     background-color: transparentize($fg_color, 0.9);
-    color: $insensitive_fg_color
+    color: $insensitive_fg_color;
+
+    @if $is_highcontrast {
+      border:1px solid $hc_inset_color;
+    }
   }
 }
 

gnome-shell-sass/widgets/_login-lock.scss

@@ -155,6 +155,11 @@ $_gdm_dialog_width: 23em;
 
 .unlock-dialog {
   background-color: transparent;
+
+  // %system_entry style override to have neutral focus color with wallpaper background
+  .login-dialog-prompt-entry {
+    &:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));}
+  }
 }
 
 .screen-shield-background { // just the shadow, really

gnome-shell-sass/widgets/_looking-glass.scss

@@ -7,8 +7,8 @@
   background-color: transparentize($osd_bg_color,0.02);
   color: $osd_fg_color;
 
-  border-radius: 0 0 $modal_radius $modal_radius;
+  border-radius: $modal_radius;
-
+  margin-top: $base_margin;
   border-top-width: 0;
   padding: $base_padding;
   spacing: $base_padding;

gnome-shell-sass/widgets/_notifications.scss

@@ -2,14 +2,13 @@
 
 $notification_banner_height: 64px;
 $notification_banner_width: 34em;
-$notification_banner_radius: $base_border_radius*1.5;
 
 // Banner notifications
 .notification-banner {
   min-height: $notification_banner_height;
   width: $notification_banner_width;
   box-shadow: 0 2px 4px 2px $shadow_color;
-  border-radius: $notification_banner_radius;
+  border-radius: $modal_radius;
   margin: $base_margin;
 
   .notification-actions {

gnome-shell-sass/widgets/_panel.scss

@@ -1,7 +1,9 @@
 /* Top Bar */
 // a.k.a. the panel
 
-$panel_bg_color: if($variant == 'light', $light_3, $dark_4);
+$privacy_indicator_color: $orange_3;
+
+$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
 $panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
 $panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
 
@@ -17,109 +19,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   transition-duration: $panel_transition_duration;
   box-shadow: inset 0 -1px 0 0  $panel_border_color;
 
-  // transparent panel on lock & login screens
-  &.unlock-screen,
-  &.login-screen,
-  &:overview {
-    background-color: transparent;
-    box-shadow: none;
-    .panel-button {
-      color: $panel_system_fg_color !important;
-    }
-  }
-
   // panel menus
   .panel-button {
-    font-weight: bold;
+    @include panel_button($panel_fg_color);
-    color: $panel_fg_color;
     -natural-hpadding: $base_padding * 2;
     -minimum-hpadding: $base_padding;
-    transition-duration: 150ms;
-    border: 3px solid transparent;
-    border-radius: 3px;
-
-    &.clock-display {
-      .clock {
-        transition-duration: 150ms;
-        border: 3px solid transparent;
-        border-radius: 3px;
-      }
-    }
-
-    &.screen-recording-indicator {
-      box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
-    }
-
-    &.screen-sharing-indicator {
-      box-shadow: inset 0 0 0 100px $warning_color;
-      StBoxLayout { margin: 0 $base_padding; }
-    }
-
-    &.screen-recording-indicator,
-    &.screen-sharing-indicator {
-      StBoxLayout {
-        spacing: $base_padding;
-      }
-
-      StIcon {
-        icon-size: $base_icon_size;
-      }
-    }
-
-    &:active, &:overview, &:focus, &:checked {
-      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
-
-      // The clock display needs to have the background on .clock because
-      // we want to exclude the do-not-disturb indicator from the background
-      &.clock-display {
-        box-shadow: none;
-
-        .clock {
-          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
-        }
-      }
-
-      &.screen-recording-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
-      }
-      &.screen-sharing-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
-      }
-    }
-
-    &:hover {
-      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
-      &.clock-display {
-        box-shadow: none;
-        .clock {
-          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
-        }
-      }
-
-      &.screen-recording-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
-      }
-      &.screen-sharing-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
-      }
-    }
-
-    &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
-      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
-      &.clock-display {
-        box-shadow: none;
-        .clock {
-          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
-        }
-      }
-
-      &.screen-recording-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
-      }
-      &.screen-sharing-indicator {
-        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
-      }
-    }
 
     // status area icons
     .system-status-icon {
@@ -140,90 +44,79 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     }
 
     &#panelActivities {
-      -natural-hpadding: $base_padding * 3;
+      -natural-hpadding: $base_padding * 2.5;
 
-      .panel-button {
+      & StBoxLayout {
-        > * {
+        spacing: 5px;
-          background-image: url("common-assets/activities.svg");
+      }
-          background-size: contain;
-          width: 24px;
-          height: 24px;
-          background-color: transparent !important;
-          background-gradient-direction: none !important;
-          border: 0 solid transparent !important;
-          text-shadow: 0 0 transparent !important;
-          transition-duration: 0ms !important;
-          box-shadow: none !important;
-          color: transparent;
-        }
 
-        &:active, &:overview, &:focus, &:checked {
+      & .workspace-dot {
-          background-color: transparent;
+        border-radius: 999px;
-          box-shadow: none;
+        min-width: 8px;
-          border-bottom-width: 1px;
+        min-height: 8px;
-          border-color: transparent;
+        background-color: $panel_fg_color;
+      }
+    }
 
-          > * { background-image: url("common-assets/activities-active.svg"); }
+    // screen activity indicators
-        }
+    &.screen-recording-indicator,
+    &.screen-sharing-indicator {
+      StBoxLayout {
+        spacing: $base_padding;
+      }
+
+      StIcon {
+        icon-size: $base_icon_size;
+      }
+    }
+
+    &.screen-recording-indicator {
+      @include panel_button($screenshot_ui_button_red, $flat: false);
+    }
+
+    &.screen-sharing-indicator {
+      @include panel_button($privacy_indicator_color, $flat: false);
+    }
+
+    // clock
+    &.clock-display {
+      // The clock display needs to have the background on .clock because
+      // we want to exclude the do-not-disturb indicator from the background
+      // see _drawing.scss for override details
+      @include panel_button($highlighted_child: true, $child_class:".clock");
+
+      .clock {
+        // the highlighted child
       }
     }
   }
 
+  // transparent panel on lock & login screens
   &.unlock-screen,
   &.login-screen,
   &:overview {
+    background-color: transparent;
+    box-shadow: none;
+
     .panel-button {
-      &:active, &:overview, &:focus, &:checked {
+      @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
-        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
 
-        &.clock-display {
+      &#panelActivities .workspace-dot {
-          box-shadow: none;
+        background-color: $panel_system_fg_color;
-
-          .clock {
-            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
-          }
-        }
-
-        &.screen-recording-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
-        }
-        &.screen-sharing-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
-        }
       }
 
-      &:hover {
+      // clock
-        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
+      &.clock-display {
-        &.clock-display {
+        @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock");
-          box-shadow: none;
-          .clock {
-            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
-          }
-        }
-
-        &.screen-recording-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
-        }
-        &.screen-sharing-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
-        }
       }
 
-      &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+      // unfortunate duplication so these indicators have styles
-        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
+      &.screen-recording-indicator {
-        &.clock-display {
+        @include panel_button($screenshot_ui_button_red, $flat: false);
-          box-shadow: none;
+      }
-          .clock {
-            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
-          }
-        }
 
-        &.screen-recording-indicator {
+      &.screen-sharing-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
+        @include panel_button($privacy_indicator_color, $flat: false);
-        }
-        &.screen-sharing-indicator {
-          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
-        }
       }
     }
   }
@@ -238,9 +131,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     spacing: 0;
   }
 
-  // indicator for active
+  // important privacy related indicators
-  .screencast-indicator,
+  .privacy-indicator { color: $privacy_indicator_color; }
-  .remote-access-indicator { color: $warning_color; }
 }
 
 // App Menu
@@ -256,10 +148,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 
 
 // Clock
-
 .clock-display-box {
   spacing: 2px;
-
   .clock {
     padding-left: $base_padding * 2;
     padding-right: $base_padding * 2;

gnome-shell-sass/widgets/_popovers.scss

@@ -53,6 +53,10 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
   }
 }
 
+.popup-ornamented-menu-item {
+  &:ltr {padding-left: $base_padding;}
+  &:rtl {padding-right: $base_padding;}
+}
 
 // all other graphical elements (sliders)
 .popup-inactive-menu-item {
@@ -75,10 +79,6 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
     border: 1px solid $hc_inset_color;
   }
 
-  .popup-menu-ornament {
-    min-width: $base_icon_size !important;
-  }
-
   // submenu specific styles
   .popup-menu-item {
     border-radius: 0;
@@ -103,12 +103,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
 
 // container for radio and check boxes
 .popup-menu-ornament {
-  @extend %heading;
+  icon-size: $base_icon_size !important;
-  width: 1.2em;
+  width: $base_icon_size;
-  text-align: center !important;
-
-  &:ltr { text-align: right;}
-  &:rtl { text-align: left;}
 }
 
 // separator
@@ -120,10 +116,6 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
     background-color: $borders_color;
   }
 
-  .popup-menu-ornament {
-    width: 0 !important;
-  }
-
   // separators in submenus
   .popup-sub-menu & {
     background-color: transparent;
@@ -148,9 +140,6 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
 .app-menu {
   max-width: 27.25em;
 
-  // this is unneeded at the top-level in this menu, hide it
-  .popup-menu-ornament { width: 0 !important; }
-
   .popup-inactive-menu-item:first-child {
     // "Open Windows" label
     > StLabel {

gnome-shell-sass/widgets/_quick-settings.scss

@@ -59,6 +59,7 @@
   & .quick-toggle-arrow {
     padding: $base_padding $base_padding*1.75;
     border-width: 0;
+    border-color: transparentize($fg_color, .75);
 
     &:checked {
       @include button(default, $c:$selected_bg_color);
@@ -163,6 +164,16 @@
 
 .device-subtitle { color: transparentize($fg_color, 0.5); }
 
+.keyboard-brightness-item .slider {
+  min-height: 16px;
+}
+
+.keyboard-brightness-level {
+  spacing: $base_padding;
+
+  .button:checked { @include button(default, $c:$selected_bg_color); }
+}
+
 // background apps
 
 .background-apps-quick-toggle {
@@ -183,6 +194,9 @@
     @extend .icon-button;
     padding: $base_padding;
   }
+  & .spinner {
+    padding: $base_padding;
+  }
 
   &.popup-inactive-menu-item { color: $fg_color; }
 }

gnome-shell-sass/widgets/_screenshot.scss

@@ -83,7 +83,7 @@ $screenshot_ui_button_red: $error_color;
 }
 
 .screenshot-ui-shot-cast-container {
-  background-color: lighten($osd_bg_color,5%);
+  background-color: transparentize($osd_fg_color,0.9);
   border-radius: $modal_radius;
   padding: $screenshot_ui_shot_cast_spacing;
   spacing: $screenshot_ui_shot_cast_spacing;
@@ -95,9 +95,9 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-shot-cast-button {
   padding: $base_padding $base_padding*2;
   background-color: transparent;
-  &:hover, &:focus { background-color: lighten($osd_bg_color, 10%);}
+  &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
-  &:active { background-color: lighten($active_bg_color,5%);}
+  &:active { background-color: transparentize($osd_fg_color, .5);}
-  &:checked { background-color: white;color: black;}
+  &:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
   &:insensitive { color: transparentize($osd_fg_color, 0.5);}
 
   border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
@@ -195,10 +195,7 @@ $screenshot_ui_button_red: $error_color;
 }
 
 .screenshot-ui-tooltip {
-  color: $osd_fg_color;
+  @extend %tooltip;
-  background-color: $osd_bg_color;
-  border-radius: 99px;
-  padding: $base_padding $base_padding * 2;
   text-align: center;
   -y-offset: 24px;
 }

gnome-shell-sass/widgets/_switcher-popup.scss

@@ -24,7 +24,7 @@ $switcher_padding: $base_padding*2;
 
   // each item in the list
   .item-box {
-    @include tile_button($fg_color);
+    @include tile_button($osd_fg_color);
     // override over style so mouse doesn't steal focus
     &:hover {background: none;}
     @if $is_highcontrast {

meson.build

@@ -1,6 +1,7 @@
 theme_sources = files([
   'gnome-shell-high-contrast.scss',
-  'gnome-shell.scss',
+  'gnome-shell-dark.scss',
+  'gnome-shell-light.scss',
   'gnome-shell-sass/_colors.scss',
   'gnome-shell-sass/_common.scss',
   'gnome-shell-sass/_drawing.scss',
@@ -43,7 +44,8 @@ theme_sources = files([
 
 stylesheets = [
   'gnome-shell-high-contrast.css',
-  'gnome-shell.css'
+  'gnome-shell-dark.css',
+  'gnome-shell-light.css',
 ]
 
 foreach stylesheet: stylesheets