Fixed #1035 GNOME 46 support

src/sass/_variables.scss

@@ -1,6 +1,13 @@
 @import 'theme-options-temp';
 @import 'gtk-base-temp';
 
+// Function to convert px values to em
+@function to_em($input, $base: 16px) {
+  // multiplied and divided by 1000 to make up for round() shortcoming
+  $em_value: ($input / $base) * 1.091 * 1000;
+  @return round($em_value) / 1000 * 1em;
+}
+
 $asset_suffix: if($variant == 'dark', '-dark', '');
 $con_asset_suffix: if($variant=='dark', '', '-dark');
 $extra_background_clip: if($variant == 'light', padding-box, border-box);
@@ -57,6 +64,17 @@ $maximized_radius: 0;
 // icons
 // $base_icon_size: 1.09em;
 $base_icon_size: 16px;
+$medium_icon_size: $base_icon_size * 1.5; // 24px
+$large_icon_size: $base_icon_size * 2; // 32px
+
+// Scaled values
+// Used in elements that follow text scaling factors
+$scaled_padding: to_em(6px); // same as $base_padding
+
+// Used for symbolic icons that scale
+$scalable_icon_size: to_em(16px);
+$medium_scalable_icon_size: $scalable_icon_size * 1.5;
+$large_scalable_icon_size: $scalable_icon_size * 2;
 
 // durations
 $shorter_duration: 100ms;

src/sass/gnome-shell/_common.scss

@@ -24,10 +24,10 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
  */
 
 // Stage
-// stage {
+stage {
-//   @include font(body-1);
+  @include fontsize($base_font_size);
-//   color: $fg_color;
+  color: $fg_color;
-// }
+}
 
 /* General Typography */
 

src/sass/gnome-shell/_drawing.scss

@@ -10,6 +10,13 @@
   @return ($size / $root-font-size) + em;
 }
 
