Update #201

install.sh

@@ -38,7 +38,9 @@ SIZE_VARIANTS=('' '-Compact')
 if [[ "$(command -v gnome-shell)" ]]; then
   echo && gnome-shell --version
   SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)"
-  if [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
+  if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then
+    GS_VERSION="47-0"
+  elif [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
     GS_VERSION="46-0"
   elif [[ "${SHELL_VERSION:-}" -ge "44" ]]; then
     GS_VERSION="44-0"
@@ -51,7 +53,7 @@ if [[ "$(command -v gnome-shell)" ]]; then
   fi
 else
   echo "'gnome-shell' not found, using styles for last gnome-shell version available."
-  GS_VERSION="46-0"
+  GS_VERSION="47-0"
 fi
 
 usage() {
@@ -508,8 +510,14 @@ gnome_shell_version() {
 
   sed -i "/\widgets/s/40-0/${GS_VERSION}/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss"
 
-  if [[ "${GS_VERSION}" != '40-0' && "${GS_VERSION}" != '42-0' && "${GS_VERSION}" != '44-0' ]]; then
+  if [[ "${GS_VERSION}" == '3-28' ]]; then
-    sed -i "/\extensions/s/40-0/${GS_VERSION}/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss"
+    sed -i "/\extensions/s/40-0/3-28/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss"
+  elif [[ "${GS_VERSION}" -ge '46-0' ]]; then
+    sed -i "/\extensions/s/40-0/46-0/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss"
+  fi
+
+  if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then
+    sed -i "/\gnome_version/s/default/new/" "${SRC_DIR}/sass/_tweaks-temp.scss"
   fi
 }
 

src/sass/_tweaks.scss

@@ -33,3 +33,6 @@ $window_button: 'mac';
 
 // Gnome-Shell float panel version
 $float: 'false';
+
+// Gnome-Shell version
+$gnome_version: 'default';

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

@@ -0,0 +1,42 @@
+@import 'common/a11y';
+@import 'common/base';
+@import 'common/buttons';
+@import 'common/check-box';
+@import 'common/corner-ripple';
+@import 'common/dialogs';
+@import 'common/entries';
+@import 'common/hotplug';
+@import 'common/ibus-popup';
+@import 'common/keyboard';
+@import 'common/login-dialog';
+@import 'common/looking-glass';
+@import 'common/misc';
+@import 'common/network-dialog';
+@import 'common/osd';
+@import 'common/overview';
+@import 'common/panel';
+@import 'common/popovers';
+@import 'common/screen-shield';
+@import 'common/scrollbars';
+@import 'common/search-entry';
+@import 'common/slider';
+@import 'common/switcher-popup';
+@import 'common/switches';
+@import 'common/tiled-previews';
+@import 'common/workspace-switcher';
+@import 'widgets-46-0/app-grid';
+@import 'widgets-46-0/calendar';
+@import 'widgets-46-0/dash';
+@import 'widgets-46-0/message-list';
+@import 'widgets-40-0/misc';
+@import 'widgets-46-0/notifications';
+@import 'widgets-40-0/overview';
+@import 'widgets-42-0/osd';
+@import 'widgets-40-0/panel';
+@import 'widgets-42-0/popovers';
+@import 'widgets-46-0/quick-settings';
+@import 'widgets-40-0/search-entry';
+@import 'widgets-46-0/search-results';
+@import 'widgets-42-0/screenshot';
+@import 'widgets-40-0/window-picker';
+@import 'widgets-40-0/workspace-thumbnails';

src/sass/gnome-shell/widgets-47-0/_app-grid.scss

@@ -0,0 +1,209 @@
+
+/* App Icons */
+
+$app_icon_size: 96px;
+$app_folder_size: 720px;
+
+// app icons
+.icon-grid {
+  row-spacing: 12px;
+  column-spacing: 12px;
+  max-row-spacing: 36px;
+  max-column-spacing: 36px;
+  page-padding-top: 24px;
+  page-padding-bottom: 24px;
+  page-padding-left: 18px;
+  page-padding-right: 18px;
+}
+
+.overview-tile {
+  color: on($osd, secondary);
+  border-radius: $base_radius * 2.5;
+  padding: 6px;
+  border: none;
+  transition-duration: 100ms;
+  text-align: center;
+  background-color: transparent;
+
+  &:hover,
+  &:focus,
+  &:selected {
+    color: on($osd);
+    background-color: on($osd, divider);
+    border-image: none;
+    background-image: none;
+  }
+
+  &:active,
+  &:checked, {
+    color: on($osd);
+    background-color: on($osd, track);
+    box-shadow: none;
+  }
+}
+
+// App Folders
+.app-folder {
+  background-color: on($osd, divider);
+  border-radius: $base_radius * 2.5;
+  color: on($osd, secondary);
+
+  .overview-icon {
+    background-color: transparent;
+    border-radius: $base_radius * 2.5;
+  }
+
+  &:hover {
+    background-color: overlay($osd, active);
+    color: on($osd);
+  }
+
+  &:active {
+    background-color: on($osd, track);
+    color: on($osd);
+  }
+}
+
+// Running app indicator (also shown in dash)
+.app-grid-running-dot {
+  width: $base_padding;
+  height: 3px;
+  border-radius: 2px;
+  background-color: on($osd, track);
+  margin-bottom: 0;
+
+  StWidget.focused & {
+    width: $base_padding * 4;
+    background-color: $inverse-indicator !important;
+  }
+}
+
+.app-folder-dialog-container {
+  // pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
+  padding-top: $item_size;
+}
+
+// expanded folder
+.app-folder-dialog {
+  width: $app_folder_size;
+  height: $app_folder_size;
+  border-radius: $menu_radius * 3;
+  padding: $base_padding * 2;
+  background-color: $osd;
+
+  @if $rimless == 'false' {
+    border: 1px solid black;
+    box-shadow: inset 0 0 0 1px highlight($osd);
+  } @else {
+    border: none;
+    box-shadow: none;
+  }
+
+  .folder-name-container {
+    padding: $base_padding * 4 $base_padding * 6;
+    padding-bottom: 0;
+
+    .folder-name-label,
+    .folder-name-entry {
+      @extend %title_1;
+    }
+
+    .folder-name-entry {
+      width: 12em;
+      border: none;
+      caret-color: on($osd);
+
+      &:focus {
+        background-color: on($osd, divider);
+        color: on($osd);
+      }
+    }
+  }
+
+  .icon-button {
+    background-color: overlay($osd);
+    color: on($osd, secondary);
+    border: none;
+    padding: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: $circular_radius;
+
+    > StIcon { icon-size: $base_icon_size; }
+
+    &:hover { background-color: overlay($osd, hover); }
+    &:checked, &:active { background-color: $inverse-indicator; color: on($inverse-indicator); }
+  }
+
+  .page-indicators {
+    margin-bottom: 18px;
+  }
+}
+
+// Rename popup for app folders
+.rename-folder-popup {
+  .rename-folder-popup-item {
+    spacing: $base_padding;
+    &:ltr, &:rtl { padding: 0 $base_padding * 2; }
+  }
+}
+
+// shutdown and other actions in the grid
+.system-action-icon {
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight
+  background-color: $osd;
+  color: on($osd);
+  border-radius: $circular_radius;
+  icon-size: $app_icon_size * 0.5;
+}
+
+// page navigation
+.page-navigation-hint {
+  &.dnd {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  &.next:ltr,
+  &.previous:rtl {
+    background-gradient-start: rgba(255, 255, 255, 0.05);
+    background-gradient-end: transparent;
+    background-gradient-direction: horizontal;
+    border-radius: $modal_radius * 1.5 0px 0px $modal_radius * 1.5;
+  }
+
+  &.previous:ltr,
+  &.next:rtl {
+    background-gradient-start: transparent;
+    background-gradient-end: rgba(255, 255, 255, 0.05);
+    background-gradient-direction: horizontal;
+    border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px;
+  }
+}
+
+.page-navigation-arrow {
+  margin: $base_padding;
+  padding: $base_padding * 3;
+  width: $medium_icon_size;
+  height: $medium_icon_size;
+  border-radius: $circular_radius;
+  transition-duration: 100ms;
+  color: on($osd, secondary);
+  background-color: transparent;
+
+  > StIcon { color: on($osd); }
+
+  &:insensitive {
+    background-color: transparent;
+    color: on($osd, disabled);
+  }
+
+  &:hover {
+    background-color: on($osd, divider);
+    color: on($osd);
+  }
+
+  &:active {
+    background-color: on($osd, track);
+    color: on($osd);
+  }
+}

src/sass/gnome-shell/widgets-47-0/_calendar.scss

@@ -0,0 +1,387 @@
+/* Date/Time Menu */
+
+%popover_bubble {
+  color: $text-secondary;
+  background-color: $fill;
+  border-radius: $base_radius;
+  border: none;
+  box-shadow: none;
+  text-shadow: none;
+
+  &:hover, &:focus {
+    color: $text;
+    background-color: overlay($base, hover);
+    box-shadow: none;
+  }
+
+  &:active {
+    color: $text;
+    background-color: overlay($base, active);
+    box-shadow: none;
+  }
+}
+
+// overall menu
+#calendarArea {
+  padding: $base_padding / 2;
+}
+
+.datemenu-popover {
+  border-radius: $base_radius + $base_padding * 2 !important;
+}
+
+// Calendar menu side column
+.datemenu-calendar-column {
+  spacing: $base_spacing;
+  border: none;
+  padding: 0 !important;
+  margin: 0 !important;
+
+  &:ltr { margin-right: 0; border-left-width: 0; }
+  &:rtl { margin-left: 0; border-right-width: 0; }
+
+  .datemenu-displays-section { padding-bottom: 0; }
+
+  .datemenu-displays-box {
+    spacing: $base_spacing;
+  }
+}
+
+.world-clocks-header,
+.weather-header,
+.events-section-title {
+  color: $text-secondary;
+  font-weight: bold;
+}
+
+.datemenu-today-button,
+.datemenu-displays-box {
+  margin: $base_margin $base_spacing;
+}
+
+/* today button (the date) */
+.datemenu-today-button {
+  border: none;
+  box-shadow: none;
+  background: none;
+  padding: $base_padding $base_padding * 2;
+  margin: 0;
+  text-shadow: none;
+  color: $text-secondary;
+  border-radius: $base_radius;
+  margin: $base_margin;
+
+  &:ltr { margin-left: $base_margin; }
+  &:rtl { margin-right: $base_margin; }
+
+  &:hover, &:focus {
+    background-color: overlay($base, hover);
+  }
+
+  &:active {
+    background-color: overlay($base, active);
+  }
+
+  // weekday label
+  .day-label {
+    @include fontsize($font_size + 1);
+    font-weight: bold;
+  }
+
+  // date label
+  .date-label {
+    @include fontsize($font_size + 7);
+    font-weight: normal;
+  }
+}
+
+/* Calendar */
+.calendar {
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+  padding: $base_padding / 2 !important;
+  margin: 0 !important;
+  text-shadow: none;
+  border-radius: $menu_radius;
+  color: $text-secondary;
+
+  // month
+  .calendar-month-label {
+    @extend %heading;
+    padding: $base_padding 0;
+    color: $text-secondary !important;
+    font-weight: bold;
+    text-align: center;
+    text-shadow: none;
+    background-color: transparent;
+  }
+
+  // prev/next month icons
+  .calendar-change-month-back,
+  .calendar-change-month-forward {
+    padding: 0 !important;
+    margin: ($base_padding / 2) 0 !important;
+
+    StIcon {
+      icon-size: $base_icon_size;
+    }
+  }
+
+  .pager-button {
+    width: $item_size !important;
+    height: $item_size !important;
+    margin: 2px !important;
+    border-radius: $circular_radius;
+    background-color: transparent;
+    color: $text;
+    box-shadow: none !important;
+
+    &:hover, &:focus { background-color: $divider; box-shadow: none !important; }
+    &:active { background-color: $track; box-shadow: none !important; }
+  }
+
+  .calendar-day {
+    @include fontsize($font_size - 1);
+    text-align: center;
+    width: $item_size + 2px !important;
+    height: $item_size + 2px !important;
+    padding: 0 !important;
+    margin: 2px !important;
+    border-radius: $circular_radius;
+    color: $text-secondary !important;
+    border: none;
+    font-feature-settings: "tnum";
+    background-color: transparent;
+
+    &:hover, &:focus {
+      background-color: $divider;
+      box-shadow: none !important;
+      outline: none !important;
+    }
+
+    &:active, &:selected {
+      color: $text !important;
+      background-color: $track;
+      border-color: transparent !important; //avoid jumparound due to today
+      box-shadow: none !important;
+      outline: none !important;
+    }
+
+    &.calendar-weekday {}
+
+    &.calendar-weekend {
+      color: $text-disabled !important;
+      // font-weight: normal;
+    }
+  }
+
+  .calendar-day { //border collapse hack - see calendar.js
+    border-width: 0;
+  }
+
+  .calendar-day-top {
+    border-top-width: 0;
+  }
+
+  .calendar-day-left {
+    border-left-width: 0;
+  }
+
+  .calendar-nonwork-day {
+    color: $text;
+    // font-weight: normal;
+  }
+
+  // Today
+  .calendar-today {
+    font-weight: bold;
+    color: $text-secondary !important;
+    background-color: overlay($base);
+    border: none;
+
+    &:hover, &:focus {
+      background-color: overlay($base, hover);
+      color: $text !important;
+    }
+
+    &:active {
+      background-color: darken($primary, 5%);
+      color: on($primary) !important;
+    }
+
+    &:selected {
+      background-color: $primary;
+      color: on($primary) !important;
+
+      &:hover, &:focus {
+        background-color: lighten($primary, 8%);
+        color: on($primary) !important;
+      }
+    }
+  }
+
+  .calendar-day-with-events {
+    color: $text-secondary;
+    background-image: url("assets/calendar-today.svg");
+
+    &.calendar-work-day {
+      color: $text-secondary;
+      font-weight: bold;
+    }
+  }
+
+  .calendar-other-month {
+    color: $text-secondary-disabled !important;
+    font-weight: normal;
+
+    &.calendar-weekend {
+      color: $text-secondary-disabled !important;
+    }
+  }
+
+  // day of week heading
+  .calendar-day-heading {
+    @extend %numeric;
+    @extend %smaller;
+    font-weight: bold;
+    text-align: center;
+    margin: $base_margin;
+    padding: $base_padding * 0.5 $base_padding;
+    border-radius: $base_radius;
+    background-color: transparent;
+    color: $text;
+  }
+
+  .calendar-week-number {
+    width: $item_size - 6px;
+    height: $item_size - 12px;
+    margin: 6px $base_margin / 2 !important;
+    padding: 0;
+    border-radius: $base_radius;
+    background-color: $fill;
+    color: $text-disabled;
+    @extend %smaller;
+    font-weight: bold;
+    font-feature-settings: "tnum";
+    text-align: center;
+  }
+}
+
+.world-clocks-button,
+.weather-button,
+.events-button {
+  @extend %popover_bubble;
+  padding: $base_padding * 2 !important;
+  margin: $base_margin / 2 0 !important;
+}
+
+// Events
+.events-button {
+  .events-box {
+    spacing: $base_spacing;
+  }
+
+  .events-list {
+    spacing: 2 * $base_spacing;
+    text-shadow: none;
+    color: $text-secondary;
+  }
+
+  .events-title {
+    font-weight: bold;
+    text-shadow: none;
+    color: $text-disabled;
+  }
+
+  .event-time {
+    font-feature-settings: "tnum";
+    @include fontsize($font_size - 1);
+    color: $text-disabled;
+  }
+}
+
+// World Clock
+.world-clocks-button {
+  .world-clocks-grid {
+    spacing-rows: $base_padding;
+    spacing-columns: $base_padding * 2;
+  }
+
+  // title
+  .world-clocks-header {
+    @extend %heading;
+    color: $text-disabled;
+  }
+
+  .world-clocks-city {
+    font-weight: bold;
+    @include fontsize($font_size);
+    color: $text-secondary;
+  }
+
+  .world-clocks-time {
+    font-feature-settings: "tnum";
+    @include fontsize($font_size);
+    color: $text;
+
+    &:ltr { text-align: right; }
+    &:rtl { text-align: left; }
+  }
+
+  .world-clocks-timezone {
+    font-feature-settings: "tnum";
+    @include fontsize($font_size - 1);
+    color: $text-disabled;
+  }
+}
+
+.world-clocks-grid,
+.weather-grid {
+  spacing-rows: 0.4em;
+  spacing-columns: 0.8em;
+}
+
+// Weather
+.weather-button {
+  .weather-box {
+    spacing: $base_spacing + $base_margin;
+  }
+
+  .weather-header-box {
+    spacing: $base_spacing;
+  }
+
+  .weather-header {
+    font-weight: bold;
+    color: $text-secondary;
+
+    &.location {
+      font-weight: normal;
+      @include fontsize($font_size - 1);
+      color: $text-disabled;
+    }
+  }
+
+  .weather-grid {
+    spacing-rows: $base_spacing;
+    spacing-columns: $base_spacing * 2;
+  }
+
+  .weather-forecast-time {
+    font-feature-settings: "tnum";
+    @include fontsize($font_size - 2);
+    font-weight: normal;
+    padding-top: 0.2em;
+    padding-bottom: 0.4em;
+    color: $text-secondary;
+  }
+
+  .weather-forecast-icon {
+    icon-size: 32px;
+  }
+
+  .weather-forecast-temp {
+    font-weight: bold;
+  }
+}

src/sass/gnome-shell/widgets-47-0/_dash.scss

@@ -0,0 +1,105 @@
+/* Dash */
+
+// uses system colors
+$dash_background_color: on($osd, divider);
+
+$dash_placeholder_size: 32px;
+$dash_padding: $base_padding * 2;
+$dash_edge_offset: $base_margin * 3;
+$dash_border_radius: $modal_radius + $dash_padding;
+$dash_spacing: $base_margin * 0.5;
+
+// container for the dash
+#dash {
+  // a bit of spacing so that dash doesn't touch the screen edges
+  padding-left: $base_padding;
+  padding-right: $base_padding;
+
+  // background behind item container
+  .dash-background {
+    background-color: $dash_background_color;
+    border-radius: $dash_border_radius;
+    padding-top: $dash_padding;
+    padding-bottom: $dash_padding;
+    padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
+    padding-right: $dash_padding - $dash_spacing;
+    box-shadow: inset 0 1px rgba(white, 0.08);
+  }
+
+  // items on the dash
+  .dash-item-container {
+    .placeholder {
+      // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
+      background-image: none;
+      background-size: contain;
+      height: $dash_placeholder_size;
+    }
+
+    .empty-dash-drop-target {
+      width: $dash_placeholder_size;
+      height: $dash_placeholder_size;
+    }
+
+    // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
+    // as such the %tile style is overriden and button styles are applied to the child class .overview-icon
+    .show-apps,
+    .overview-tile {
+      background: none;
+      box-shadow: none;
+      border: none;
+      border-radius: 0;
+      padding: 0;
+      margin: 0 $dash_spacing;
+      padding-bottom: $dash_edge_offset; // align with other items
+
+      .overview-icon {
+        border-radius: $modal_radius;
+        padding: $base_padding;
+        spacing: $base_padding;
+        text-align: center;
+        transition-duration: 100ms;
+        background-color: transparent;
+        color: on($osd);
+      }
+
+      &:focus .overview-icon { background-color: on($osd, divider); }
+      &:hover .overview-icon { background-color: on($osd, divider); }
+      &:active .overview-icon { background-color: on($osd, track); }
+      &:checked .overview-icon { background-color: on($osd, divider); }
+    }
+
+    // running app dot
+    .app-grid-running-dot {
+      // manually position the dot within the dash item
+      offset-y: -$dash_padding;
+    }
+  }
+
+  // separator between pinned and running apps
+  .dash-separator {
+    width: 1px;
+    margin-left: $base_margin;
+    margin-right: $base_margin;
+    background-color: on($osd, divider);
+  }
+
+  // make sure all dash components have same margin from screen edge
+  .dash-separator,
+  .dash-background {
+    margin-bottom: $dash_edge_offset;
+  }
+}
+
+// OSD Tooltip
+.dash-label {
+  color: rgba(white, 0.9);
+  background-color: rgba(black, 0.75);
+  border-radius: $circular_radius;
+  padding: $base_padding $base_padding * 2;
+  margin: $base_margin * 2;
+  box-shadow: none;
+  border: none;
+  text-align: center;
+  -y-offset: $base_margin; // distance from the dash edge
+  -x-offset: 8px;
+}

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

@@ -0,0 +1,241 @@
+/* Message List */
+// a.k.a. notifications in the menu
+
+.message-list {
+  width: if($compact == 'true', 25.5em, 29em);
+  text-shadow: none;
+  border: solid $border;
+  padding: 0;
+
+  // padding and margins to account for scrollbar
+  &:ltr { margin-left: 0; margin-right: $base_margin * 2; padding-right: $base_padding + $base_margin; border-right-width: 0; }
+  &:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: $base_padding + $base_margin; border-left-width: 0; }
+
+  .message-list-placeholder {
+    @extend %title_2;
+    spacing: $base_spacing * 2;
+    color: $text-secondary-disabled;
+
+    // icon size and color
+    > StIcon {
+      icon-size: 96px; // 48px
+      margin-bottom: $base_margin * 3;
+      -st-icon-style: symbolic;
+    }
+  }
+}
+
+.message-list-sections {
+  margin: 0; // to account for scrollbar
+  padding-bottom: $base_padding;
+
+  // to account for scrollbar
+  &:ltr { margin-right: 0; }
+  &:rtl { margin-left: 0; }
+}
+
+.message-list-section,
+.message-list-sections,
+.message-list-section-list {
+  spacing: $base_spacing;
+}
+
+// do-not-disturb + clear button
+.message-list-controls {
+  margin: ($base_margin * 2) ($base_margin * 4) 0;
+  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
+  padding: $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($primary, 0.4);
+    }
+  }
+}
+
+// message bubbles
+.message {
+  padding: 0;
+  margin: $base_spacing / 2;
+  border-radius: $window_radius;
+
+  .popup-menu & {
+    border-radius: $base_radius;
+    @extend %popover_bubble;
+
+    .notification-button {
+      &:first-child:ltr {
+        border-radius: 0 0 0 $base_radius;
+      }
+    
+      &:last-child:ltr {
+        border-radius: 0 0 $base_radius;
+      }
+    
+      &:first-child:rtl {
+        border-radius: 0 0 $base_radius;
+      }
+    
+      &:last-child:rtl {
+        border-radius: 0 0 0 $base_radius;
+      }
+    
+      &:first-child:last-child {
+        border-radius: 0 0 $base_radius $base_radius;
+      }
+    }
+  }
+
+  // message header
+  .message-header {
+    padding: 0 $scaled_padding;
+    margin: $base_padding;
+    margin-bottom: 0;
+    spacing: $base_padding;
+    color: $text-disabled;
+
+    // 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;
+        // Add bottom padding to align the app name with the time horizontally
+        padding-bottom: to_em(1px);
+        color: $text-disabled;
+
+        &:ltr { text-align: right; }
+        &:rtl { text-align: left; }
+      }
+    }
+
+    // buttons in the message header
+    .message-expand-button,
+    .message-close-button {
+      @extend .icon-button;
+      color: $text;
+      background-color: $fill;
+      padding: 4px;
+      border: none;
+
+      &, &:hover, &:active {
+        color: $text;
+      }
+  
+      &:hover, &:focus { background-color: $divider; }
+      &:active, &:active:hover { background-color: $track; }
+      &:insensitive { background-color: $fill;}
+    }
+
+    .message-expand-button {
+      padding: 4px;
+      border: none;
+
+      &: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
+        icon-size: $base_icon_size;
+        min-width: $base_icon_size * 3;
+        min-height: $base_icon_size * 3;
+        color: $text-disabled;
+        background-color: $divider;
+      }
+    }
+
+    // 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;
+      }
+    }
+  }
+}
+
+// URLs in messages
+.url-highlighter {
+  link-color: $link;
+}
+
+.message-media-control {
+  margin: 4px $base_padding;
+  padding: $base_padding * 2;
+  border-radius: $circular_radius;
+  border: none;
+  color: $text-secondary;
+
+  &:hover, &:focus { background-color: $divider; }
+  &:active { background-color: $track; }
+
+  &:hover, &:focus, &:active {
+    color: $text;
+  }
+
+  &:insensitive {
+    color: $text-disabled;
+  }
+
+  StIcon { icon-size: $base_icon_size; }
+}
+
+.media-message {
+  // album-art
+  .message-icon {
+    border-radius: $base_radius / 2 !important;
+
+    &.message-themed-icon {
+      icon-size: $large_icon_size !important; // 32px
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+/* Notifications & Message Tray */
+
+$notification_banner_height: 64px;
+$notification_banner_width: 34em;
+
+// Banner notifications
+.notification-banner {
+  min-height: $notification_banner_height;
+  width: $notification_banner_width;
+  margin: 12px 8px 8px;
+  border-radius: $base_radius;
+  color: $text-secondary;
+  background-color: $popover;
+  text-shadow: none;
+  border-radius: $menu_radius;
+
+  @if $rimless == 'false' and $variant == 'dark' {
+    border: 1px solid $window-border;
+    box-shadow: inset 0 0 0 1px highlight($popover);
+  } @else {
+    border: none;
+    box-shadow: 0 3px 6px rgba(black, 0.25);
+  }
+
+  &:hover, &:active, &:focus {
+    color: $text;
+    background-color: $popover;
+  }
+}
+
+.notification-buttons-bin {
+  background-color: transparent;
+  padding-top: 0;
+  border: none;
+  border-top: 1px solid $border;
+  spacing: 0;
+}
+
+.notification-button {
+  min-height: $item_size + $base_padding * 2;
+  padding: 0 $base_padding * 3;
+  background-color: transparent;
+  color: $text-secondary;
+  font-weight: 500;
+  border: none;
+
+  &:focus {
+    background-color: transparent;
+    color: $text;
+    box-shadow: inset 0 0 0 2px $divider;
+  }
+
+  &:hover, &:focus:hover {
+    background-color: $divider;
+    color: $text;
+    box-shadow: none;
+  }
+
+  &:active {
+    background-color: $track;
+    color: $text;
+  }
+
+  &:first-child:ltr {
+    border-radius: 0 0 0 $menu_radius;
+  }
+
+  &:last-child:ltr {
+    border-radius: 0 0 $menu_radius;
+    margin-right: 0 !important;
+  }
+
+  &:first-child:rtl {
+    border-radius: 0 0 $menu_radius;
+  }
+
+  &:last-child:rtl {
+    border-radius: 0 0 0 $menu_radius;
+    margin-left: 0 !important;
+  }
+
+  &:first-child:last-child {
+    border-radius: 0 0 $menu_radius $menu_radius;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}

src/sass/gnome-shell/widgets-47-0/_quick-settings.scss

@@ -0,0 +1,265 @@
+.quick-settings {
+  padding: $base_padding * 3 !important;
+  border-radius: $base_radius + $base_padding * 3 !important;
+  margin-top: 4px !important;
+
+  .icon-button, .button {
+    padding: $base_padding * 1.75;
+
+    > StIcon {
+      icon-size: $base_icon_size;
+    }
+  }
+}
+
+.quick-settings-grid {
+  spacing-rows: $base_padding * 2;
+  spacing-columns: $base_padding * 2;
+}
+
+.quick-toggle, .quick-menu-toggle {
+  border-radius: $base_radius;
+  min-width: 12em;
+  max-width: 12em;
+  min-height: 44px;
+  border: none;
+}
+
+.quick-toggle {
+  background-color: $button !important;
+
+  &:hover {
+    background-color: $divider !important;
+  }
+
+  &:active {
+    background-color: rgba($text, 0.15) !important;
+  }
+
+  &:checked {
+    background-color: $primary !important;
+    color: on($primary);
+
+    &:hover {
+      background-color: mix($text, $primary, 6%) !important;
+      color: on($primary);
+    }
+
+    &:active {
+      background-color: mix($text, $primary, 15%) !important;
+      color: on($primary);
+    }
+  }
+
+  & > StBoxLayout { spacing: $base_padding; }
+
+  /* Move padding into the box; this is to allow menu arrows
+     to extend to the border */
+  &.button { padding: 0; }
+  & > StBoxLayout { padding: 0 $base_padding * 2; }
+  &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
+  &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
+
+  .quick-toggle-title { font-weight: bold; }
+
+  & StBoxLayout > .quick-toggle-subtitle {
+    font-weight: normal;
+    font-size: 12px;
+  }
+
+  .quick-toggle-icon { icon-size: $base_icon_size; }
+}
+
+.quick-menu-toggle {
+  & .quick-toggle {
+    min-width: auto;
+    max-width: auto;
+
+    &:ltr { border-radius: $base_radius 0 0 $base_radius; }
+    &:ltr > StBoxLayout { padding-right: $base_padding * 1.5; }
+    &:rtl { border-radius: 0 $base_radius $base_radius 0; }
+    &:rtr > StBoxLayout { padding-left: $base_padding * 1.5; }
+
+    &:ltr:last-child { border-radius: $base_radius; }
+    &:rtl:last-child { border-radius: $base_radius; }
+  }
+
+  .quick-toggle-arrow {
+    background-color: $button !important;
+    padding: $base_padding $base_padding * 1.75;
+    border: none !important;
+    color: $text;
+
+    &:hover {
+      background-color: $divider !important;
+    }
+  
+    &:active {
+      background-color: rgba($text, 0.15) !important;
+    }
+  
+    &:checked {
+      background-color: $primary !important;
+      color: on($primary);
+  
+      &:hover {
+        background-color: mix($text, $primary, 6%) !important;
+        color: on($primary);
+      }
+  
+      &:active {
+        background-color: mix($text, $primary, 15%) !important;
+        color: on($primary);
+      }
+    }
+
+    &:ltr { border-radius: 0 $base_radius $base_radius 0; }
+    &:rtl { border-radius: $base_radius 0 0 $base_radius; }
+  }
+}
+
+.quick-slider {
+  & > StBoxLayout { spacing: $base_padding; }
+
+  .slider-bin {
+    &:focus { @include button(focus); }
+    min-height: 16px; // slider size
+    padding: $base_padding;
+    border-radius: $circular_radius;
+  }
+
+  .quick-toggle-icon {
+    icon-size: $base_icon_size;
+  }
+
+  .icon-button {
+    background-color: transparent;
+    color: $text !important;
+    padding: $base_padding * 1.5;
+
+    &:hover {
+      background-color: $fill;
+    }
+
+    &:active {
+      background-color: $divider;
+    }
+  }
+}
+
+.quick-toggle-menu {
+  background-color: $popover !important;
+  color: $text !important;
+  border-radius: $base_radius + $base_padding * 2 !important;
+  padding: $base_padding * 2;
+  margin: $base_padding * 2 $base_padding * 3 0;
+
+  .popup-menu-item {
+    border-radius: $base_radius !important;
+
+    &:focus, &:hover, &.selected {
+      color: $text !important;
+      background-color: rgba($text, 0.1) !important;
+    }
+
+    &:active {
+      color: $text !important;
+      background-color: rgba($text, 0.2) !important;
+    }
+
+    > StIcon { -st-icon-style: symbolic; }
+  }
+
+  & .header {
+    spacing-rows: 0.5 * $base_padding;
+    spacing-columns: $base_padding * 2;
+    padding-bottom: 2 * $base_padding;
+
+    & .icon {
+      icon-size: $base_icon_size * 1.5; // a non-standard symbolic size but ok
+      border-radius: $base_radius;
+      padding: 1.5 * $base_padding;
+      background-color: on($popover, divider) !important;
+
+      &.active {
+        background-color: $primary !important;
+        color: on($primary);
+      }
+    }
+
+    & .title {
+      @extend %title_3;
+    }
+
+    & .subtitle {
+      @extend %caption_heading;
+    }
+  }
+}
+
+.quick-settings-system-item {
+  & > StBoxLayout { spacing: 2 * $base_padding; }
+
+  .icon-button {
+    background-color: $button;
+    color: $text;
+    border-radius: $base_radius;
+    @extend %button;
+
+    > StIcon {
+      -st-icon-style: symbolic;
+      icon-size: $base_icon_size;
+    }
+  }
+
+  & .power-item {
+    min-height: 0;
+    min-width: 0;
+
+    &:insensitive {
+      @include button(normal);
+      background-color: transparent;
+    }
+  }
+}
+
+.nm-network-item {
+  .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
+}
+
+.bt-device-item {
+  .popup-menu-icon { -st-icon-style: symbolic; }
+}
+
+.bt-menu-placeholder.popup-menu-item {
+  @extend %title_4;
+  text-align: center;
+
+  padding: 2em 4em;
+}
+
+.device-subtitle { color: $text-disabled; }
+
+// background apps
+
+.background-apps-quick-toggle {
+  min-height: 40px;
+  background-color: transparent;
+
+  & StIcon { icon-size: $base_icon_size !important; }
+}
+
+.background-app-item {
+  & .title { @extend %heading; }
+  & .subtitle { @extend %caption; }
+  & .popup-menu-icon {
+    icon-size: $base_icon_size * 2 !important;
+    -st-icon-style: regular !important;
+  }
+  & .close-button {
+    @extend .icon-button;
+    padding: $base_padding;
+  }
+
+  &.popup-inactive-menu-item { color: $text; }
+}

src/sass/gnome-shell/widgets-47-0/_search-results.scss

@@ -0,0 +1,113 @@
+/* Search */
+
+%search-section-content-item {
+  border-radius: $base_radius;
+  padding: $base_padding;
+  transition-duration: 100ms;
+  text-align: center;
+  background-color: transparent;
+
+  &:focus,
+  &:hover,
+  &:selected {
+    background-color: overlay($osd, hover);
+    transition-duration: 0;
+  }
+
+  &:active,
+  &:checked {
+    background-color: overlay($osd, active);
+  }
+}
+
+// search overview container
+#searchResults {
+  margin: 0 $base_margin;
+}
+
+#searchResultsContent {
+  max-width: 1044px;
+}
+
+// search results sections "the boxes"
+.search-section {
+  // This should be equal to #searchResultsContent spacing
+  spacing: $base_padding * 3;
+
+  // separator (unstyled)
+  .search-section-separator {
+    height: $base_margin * 2; // use it as a spacer
+    background-color: transparent;
+  }
+}
+
+// content
+.search-section-content {  // This is the space between the provider icon and the results container
+  border-radius: $modal_radius * 1.5;
+  padding: $base_padding * 2;
+  margin:0 $base_margin * 3;
+  border: none;
+  box-shadow: none;
+  background: none;
+  text-shadow: none;
+  color: on($osd, secondary);
+  background-color: on($osd, divider);
+}
+
+// "no results" text
+.search-statustext {
+  @extend %title_1;
+  color: on($osd, disabled);
+}
+
+.grid-search-results {
+  spacing: $base_padding * 5;
+  margin:0 $base_margin * 3;
+}
+
+// Search results with icons
+.grid-search-result {
+  @extend .overview-tile;
+}
+
+// search result provider
+.search-provider-icon {
+  @extend %search-section-content-item;
+
+  &:ltr { margin-right: $base_margin; }
+  &:rtl { margin-left: $base_margin; }
+
+  // content
+  .list-search-provider-content {
+    spacing: $base_spacing * 2;
+
+    // provider labels
+    .list-search-provider-details {
+      width: 120px;
+      color: on($osd, secondary);
+    }
+  }
+}
+
+// search results list
+.list-search-results {
+  spacing: $base_spacing;
+}
+
+// search result listitem
+.list-search-result {
+  @extend %search-section-content-item;
+
+  // content
+  .list-search-result-content {
+    spacing: $base_padding;
+  }
+
+  // list item title (with leading icon)
+  .list-search-result-title {
+    spacing: $base_spacing * 2;
+  }
+
+  // list item description
+  .list-search-result-description { color: on($osd, secondary); }
+}

src/sass/libadwaita/_colors.scss

@@ -132,6 +132,7 @@ $dimmer_opacity: 0.3;
 $disabled_opacity: 0.45;
 $strong_disabled_opacity: 0.3;
 
+@if $gnome_version == 'new' {
 :root {
   --accent-blue: #3584e4;
   --accent-teal: #2190a4;
@@ -200,3 +201,4 @@ $strong_disabled_opacity: 0.3;
   --shade-color: @shade_color;
   --scrollbar-outline-color: @scrollbar_outline_color;
 }
+}

src/sass/libadwaita/apps/_control-center.scss

@@ -27,6 +27,7 @@ preferencesgroup > box {
 
   .cutout-button { background-color: $dialog_bg_color; }
 
+  @if $gnome_version == 'new' {
     button.accent-button {
       min-height: 24px;
       min-width: 24px;
@@ -81,4 +82,5 @@ preferencesgroup > box {
         --accent-bg-color: var(--accent-slate);
       }
     }
+  }
 }

src/sass/libadwaita/widgets/_view-switcher.scss

@@ -56,7 +56,7 @@ viewswitchertitle {
 
   viewswitcher {
     margin-left: $base_padding * 2;
-    margin-right: $base_padding 8 2;
+    margin-right: $base_padding * 2;
 
     &.narrow {
       margin-top: $base_padding / 2;