Fixed #1123

.gitignore

@@ -5,6 +5,7 @@
 src/main/gtk-3.0/gtk*.css
 src/main/gtk-4.0/gtk*.css
 src/main/cinnamon/cinnamon*.css
-src/main/gnome-shell/*/*.css
+src/main/gnome-shell/gnome-shell-Dark.css
+src/main/gnome-shell/gnome-shell-light.css
 src/other/dash-to-dock/stylesheet.css
 src/other/dash-to-dock/stylesheet-dark.css

parse-sass.sh

@@ -26,6 +26,7 @@ fi
 SASSC_OPT="-M -t expanded"
 
 _COLOR_VARIANTS=('-Light' '-Dark')
+
 if [ ! -z "${COLOR_VARIANTS:-}" ]; then
   IFS=', ' read -r -a _COLOR_VARIANTS <<< "${COLOR_VARIANTS:-}"
 fi
@@ -35,18 +36,8 @@ for color in "${_COLOR_VARIANTS[@]}"; do
   echo "==> Generating the 3.0 gtk${color}.css..."
   sassc $SASSC_OPT src/main/gtk-4.0/gtk${color}.{scss,css}
   echo "==> Generating the 4.0 gtk${color}.css..."
-  sassc $SASSC_OPT src/main/gnome-shell/shell-3-28/gnome-shell${color}.{scss,css}
+  sassc $SASSC_OPT src/main/gnome-shell/gnome-shell${color}.{scss,css}
-  echo "==> Generating the 3.28 gnome-shell${color}.css..."
+  echo "==> Generating gnome-shell${color}.css..."
-  sassc $SASSC_OPT src/main/gnome-shell/shell-40-0/gnome-shell${color}.{scss,css}
-  echo "==> Generating the 40.0 gnome-shell${color}.css..."
-  sassc $SASSC_OPT src/main/gnome-shell/shell-42-0/gnome-shell${color}.{scss,css}
-  echo "==> Generating the 42.0 gnome-shell${color}.css..."
-  sassc $SASSC_OPT src/main/gnome-shell/shell-44-0/gnome-shell${color}.{scss,css}
-  echo "==> Generating the 44.0 gnome-shell${color}.css..."
-  sassc $SASSC_OPT src/main/gnome-shell/shell-46-0/gnome-shell${color}.{scss,css}
-  echo "==> Generating the 46.0 gnome-shell${color}.css..."
-  sassc $SASSC_OPT src/main/gnome-shell/shell-47-0/gnome-shell${color}.{scss,css}
-  echo "==> Generating the 47.0 gnome-shell${color}.css..."
   sassc $SASSC_OPT src/main/cinnamon/cinnamon${color}.{scss,css}
   echo "==> Generating the cinnamon${color}.css..."
 done

shell/lib-install.sh

@@ -366,7 +366,7 @@ install_shelly() {
   mkdir -p                                                                                    "${TARGET_DIR}/assets"
   cp -r "${THEME_SRC_DIR}/assets/gnome-shell/icons"                                           "${TARGET_DIR}"
   cp -r "${THEME_SRC_DIR}/main/gnome-shell/pad-osd.css"                                       "${TARGET_DIR}"
-  sassc ${SASSC_OPT} "${THEME_SRC_DIR}/main/gnome-shell/shell-${GNOME_VERSION}/gnome-shell${color}.scss" "${TARGET_DIR}/gnome-shell.css"
+  sassc ${SASSC_OPT} "${THEME_SRC_DIR}/main/gnome-shell/gnome-shell${color}.scss"             "${TARGET_DIR}/gnome-shell.css"
 
   cp -r "${THEME_SRC_DIR}/assets/gnome-shell/common-assets/"*".svg"                           "${TARGET_DIR}/assets"
   cp -r "${THEME_SRC_DIR}/assets/gnome-shell/assets${color}/"*".svg"                          "${TARGET_DIR}/assets"
@@ -537,8 +537,6 @@ install_libadwaita() {
   color="${colors[0]}"
   opacity="${opacities[0]}"
 
-  echo -e "${color} ${opacity} ${alt} ${theme} ${scheme}"
-
   gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
 }
 
@@ -574,6 +572,7 @@ install_themes() {
           for scheme in "${schemes[@]}"; do
             gtk_base
             install_theemy "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
+            shell_base
             install_shelly "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}" "${icon}"
           done
         done
@@ -892,6 +891,22 @@ gtk_base() {
   if [[ "${scheme}" == 'nord' ]]; then
     sed $SED_OPT "/\$scheme/s/standard/nord/"                                   "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
   fi
+
+  if [[ "${GNOME_VERSION}" -ge '47-0' ]]; then
+    sed $SED_OPT "/\$gnome_version/s/old/new/"                                  "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
+  fi
+}
+
+shell_base() {
+  cp -rf "${THEME_SRC_DIR}/main/gnome-shell/_shell-base"{".scss","-temp.scss"}
+
+  sed $SED_OPT "/\widgets/s/46-0/$GNOME_VERSION/"                               "${THEME_SRC_DIR}/main/gnome-shell/_shell-base-temp.scss"
+
+  if [[ "${GNOME_VERSION}" == '3-28' ]]; then
+    sed $SED_OPT "/\extensions/s/46-0/3-28/"                                    "${THEME_SRC_DIR}/main/gnome-shell/_shell-base-temp.scss"
+  elif [[ "${GNOME_VERSION}" -gt '3-28' && "${GNOME_VERSION}" -lt '46-0' ]]; then
+    sed $SED_OPT "/\extensions/s/46-0/40-0/"                                    "${THEME_SRC_DIR}/main/gnome-shell/_shell-base-temp.scss"
+  fi
 }
 
 ###############################################################################

src/main/gnome-shell/_shell-base.scss

@@ -0,0 +1,5 @@
+@import '../../sass/variables';
+@import '../../sass/colors';
+@import '../../sass/gnome-shell/drawing';
+@import '../../sass/gnome-shell/widgets-46-0';
+@import '../../sass/gnome-shell/extensions-46-0';

src/main/gnome-shell/gnome-shell-Dark.scss

@@ -0,0 +1,3 @@
+$variant: 'dark';
+
+@import 'shell-base-temp';

src/main/gnome-shell/gnome-shell-Light.scss

@@ -0,0 +1,3 @@
+$variant: 'light';
+
+@import 'shell-base-temp';

src/main/gnome-shell/shell-3-28/gnome-shell-Dark.scss

@@ -1,11 +0,0 @@
-$variant: 'dark';
-$laptop: 'true';
-$trans: 'true';
-$black: 'false';
-$theme: 'default';
-
-@import '../../../sass/colors';
-@import '../../../sass/variables';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-3-28';
-@import '../../../sass/gnome-shell/extensions-3-28';

src/main/gnome-shell/shell-3-28/gnome-shell-Light.scss

@@ -1,11 +0,0 @@
-$variant: 'light';
-$laptop: 'true';
-$trans: 'true';
-$black: 'false';
-$theme: 'default';
-
-@import '../../../sass/colors';
-@import '../../../sass/variables';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-3-28';
-@import '../../../sass/gnome-shell/extensions-3-28';

src/main/gnome-shell/shell-40-0/gnome-shell-Dark.scss

@@ -1,7 +0,0 @@
-$variant: 'dark';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-40-0';
-@import '../../../sass/gnome-shell/extensions-40-0';

src/main/gnome-shell/shell-40-0/gnome-shell-Light.scss

@@ -1,7 +0,0 @@
-$variant: 'light';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-40-0';
-@import '../../../sass/gnome-shell/extensions-40-0';

src/main/gnome-shell/shell-42-0/gnome-shell-Dark.scss

@@ -1,7 +0,0 @@
-$variant: 'dark';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-42-0';
-@import '../../../sass/gnome-shell/extensions-40-0';

src/main/gnome-shell/shell-42-0/gnome-shell-Light.scss

@@ -1,7 +0,0 @@
-$variant: 'light';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-42-0';
-@import '../../../sass/gnome-shell/extensions-40-0';

src/main/gnome-shell/shell-44-0/gnome-shell-Dark.scss

@@ -1,7 +0,0 @@
-$variant: 'dark';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-44-0';
-@import '../../../sass/gnome-shell/extensions-40-0';

src/main/gnome-shell/shell-44-0/gnome-shell-Light.scss

@@ -1,7 +0,0 @@
-$variant: 'light';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-44-0';
-@import '../../../sass/gnome-shell/extensions-40-0';

src/main/gnome-shell/shell-46-0/gnome-shell-Dark.scss

@@ -1,7 +0,0 @@
-$variant: 'dark';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-46-0';
-@import '../../../sass/gnome-shell/extensions-46-0';

src/main/gnome-shell/shell-46-0/gnome-shell-Light.scss

@@ -1,7 +0,0 @@
-$variant: 'light';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-46-0';
-@import '../../../sass/gnome-shell/extensions-46-0';

src/main/gnome-shell/shell-47-0/gnome-shell-Dark.scss

@@ -1,7 +0,0 @@
-$variant: 'dark';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-47-0';
-@import '../../../sass/gnome-shell/extensions-46-0';

src/main/gnome-shell/shell-47-0/gnome-shell-Light.scss

@@ -1,7 +0,0 @@
-$variant: 'light';
-
-@import '../../../sass/variables';
-@import '../../../sass/colors';
-@import '../../../sass/gnome-shell/drawing';
-@import '../../../sass/gnome-shell/widgets-47-0';
-@import '../../../sass/gnome-shell/extensions-46-0';

src/main/gtk-4.0/gtk-Dark.scss

@@ -2,8 +2,8 @@ $variant: 'dark';
 
 @import '../../sass/variables';
 @import '../../sass/colors';
+@import '../../sass/gtk/colors-libadwaita';
 @import '../../sass/gtk/drawing';
 @import '../../sass/gtk/common-4.0';
 @import '../../sass/gtk/apps-4.0';
 @import '../../sass/gtk/colors-public';
-@import '../../sass/gtk/colors-libadwaita';

src/main/gtk-4.0/gtk-Light.scss

@@ -2,8 +2,8 @@ $variant: 'light';
 
 @import '../../sass/variables';
 @import '../../sass/colors';
+@import '../../sass/gtk/colors-libadwaita';
 @import '../../sass/gtk/drawing';
 @import '../../sass/gtk/common-4.0';
 @import '../../sass/gtk/apps-4.0';
 @import '../../sass/gtk/colors-public';
-@import '../../sass/gtk/colors-libadwaita';

src/sass/_colors.scss

@@ -316,4 +316,4 @@ $wm_button_maximize_bg:             if($variant == 'light', #28d33f, #59c837);
 $wm_button_maximize_hover_bg:       if($variant == 'light', #28d33f, #59c837);
 $wm_button_maximize_active_bg:      if($variant == 'light', #20a932, #47a02c);
 $wm_button_maximize_border:         if($variant == 'light', #20a932, #47a02c);
-$wm_icon_maximize_bg:               if($variant == 'light', #14691f, #2c641b);
+$wm_icon_maximize_bg:               if($variant == 'light', #14691f, #2c641b);

src/sass/_gtk-base.scss

@@ -3,3 +3,6 @@ $laptop: 'true';
 $trans: 'true';
 $theme: 'default';
 $scheme: 'standard';
+
+// Gnome version
+$gnome_version: 'old';

src/sass/gnome-shell/_common.scss

@@ -23,6 +23,11 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
+@if $gnome_version == 'new' {
+  $selected_bg_color: -st-accent-color;
+  $primary_color: -st-accent-color;
+}
+
 // Stage
 stage {
   @include fontsize($base_font_size);

src/sass/gnome-shell/_drawing.scss

@@ -125,8 +125,12 @@
   }
 
   @if $t == focus {
-    border: 2px solid lighten($fc, 15%) !important;
     box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
+    @if $gnome_version == 'old' {
+      border: 2px solid lighten($fc, 15%) !important;
+    } @else {
+      border: 2px solid st-lighten($fc, 15%) !important;
+    }
   }
 
   @if $t == insensitive {
@@ -222,18 +226,26 @@
 
   @if $t == hover {
     color: $tc;
-    background-color: mix($tc, $c, 6%);
     border: none;
     text-shadow: none;
     icon-shadow: none;
+    @if $gnome_version == 'old' {
+      background-color: mix($tc, $c, 6%);
+    } @else {
+      background-color: st-mix($tc, $c, 6%);
+    }
   }
 
   @if $t == active {
     color: $tc;
-    background-color: mix($tc, $c, 12%);
     border: none;
     text-shadow: none;
     icon-shadow: none;
+    @if $gnome_version == 'old' {
+      background-color: mix($tc, $c, 12%);
+    } @else {
+      background-color: st-mix($tc, $c, 12%);
+    }
   }
 
   @if $t == checked {

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

@@ -3,8 +3,14 @@
   width: 48px;
   height: 48px;
   border-radius: 24px; // radius equals the size of the box to give us the curve
-  background-color: lighten(transparentize($primary_color, 0.7), 30%);
+
-  box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
+  @if $gnome_version == 'old' {
+    background-color: lighten(transparentize($primary_color, 0.7), 30%);
+    box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
+  } @else {
+    background-color: st-lighten(st-transparentize($primary_color, 0.7), 30%);
+    box-shadow: 0 0 2px 2px st-lighten($primary_color, 20%);
+  }
 }
 
 // Pointer accessibility notifications
@@ -13,7 +19,12 @@
   height: 60px;
   -pie-border-width: 3px;
   -pie-border-color: $primary_color;
-  -pie-background-color: lighten(transparentize($primary_color, 0.7), 40%);
+
+  @if $gnome_version == 'old' {
+    -pie-background-color: lighten(transparentize($primary_color, 0.7), 40%);
+  } @else {
+    -pie-background-color: st-lighten(st-transparentize($primary_color, 0.7), 40%);
+  }
 }
 
 // Screen zoom/Magnifier

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

@@ -199,7 +199,11 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
     }
 
     &:active {
-      background-color: darken($primary_color, 5%);
+      @if $gnome_version == 'old' {
+        background-color: darken($primary_color, 5%);
+      } @else {
+        background-color: st-darken($primary_color, 5%);
+      }
       color: $light_fg_color !important;
       background-gradient-direction: none !important;
     }
@@ -210,8 +214,12 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
       background-gradient-direction: none !important;
 
       &:hover, &:focus {
-        background-color: lighten($primary_color, 8%);
         color: $light_fg_color !important;
+        @if $gnome_version == 'old' {
+          background-color: lighten($primary_color, 8%);
+        } @else {
+          background-color: st-lighten($primary_color, 8%);
+        }
       }
     }
   }

src/sass/gnome-shell/common/_check-box.scss

@@ -25,9 +25,9 @@
     background-image: url("assets/checkbox.svg");
   }
   &:hover:checked StBin {
-    background-color: rgba($primary_color, $lower_opacity / 2);
+    background-color: RGB($primary_color, 15%);
   }
   &:active:checked StBin {
-    background-color: rgba($primary_color, $lower_opacity);
+    background-color: RGB($primary_color, 30%);
   }
 }

src/sass/gnome-shell/common/_corner-ripple.scss

@@ -3,13 +3,19 @@
 $ripple_size: 50px;
 
 .ripple-box {
-  background-color: rgba($primary_color, 0.35);
-  box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
   // plus + 2px for the border (box-shadow)
   width: $ripple_size + 2px;
   height: $ripple_size + 2px;
   border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve
 
+  @if $gnome_version == 'old' {
+    background-color: transparentize($primary_color, 0.65);
+    box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
+  } @else {
+    background-color: st-transparentize($primary_color, 0.65);
+    box-shadow: 0 0 2px 2px st-lighten($primary_color, 20%);
+  }
+
   // just a simple change to the border radius position
   &:rtl { border-radius: 0 0 0 $ripple_size + 2px; }
 }

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

@@ -63,8 +63,13 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
     background-color: $primary_color;
     box-shadow: 0 2px 3px rgba(black, 0.15);
 
-    &:focus, &:hover { color: $light_fg_color; background-color: lighten($primary_color, 5%); }
+    @if $gnome_version == 'old' {
-    &:checked, &:active { color: $light_fg_color; background-color: darken($primary_color, 10%); }
+      &:focus, &:hover { color: $light_fg_color; background-color: lighten($primary_color, 5%); }
+      &:checked, &:active { color: $light_fg_color; background-color: darken($primary_color, 10%); }
+    } @else {
+      &:focus, &:hover { color: $light_fg_color; background-color: st-lighten($primary_color, 5%); }
+      &:checked, &:active { color: $light_fg_color; background-color: st-darken($primary_color, 10%); }
+    }
   }
 
   &.shift-key-uppercase {
@@ -99,8 +104,12 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 
 .emoji-panel {
   .keyboard-key:latched {
-    border-color: lighten($primary_color, 5%);
     background-color: $primary_color;
+    @if $gnome_version == 'old' {
+      border-color: lighten($primary_color, 5%);
+    } @else {
+      border-color: st-lighten($primary_color, 5%);
+    }
   }
 }
 

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

@@ -1,8 +1,13 @@
 // Rubberband for select-area screenshots
 .select-area-rubberband {
-  background-color: transparentize($primary_color, 0.7);
   border: 1px solid $primary_color;
   border-radius: 3px;
+
+  @if $gnome_version == 'old' {
+    background-color: transparentize($primary_color, 0.3);
+  } @else {
+    background-color: st-transparentize($primary_color, 0.3);
+  }
 }
 
 // User icon

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

@@ -126,7 +126,11 @@ $popop_menuitem_radius: $po_radius - $base_padding;
 
     &:active {
       color: $selected_fg_color !important;
-      background-color: mix($fg_color, $selected_bg_color, 5%) !important;
+      @if $gnome_version == 'old' {
+        background-color: mix($fg_color, $selected_bg_color, 5%) !important;
+      } @else {
+        background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
+      }
     }
 
     &:insensitive { color: $disabled_fg_color !important; }
@@ -140,7 +144,11 @@ $popop_menuitem_radius: $po_radius - $base_padding;
 
   &:active, &.selected:active {
     color: $selected_fg_color !important;
-    background-color: mix($fg_color, $selected_bg_color, 5%) !important;
+    @if $gnome_version == 'old' {
+      background-color: mix($fg_color, $selected_bg_color, 5%) !important;
+    } @else {
+      background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
+    }
   }
 
   &:insensitive { color: $disabled_fg_color !important; }
@@ -170,7 +178,11 @@ $popop_menuitem_radius: $po_radius - $base_padding;
 
     &:active {
       color: $selected_fg_color !important;
-      background-color: mix($fg_color, $selected_bg_color, 5%) !important;
+      @if $gnome_version == 'old' {
+        background-color: mix($fg_color, $selected_bg_color, 5%) !important;
+      } @else {
+        background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
+      }
     }
   }
 }

src/sass/gnome-shell/common/_screen-shield.scss

@@ -68,7 +68,12 @@
 #unlockDialogNotifications {
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($bg_color,0.7);
-    &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
+    &:hover, &:focus { background-color: transparentize($bg_color, 0.5); }
-    &:active { background-color: transparentize($selected_bg_color,0.5); }
+
+    @if $gnome_version == 'old' {
+      &:active { background-color: transparentize($selected_bg_color, 0.5); }
+    } @else {
+      &:active { background-color: st-transparentize($selected_bg_color, 0.5); }
+    }
   }
 }

src/sass/gnome-shell/common/_tiled-previews.scss

@@ -4,7 +4,11 @@
 $tile_corner_radius: $base_border_radius + 1px;
 
 .tile-preview {
-  background-color: rgba($primary_color, $lower_opacity);
+  @if $gnome_version == 'old' {
+    background-color: transparentize($primary_color, 0.75);
+  } @else {
+    background-color: st-transparentize($primary_color, 0.75);
+  }
   border: 1px solid $primary_color;
 }
 

src/sass/gnome-shell/widgets-40-0/_screen-shield.scss

@@ -3,6 +3,10 @@
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($bg_color, 0.7);
     &:hover, &:focus { background-color: transparentize($bg_color, 0.5); }
-    &:active { background-color: transparentize($primary_color, 0.5); }
+    @if $gnome_version == 'old' {
+      &:active { background-color: transparentize($primary_color, 0.5); }
+    } @else {
+      &:active { background-color: st-transparentize($primary_color, 0.5); }
+    }
   }
 }

src/sass/gnome-shell/widgets-42-0/_screenshot.scss

@@ -170,13 +170,22 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-window-selector-window {
   &:hover {
     .screenshot-ui-window-selector-window-border {
-      border-color: darken($primary_color, 15%);
+      @if $gnome_version == 'old' {
+        border-color: darken($primary_color, 15%);
+      } @else {
+        border-color: st-darken($primary_color, 15%);
+      }
     }
   }
+
   &:checked {
     .screenshot-ui-window-selector-window-border {
       border-color: $primary_color;
-      background-color: transparentize($primary_color, 0.8);
+      @if $gnome_version == 'old' {
+        background-color: transparentize($primary_color, 0.8);
+      } @else {
+        background-color: st-transparentize($primary_color, 0.8);
+      }
     }
 
     .screenshot-ui-window-selector-check {

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

@@ -39,13 +39,21 @@
     color: $light_fg_color;
 
     &:hover {
-      background-color: mix($text_color, $primary_color, 6%) !important;
       color: $light_fg_color;
+      @if $gnome_version == 'old' {
+        background-color: mix($text_color, $primary_color, 6%) !important;
+      } @else {
+        background-color: st-mix($text_color, $primary_color, 6%) !important;
+      }
     }
 
     &:active {
-      background-color: mix($text_color, $primary_color, 15%) !important;
       color: $light_fg_color;
+      @if $gnome_version == 'old' {
+        background-color: mix($text_color, $primary_color, 15%) !important;
+      } @else {
+        background-color: st-mix($text_color, $primary_color, 15%) !important;
+      }
     }
   }
 
@@ -100,13 +108,21 @@
       color: $light_fg_color;
   
       &:hover {
-        background-color: mix($text_color, $primary_color, 6%) !important;
         color: $light_fg_color;
+        @if $gnome_version == 'old' {
+          background-color: mix($text_color, $primary_color, 6%) !important;
+        } @else {
+          background-color: st-mix($text_color, $primary_color, 6%) !important;
+        }
       }
   
       &:active {
-        background-color: mix($text_color, $primary_color, 15%) !important;
         color: $light_fg_color;
+        @if $gnome_version == 'old' {
+          background-color: mix($text_color, $primary_color, 15%) !important;
+        } @else {
+          background-color: st-mix($text_color, $primary_color, 15%) !important;
+        }
       }
     }
 

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

@@ -66,7 +66,11 @@
     border-style: solid;
 
     &:focus {
-      border-color: transparentize($selected_bg_color, 0.4);
+      @if $gnome_version == 'old' {
+        border-color: transparentize($selected_bg_color, 0.4);
+      } @else {
+        border-color: st-transparentize($selected_bg_color, 0.4);
+      }
     }
   }
 }

src/sass/gnome-shell/widgets-47-0/_check-box.scss

@@ -2,41 +2,48 @@
 
 .check-box {
   StBoxLayout { spacing: .8em; }
+
   StBin {
-    width: 24px;
+    border-radius: 7px;
-    height: 24px;
+    padding: 2px;
-    padding: ($medium_size - 24px) / 2;
-    border-radius: 100px;
-    background-image: url("assets/checkbox-off.svg");
   }
+
   &:focus StBin {
-    background-image: url("assets/checkbox-off.svg");
+    // Trick due to St limitations. It needs a background to draw a box-shadow
-    background-color: transparent;
+    background-color: rgba(0, 0, 0, 0.01);
-    box-shadow: none;
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
-  }
-  &:hover StBin {
-    background-color: $divider_color;
-  }
-  &:active StBin {
-    background-color: $track_color;
-  }
-  &:checked StBin {
-    background-image: url("assets/checkbox.svg");
-  }
-  &:focus:checked StBin {
-    background-image: url("assets/checkbox.svg");
-  }
-  &:hover:checked StBin {
-    background-color: rgba($primary_color, $lower_opacity / 2);
-  }
-  &:active:checked StBin {
-    background-color: rgba($primary_color, $lower_opacity);
   }
+
   StIcon {
-    icon-size: 0 !important;
+    icon-size: 14px;
-    padding: 0 !important;
+    padding: 1px;
-    color: transparent !important;
+
-    border: none !important;
+    color: transparent;
-    background-color: transparent !important;
+    border-radius: 6px;
+    border: 2px solid transparentize(if($variant == 'light', black, white), .85);
+  }
+
+  &:hover StIcon {
+    border-color: transparentize(if($variant == 'light', black, white), .8);
+  }
+
+  &:active StIcon {
+    border-color: transparentize(if($variant == 'light', black, white), .7);
+  }
+
+  &:checked StIcon {
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
+    border-color: transparent;
+  }
+
+  &:checked:hover StIcon {
+    background-color: st-lighten(-st-accent-color, 5%);
+    color: st-lighten(-st-accent-fg-color, 5%);
+  }
+
+  &:checked:active StIcon {
+    background-color: st-darken(-st-accent-color, 7%);
+    color: st-darken(-st-accent-fg-color, 7%);
   }
 }

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

@@ -15,20 +15,33 @@
 
   &:hover {
     color: white !important;
-    background-color: lighten($primary_color, 9%);
     background-gradient-direction: none !important;
+    @if $gnome_version == 'old' {
+      background-color: lighten($primary_color, 9%);
+    } @else {
+      background-color: st-lighten($primary_color, 9%);
+    }
   }
 
   &:active {
     color: white !important;
-    background-color: darken($primary_color, 5%);
     background-gradient-direction: none !important;
+    @if $gnome_version == 'old' {
+      background-color: darken($primary_color, 5%);
+    } @else {
+      background-color: st-darken($primary_color, 5%);
+    }
   }
 
   &:insensitive {
-    background-color: rgba($primary_color, 0.05);
-    color: rgba($primary_color, 0.35) !important;
     background-gradient-direction: none !important;
+    @if $gnome_version == 'old' {
+      background-color: transparentize($primary_color, 0.9);
+      color: transparentize($primary_color, 0.65) !important;
+    } @else {
+      background-color: st-transparentize($primary_color, 0.9);
+      color: st-transparentize($primary_color, 0.65) !important;
+    }
   }
 }
 

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

@@ -3,15 +3,15 @@
 .toggle-switch {
   width: 40px;
   height: 24px;
-  background-size: contain;
+  background-gradient-direction: vertical;
-  background-image: url("assets/toggle-off.svg");
+  background-gradient-start: rgba($fg_color, 0.25);
+  background-gradient-end: rgba($fg_color, 0.35);
+  background: rgba($fg_color, 0.25);
 
-  &:checked { background-image: url("assets/toggle-on.svg"); }
+  &:hover {
-
+    background-gradient-start: rgba($fg_color, 0.3);
-  .popup-menu-item.selected & {
+    background-gradient-end: rgba($fg_color, 0.4);
-    background-image: url("assets/toggle-off.svg");
+    background: rgba($fg_color, 0.3);
-
-    &:checked { background-image: url("assets/toggle-on.svg"); }
   }
 
   StIcon {
@@ -19,25 +19,29 @@
   }
 
   .handle {
-    margin: 0;
+    margin: 1px;
-    width: 0;
+    width: 22px;
-    height: 0;
+    height: 22px;
-    background: none;
+    background: white;
-    box-shadow: none;
+    box-shadow: 0 2px 4px transparentize(black, .9);
-    transition-duration: 0;
+    transition-duration: 100ms;
   }
 
   &:checked {
-    background-color: transparent;
+    background: $primary_color;
-    color: transparent;
+    color: $primary_color;
+    background-gradient-start: $primary_color;
+    background-gradient-end: st-lighten($primary_color, 10%);
 
     &:hover {
-      background-color: transparent;
+      background: $primary_color;
-      color: transparent;
+      color: $primary_color;
+      background-gradient-start: $primary_color;
+      background-gradient-end: st-lighten($primary_color, 10%);
     }
 
     .handle {
-      background: none;
+      background: white;
     }
   }
 }

src/sass/gtk/_colors-libadwaita.scss

@@ -104,8 +104,12 @@ $dark_5: #000000;
 // define variables for them in _colors.scss
 
 // The main accent color and the matching text value
-@define-color accent_bg_color #{$primary_color};
+
-@define-color accent_fg_color #{$light_fg_color};
+@if $gnome_version == 'old' {
+  @define-color accent_bg_color #{$primary_color};
+  @define-color accent_fg_color #{$light_fg_color};
+}
+
 @define-color accent_color #{$primary_color};
 
 // destructive-action buttons
@@ -157,3 +161,28 @@ $dark_5: #000000;
 // Miscellaneous
 @define-color shade_color #{$borders_color};
 @define-color scrollbar_outline_color #{$borders_color};
+
+@if $gnome_version == 'new' {
+  :root {
+    --accent-blue: #{$theme_color_default};
+    --accent-teal: #2190a4;
+    --accent-green: #{$theme_color_green};
+    --accent-yellow: #{$theme_color_yellow};
+    --accent-orange: #{$theme_color_orange};
+    --accent-red: #{$theme_color_red};
+    --accent-pink: #{$theme_color_pink};
+    --accent-purple: #{$theme_color_purple};
+    --accent-slate: #6f8396;
+
+    --accent-color: @accent_bg_color;
+    --accent-bg-color: @accent_bg_color;
+    --accent-fg-color: @accent_fg_color;
+  }
+
+  $selected_bg_color: var(--accent-bg-color);
+  $primary_color: var(--accent-bg-color);
+  $entry_highlight: RGB(color-mix(in srgb, white 25%, var(--accent-bg-color)), 75%);
+  $progress_color: var(--accent-bg-color);
+  $selection_mode_bg: color-mix(in srgb, white 25%, var(--accent-bg-color));
+  $selected_borders_color:  color-mix(in srgb, black 25%, var(--accent-bg-color));
+}

src/sass/gtk/_colors-public.scss

@@ -87,8 +87,14 @@ $wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($
 @define-color budgie_tasklist_indicator_color #{"" + $fg_color};
 // focused window 'line'
 @define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
+
 // group-ed and unfocused window 'line(s)'
-@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
+@if $gnome_version == 'old' {
+  @define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
+} @else {
+  @define-color budgie_tasklist_indicator_color_active_window #{"" + color-mix(in srgb, $selected_bg_color 35%, $header_bg)};
+}
+
 // attention 'dot'
 // FIXME: we can't fill whole widget backgrounds with our suggestion colour
 //        because of lacking specific style-class on 'needs_attention' state,

src/sass/gtk/_common-4.0.scss

@@ -107,13 +107,25 @@ $list_shadow: if($variant == 'light',
   background-color: $selected_bg_color;
   color: $selected_fg_color;
 
-  &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+  &:disabled {
+    @if $gnome_version == 'old' {
+      color: mix($selected_fg_color, $selected_bg_color, 50%);
+    } @else {
+      color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
+    }
+  }
 }
 
 %nobg_selected_items {
   color: $selected_fg_color;
 
-  &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+  &:disabled {
+    @if $gnome_version == 'old' {
+      color: mix($selected_fg_color, $selected_bg_color, 50%);
+    } @else {
+      color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
+    }
+  }
 }
 
 %linked_middle {
@@ -312,8 +324,13 @@ iconview {
 
 %rubberband,
 rubberband {
-  border: 1px solid darken($selected_bg_color, 10%);
+  @if $gnome_version == 'old' {
-  background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
+    border: 1px solid darken($selected_bg_color, 10%);
+    background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
+  } @else {
+    border: 1px solid color-mix(in srgb, black 10%, $selected_bg_color);
+    background-color: RGB(color-mix(in srgb, black 10%, $selected_bg_color), 80%);
+  }
 }
 
 flowbox {
@@ -340,8 +357,11 @@ gridview {
     padding: 3px;
 
     &:selected {
-      outline-color: darken($selected_bg_color, 15%);
+      @if $gnome_version == 'old' {
-
+        outline-color: darken($selected_bg_color, 15%);
+      } @else {
+        outline-color: color-mix(in srgb, black 15%, $selected_bg_color);
+      }
       @extend %selected_items;
     }
 
@@ -379,7 +399,13 @@ label {
     opacity: 1;
     color: $disabled_fg_color;
 
-    selection { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+    selection {
+      @if $gnome_version == 'old' {
+        color: mix($selected_fg_color, $selected_bg_color, 50%);
+      } @else {
+        color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
+      }
+    }
   }
 }
 
@@ -720,11 +746,18 @@ editablelabel > stack > text {
 // Buttons
 //
 // stuff for .needs-attention
-$_dot_color: if($variant=='light', $selected_bg_color,
+
-                                   lighten($selected_bg_color, 15%));
+$_dot_color: '';
+
+@if $gnome_version == 'old' {
+  $_dot_color: if($variant=='light', $selected_bg_color, lighten($selected_bg_color, 15%));
+} @else {
+  $_dot_color: if($variant=='light', $selected_bg_color, color-mix(in srgb, white 15%, $selected_bg_color));
+}
+
 @keyframes needs_attention {
-  from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
+  from { background-image: radial-gradient(farthest-side, $_dot_color 0%, $_dot_color 0%); }
-  to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
+  to { background-image: radial-gradient(farthest-side, $_dot_color 95%, $_dot_color); }
 }
 
 %needs_attention {
@@ -732,7 +765,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   // simulates the shadow labels and icons normally have in buttons.
   animation: needs_attention 150ms ease-in;
 
-  background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
+  background-image: radial-gradient(farthest-side, $_dot_color 96%, $_dot_color);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
 
@@ -1471,30 +1504,38 @@ list > row button.image-button:not(.flat) {
 //
 // Links
 //
-link, %links {
+%links,
+link,
+button.link {
   color: $link_color;
+  text-decoration: underline;
+  font-weight: inherit;
 
   &:visited {
     color: $link_visited_color;
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
-  }
-  &:hover {
-    color: lighten($link_color,10%);
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
-  }
-  &:active {
-    color: $link_color;
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
   }
 
+  &:hover {
+    color: HSL(from $link_color h calc(s * 1.1) calc(l * 1.1));
+  }
+
+  &:active {
+    color: $link_color;
+  }
+
+  &:disabled { color: gtkalpha(currentColor, 0.35); }
+
   @at-root %link_selected,
-  &:selected,
+  &:selected {
-  *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+    @if $gnome_version == 'old' {
+      color: mix($selected_fg_color, $selected_bg_color, 80%);
+    } @else {
+      color: color-mix(in srgb, $selected_fg_color 80%, $selected_bg_color);
+    }
+  }
 }
 
 button.link {
-  @extend %links;
-
   &, &:hover, &:active, &:checked {
     @extend %undecorated_button;
   }
@@ -2188,15 +2229,25 @@ headerbar {
   &.selection-mode {
     color: $light_fg_color;
     background-color: $selection_mode_bg;
-    border-color: darken($selection_mode_bg, 4%);
     box-shadow: none;
     background-image: none;
     text-shadow: none;
 
+    @if $gnome_version == 'old' {
+      border-color: darken($selection_mode_bg, 5%);
+    } @else {
+      border-color: color-mix(in srgb, black 15%, $selection_mode_bg)
+    }
+
     &:backdrop {
       background-color: $selection_mode_bg;
       color: transparentize($light_fg_color, 0.4);
-      border-color: darken($selection_mode_bg, 4%);
+
+      @if $gnome_version == 'old' {
+        border-color: darken($selection_mode_bg, 5%);
+      } @else {
+        border-color: color-mix(in srgb, black 15%, $selection_mode_bg)
+      }
     }
 
     button {
@@ -2366,9 +2417,6 @@ treeview.view {
   &:selected {
     &, &:focus {
       border-radius: 0;
-      border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
-      border-top-color: rgba($fg_color, 0.15); // doesn't work unfortunately
-
       @extend %selected_items;
     }
   }
@@ -2377,7 +2425,7 @@ treeview.view {
     color: $disabled_fg_color;
 
     &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 40%);
+      color: rgba($selected_fg_color, 0.45);
     }
   }
 
@@ -2389,7 +2437,7 @@ treeview.view {
   > dndtarget:drop(active) {
     border-style: solid none;
     border-width: 1px;
-    border-color: mix($fg_color, $selected_bg_color, 50%);
+    border-color: $drop_target_color;
 
     &.after { border-top-style: none; }
 
@@ -2403,16 +2451,13 @@ treeview.view {
 
     &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
 
-    color: mix($fg_color, $base_color, 50%);
+    color: $alt_fg_color;
 
     &:hover { color: $fg_color; }
 
-    &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 70%);
-      &:hover { color: $selected_fg_color; }
-    }
-
     &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+    &:disabled { color: $alt_disabled_fg_color; }
   }
 
   &.progressbar { // progress bar in treeviews
@@ -2750,8 +2795,13 @@ popover.menu {
 
     &:selected:active {
       color: $selected_fg_color;
-      background-color: darken($selected_bg_color, 5%); // matching buttons
       transition: background-color $shorter_duration $deceleration_curve;
+
+      @if $gnome_version == 'old' {
+        background-color: darken($selected_bg_color, 5%);
+      } @else {
+        background-color: color-mix(in srgb, black 10%, $selected_bg_color);
+      }
     }
   }
 
@@ -3123,10 +3173,20 @@ scrollbar {
 
 $switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%);
 $switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%);
-$switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%);
 $switch_checked_backdrop_image: linear-gradient(0deg, rgba($fg_color, 0.45) 0%, rgba($fg_color, 0.55) 100%);
-$switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%);
+
-$switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
+$switch_checked_image: '';
+$switch_checked_disabled_image: '';
+
+@if $gnome_version == 'old' {
+  $switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%);
+  $switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%);
+} @else {
+  $switch_checked_image: linear-gradient(0deg, color-mix(in srgb, white 25%, $selected_bg_color) 0%, color-mix(in srgb, black 10%, $selected_bg_color) 100%);
+  $switch_checked_disabled_image: linear-gradient(0deg, color-mix(in srgb, white 35%, $selected_bg_color) 0%, color-mix(in srgb, white 25%, $selected_bg_color) 100%);
+}
+
+$switch_animation: switch_ripple_effect 0.1s cubic-bezier(0, 0, 0.2, 1);
 
 @keyframes switch_ripple_effect {
   from {
@@ -3137,8 +3197,8 @@ $switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1);
 
   to {
     background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center,
-                                      rgba($selected_bg_color, 0.75) 100%,
+                                      RGB($selected_bg_color, 75%) 100%,
-                                      rgba($selected_bg_color, 0.0) 0%);
+                                      transparent 0%);
   }
 }
 
@@ -3153,7 +3213,12 @@ switch {
   font-size: 0;
   padding: 0;
   box-shadow: inset 0 1px 2px rgba(black, 0.1);
-  background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%);
+
+  @if $gnome_version == 'old' {
+    background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); 
+  } @else {
+    background-image: $switch_image;
+  }
 
   &:disabled {
     color: transparent;
@@ -3166,8 +3231,13 @@ switch {
     background-color: transparent;
     color: transparent;
     box-shadow: inset 0 1px 2px rgba(black, 0.15);
-    transition: background-image 0.3s, box-shadow 0;
+    transition: background-image 0.1s, box-shadow 0;
-    background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%);
+
+    @if $gnome_version == 'old' {
+      background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%);
+    } @else {
+      background-image: $switch_checked_image;
+    }
 
     &:disabled {
       background-color: transparent;
@@ -3242,7 +3312,13 @@ checkbutton, radiobutton {
 
 $check_radio_border: if($variant == 'light', rgba(black, 0.2), rgba(black, 0.1));
 $check_radio_image: linear-gradient(0deg, #6a6a6a 0%, #545454 100%);
-$check_radio_checked_image: linear-gradient(0deg, darken($selected_bg_color, 5%) 0%, lighten($selected_bg_color, 5%) 100%);
+$check_radio_checked_image: '';
+
+@if $gnome_version == 'old' {
+  $check_radio_checked_image: linear-gradient(0deg, darken($selected_bg_color, 5%) 0%, lighten($selected_bg_color, 5%) 100%);
+} @else {
+  $check_radio_checked_image: linear-gradient(0deg, color-mix(in srgb, black 5%, $selected_bg_color) 0%, color-mix(in srgb, white 5%, $selected_bg_color) 100%);
+}
 
 check,
 radio {
@@ -3407,7 +3483,7 @@ scale {
       > trough > highlight {
         background-color: $selected_fg_color;
 
-        &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
+        &:disabled { background-color: rgba($selected_fg_color, 0.5); }
       }
 
       &:disabled { background-color: transparentize(black, 0.9); }
@@ -3419,14 +3495,14 @@ scale {
     border-radius: $bt_radius;
     background-color: $selected_bg_color;
 
-    &:disabled { background-color: transparentize($selected_bg_color, 0.45); }
+    &:disabled { background-color: rgba($selected_bg_color, 0.55); }
   }
 
   // this is another differently styled part of the trough, the most relevant use case is for example
   // in media player to indicate how much video stream as been cached
   > trough > fill {
     border-radius: $bt_radius;
-    background-color: transparentize($selected_bg_color, 0.5);
+    background-color: rgba($selected_bg_color, 0.5);
 
     &:disabled { background-color: transparent; }
   }
@@ -3468,17 +3544,32 @@ scale {
       background-color: $selected_fg_color;
       border-color: $selected_fg_color;
 
-      &:hover {
+      @if $gnome_version == 'old' {
-        background-color: mix($selected_fg_color, $selected_bg_color, 85%);
+        &:hover {
-        border-color: mix($selected_fg_color, $selected_bg_color, 85%);
+          background-color: mix($selected_fg_color, $selected_bg_color, 85%);
-      }
+          border-color: mix($selected_fg_color, $selected_bg_color, 85%);
-      &:active {
+        }
-        background-color: mix($selected_fg_color, $selected_bg_color, 50%);
+        &:active {
-        border-color: mix($selected_fg_color, $selected_bg_color, 50%);
+          background-color: mix($selected_fg_color, $selected_bg_color, 50%);
-      }
+          border-color: mix($selected_fg_color, $selected_bg_color, 50%);
-      &:disabled{
+        }
-        background-color: mix($selected_fg_color, $selected_bg_color, 55%);
+        &:disabled {
-        border-color: mix($selected_fg_color, $selected_bg_color, 55%);
+          background-color: mix($selected_fg_color, $selected_bg_color, 55%);
+          border-color: mix($selected_fg_color, $selected_bg_color, 55%);
+        }
+      } @else {
+        &:hover {
+          background-color: color-mix(in srgb, $selected_fg_color 85%, $selected_bg_color);
+          border-color: color-mix(in srgb, $selected_fg_color 85%, $selected_bg_color);
+        }
+        &:active {
+          background-color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
+          border-color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
+        }
+        &:disabled {
+          background-color: color-mix(in srgb, $selected_fg_color 55%, $selected_bg_color);
+          border-color: color-mix(in srgb, $selected_fg_color 55%, $selected_bg_color);
+        }
       }
     }
 
@@ -5541,4 +5632,4 @@ popover.entry-completion > contents {
 
 statusbar {
   padding: $container_padding $container_padding * 2;
-}
+}

src/sass/gtk/_drawing.scss

@@ -105,8 +105,13 @@
   // active osd entry
   //
     color: $selected_fg_color;
-    border-color: darken($selection_mode_bg, 5%);
     background-color: $selected_bg_color;
+
+    @if $gnome_version == 'old' {
+      border-color: darken($selection_mode_bg, 5%);
+    } @else {
+      border-color: color-mix(in srgb, black 25%, $selected_bg_color)
+    }
   }
 
   @else if $t==osd-insensitive {
@@ -180,8 +185,8 @@
   //
     label, & { color: transparentize($selected_fg_color, 0.45); }
 
-    border-color: if($variant == 'light', transparentize($selected_bg_color, 1), $dark_borders_color);
+    border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
-    background-color: transparentize($selected_bg_color, 0.45);
+    background-color: rgba($selected_bg_color, 0.45);
     @if $variant=='light' { box-shadow: none; }
 
     opacity: 0.6;
@@ -356,9 +361,14 @@
 
     color: $actionb_fg;
     background-color: $actionb_bg;
-    border-color: if($variant == 'light', darken($actionb_bg, 6%), $dark_borders_color);
     background-image: none;
     box-shadow: if($variant=='light', none, (inset 0 1px rgba(white, 0.15), inset 0 -1px rgba(white, 0.03)));
+
+    @if $gnome_version == 'old' {
+      border-color: if($variant == 'light', darken($actionb_bg, 6%), $dark_borders_color);
+    } @else {
+      border-color: if($variant == 'light', color-mix(in srgb, black 6% $actionb_bg), $dark_borders_color);
+    }
   }
 
   @else if $t==undecorated {

src/sass/gtk/apps/_gnome-40.0.scss

@@ -103,7 +103,13 @@ $flap_sidebar_size: 240px;
           }
 
           &.sidebar-row {
-            .sidebar-icon { color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 20%)); }
+            .sidebar-icon {
+              @if $gnome_version == 'old' {
+                color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 20%));
+              } @else {
+                color: if($variant == 'light', $selected_bg_color, color-mix(in srgb, white 20%, $selected_bg_color));
+              }
+            }
           }
         }
       }
@@ -354,6 +360,66 @@ preferencesgroup > box {
       background-color: transparent;
     }
   }
+
+  .cutout-button { background-color: $dialog_bg_color; }
+
+  @if $gnome_version == 'new' {
+    button.accent-button {
+      min-height: 24px;
+      min-width: 24px;
+      padding: $base_padding / 2;
+      border-radius: $circular_radius;
+      background: var(--accent-bg-color);
+      outline: none;
+      background-clip: content-box;
+      box-shadow: none;
+      border: none;
+
+      &:hover { box-shadow: 0 0 0 3px $divider_color; }
+
+      &:checked { box-shadow: 0 0 0 3px var(--accent-bg-color); }
+
+      &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
+        --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
+      }
+
+      &.blue {
+        --accent-bg-color: var(--accent-blue);
+      }
+
+      &.teal {
+        --accent-bg-color: var(--accent-teal);
+      }
+
+      &.green {
+        --accent-bg-color: var(--accent-green);
+      }
+
+      &.yellow {
+        --accent-bg-color: var(--accent-yellow);
+      }
+
+      &.orange {
+        --accent-bg-color: var(--accent-orange);
+      }
+
+      &.red {
+        --accent-bg-color: var(--accent-red);
+      }
+
+      &.pink {
+        --accent-bg-color: var(--accent-pink);
+      }
+
+      &.purple {
+        --accent-bg-color: var(--accent-purple);
+      }
+
+      &.slate {
+        --accent-bg-color: var(--accent-slate);
+      }
+    }
+  }
 }
 
 

src/sass/gtk/apps/_libadwaita.scss

@@ -350,31 +350,36 @@ indicatorbin {
   }
 }
 
-headerbar > windowhandle > box viewswitcher.wide {
+headerbar > windowhandle > box viewswitcher {
-  box-shadow: inset 0 0 0 1px $light_borders_color;
+  min-height: 0;
-  border-radius: $bt_radius;
-  padding: 0;
-  margin: 8px 0;
 
-  > button.toggle {
+  &.wide {
-    margin: 0;
+    box-shadow: inset 0 0 0 1px $light_borders_color;
-    font-weight: 500;
     border-radius: $bt_radius;
-
+    padding: 0;
-    &:not(:first-child) {
+    margin: 8px 0;
-      border-width: 0 0 0 1px;
+  
-      border-style: none solid none none;
+    > button.toggle {
-      border-image: linear-gradient(to bottom,
+      margin: 0;
-                                    transparent 16%,
+      min-height: 0;
-                                    $light_borders_color 16%,
+      font-weight: 500;
-                                    $light_borders_color 84%,
+      border-radius: $bt_radius;
-                                    transparent 84%) 0 0 0 1 / 0 0 0 1px stretch;
+  
-    }
+      &:not(:first-child) {
-
+        border-width: 0 0 0 1px;
-    &:hover, &:active, &:checked {
+        border-style: none solid none none;
-      border-image: none;
+        border-image: linear-gradient(to bottom,
-
+                                      transparent 16%,
-      & + button { border-image: none; }
+                                      $light_borders_color 16%,
+                                      $light_borders_color 84%,
+                                      transparent 84%) 0 0 0 1 / 0 0 0 1px stretch;
+      }
+  
+      &:hover, &:active, &:checked {
+        border-image: none;
+  
+        & + button { border-image: none; }
+      }
     }
   }
 }