+// Function to convert px values to em
+@function to_em($input, $base: 16px) {
+  // multiplied and divided by 1000 to make up for round() shortcoming
+  $em_value: ($input / $base) * 1.091 * 1000;
+  @return round($em_value) / 1000 * 1em;
+}
+
 // provide font size in rem, with px fallback
 @mixin fontsize($size: 24, $base: 16) {
   font-size: round($size) + pt;
@@ -225,13 +232,20 @@
 
   @if $t == active {
     color: $tc;
-    background-color: transparent;
+    background-color: if($variant=='light', darken($c, 5%), lighten($c, 5%));
-    background-image: if($variant=='light', darken($c, 5%), lighten($c, 5%));
     border: 1px solid $button_borders;
     text-shadow: none;
     icon-shadow: none;
   }
 
+  @if $t == checked {
+    color: $tc;
+    background-color: $selected_bg_color;
+    border: 1px solid $selected_bg_color;
+    text-shadow: none;
+    icon-shadow: none;
+  }
+
   @if $t == insensitive {
     color: if($tc == $fg_color, $disabled_fg_color, $tc);
     background-color: if($c == $base_color, $divider_color, $c);
@@ -277,6 +291,15 @@
     icon-shadow: none;
   }
 
+  @if $t == flat-checked {
+    color: $tc;
+    background-color: $divider_color;
+    border-color: transparent;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+  }
+
   @if $t == flat-insensitive {
     color: if($tc == $fg_color, $disabled_fg_color, $tc);
     background-color: transparent;

src/sass/gnome-shell/_widgets-46-0.scss

@@ -13,10 +13,8 @@
 @import 'common/keyboard';
 @import 'common/login-dialog';
 @import 'common/looking-glass';
-@import 'common/message-list';
 @import 'common/misc';
 @import 'common/network-dialog';
-@import 'common/notifications';
 @import 'common/osd';
 @import 'common/overview';
 @import 'common/panel';
@@ -33,6 +31,8 @@
 @import 'widgets-46-0/app-grid';
 @import 'widgets-46-0/dash';
 @import 'widgets-40-0/misc';
+@import 'widgets-46-0/message-list';
+@import 'widgets-46-0/notifications';
 @import 'widgets-40-0/overview';
 @import 'widgets-42-0/osd';
 @import 'widgets-40-0/panel';

src/sass/gnome-shell/common/_buttons.scss

@@ -1,6 +1,24 @@
 /* Buttons */
 
 %button {
+  @include button(flat-normal);
+  &:hover { @include button(flat-hover); }
+  &:selected, &:active { @include button(flat-active); }
+  &:checked { @include button(checked); }
+  &:insensitive { @include button(flat-insensitive); }
+  &:focus { @include button(flat-focus); }
+}
+
+%flat_button {
+  @include button(flat-normal);
+  &:hover { @include button(flat-hover); }
+  &:selected, &:active { @include button(flat-active); }
+  &:checked { @include button(flat-checked); }
+  &:insensitive { @include button(flat-insensitive); }
+  &:focus { @include button(flat-focus); }
+}
+
+%default_button {
   @include button(flat-normal);
   &:hover { @include button(flat-hover); }
   &:active { @include button(flat-active); }
@@ -9,19 +27,43 @@
 }
 
 .button {
-  min-height: $small_size;
+  min-height: to_em(22px);
   padding: $container_padding $container_padding * 2;
   border-radius: $bt_radius;
   border: none;
   @extend %button;
+
+  // default style
+  &.default {
+    @extend %default_button;
+  }
+
+  // flat style
+  &.flat {
+    @extend %flat_button;
+  }
 }
 
 .icon-button {
-  min-height: $small_size;
+  min-height: $scalable_icon_size;
-  min-width: $small_size;
+  padding: $scaled_padding * 2;
-  padding: $container_padding;
   border-radius: $circular_radius;
   @extend %button;
+
+  StIcon {
+    icon-size: $scalable_icon_size;
+    -st-icon-style: symbolic;
+  }
+
+  // default style
+  &.default {
+    @extend %default_button;
+  }
+
+  // flat style
+  &.flat {
+    @extend %flat_button;
+  }
 }
 
 %osd_button {

src/sass/gnome-shell/common/_message-list.scss

@@ -2,7 +2,7 @@
 // a.k.a. notifications in the menu
 
 .message-list {
-  width: 31.5em;
+  width: 30em;
   padding: 0 $base_margin;
   text-shadow: none;
   border: none;

src/sass/gnome-shell/common/_switcher-popup.scss

@@ -8,11 +8,14 @@
 // switcher onscreen panel
 .switcher-list {
   @extend %osd_panel;
+  border-radius: $bt_radius * 2 + $base_padding * 2;
 
   .item-box {
     padding: 8px;
-    border-radius: $bt_radius;
+    border-radius: $bt_radius * 2;
     border: 1px solid transparent;
+    background-color: transparent;
+    color: $fg_color;
 
     &:outlined {
       background-color: $divider_color;

src/sass/gnome-shell/widgets-46-0/_message-list.scss

@@ -0,0 +1,253 @@
+/* Message List */
+// a.k.a. notifications in the menu
+
+.message-list {
+  width: 29em;
+  padding: 0 $base_margin;
+  text-shadow: none;
+  border: none;
+
+  // padding and margins to account for scrollbar
+  &:ltr {
+    margin-left: 0;
+    margin-right: 0;
+    padding-right: 0;
+    border-right-width: 0;
+  }
+
+  &:rtl {
+    margin-right: 0;
+    margin-left: 0;
+    padding-left: 0;
+    border-left-width: 0;
+  }
+
+  .message-list-placeholder {
+    @extend %title_2;
+    color: $disabled_fg_color;
+
+    // icon size and color
+    > StIcon {
+      icon-size: 96px; // 48px
+      margin-bottom: $base_margin * 3;
+      -st-icon-style: symbolic;
+    }
+  }
+}
+
+.message-list-sections {
+  spacing: $base_padding * 2;
+
+  // to account for scrollbar
+  &:ltr { margin-right: $base_margin * 3; }
+  &:rtl { margin-left: $base_margin * 3; }
+}
+
+.message-list-section,
+.message-list-section-list {
+  spacing: $base_padding * 2;
+}
+
+// do-not-disturb + clear button
+.message-list-controls {
+  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
+  padding: $base_padding * 2;
+  padding-bottom: $base_padding;
+  spacing: $base_padding;
+  @extend %heading;
+
+  .dnd-button {
+    // We need this because the focus outline isn't inset like for the buttons
+    // so the dnd button would grow when it gets focus if we didn't change only
+    // its color when focusing.
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: 32px;
+    border-style: solid;
+
+    &:focus {
+      border-color: transparentize($selected_bg_color, 0.4);
+    }
+  }
+}
+
+$card_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95));
+
+%card {
+  border-radius: $base_border_radius;
+  padding: $scaled_padding;
+  margin: $base_margin;
+  background-color: $card_bg;
+  box-shadow: 0 1px 2px 0 rgba(black, 0.02);
+  // bit of a hack here with border since we can't have double box-shadow
+  border: 1px solid transparent;
+  color: $alt_fg_color;
+
+  &:hover, &:focus {
+    color: $fg_color;
+    background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1));
+    box-shadow: 0 1px 3px rgba(black, 0.05) !important;
+  }
+
+  &:active {
+    color: $fg_color;
+    background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%));
+    box-shadow: none !important;
+  }
+
+  &:insensitive {
+    color: $alt_disabled_fg_color;
+    background-color: rgba($card_bg, 0.5);
+    box-shadow: none !important;
+  }
+}
+
+// message bubbles
+.message {
+  @extend %card;
+
+  // subtract side padding to accommodate the close button's border
+  &:ltr { padding-right:-2px; }
+  &:rtl { padding-left:-2px; }
+
+  // message header
+  .message-header {
+    padding: 0 $scaled_padding;
+    margin: $base_padding;
+    margin-bottom: 0;
+    spacing: $base_padding;
+    color: $disabled_fg_color;
+
+    // header source icon
+    .message-source-icon {
+      icon-size: $scalable_icon_size; // 16px
+      -st-icon-style: symbolic;
+    }
+
+    // box that contains the source icon, source name and timestamp of the message
+    .message-header-content {
+      spacing: $base_padding;
+      min-height: to_em(24px);
+      padding-bottom: $base_padding;
+
+      // header source title
+      .message-source-title {
+        font-weight: bold;
+      }
+
+      // Time label
+      .event-time {
+        @extend %caption;
+        color: $disabled_fg_color;
+        // Add bottom padding to align the app name with the time horizontally
+        padding-bottom: to_em(1px);
+
+        &:ltr { text-align: right; }
+        &:rtl { text-align: left; }
+      }
+    }
+
+    // buttons in the message header
+    .message-expand-button,
+    .message-close-button {
+      @extend .icon-button;
+      color: $fg_color;
+      background-color: transparentize($fg_color, .9);
+      padding: 4px;
+      border: none;
+      &:hover { background-color: transparentize($fg_color, .81); }
+      &:active,
+      &:active:hover { background-color: transparentize($fg_color, .76); }
+      &:insensitive { background-color: transparentize($fg_color, .93); }
+    }
+
+    .message-expand-button {
+      padding: 6px;
+      &:ltr { margin-right: $base_padding; }
+      &:rtl { margin-left: $base_padding; }
+    }
+  }
+
+  // container for message contents
+  .message-box {
+    padding: $base_padding;
+    margin: $base_padding;
+    margin-top: 0;
+    spacing: $base_padding;
+
+    // icon of the message
+    .message-icon {
+      &:ltr { margin-right:$base_padding; }
+      &:rtl { margin-left:$base_padding; }
+
+      // icon size and color
+      icon-size: $base_icon_size * 3; // 48px
+      -st-icon-style: symbolic;
+
+      &.message-themed-icon {
+        border-radius: $circular_radius; // is circular
+        background-color: transparentize($fg_color, 0.8);
+        icon-size: $base_icon_size;
+        min-width: $base_icon_size * 3;
+        min-height: $base_icon_size * 3;
+      }
+    }
+
+    // If the header isn't displayed we need more top margin
+    &:first-child {
+      margin-top: $base_padding * 2;
+    }
+
+    // text of the message
+    .message-content {
+      spacing: $base_margin;
+
+      // message title
+      .message-title {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .message-secondary-bin {
+    padding: 0 $base_margin * 2;
+
+    > .event-time {
+      color: $hint_fg_color;
+      font-size: 1em;
+      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+      padding-bottom: 0.13em;
+
+      &:ltr { text-align: right; }
+      &:rtl { text-align: left; }
+    }
+  }
+}
+
+// URLs in messages
+.url-highlighter {
+  link-color: $link_color;
+}
+
+.message-media-control {
+  margin: 7px 4px !important;
+  padding: 8px !important;
+  border-radius: $circular_radius;
+  color: $alt_fg_color;
+  &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
+  &:active { color: $fg_color; background-color: $track_color; }
+  &:insensitive { color: $disabled_fg_color; }
+
+  StIcon { icon-size: $base_icon_size; }
+}
+
+.media-message {
+  // album-art
+  .message-icon {
+    border-radius: $bt_radius !important;
+
+    &.message-themed-icon {
+      icon-size: $large_icon_size !important; // 32px
+    }
+  }
+}

src/sass/gnome-shell/widgets-46-0/_notifications.scss

@@ -0,0 +1,74 @@
+/* Notifications & Message Tray */
+
+$notification_banner_height: 64px;
+$notification_banner_width: 34em;
+
+// Banner notifications
+.notification-banner {
+  min-height: $notification_banner_height;
+  width: $notification_banner_width;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
+  border-radius: $wm_radius;
+  margin: $base_padding;
+  padding: $scaled_padding;
+}
+
+.notification-buttons-bin {
+  spacing: 0;
+}
+
+.notification-button {
+    min-height: 40px;
+    padding: 0 16px;
+    background-color: $base_color;
+    color: $alt_fg_color;
+    font-weight: 500;
+    border-width: 0;
+    margin-right: $scaled_padding !important;
+
+    &:focus {
+      background-color: $base_color;
+      color: $fg_color;
+      box-shadow: inset 0 0 0 2px $divider_color !important;
+    }
+
+    &:hover {
+      background-color: $divider_color;
+      color: $fg_color;
+      box-shadow: none;
+    }
+
+    &:active, &:checked {
+      background-color: $track_color;
+      color: $fg_color;
+    }
+
+  &:insensitive {
+    background-color: transparent;
+    color: $alt_disabled_fg_color;
+  }
+
+  &:first-child:ltr {
+    border-radius: $bt_radius;
+  }
+
+  &:last-child:ltr {
+    border-radius: $bt_radius;
+    margin-right: $scaled_padding !important;
+  }
+
+  &:first-child:rtl {
+    border-radius: $bt_radius;
+  }
+
+  &:last-child:rtl {
+    border-radius: $bt_radius;
+    margin-left: 0 !important;
+  }
+
+  &:first-child:last-child {
+    border-radius: $bt_radius;
+    margin-left: 0 !important;
+    margin-right: $scaled_padding !important;
+  }
+}

src/sass/gtk/_common-3.0.scss

@@ -1898,6 +1898,10 @@ headerbar {
   stack.titlebar { box-shadow: none; }
 }
 
+label.titlebar {
+  background-color: $header_bg;
+}
+
 window.background.csd.unified {
   > deck > box.vertical > stack > headerbar.titlebar.windowhandle {
     > box > separator { background: none; }

src/sass/gtk/_common-4.0.scss

@@ -2568,7 +2568,7 @@ popover {
     }
 
     listview {
-      padding: $container_padding;
+      padding: 0;
       margin: 0;
 
       > row {