Fixed #1300

fix: Theme parser error

libs/lib-core.sh

@@ -259,7 +259,6 @@ if [[ -d "${WHITESUR_TMP_DIR}" ]]; then
 
   if [[ -d "${WHITESUR_TMP_DIR}" ]]; then
     prompt -e "ERROR: Whitesur installer or tweaks is already running. Probably it's run by '$(ls -ld "${WHITESUR_TMP_DIR}" | awk '{print $3}')'"
-    exit 1
   fi
 fi
 

libs/lib-install.sh

@@ -77,7 +77,11 @@ prepare_deps() {
     prompt -w "DEPS: Your system clock is wrong"
     prompt -i "DEPS: Updating your system clock..."
     # Add "+ 25" here to accomodate potential time delay by sudo prompt
-    sudo date -s "@$((remote_time + 25))"; sudo hwclock --systohc
+    sudo date -s "@$((remote_time + 25))"
+
+    if has_command hwclock; then
+      sudo hwclock --systohc
+    fi
   fi
 }
 
@@ -536,6 +540,11 @@ config_gtk4() {
 install_libadwaita() {
   color="${colors[0]}"
   opacity="${opacities[0]}"
+  alt="${alts[0]}"
+  theme="${themes[0]}"
+  scheme="${schemes[0]}"
+
+  install_theme_deps
 
   gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
 }
@@ -904,6 +913,7 @@ gtk_base() {
 
   if [[ "${scheme}" == 'nord' ]]; then
     sed $SED_OPT "/\$scheme/s/standard/nord/"                                   "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
+    accent_type="fixed"
   fi
 
   if [[ "${GNOME_VERSION}" -ge '47-0' && "${libadwaita}" == 'true' ]]; then
@@ -934,6 +944,10 @@ shell_base() {
 customize_theme() {
   cp -rf "${THEME_SRC_DIR}/sass/_theme-options"{".scss","-temp.scss"}
 
+  if [[ "${GNOME_VERSION}" -ge '47-0' ]]; then
+    sed $SED_OPT "/\$shell_version/s/old/new/"                                  "${THEME_SRC_DIR}/sass/_theme-options-temp.scss"
+  fi
+
   # Darker dark colors
   if [[ "${darker}" == 'true' ]]; then
     prompt -s "Changing dark color style to darker one ...\n"

make-release.sh

@@ -62,8 +62,8 @@ echo "Nautilus style   : ${nautilus_style}" >> ${RELEASE_DIR}/release-info.txt
 #install && compress
 #prompt -s "Compress Gnome${RELEASE_VERSION} version finished!"; echo
 
-GNOME_VERSION="47-0"
+GNOME_VERSION="48-0"
-RELEASE_VERSION="47.0"
+RELEASE_VERSION="48.0"
 install && compress
 prompt -i "Compress ${THEME_NAME} themes finished!\n"
 release_info

release/release-info.txt

@@ -1,6 +1,6 @@
-VERSION: (GNOME-SHELL) 47.0
+VERSION: (GNOME-SHELL) 48.0
 
-RELEASE TIME: Wed Feb 26 11:38:34 AM CST 2025
+RELEASE TIME: Sun Apr  6 06:14:30 PM CST 2025
 
 --->>> GTK | GNOME Shell | Cinnamon | Metacity | XFWM | Plank <<<---
 Color variants   : Dark;Light

src/sass/_colors.scss

@@ -3,7 +3,7 @@
 }
 
 @function gtkmix($c1,$c2,$r) {
-  $ratio: 1 -  $r / 100%; // match SCSS mix()
+  $ratio: 1 -  $r / 100%; // match SCSS gtkmix()
   @return unquote("mix(#{$c1},#{$c2},#{$ratio})");
 }
 
@@ -40,15 +40,15 @@ $hint_fg_color:                     if($variant == 'light', #565656, #999999);
 }
 
 //insensitive state derived colors
-$disabled_fg_color:                 if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65));
+$disabled_fg_color:                 if($variant == 'light', rgba($fg_color, 0.45), rgba($fg_color, 0.35));
-$alt_disabled_fg_color:             if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65));
+$alt_disabled_fg_color:             if($variant == 'light', rgba($alt_fg_color, 0.45), rgba($alt_fg_color, 0.35));
-$disabled_bg_color:                 if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
+$disabled_bg_color:                 if($variant == 'light', gtkmix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
 
-$active_color:                      if($variant == 'light', rgba(black, 0.26), rgba(white, 0.2));
+$active_color:                      if($variant == 'light', gtkalpha(currentColor, 0.26), gtkalpha(currentColor, 0.2));
-$track_color:                       if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16));
+$track_color:                       if($variant == 'light', gtkalpha(currentColor, 0.20), gtkalpha(currentColor, 0.16));
-$visit_color:                       if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12));
+$visit_color:                       if($variant == 'light', gtkalpha(currentColor, 0.16), gtkalpha(currentColor, 0.12));
-$divider_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1));
+$divider_color:                     if($variant == 'light', gtkalpha(currentColor, 0.12), gtkalpha(currentColor, 0.1));
-$fill_color:                        if($variant == 'light', rgba(black, 0.06), rgba(white, 0.05));
+$fill_color:                        if($variant == 'light', gtkalpha(currentColor, 0.06), gtkalpha(currentColor, 0.05));
 
 $light_fg_color:                    white;
 $light_alt_fg_color:                rgba(white, 0.85);
@@ -100,8 +100,8 @@ $selected_borders_color:            darken($selected_bg_color, 10%);
 $borders_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
 $light_borders_color:               if($variant == 'light', rgba(black, 0.08), rgba(white, 0.10));
 $dark_borders_color:                if($variant == 'light', rgba(black, 0.08), rgba(black, 0.15));
-$solid_borders_color:               if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 12%));
+$solid_borders_color:               if($variant == 'light', gtkmix(black, $base_color, 12%), gtkmix(white, $base_color, 12%));
-$dark_solid_borders_color:          if($variant == 'light', mix(black, $base_color, 12%), mix(black, $base_color, 15%));
+$dark_solid_borders_color:          if($variant == 'light', gtkmix(black, $base_color, 12%), gtkmix(white, $base_color, 15%));
 $highlight_color:                   if($variant == 'light', rgba(white, 0.15), rgba(white, 0.1));
 
 // Gnome-shell background colors
@@ -122,7 +122,7 @@ $link_color:                        if($scheme == 'nord', #5e81ac, #3484e2);
 $link_visited_color:                if($variant == 'light', lighten($text_color, 10%), darken($text_color, 15%));
 
 // Theme colors
-$selection_mode_bg:                 lighten($selected_bg_color, 15%);
+$selection_mode_bg:                 gtkmix(white, $selected_bg_color, 25%);
 $warning_color:                     if($scheme == 'nord', $nord_color_orange, $theme_color_orange);
 $error_color:                       if($scheme == 'nord', $nord_color_red, $theme_color_red);
 $success_color:                     if($scheme == 'nord', $nord_color_green, $theme_color_green);
@@ -143,13 +143,14 @@ $header_fg:                         if($variant == 'light', #575757, #FDFDFD);
   $header_fg:                       if($variant == 'light', #57647f, #f8f9fc);
 }
 
-$dark_header_bg:                    if($trans == 'true', rgba($base_color, 0.96), $base_color);
+$dark_header_bg:                    if($trans == 'true', gtkalpha($base_color, 0.96), $base_color);
-$header_bg_backdrop:                if($variant == 'light', darken($header_bg, 0%), darken($header_bg, 0%));
+$header_bg_backdrop:                if($variant == 'light', gtkmix(black, $header_bg, 2%), gtkmix(black, $header_bg, 1%));
-$header_border:                     if($variant == 'light', mix(black, $header_bg, 12%), mix(black, $header_bg, 75%));
+$header_border:                     if($variant == 'light', gtkmix(black, $header_bg, 12%), gtkmix(black, $header_bg, 75%));
+$header_border_backdrop:            if($variant == 'light', gtkmix(black, $header_bg, 8%), gtkmix(black, $header_bg, 45%));
 
 // Sidebar colors
 $dark_sidebar_bg: white;
-$opacity: if($gnome_version == 'new', 0.92, 0.95);
+$opacity: 0.96;
 
 @if $trans=='true' {
   @if $variant=='light' {
@@ -174,42 +175,45 @@ $opacity: if($gnome_version == 'new', 0.92, 0.95);
 }
 
 $dark_sidebar_fg:                   $text_color;
-$dark_sidebar_border:               if($variant == 'light', $solid_borders_color, $header_border);
+$dark_sidebar_border:               if($variant == 'light', $solid_borders_color, gtkmix(black, $dark_sidebar_bg, 75%));
-$sidebar_theme_color:               if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
+$sidebar_theme_color:               gtkalpha(currentColor, 0.15);
 
 //dialog
 $dialog_bg_color:                   if($variant == 'light', $bg_color, $base_color);
 
 @if $trans=='true' {
-  $dialog_bg_color:                 if($variant == 'light', rgba($bg_color, $opacity), rgba($base_color, $opacity));
+  $dialog_bg_color:                 if($variant == 'light', gtkalpha($bg_color, $opacity), gtkalpha($base_color, $opacity));
 }
 
 //OSD colors
 $osd_fg_color:                      if($scheme == 'nord', #dadada, #d3d7df);
-$osd_bg_color:                      if($trans == 'true', rgba(if($darker == 'true', #1a1a1a, #2a2a2a), $opacity), if($darker == 'true', #1a1a1a, #2a2a2a));
+$solid_osd_bg_color:                if($darker == 'true', #1a1a1a, #2a2a2a);
 
 @if $scheme == 'nord' {
-  $osd_bg_color:                    if($trans == 'true', rgba(if($darker == 'true', #16191e, #222730), $opacity), if($darker == 'true', #16191e, #222730));
+  $solid_osd_bg_color:              if($darker == 'true', #16191e, #222730);
 }
 
-$osd_button_bg:                     rgba(lighten($osd_bg_color, 22%), $opacity);
+$osd_bg_color:                      if($trans == 'true', rgba($solid_osd_bg_color, $opacity), $solid_osd_bg_color);
+
+$osd_button_bg:                     rgba(lighten($solid_osd_bg_color, 22%), $opacity);
 $osd_button_border:                 $dark_borders_color;
-$osd_entry_bg:                      rgba(lighten($osd_bg_color, 22%), $opacity);
+$osd_entry_bg:                      rgba(lighten($solid_osd_bg_color, 22%), $opacity);
 $osd_entry_border:                  $dark_borders_color;
-$osd_disabled_bg_color:             darken($osd_bg_color, 3%);
+$osd_disabled_bg_color:             darken($solid_osd_bg_color, 3%);
-$osd_disabled_fg_color:             rgba($osd_fg_color, 0.35);
+$osd_disabled_fg_color:             rgba($solid_osd_bg_color, 0.35);
 $osd_borders_color:                 $dark_borders_color;
 
 // Menu colors
 $menu_bg:                           if($variant == 'light', $base_color, $bg_color);
 $menu_bd:                           if($variant == 'light', rgba(black, 0.08), rgba(white, 0.07));
 
-$menu_opacity: 0.96;
-
 @if $trans == 'true' {
-  $menu_bg:                         if($variant == 'light', rgba($base_color, $menu_opacity), rgba($bg_color, $menu_opacity));
+  $menu_bg:                         if($variant == 'light', rgba($base_color, $opacity), rgba($bg_color, $opacity));
 }
 
+$popover_opacity:                   if($trans == 'false', 1, if($shell_version == 'new', 0.92, 0.96));
+$popover_bg_color:                  if($variant == 'light', rgba($bg_color, $popover_opacity), rgba($base_color, $popover_opacity));
+
 $submenu_bg_color:                  if($variant == 'light', rgba(white, 1), rgba(white, 0.1));
 
 @if $trans=='true' {
@@ -269,14 +273,12 @@ $dash_bg:                           if($variant == 'light', rgba(#d1d1d1, $panel
 }
 
 // Entry colors
-$entry_bg:                          if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
+$entry_bg:                          if($variant=='light', rgba(black, 0.05), rgba(white, 0.05));
-$entry_shell_bg:                    if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1));
 $entry_border:                      $borders_color;
-$entry_highlight:                   rgba($selection_mode_bg, 0.75);
+$entry_highlight:                   gtkalpha($selection_mode_bg, 0.75);
 
 // Button colors
 $button_bg:                         if($variant == 'light', white, #656565);
-$button_shell_bg:                   if($variant == 'light', mix(black, $dialog_bg_color, 6%), mix(white, $dialog_bg_color, 6%));
 
 @if $scheme == 'nord' {
   $button_bg:                       if($variant == 'light', #fbfcfd, #556075);

src/sass/_theme-options.scss

@@ -37,3 +37,6 @@ $darker: 'false';
 
 // GDM login dialog scale
 $scale: 'default';
+
+// gnome-shell version
+$shell_version: 'old';

src/sass/cinnamon/_common.scss

@@ -5,9 +5,9 @@ $asset_path: assets;
 //
 $font-size: 9;
 $font-family: Futura Bk bt, sans, Sans-Serif;
-$_bubble_bg_color: opacify($osd_bg_color,0.25);
+$_bubble_bg_color: transparentize($solid_osd_bg_color, 0.75);
 $_bubble_fg_color: $osd_fg_color;
-$_bubble_borders_color: transparentize($osd_fg_color,0.8);
+$_bubble_borders_color: transparentize($osd_fg_color, 0.8);
 
 /* General Typography */
 %large_title {
@@ -591,7 +591,7 @@ StScrollBar {
 }
 
 .expo-background {
-  background-color: opacify($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
 }
 
 .workspace {
@@ -2217,7 +2217,7 @@ StScrollBar {
   .slider {
     height: 0.5em;
     padding: 0;
-    border: 0px solid darken($osd_bg_color, 8%);
+    border: 0px solid darken($solid_osd_bg_color, 8%);
     border-bottom: 1px;
     -slider-height: 0.5em;
     -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));

src/sass/cinnamon/_drawing.scss

@@ -33,7 +33,7 @@
 
   @if $t==insensitive {
     color: $disabled_fg_color;
-    background-color: transparentize($entry_bg, 0.45);
+    background-color: rgba($entry_bg, 0.45);
   }
 
   @if $t==osd {
@@ -50,7 +50,7 @@
 
   @if $t==osd-insensitive {
     color: transparentize($osd_fg_color, 0.45);
-    background-color: transparentize($osd_entry_bg, 0.15);
+    background-color: rgba($osd_entry_bg, 0.85);
     box-shadow: inset 0 2px 4px transparentize(black, 0.95);
   }
 }
@@ -76,21 +76,21 @@
     color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
     border: 1px solid $button_borders;
     background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
-    box-shadow: inset 0 1px rgba($button_highlight, 0.12);
+    box-shadow: inset 0 1px rgba(white, 0.12);
   }
 
   @else if $t==focus {
     color: $fg_color;
     background-color: $button_bg;
     border: 1px solid $selected_bg_color;
-    box-shadow: inset 0 1px rgba($button_highlight, 0.12);
+    box-shadow: inset 0 1px rgba(white, 0.12);
   }
 
   @else if $t==focus-hover {
     color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
     background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
     border: 1px solid $selected_bg_color;
-    box-shadow: inset 0 1px rgba($button_highlight, 0.12);
+    box-shadow: inset 0 1px rgba(white, 0.12);
   }
 
   @else if $t==active {
@@ -132,7 +132,7 @@
 
   @else if $t==osd-hover {
     color: $osd_fg_color;
-    background-color: opacify(lighten($osd_button_bg, 7%), 0.1);
+    background-color: rgba(mix($osd_fg_color, $osd_button_bg, 7%), 0.1);
   }
 
   @else if $t==osd-active {
@@ -142,6 +142,6 @@
 
   @else if $t==osd-insensitive {
     color: $osd_disabled_fg_color;
-    background-color: transparentize($osd_button_bg, 0.15);
+    background-color: rgba($osd_button_bg, 0.85);
   }
 }

src/sass/gnome-shell/_common.scss

@@ -23,11 +23,33 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-@if $gnome_version == 'new' and $accent_type == 'default' {
+// reset colors
+
+@if $shell_version == 'new' and $accent_type == 'default' {
   $selected_bg_color: -st-accent-color;
   $primary_color: -st-accent-color;
 }
 
+@if $trans == 'true' {
+  $menu_bg:                         if($variant == 'light', rgba($base_color, $opacity), rgba($bg_color, $opacity));
+  $osd_bg_color:                    rgba($solid_osd_bg_color, $opacity);
+  $dialog_bg_color:                 if($variant == 'light', rgba($bg_color, $opacity), rgba($base_color, $opacity));
+}
+
+$active_color:                      if($variant == 'light', rgba(black, 0.26), rgba(white, 0.2));
+$track_color:                       if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16));
+$visit_color:                       if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12));
+$divider_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1));
+$fill_color:                        if($variant == 'light', rgba(black, 0.06), rgba(white, 0.05));
+
+$menu_bd:                           if($variant == 'light', rgba(black, 0.08), rgba(white, 0.08));
+$borders_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
+$light_borders_color:               if($variant == 'light', rgba(black, 0.08), rgba(white, 0.10));
+$dark_borders_color:                if($variant == 'light', rgba(black, 0.08), rgba(black, 0.15));
+$solid_borders_color:               if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 12%));
+$dark_solid_borders_color:          if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 15%));
+$highlight_color:                   if($variant == 'light', rgba(white, 0.15), rgba(white, 0.1));
+
 // Stage
 stage {
   @include fontsize($base_font_size);

src/sass/gnome-shell/_drawing.scss

@@ -102,6 +102,7 @@
   }
 }
 
+$entry_shell_bg: if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1));
 
 @mixin entry($t, $fc: $primary_color, $tc: $fg_color, $c: $entry_shell_bg) {
 //
@@ -115,7 +116,7 @@
     background-color: $c;
     border-radius: $circular_radius;
     border: 2px solid transparent !important;
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
+    box-shadow: inset 0 0 0 1px transparent !important;
     outline: none;
   }
 
@@ -125,8 +126,8 @@
   }
 
   @if $t == focus {
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
+    box-shadow: inset 0 0 0 1px transparent !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       border: 2px solid lighten($fc, 15%) !important;
     } @else {
       border: 2px solid st-lighten($fc, 15%) !important;
@@ -199,6 +200,9 @@
   }
 }
 
+$button_shell: if($variant == 'light', $bg_color, $base_color);
+$button_shell_bg: if($variant == 'light', mix(black, $button_shell, 6%), mix(white, $button_shell, 6%));
+
 @mixin button($t, $c: $button_shell_bg, $tc: $fg_color) {
 //
 // button
@@ -229,7 +233,7 @@
     border: none;
     text-shadow: none;
     icon-shadow: none;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       background-color: mix($tc, $c, 6%);
     } @else {
       background-color: st-mix($tc, $c, 6%);
@@ -241,7 +245,7 @@
     border: none;
     text-shadow: none;
     icon-shadow: none;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       background-color: mix($tc, $c, 12%);
     } @else {
       background-color: st-mix($tc, $c, 12%);

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

@@ -4,7 +4,7 @@
   height: 48px;
   border-radius: 24px; // radius equals the size of the box to give us the curve
 
-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
     background-color: lighten(transparentize($primary_color, 0.7), 30%);
     box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
   } @else {
@@ -20,7 +20,7 @@
   -pie-border-width: 3px;
   -pie-border-color: $primary_color;
 
-  @if $gnome_version == 'old' {
+  @if $shell_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%);

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

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

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

@@ -8,7 +8,7 @@ $ripple_size: 50px;
   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' {
+  @if $shell_version == 'old' {
     background-color: transparentize($primary_color, 0.65);
     box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
   } @else {

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

@@ -4,7 +4,7 @@ $key_size: 1.2em;
 $key_border_radius: $base_border_radius + 3px;
 $key_bg_color:  $bg_color;
 // $default_key_bg_color: darken($key_bg_color, 4%);
-$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
+$default_key_bg_color: if($variant=='light', darken($solid_osd_bg_color, 11%), lighten($solid_osd_bg_color, 2%));
 
 
 // draw keys using button function
@@ -63,7 +63,7 @@ $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);
 
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       &: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 {
@@ -105,7 +105,7 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 .emoji-panel {
   .keyboard-key:latched {
     background-color: $primary_color;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       border-color: lighten($primary_color, 5%);
     } @else {
       border-color: st-lighten($primary_color, 5%);

src/sass/gnome-shell/common/_login-dialog.scss

@@ -1,7 +1,7 @@
 /* Login Dialog */
 
 #lockDialogGroup {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
   background-image: url("assets/background.png");
   background-size: cover;
 
@@ -324,7 +324,7 @@
     padding: 0 !important;
     border-radius: $circular_radius;
     border: none;
-    background-color: rgba($borders_color, 0.1);
+    background-color: rgba($light_fg_color, 0.1);
     color: $light_fg_color;
   }
 }

src/sass/gnome-shell/common/_looking-glass.scss

@@ -2,7 +2,7 @@
 
 // Dialog
 #LookingGlassDialog {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
   spacing: $base_padding;
   margin: $base_padding;
   padding: 0;
@@ -141,7 +141,7 @@
 
 // Inspector
 #LookingGlassPropertyInspector {
-  background: lighten(rgba($osd_bg_color, 1), 5%);
+  background: lighten($solid_osd_bg_color, 5%);
   border: 1px solid black;
   border-radius: $wm_radius;
   padding: $base_padding * 2;

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

@@ -3,7 +3,7 @@
   border: 1px solid $primary_color;
   border-radius: 3px;
 
-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
     background-color: transparentize($primary_color, 0.3);
   } @else {
     background-color: st-transparentize($primary_color, 0.3);
@@ -73,5 +73,5 @@
 /* Workspace animation */
 
 .workspace-animation {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
 }

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

@@ -7,15 +7,14 @@
   min-height: $menuitem_size * 2;
   margin: 12px 6px 8px;
   border-radius: $wm_radius;
-  color: $fg_color;
-  background-color: $menu_bg;
   border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(black, 0.15);
 
-  &:hover { background-color: rgba($menu_bg, 1); }
+  &, &:hover, &:focus {
-
+    color: $fg_color;
-  &:focus { background-color: $menu_bg; }
+    background-color: $popover_bg_color;
+  }
 
   .notification-icon { padding: $base_padding; }
 
@@ -34,8 +33,8 @@
   }
 
   .notification-button {
-    min-height: 40px;
+    min-height: $medium_size;
-    padding: 0 16px;
+    padding: 0 $base_padding * 2;
     background-color: transparent;
     color: $alt_fg_color;
     font-weight: 500;

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

@@ -93,7 +93,7 @@ $popop_menuitem_radius: $po_radius - $base_padding;
   padding: $base_padding;
   box-shadow: 0 5px 10px 0 rgba(black, 0.18);
   margin: 4px 12px 17px 12px;
-  background-color: $dialog_bg_color;
+  background-color: $popover_bg_color;
   border-radius: $po_radius;
   border: solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
   border-width: if($variant=='light', 0, 1px);
@@ -126,7 +126,7 @@ $popop_menuitem_radius: $po_radius - $base_padding;
 
     &:active {
       color: $selected_fg_color !important;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
         background-color: mix($fg_color, $selected_bg_color, 5%) !important;
       } @else {
         background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
@@ -144,7 +144,7 @@ $popop_menuitem_radius: $po_radius - $base_padding;
 
   &:active, &.selected:active {
     color: $selected_fg_color !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       background-color: mix($fg_color, $selected_bg_color, 5%) !important;
     } @else {
       background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
@@ -178,7 +178,7 @@ $popop_menuitem_radius: $po_radius - $base_padding;
 
     &:active {
       color: $selected_fg_color !important;
-      @if $gnome_version == 'old' {
+      @if $shell_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

@@ -70,7 +70,7 @@
     background-color: transparentize($bg_color,0.7);
     &:hover, &:focus { background-color: transparentize($bg_color, 0.5); }
 
-    @if $gnome_version == 'old' {
+    @if $shell_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,7 @@
 $tile_corner_radius: $base_border_radius + 1px;
 
 .tile-preview {
-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
     background-color: transparentize($primary_color, 0.75);
   } @else {
     background-color: st-transparentize($primary_color, 0.75);

src/sass/gnome-shell/widgets-40-0/_overview.scss

@@ -3,7 +3,7 @@
 }
 
 #overviewGroup {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
   // background-image: url("assets/background.png");
   // background-repeat: no-repeat;
   // background-size: cover;

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

@@ -3,7 +3,7 @@
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($bg_color, 0.7);
     &:hover, &:focus { background-color: transparentize($bg_color, 0.5); }
-    @if $gnome_version == 'old' {
+    @if $shell_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-40-0/_window-picker.scss

@@ -47,5 +47,5 @@ $window_close_button_padding: 3px;
   // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
   border-radius: 30px;
   background-color: $osd_bg_color;
-  box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
+  box-shadow: 0 4px 16px 4px transparentize(darken($solid_osd_bg_color, 30%), 0.7);
 }

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

@@ -112,7 +112,7 @@
 }
 
 .quick-toggle-menu {
-  background-color: $menu_bg !important;
+  background-color: if($variant == 'light', $base_color, $bg_color) !important;
   color: $text_color !important;
   border-radius: $base_border_radius * 3;
   padding: $base_padding * 3;

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

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

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

@@ -40,7 +40,7 @@
 
     &:hover {
       color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
         background-color: mix($text_color, $primary_color, 6%) !important;
       } @else {
         background-color: st-mix($text_color, $primary_color, 6%) !important;
@@ -49,7 +49,7 @@
 
     &:active {
       color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
         background-color: mix($text_color, $primary_color, 15%) !important;
       } @else {
         background-color: st-mix($text_color, $primary_color, 15%) !important;
@@ -109,7 +109,7 @@
   
       &:hover {
         color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
           background-color: mix($text_color, $primary_color, 6%) !important;
         } @else {
           background-color: st-mix($text_color, $primary_color, 6%) !important;
@@ -118,7 +118,7 @@
   
       &:active {
         color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
           background-color: mix($text_color, $primary_color, 15%) !important;
         } @else {
           background-color: st-mix($text_color, $primary_color, 15%) !important;
@@ -152,7 +152,7 @@
 }
 
 .quick-toggle-menu {
-  background-color: $menu_bg !important;
+  background-color: if($variant == 'light', $base_color, $bg_color) !important;
   color: $text_color !important;
   border-radius: $base_border_radius * 3;
   padding: $base_padding * 3;

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

@@ -66,7 +66,7 @@
     border-style: solid;
 
     &:focus {
-      @if $gnome_version == 'old' {
+      @if $shell_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-46-0/_notifications.scss

@@ -10,13 +10,14 @@ $notification_banner_width: 34em;
   border-radius: $wm_radius;
   margin: $base_padding * 2;
   padding: $scaled_padding;
-  color: $fg_color;
-  background-color: $menu_bg;
   border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(black, 0.15);
 
-  &:hover, &:active { background-color: rgba($menu_bg, 1); }
+  &, &:hover, &:active {
+    color: $fg_color;
+    background-color: $popover_bg_color;
+  }
 }
 
 .notification-buttons-bin {
@@ -25,8 +26,8 @@ $notification_banner_width: 34em;
 }
 
 .notification-button {
-  min-height: 40px;
+  min-height: $medium_size;
-  padding: 0 16px;
+  padding: 0 $base_padding * 2;
   background-color: $fill_color;
   color: $alt_fg_color;
   font-weight: 500;

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

@@ -16,7 +16,7 @@
   &:hover {
     color: white !important;
     background-gradient-direction: none !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       background-color: lighten($primary_color, 9%);
     } @else {
       background-color: st-lighten($primary_color, 9%);
@@ -26,7 +26,7 @@
   &:active {
     color: white !important;
     background-gradient-direction: none !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       background-color: darken($primary_color, 5%);
     } @else {
       background-color: st-darken($primary_color, 5%);
@@ -35,7 +35,7 @@
 
   &:insensitive {
     background-gradient-direction: none !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
       background-color: transparentize($primary_color, 0.9);
       color: transparentize($primary_color, 0.65) !important;
     } @else {

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

@@ -55,7 +55,7 @@
     border-style: solid;
 
     &:focus {
-      @if $gnome_version == 'old' {
+      @if $shell_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-48-0/_notifications.scss

@@ -11,12 +11,10 @@ $notification_banner_width: 34em;
   margin: $base_padding * 2;
   padding: $base_padding;
   color: $fg_color;
-  background-color: $menu_bg;
+  background-color: $popover_bg_color;
-  border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
+  border: 1px solid if($variant=='light', transparent, rgba(black, 0.75));
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(black, 0.15);
-
-  &:hover, &:active { background-color: rgba($menu_bg, 1); }
 }
 
 .notification-buttons-bin {
@@ -25,8 +23,8 @@ $notification_banner_width: 34em;
 }
 
 .notification-button {
-  min-height: 40px;
+  min-height: $medium_size;
-  padding: 0 16px;
+  padding: 0 $base_padding * 2;
   background-color: $fill_color;
   color: $alt_fg_color;
   font-weight: 500;

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

@@ -40,7 +40,7 @@
 
     &:hover {
       color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
         background-color: mix($text_color, $primary_color, 6%) !important;
       } @else {
         background-color: st-mix($text_color, $primary_color, 6%) !important;
@@ -49,7 +49,7 @@
 
     &:active {
       color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
         background-color: mix($text_color, $primary_color, 15%) !important;
       } @else {
         background-color: st-mix($text_color, $primary_color, 15%) !important;
@@ -111,7 +111,7 @@
   
       &:hover {
         color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
           background-color: mix($text_color, $primary_color, 6%) !important;
         } @else {
           background-color: st-mix($text_color, $primary_color, 6%) !important;
@@ -120,7 +120,7 @@
   
       &:active {
         color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
           background-color: mix($text_color, $primary_color, 15%) !important;
         } @else {
           background-color: st-mix($text_color, $primary_color, 15%) !important;
@@ -158,7 +158,7 @@
 }
 
 .quick-toggle-menu {
-  background-color: $menu_bg !important;
+  background-color: if($variant == 'light', $base_color, $bg_color) !important;
   color: $text_color !important;
   border-radius: $base_border_radius * 3;
   padding: $base_padding * 3;

src/sass/gtk/_colors-libadwaita.scss

@@ -158,61 +158,79 @@ $dark_5: #000000;
 @if $gnome_version == 'old' or $accent_type == 'fixed' {
   @define-color accent_bg_color #{$primary_color};
   @define-color accent_fg_color #{$light_fg_color};
+  @define-color accent_color #{$primary_color};
+
+  // destructive-action buttons
+  @define-color destructive_bg_color #{$destructive_color};
+  @define-color destructive_fg_color #{$light_fg_color};
+  @define-color destructive_color #{$destructive_color};
+  
+  // Levelbars, entries, labels and infobars. These don't need text colors
+  @define-color success_bg_color #{$success_color};
+  @define-color success_fg_color #{$light_fg_color};
+  @define-color success_color #{$success_color};
+  
+  @define-color warning_bg_color #{$warning_color};
+  @define-color warning_fg_color #{$light_fg_color};
+  @define-color warning_color #{$warning_color};
+  
+  @define-color error_bg_color #{$error_color};
+  @define-color error_fg_color #{$light_fg_color};
+  @define-color error_color #{$error_color};
+  
+  // Window
+  @define-color window_bg_color #{$bg_color};
+  @define-color window_fg_color #{$text_color};
+  
+  // Views - e.g. text view or tree view
+  @define-color view_bg_color #{$base_color};
+  @define-color view_fg_color #{$text_color};
+  
+  // Header bar, search bar, tab bar
+  @define-color headerbar_bg_color #{$header_bg};
+  @define-color headerbar_fg_color #{$header_fg};
+  @define-color headerbar_border_color #{$borders_color};
+  @define-color headerbar_backdrop_color #{$header_bg_backdrop};
+  @define-color headerbar_shade_color #{$header_border};
+  @define-color headerbar_darker_shade_color #{$header_border};
+  
+  // Split pane views
+  @define-color sidebar_bg_color #{$dark_sidebar_bg};
+  @define-color sidebar_fg_color #{$dark_sidebar_fg};
+  @define-color sidebar_backdrop_color #{$dark_sidebar_bg};
+  @define-color sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+  @define-color sidebar_border_color #{gtkalpha($dark_sidebar_fg, .08)};
+  
+  @define-color secondary_sidebar_bg_color #{$base_color};
+  @define-color secondary_sidebar_fg_color #{$text_color};
+  @define-color secondary_sidebar_backdrop_color #{$bg_color};
+  @define-color secondary_sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+  @define-color secondary_sidebar_border_color #{$borders_color};
+
+  // Cards, boxed lists
+  @define-color card_bg_color #{$base_color};
+  @define-color card_fg_color #{$text_color};
+  @define-color card_shade_color #{$borders_color};
+  
+  // Dialogs
+  @define-color dialog_bg_color #{$dialog_bg_color};
+  @define-color dialog_fg_color #{$text_color};
+  
+  // Popovers
+  @define-color popover_bg_color #{$menu_bg};
+  @define-color popover_fg_color #{$text_color};
+  @define-color popover_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+  
+  // Thumbnails
+  @define-color thumbnail_bg_color #{gtkmix($base_color, $bg_color, 50%)};
+  @define-color thumbnail_fg_color #{$text_color};
+
+  // Miscellaneous
+  @define-color shade_color #{$borders_color};
+  @define-color scrollbar_outline_color #{$borders_color};
 }
 
-@define-color accent_color #{$primary_color};
+@if $gnome_version == 'new' and $accent_type != 'fixed' {
-
-// destructive-action buttons
-@define-color destructive_bg_color #{$destructive_color};
-@define-color destructive_fg_color #{$light_fg_color};
-@define-color destructive_color #{$destructive_color};
-
-// Levelbars, entries, labels and infobars. These don't need text colors
-@define-color success_bg_color #{$success_color};
-@define-color success_fg_color #{$light_fg_color};
-@define-color success_color #{$success_color};
-
-@define-color warning_bg_color #{$warning_color};
-@define-color warning_fg_color #{$light_fg_color};
-@define-color warning_color #{$warning_color};
-
-@define-color error_bg_color #{$error_color};
-@define-color error_fg_color #{$light_fg_color};
-@define-color error_color #{$error_color};
-
-// Window
-@define-color window_bg_color #{$bg_color};
-@define-color window_fg_color #{$text_color};
-
-// Views - e.g. text view or tree view
-@define-color view_bg_color #{$base_color};
-@define-color view_fg_color #{$text_color};
-
-// Header bar, search bar, tab bar
-@define-color headerbar_bg_color #{$header_bg};
-@define-color headerbar_fg_color #{$header_fg};
-@define-color headerbar_border_color #{$borders_color};
-@define-color headerbar_backdrop_color #{$header_bg_backdrop};
-@define-color headerbar_shade_color #{$header_border};
-
-// Cards, boxed lists
-@define-color card_bg_color #{$base_color};
-@define-color card_fg_color #{$text_color};
-@define-color card_shade_color #{$borders_color};
-
-// Dialogs
-@define-color dialog_bg_color #{$dialog_bg_color};
-@define-color dialog_fg_color #{$text_color};
-
-// Popovers
-@define-color popover_bg_color #{$menu_bg};
-@define-color popover_fg_color #{$text_color};
-
-// 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;
@@ -229,10 +247,63 @@ $dark_5: #000000;
     --accent-fg-color: @accent_fg_color;
   }
 
-  $selected_bg_color: var(--accent-bg-color);
+  $selected_bg_color: gtkcolor(accent_bg_color);
-  $primary_color: var(--accent-bg-color);
+  $primary_color: gtkcolor(accent_bg_color);
-  $entry_highlight: RGB(color-mix(in srgb, white 25%, var(--accent-bg-color)), 75%);
+  $progress_color: gtkcolor(accent_bg_color);
-  $progress_color: var(--accent-bg-color);
+  $selected_bg_color: gtkcolor(accent_bg_color);
-  $selection_mode_bg: color-mix(in srgb, white 25%, var(--accent-bg-color));
+  $primary_color: gtkcolor(accent_bg_color);
-  $selected_borders_color:  color-mix(in srgb, black 25%, var(--accent-bg-color));
+  $progress_color: gtkcolor(accent_bg_color);
+  $selection_mode_bg: color-mix(in srgb, white 25%, gtkcolor(accent_bg_color));
+  $entry_highlight: color-mix(in srgb, gtkcolor(window_bg_color) 25%, $selection_mode_bg);
+
+  $bg_color: gtkcolor(window_bg_color);
+  $base_color: gtkcolor(view_bg_color);
+
+  $text_color: gtkcolor(window_fg_color);
+  $fg_color: gtkcolor(window_fg_color);
+  $alt_fg_color: gtkalpha($fg_color, 0.8);
+  $hint_fg_color: gtkalpha($fg_color, 0.6);
+  $disabled_fg_color: gtkalpha($fg_color, 0.45);
+  $alt_disabled_fg_color: gtkalpha($fg_color, 0.35);
+
+  $borders_color:                     gtkalpha(currentColor, 0.12);
+  $light_borders_color:               if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.10));
+  $solid_borders_color:               if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 12%));
+  $dark_solid_borders_color:          if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 15%));
+
+  $entry_bg:                          gtkalpha(currentColor, 0.05);
+  $entry_border:                      $borders_color;
+
+  $button_bg:                         gtkcolor(card_bg_color);
+  $button_border:                     $borders_color;
+  $button_highlight:                  if($variant == 'light', white, rgba(white, 0.1));
+  $button_borders:                    if($variant == 'light', $button_border, $dark_borders_color);
+
+  $header_bg: gtkcolor(headerbar_bg_color);
+  $header_fg: gtkcolor(headerbar_fg_color);
+  $header_border: gtkcolor(headerbar_darker_shade_color);
+  $header_bg_backdrop: gtkcolor(headerbar_backdrop_color);
+  $header_border_backdrop: gtkcolor(headerbar_shade_color);
+
+  $dialog_bg_color: gtkcolor(dialog_bg_color);
+  $dialog_fg_color: gtkcolor(dialog_fg_color);
+
+  $dark_sidebar_bg: gtkcolor(sidebar_bg_color);
+  $dark_sidebar_fg: gtkcolor(sidebar_fg_color);
+  $dark_sidebar_border: gtkcolor(headerbar_darker_shade_color);
+
+  $menu_bg: gtkcolor(popover_bg_color);
+  $menu_fg: gtkcolor(popover_fg_color);
+  $menu_bd: if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.07));
+
+  $wm_shadow: gtkcolor(headerbar_shade_color);
+  $wm_shadow_backdrop: gtkcolor(sidebar_shade_color);
+  $wm_outline: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px gtkcolor(headerbar_darker_shade_color);
+  $wm_border: gtkcolor(headerbar_darker_shade_color);
+
+  @if $trans=='true' {
+    $bg_color: color-mix(in srgb, gtkcolor(window_bg_color) 96%, transparent);
+    $dark_sidebar_bg: color-mix(in srgb, gtkcolor(sidebar_bg_color) 96%, transparent);
+    $menu_bg: color-mix(in srgb, gtkcolor(popover_bg_color) 96%, transparent);
+  }
 }

src/sass/gtk/_colors-other.scss

@@ -2,11 +2,11 @@
 $wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
 $wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
 
-@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
+@define-color wm_title alpha(#{"" + $header_fg}, 0.8);
-@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
+@define-color wm_unfocused_title alpha(#{"" + $header_fg}, 0.5);
 
-@define-color wm_bg #{"" + opacify($header_bg, 1)};
+@define-color wm_bg #{"" + $header_bg};
-@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
+@define-color wm_bg_unfocused #{"" + $header_bg_backdrop};
 
 @define-color wm_border_focused #{"" + $wm_borders_focused};
 @define-color wm_border_unfocused #{"" + $wm_borders_unfocused};

src/sass/gtk/_colors-public.scss

@@ -17,14 +17,14 @@ $theme_text: currentColor;
 @define-color base_color #{"" + $base_color};
 @define-color selected_bg_color #{"" + $selected_bg_color};
 @define-color selected_fg_color #{"" + $selected_fg_color};
-@define-color insensitive_bg_color #{"" + mix($bg_color, $base_color, 60%)};
+@define-color insensitive_bg_color #{"" + gtkmix($bg_color, $base_color, 60%)};
 @define-color insensitive_fg_color #{"" + $disabled_fg_color};
 @define-color insensitive_base_color #{"" + $base_color};
 @define-color theme_unfocused_fg_color #{"" + $fg_color};
 @define-color theme_unfocused_text_color #{"" + $theme_text};
 @define-color theme_unfocused_bg_color #{"" + $bg_color};
 @define-color theme_unfocused_base_color #{"" + $base_color};
-@define-color unfocused_insensitive_color #{"" + mix($fg_color, $bg_color, 35%)};
+@define-color unfocused_insensitive_color #{"" + gtkmix($fg_color, $bg_color, 35%)};
 @define-color borders #{"" + $borders_color};
 @define-color unfocused_borders #{"" + $borders_color};
 
@@ -36,4 +36,4 @@ $theme_text: currentColor;
 @define-color content_view_bg #{"" + $base_color};
 
 /* Very contrasty background for text views (@theme_text_color foreground) */
-@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color, 6%))};
+@define-color text_view_bg #{"" + $base_color};

src/sass/gtk/_common-3.0.scss

@@ -32,27 +32,27 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
 
 %side_style_left {
   background-image: $side_style_shadow;
-  background-color: rgba($dark_sidebar_bg, 1);
+  background-color: $dark_sidebar_bg;
   box-shadow: none;
   border: none;
 }
 
 %side_headerbar_left {
   background-image: $side_style_shadow;
-  background-color: rgba($dark_sidebar_bg, 1);
+  background-color: $dark_sidebar_bg;
   box-shadow: inset 0 1px $highlight_color;
   border: none;
 }
 
 %side_headerbar_right {
   background-image: none;
-  background-color: rgba($base_color, 1);
+  background-color: $base_color;
   box-shadow: inset 0 1px $highlight_color;
 }
 
 %side_searchbar {
   > revealer > box {
-    background-color: rgba($dark_sidebar_bg, 1);
+    background-color: $dark_sidebar_bg;
     background-image: $side_style_shadow;
   }
 }
@@ -128,13 +128,13 @@ $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 { color: gtkmix($selected_fg_color, $selected_bg_color, 50%); }
 }
 
 %nobg_selected_items {
   color: $selected_fg_color;
 
-  &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+  &:disabled { color: gtkmix($selected_fg_color, $selected_bg_color, 50%); }
 }
 
 %linked_middle {
@@ -244,7 +244,7 @@ $maximized_radius_style: 0 0 $maximized_radius $maximized_radius;
 
 .background {
   color: $fg_color;
-  background-color: rgba($bg_color, 1);
+  background-color: $bg_color;
 
   &.csd {
     border-radius: $background_radius_style; // Set csd windows botttom border radius
@@ -365,7 +365,7 @@ textview {
   }
 
   border {
-    background-color: mix($bg_color, $base_color, 50%);
+    background-color: gtkmix($bg_color, $base_color, 50%);
   }
 }
 
@@ -420,7 +420,7 @@ label {
 
   &:disabled {
     color: $disabled_fg_color;
-    selection { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+    selection { color: gtkmix($selected_fg_color, $selected_bg_color, 50%); }
   }
 }
 
@@ -501,7 +501,7 @@ entry {
   @include entry(normal);
 
   image { // icons inside the entry
-    color: mix($fg_color, $base_color, 80%);
+    color: gtkmix($fg_color, $base_color, 80%);
 
     &.left { padding-left: 0; padding-right: $container_padding; }
     &.right { padding-right: 0; padding-left: $container_padding; }
@@ -536,7 +536,7 @@ entry {
                                           (search-missing, $error_color, $light_fg_color) { // entry.search-missing for Gnome-Builder
     &.#{$e_type}, &.#{$e_type}.search {
       color: $e_fg_color;
-      background-color: mix($e_color, $base_color, 60%);
+      background-color: gtkmix($e_color, $base_color, 60%);
       border-image: none;
 
       image { color: $e_fg_color; }
@@ -817,7 +817,7 @@ button {
   &.osd {
     color: $osd_fg_color;
     background-color: $osd_bg_color;
-    border-color: darken($osd_bg_color, 8%);
+    border-color: darken($solid_osd_bg_color, 8%);
 
     &.image-button, &.round-button {
       padding: 0;
@@ -1043,7 +1043,7 @@ modelbutton.flat {
   @extend %undecorated_button;
 
   &:hover {
-    background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%));
+    background-color: if($variant=='light', gtkmix($fg_color,$bg_color,5%), gtkmix($fg_color,$bg_color,10%));
     transition-duration: 50ms;
   }
 
@@ -1081,20 +1081,20 @@ modelbutton.flat arrow {
 
   &:visited {
     color: $link_visited_color;
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
+    *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 60%); }
   }
   &:hover {
     color: lighten($link_color,10%);
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
+    *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 90%); }
   }
   &:active {
     color: $link_color;
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+    *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 80%); }
   }
 
   @at-root %link_selected,
   &:selected,
-  *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+  *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 80%); }
 }
 
 button:link, button:visited {
@@ -1154,29 +1154,11 @@ spinbutton {
     &:dir(ltr) entry,
     &:dir(rtl) button.up { border-radius: $bt_radius 0 0 $bt_radius; }
 
-    > button + button { border-left-style: none; }
-
-    > button:hover:not(:active),
-    > button:hover + button { box-shadow: inset 1px 0 $button_border; }
-
-    > button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover),
-    > button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 transparentize($button_border, 0.5); }
-
-    > button:first-child:hover:not(:active),
-    > button.up:dir(rtl):hover:not(:active),
-    > entry + button:not(:active):hover { box-shadow: none; }
-
     > entry:focus + button { border-left-color: $entry_highlight; }
     > entry:drop(active) + button { border-left-color: $drop_target_color; }
 
     .osd & {
       &, &:focus, &:drop(active) { border-image: none; }
-      > button:hover:not(:active),
-      > button:hover + button { box-shadow: inset 1px 0 $osd_button_border; }
-
-      > button:first-child:hover:not(:active),
-      > button.up:dir(rtl):hover:not(:active),
-      > entry + button:not(:active):hover { box-shadow: none; }
 
       > entry:focus + button { border-left-color: $entry_highlight; }
     }
@@ -1238,7 +1220,7 @@ combobox {
 
   button.combo:disabled arrow,
   button.combo:backdrop arrow {
-    background-color: if($variant == 'light', rgba($text_color, 0.45), mix(white, $button_bg, 0.25));
+    background-color: if($variant == 'light', rgba($text_color, 0.45), gtkmix(white, $button_bg, 25%));
   }
 
   decoration,
@@ -1519,7 +1501,7 @@ headerbar {
     transition: $backdrop_transition;
     color: transparentize($header_fg, 0.3);
     background-color: $header_bg_backdrop;
-    border-bottom: 1px solid if($variant=='light', lighten($header_border, 5%), darken($header_border, 3%));
+    border-bottom: 1px solid $header_border_backdrop;
   }
 
   .title {
@@ -1569,7 +1551,7 @@ headerbar {
       &.#{$e_type} {
         color: $e_fg_color;
         border-color: if($variant=='light', $e_color, $entry_border);
-        background-color: mix($e_color, $header_bg, 60%);
+        background-color: gtkmix($e_color, $header_bg, 60%);
 
         &:focus {
           color: $e_fg_color;
@@ -1748,7 +1730,7 @@ headerbar {
   &.selection-mode {
     color: $light_fg_color;
     background-color: $selection_mode_bg;
-    border-color: darken($selection_mode_bg, 4%);
+    border-color: gtkmix(black, $selection_mode_bg, 6%);
     box-shadow: none;
     background-image: none;
     text-shadow: none;
@@ -1756,7 +1738,7 @@ headerbar {
     &:backdrop {
       background-color: $selection_mode_bg;
       color: transparentize($light_fg_color, 0.4);
-      border-color: darken($selection_mode_bg, 4%);
+      border-color: gtkmix(black, $selection_mode_bg, 6%);
     }
 
     button:not(.flat):not(.suggested-action):not(.destructive-action):not(.titlebutton):not(.combo) {
@@ -2038,7 +2020,7 @@ treeview.view {
 
   &:selected {
     border-radius: 0;
-    border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
+    border-left-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
     border-top-color: rgba($fg_color, 0.15); // doesn't work unfortunately
     background-color: $selected_bg_color;
     color: $selected_fg_color;
@@ -2053,7 +2035,7 @@ treeview.view {
     color: $disabled_fg_color;
 
     &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 40%);
+      color: gtkmix($selected_fg_color, $selected_bg_color, 40%);
     }
   }
 
@@ -2063,7 +2045,7 @@ treeview.view {
 
     &:focus {
       color: $fg_color;
-      background-color: mix(white, $base_color, 8%);
+      background-color: gtkmix(white, $base_color, 8%);
     }
   }
 
@@ -2075,7 +2057,7 @@ treeview.view {
   &:drop(active) {
     border-style: solid none;
     border-width: 1px;
-    border-color: mix($fg_color, $selected_bg_color, 50%);
+    border-color: gtkmix($fg_color, $selected_bg_color, 50%);
 
     &.after { border-top-style: none; }
     &.before { border-bottom-style: none; }
@@ -2086,12 +2068,12 @@ treeview.view {
 
     &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
 
-    color: mix($fg_color, $base_color, 50%);
+    color: gtkmix($fg_color, $base_color, 50%);
 
     &:hover { color: $fg_color; }
 
     &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 70%);
+      color: gtkmix($selected_fg_color, $selected_bg_color, 70%);
       &:hover { color: $selected_fg_color; }
     }
 
@@ -2126,7 +2108,7 @@ treeview.view {
 
   > header {
     > button {
-      $_column_header_color: mix($fg_color, $base_color, 80%);
+      $_column_header_color: gtkmix($fg_color, $base_color, 80%);
 
       min-height: if($variant =='light', 24px, 26px);
       min-width: 38px;
@@ -2222,7 +2204,7 @@ menubar,
 menu {
   margin: 0;
   padding: $container_padding;
-  background-color: opacify($menu_bg, 1);
+  background-color: rgba($menu_bg, 1);
   color: $fg_color;
   border: none; // adds borders in a non composited env
   border-radius: 0;
@@ -2364,7 +2346,7 @@ popover.background {
 
   .csd &, & {
     border-radius: $wm_radius;
-    border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
+    border: 1px solid if($variant=='light', $track_color, gtkmix(white, $menu_bg, 6%));
   }
 
   separator,
@@ -2380,7 +2362,7 @@ popover.background {
   }
 
   entry {
-    background-color: mix($fg_color, $menu_bg, 5%);
+    background-color: gtkmix($fg_color, $menu_bg, 5%);
   }
 
   > list,
@@ -2432,7 +2414,7 @@ cursor-handle {
   padding: $container_padding - 4px $container_padding + 4px;
 
   &:hover:not(:checked) {
-    color: mix($fg_color, $disabled_fg_color, 50%);
+    color: gtkmix($fg_color, $disabled_fg_color, 50%);
     background-color: if($variant == 'light', rgba(white, 0.2), rgba(white, 0.05));
     border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
   }
@@ -2453,7 +2435,7 @@ cursor-handle {
   padding: $container_padding - 4px $container_padding + 4px;
 
   &:hover:not(:checked) {
-    color: mix($fg_color, $disabled_fg_color, 50%);
+    color: gtkmix($fg_color, $disabled_fg_color, 50%);
     background-color: rgba($fg_color, 0.06);
   }
 
@@ -2478,14 +2460,14 @@ notebook {
     background-color: $base_color;
   }
 
-  .csd &:not(.frame),
+  .background.csd > &:not(.frame),
-  .csd &:not(.frame) > stack {
+  .background.csd > &:not(.frame) > stack {
     border-radius: 0 0 $wm_radius $wm_radius;
   }
 
   > header {
     @if $monterey == 'false' {
-      background-color: mix(black, $base_color, if($variant == 'light', 6%, 6%));
+      background-color: gtkmix(black, $base_color, if($variant == 'light', 6%, 6%));
 
       // Set box-shadow to make the header frame color more easy to see
       // Set margin to hide the ugly borders around the header
@@ -2609,7 +2591,7 @@ notebook {
     > tabs > arrow {
       color: $disabled_fg_color;
 
-      &:hover { color: mix($fg_color, $disabled_fg_color, 50%); }
+      &:hover { color: gtkmix($fg_color, $disabled_fg_color, 50%); }
       &:active { color: $fg_color; }
       &:disabled { color: transparentize($disabled_fg_color,0.3); }
     }
@@ -2720,10 +2702,10 @@ scrollbar {
     border: 4px solid transparent;
     border-radius: $container_padding * 2;
     background-clip: padding-box;
-    background-color: mix($fg_color, $bg_color, 40%);
+    background-color: gtkmix($fg_color, $bg_color, 40%);
 
-    &:hover { background-color: mix($fg_color, $bg_color, 30%); }
+    &:hover { background-color: gtkmix($fg_color, $bg_color, 30%); }
-    &:hover:active { background-color: mix($fg_color, $bg_color, 50%); }
+    &:hover:active { background-color: gtkmix($fg_color, $bg_color, 50%); }
     &:disabled { background-color: transparent; }
   }
 
@@ -2747,7 +2729,7 @@ scrollbar {
         margin: $container_padding / 2;
         min-width: $container_padding - 2px;
         min-height: $container_padding - 2px;
-        background-color: mix($fg_color, $bg_color, 70%);
+        background-color: gtkmix($fg_color, $bg_color, 70%);
         border: none;
       }
 
@@ -3078,7 +3060,7 @@ scale {
       highlight {
         background-color: $selected_fg_color;
 
-        &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
+        &:disabled { background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%); }
       }
 
       &:disabled { background-color: transparentize(black, 0.9); }
@@ -3103,7 +3085,7 @@ scale {
   }
 
   slider {
-    $_slider_border: $button_border;
+    $_slider_border: $borders_color;
 
     background-color: $selected_fg_color;
     border: 1px solid $_slider_border;
@@ -3127,7 +3109,6 @@ scale {
 
     &:disabled {
       background-color: darken($selected_fg_color, 5%);
-      border-color: darken($_slider_border, 5%);
     }
 
     // Selected list-row and infobar sliders
@@ -3139,16 +3120,16 @@ scale {
       border-color: $selected_fg_color;
 
       &:hover {
-        background-color: mix($selected_fg_color, $selected_bg_color, 85%);
+        background-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
-        border-color: mix($selected_fg_color, $selected_bg_color, 85%);
+        border-color: gtkmix($selected_fg_color, $selected_bg_color, 85%);
       }
       &:active {
-        background-color: mix($selected_fg_color, $selected_bg_color, 50%);
+        background-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
-        border-color: mix($selected_fg_color, $selected_bg_color, 50%);
+        border-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
       }
       &:disabled{
-        background-color: mix($selected_fg_color, $selected_bg_color, 55%);
+        background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
-        border-color: mix($selected_fg_color, $selected_bg_color, 55%);
+        border-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
       }
     }
 
@@ -3172,10 +3153,10 @@ scale {
     }
   }
 
-  value { color: gtkalpha(currentColor, 0.4); }
+  value { color: gtkalpha(currentColor, 0.45); }
 
   marks {
-    color: gtkalpha(currentColor, 0.4);
+    color: gtkalpha(currentColor, 0.45);
 
     @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
                                                      (bottom, bottom, top),
@@ -3776,20 +3757,18 @@ filechooser {
       label, combobox { color: $dark_sidebar_fg; }
     }
 
-    paned {
+    > box:only-child > paned {
-      stack {
+      stack.view {
-        &:dir(ltr) { border-radius: 0 0 (($wm_radius/1.5) + 2) 0 }
+        &:dir(ltr) { border-radius: 0 0 $wm_radius 0; }
-        &:dir(rtl) { border-radius: 0 0 0 (($wm_radius/1.5) + 2) }
+        &:dir(rtl) { border-radius: 0 0 0 $wm_radius; }
       }
     }
 
     stack.view {
       background-color: $base_color;
-      border-bottom-right-radius: $wm_radius;
 
       scrolledwindow {
         background-color: transparent;
-        border-radius: 0 0 $wm_radius $wm_radius;
 
         list { background-color: transparent; }
 
@@ -4126,15 +4105,18 @@ tooltip {
     &, &.csd {
       // background-color needs to be set this way otherwise it gets drawn twice
       // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
-      background-color: lighten($osd_bg_color, 10%);
+      background-color: $osd_bg_color;
       background-clip: padding-box;
-      border-radius: $bt_radius;
+      border-radius: $wm_radius;
+      color: $osd_fg_color;
+      border: 1px solid $wm_shadow;
+      box-shadow: inset 0 0 0 1px $highlight_color;
 
       label { padding: $container_padding; }
     }
   }
 
-  border-radius: $bt_radius;
+  border-radius: $wm_radius;
   box-shadow: none;
 
   decoration { background-color: transparent; }

src/sass/gtk/_drawing-3.0.scss

@@ -106,7 +106,7 @@
   //
     color: $selected_fg_color;
     background-color: $selected_bg_color;
-    border-color: darken($selection_mode_bg, 5%);
+    border-color: gtkmix(black, $selected_bg_color, 8%);
   }
 
   @else if $t==osd-insensitive {
@@ -114,7 +114,7 @@
   // insensitive osd entry
   //
     color: $osd_disabled_fg_color;
-    background-color: transparentize($osd_entry_bg, 0.15);
+    background-color: rgba($osd_entry_bg, 0.8);
   }
 }
 
@@ -149,7 +149,7 @@
     background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
     @if $variant=='light' { box-shadow: none; }
     @if $variant=='dark' {
-      box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
+      box-shadow: inset 0 1px $light_divider_color, $shadow_3;
     }
   }
 
@@ -488,7 +488,7 @@
 
   #{$_selector} undershoot.#{$p} {
     box-shadow: if($style == 'default', none, inset $_border_pos $borders_color);
-    background: linear-gradient(to $_direction, gtkalpha($c, .25), transparent 6px);
+    background: linear-gradient(to $_direction, rgba($c, .25), transparent 6px);
   }
 }
 

src/sass/gtk/_drawing-4.0.scss

@@ -28,7 +28,7 @@
   //
     color: $text_color;
     background-color: $entry_bg;
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
+    box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05), inset 0 0 0 2px transparent;
     transition-duration: $shorter_duration * 2;
   }
 
@@ -47,7 +47,7 @@
   // insensitive entry
   //
     color: $disabled_fg_color;
-    background-color: rgba($entry_bg, 0.02);
+    background-color: $entry_bg;
   }
 
   @if $t==header-normal {
@@ -67,7 +67,7 @@
   //
     color: $header_fg;
     background-color: $entry_bg;
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
+    box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05), inset 0 0 0 2px transparent;
     transition-duration: $shorter_duration * 2;
   }
 
@@ -85,8 +85,8 @@
   //
   // insensitive header-bar entry
   //
-    color: rgba($header_fg, 0.35);
+    color: gtkalpha($header_fg, 0.35);
-    background-color: rgba($entry_bg, 0.02);
+    background-color: gtkalpha($entry_bg, 0.02);
   }
 
   @else if $t==osd {
@@ -108,7 +108,7 @@
     background-color: $selected_bg_color;
 
     @if $gnome_version == 'old' {
-      border-color: darken($selection_mode_bg, 5%);
+      border-color: gtkmix(black, $selected_bg_color, 6%);
     } @else {
       border-color: color-mix(in srgb, black 25%, $selected_bg_color)
     }
@@ -119,7 +119,7 @@
   // insensitive osd entry
   //
     color: $osd_disabled_fg_color;
-    background-color: transparentize($osd_entry_bg, 0.15);
+    background-color: gtkalpha($osd_entry_bg, 0.8);
   }
 }
 
@@ -136,7 +136,7 @@
   //
   // normal button
   //
-    color: $fg_color;
+    color: $alt_fg_color;
     border-color: $button_borders;
     background-color: $button_bg;
     @if $variant=='light' { box-shadow: $shadow_3; }
@@ -149,12 +149,12 @@
   //
   // hovered button
   //
-    color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
+    color: $fg_color;
     border-color: $button_borders;
-    background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
+    background-color: gtkmix($fg_color, $button_bg, 5%);
     @if $variant=='light' { box-shadow: none; }
     @if $variant=='dark' {
-      box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
+      box-shadow: inset 0 1px $light_divider_color, $shadow_3;
     }
   }
 
@@ -175,7 +175,7 @@
     label, & { color: $disabled_fg_color; }
 
     border-color: if($variant == 'light', $button_border, $dark_borders_color);
-    background-color: rgba($button_bg, 0.55);
+    background-color: gtkalpha($button_bg, 0.55);
     box-shadow: none;
   }
 
@@ -183,10 +183,10 @@
   //
   // insensitive pushed button
   //
-    label, & { color: transparentize($selected_fg_color, 0.45); }
+    label, & { color: gtkalpha($selected_fg_color, 0.55); }
 
     border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
-    background-color: rgba($selected_bg_color, 0.45);
+    background-color: gtkalpha($selected_bg_color, 0.45);
     @if $variant=='light' { box-shadow: none; }
 
     opacity: 0.6;
@@ -206,8 +206,7 @@
   //
   // hovered button
   //
-    color: darken($fg_color, 10%);
+    background-color: gtkalpha(currentColor, 0.15);
-    background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
     background-image: none;
     box-shadow: none;
     // border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
@@ -218,8 +217,8 @@
   // pushed button
   //
     background-image: none;
-    color: $selected_fg_color;
+    color: if($variant=='light', $light_fg_color, $fg_color);
-    background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
+    background-color: if($variant=='light', gtkalpha(black, 0.5), gtkalpha(currentColor, 0.25));
   }
 
   @else if $t==flat-checked {
@@ -227,8 +226,8 @@
   // pushed button
   //
     background-image: none;
-    color: $selected_fg_color;
+    color: if($variant=='light', $light_fg_color, $fg_color);
-    background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
+    background-color: if($variant=='light', gtkalpha(black, 0.65), gtkalpha(currentColor, 0.35));
   }
 
   @else if $t==flat-insensitive {
@@ -246,7 +245,7 @@
   //
     label, & { color: transparentize($selected_fg_color, 0.35); }
 
-    background-color: if($variant=='light', rgba(black, 0.3), rgba(white, 0.15));
+    background-color: if($variant=='light', gtkalpha(black, 0.3), gtkalpha(currentColor, 0.15));
     opacity: 0.6;
   }
 
@@ -265,8 +264,8 @@
   //
   // hovered header-bar button
   //
-    color: darken($header_fg, 2%);
+    color: $header_fg;
-    background-color: rgba($header_fg, 0.1);
+    background-color: gtkalpha($header_fg, 0.1);
     background-image: none;
     box-shadow: none;
   }
@@ -276,7 +275,7 @@
   // pushed header-bar button
   //
     color: $header_fg;
-    background-color: rgba($header_fg, 0.25);
+    background-color: gtkalpha($header_fg, 0.25);
     background-image: none;
     box-shadow: none;
   }
@@ -286,7 +285,7 @@
   // pushed header-bar button
   //
     color: $header_fg;
-    background-color: rgba($header_fg, 0.12);
+    background-color: gtkalpha($header_fg, 0.12);
     background-image: none;
     box-shadow: none;
   }
@@ -295,7 +294,7 @@
   //
   // insensitive header-bar button
   //
-    label, & { color: rgba($header_fg, 0.35); }
+    label, & { color: gtkalpha($header_fg, 0.35); }
     background-image: none;
     background-color: transparent;
     box-shadow: none;
@@ -305,7 +304,7 @@
   //
   // header-bar insensitive pushed button
   //
-    label, & { color: rgba($header_fg, 0.35); }
+    label, & { color: gtkalpha($header_fg, 0.35); }
     background-image: none;
     background-color: transparent;
     box-shadow: none;

src/sass/gtk/apps/_budgie.scss

@@ -59,7 +59,7 @@ $raven_padding: 8px;
     background-color: $menu_bg;
 
     &:hover {
-      background-color: if($variant =='light', darken($menu_bg, 5%), lighten($menu_bg, 5%));
+      background-color: gtkmix(currentColor, $menu_bg, 5%);
     }
 
     &:active, &:checked {
@@ -98,7 +98,7 @@ $raven_padding: 8px;
 .budgie-popover.background {
   margin: 0;
   padding: 0;
-  border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
+  border: 1px solid if($variant=='light', gtkalpha(currentColor, 0.2), gtkmix(currentColor, $menu_bg, 6%));
   border-radius: $wm_radius;
   background-color: $menu_bg;
   background-clip: padding-box;
@@ -878,7 +878,7 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
 
 // Raven
 .raven {
-  background-color: if($trans == 'true', rgba($raven_bg_color, $raven_opacity), $raven_bg_color);
+  background-color: if($trans == 'true', gtkalpha($raven_bg_color, $raven_opacity), $raven_bg_color);
   color: $raven_fg_color;
   box-shadow: $shadow_4;
 
@@ -1063,7 +1063,7 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
           @extend %raven_middle_button;
 
           &:hover {
-            background-color: if($variant =='light', darken($menu_bg, 5%), lighten($menu_bg, 5%));
+            background-color: gtkmix(currentColor, $menu_bg, 5%);
           }
 
           &:active, &:checked {
@@ -1168,16 +1168,16 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
             border: none;
             margin: $container_padding / 2;
             border-radius: $bt_radius;
-            background-color: if($variant == 'light', lighten($raven_bg_color, 5%), darken($raven_bg_color, 5%));
+            background-color: gtkmix($fg_color, $raven_bg_color, 5%);
             box-shadow: 0 2px 3px rgba(black, 0.08);
 
             &:hover, &:selected {
-              background-color: if($variant == 'light', $raven_bg_color, darken($raven_bg_color, 8%));
+              background-color: if($variant == 'light', $raven_bg_color, gtkmix(black, $raven_bg_color, 8%));
               box-shadow: 0 2px 4px rgba(black, 0.15);
             }
 
             &:active {
-              background-color: if($variant == 'light', darken($raven_bg_color, 5%), darken($raven_bg_color, 10%));
+              background-color: if($variant == 'light', gtkmix(black, $raven_bg_color, 5%), gtkmix(black, $raven_bg_color, 10%));
               box-shadow: none;
             }
 
@@ -1189,7 +1189,7 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
 
               image { padding: 0; }
 
-              &:active { image { color: $fg_color; }}
+              &:active { image { color: $fg_color; } }
             }
           }
         }

src/sass/gtk/apps/_elementary.scss

@@ -580,7 +580,6 @@ scale.warmth trough {
       color: transparentize($header_fg, 0.3);
       background-image: none;
       background-color: $header_bg_backdrop;
-      border-color: if($variant=='light', lighten($header_border, 15%), darken($header_border, 3%));
     }
   }
 

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

@@ -19,8 +19,8 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
 @if $nautilus_style == 'stable' {
   $nautilus_sidebar_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
                                                   $dark_sidebar_bg $nautilus_sidebar_size,
-                                                  rgba($dark_sidebar_bg, 0) $nautilus_sidebar_size,
+                                                  gtkalpha($dark_sidebar_bg, 0) $nautilus_sidebar_size,
-                                                  rgba($dark_sidebar_bg, 0) 100%);
+                                                  gtkalpha($dark_sidebar_bg, 0) 100%);
 
   $nautilus_bg_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
                                              $dark_sidebar_bg $nautilus_sidebar_size,
@@ -37,15 +37,15 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
   $dialog_header_borders_image: linear-gradient(90deg, $dialog_bg_color 0px,
                                                        $header_border 25%);
 
-  $nautilus_actionbar_image: linear-gradient(90deg, rgba($dark_header_bg, 0) 5%,
+  $nautilus_actionbar_image: linear-gradient(90deg, gtkalpha($dark_header_bg, 0) 5%,
                                                     transparentize($dark_header_bg, 0.2) 40%);
 
-  $nautilus_actionbar_borders_image: linear-gradient(90deg, rgba($header_border, 0) 0px,
+  $nautilus_actionbar_borders_image: linear-gradient(90deg, transparent 0px,
                                                             $header_border 25%);
 }
 
 @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
-  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) $nautilus_sidebar_size,
+  $nautilus_header_borders_image: linear-gradient(90deg, transparent $nautilus_sidebar_size,
                                                          $header_border $nautilus_sidebar_size);
 }
 
@@ -58,7 +58,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
   $nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg ($nautilus_sidebar_size / 2),
                                                  $dark_header_bg 40%);
 
-  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($nautilus_sidebar_size / 2) - 40px),
+  $nautilus_header_borders_image: linear-gradient(90deg, transparent (($nautilus_sidebar_size / 2) - 40px),
                                                          $header_border 40%);
 }
 
@@ -80,7 +80,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
 
       > deck > box.vertical > headerbar.titlebar {
         @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
-          background-image: linear-gradient(90deg, rgba($dark_header_bg, 0) $nautilus_sidebar_size,
+          background-image: linear-gradient(90deg, transparent $nautilus_sidebar_size,
                                                    $nautilus_borders_color $nautilus_sidebar_size,
                                                    $nautilus_borders_color ($nautilus_sidebar_size + 1px),
                                                    $dark_header_bg ($nautilus_sidebar_size + 1px));
@@ -207,19 +207,19 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
           padding: 2px 4px;
 
           &:hover {
-            background-color: rgba($fg_color, 0.1);
+            background-color: gtkalpha($fg_color, 0.1);
           }
 
           &:active, &:active:hover {
             transition: background-color ease-out 200ms;
-            background-color: rgba($fg_color, 0.2);
+            background-color: gtkalpha($fg_color, 0.2);
           }
 
           &:selected.has-open-popup,
           &:selected, &:selected:hover {
             color: $fg_color;
             transition: background-color ease-out 200ms;
-            background-color: rgba($fg_color, 0.15);
+            background-color: $sidebar_theme_color;
 
             &, label { color: $fg_color; }
           }
@@ -240,14 +240,14 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
         &:drop(active):not(:disabled) {
           border: none;
           border-radius: 0;
-          background-color: rgba($dark_sidebar_fg, 0.15);
+          background-color: gtkalpha($dark_sidebar_fg, 0.15);
 
           &, label, .sidebar-icon { color: $dark_sidebar_fg; }
 
           &:selected.has-open-popup,
           &:selected, &:selected:hover {
             background-image: none;
-            background-color: rgba($selected_bg_color, 0.15);
+            background-color: gtkalpha($selected_bg_color, 0.15);
             &, label, .sidebar-icon { color: $selected_bg_color; }
           }
         }
@@ -375,16 +375,16 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
 
       button {
         color: $selection_mode_bg;
-        background-color: rgba($selection_mode_bg, 0.15);
+        background-color: gtkalpha($selection_mode_bg, 0.15);
         border: none;
 
-        &:hover { background-color: rgba($selection_mode_bg, 0.25); }
+        &:hover { background-color: gtkalpha($selection_mode_bg, 0.25); }
         &:active, &:checked { background-color: $selection_mode_bg; color: white; }
         &:disabled {
-          background-color: rgba($selection_mode_bg, 0.05);
+          background-color: gtkalpha($selection_mode_bg, 0.05);
-          color: rgba($selection_mode_bg, 0.35);
+          color: gtkalpha($selection_mode_bg, 0.35);
 
-          label { color: rgba($selection_mode_bg, 0.35); }
+          label { color: gtkalpha($selection_mode_bg, 0.35); }
         }
       }
 
@@ -1082,7 +1082,7 @@ window.org-gnome-Builder.workspace {
 
         &:active, &:checked {
           color: $fg_color;
-          background-color: rgba($fg_color, 0.25);
+          background-color: gtkalpha($fg_color, 0.25);
         }
 
         > box.horizontal > box.horizontal {
@@ -1199,9 +1199,9 @@ widget {
       margin: -1px; // kill ugly borders
 
       row.activatable {
-        color: rgba($fg_color, 0.75);
+        color: gtkalpha($fg_color, 0.75);
         &:hover,
-        &:active { color: rgba($fg_color, 0.75); }
+        &:active { color: gtkalpha($fg_color, 0.75); }
       }
 
       // kill ugly separators
@@ -1225,7 +1225,7 @@ widget {
 }
 
 graph-switcher-button.toggle {
-  color: rgba($fg_color, 0.75);
+  color: gtkalpha($fg_color, 0.75);
   font-weight: 500;
   &:hover { // use opaque
     color: $fg_color;
@@ -1248,7 +1248,7 @@ box.speedometer {
   &-outter { opacity: 0.8; } // reduce alpha for our troughs
 
   &-content-area { // cover up meter troughs with selection colour
-    box-shadow: 0 0 0 4px rgba($selected_bg_color, 0.2);
+    box-shadow: 0 0 0 4px gtkalpha($selected_bg_color, 0.2);
   }
 }
 
@@ -1779,7 +1779,7 @@ window.background.csd {
     }
 
     > overlay > scrolledwindow > viewport.frame {
-      background-color: rgba($base_color, 1);
+      background-color: gtkalpha($base_color, 1);
       border-bottom-right-radius: $wm_radius;
 
       > hdycolumn > stack > box.horizontal > box.vertical > box.horizontal {
@@ -1835,7 +1835,7 @@ headerbar.titlebar.incognito-mode {
 
 // reset inverted foreground colour
 notebook > box > stack > box.vertical > paned.vertical > overlay {
-  > .floating-bar { color: rgba($fg_color, 0.75); }
+  > .floating-bar { color: gtkalpha($fg_color, 0.75); }
 }
 
 // overrides foregrounds for 3.24's ssd-mode
@@ -1872,11 +1872,11 @@ popover.background:not(.emoji-picker) > box.vertical > scrolledwindow {
 
     > row.activatable {
       background-color: if($variant=='light', $bg_color, lighten($bg_color, 10%));
-      color: rgba($fg_color, 0.85);
+      color: gtkalpha($fg_color, 0.85);
       border-radius: $bt_radius;
       border: 1px solid $borders_color;
       margin: 2px;
-      @if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); }
+      @if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px gtkalpha(currentColor, 0.01); }
 
       &:hover { @include button(hover); }
       &:active, &:checked { @include button(flat-active); }
@@ -1890,14 +1890,14 @@ popover.background:not(.emoji-picker) > box.vertical > stack > box.vertical {
     border: 1px solid $borders_color;
 
     > list.background > row.activatable.bookmarks-row {
-      background-color: rgba($base_color, 0.35);
+      background-color: gtkalpha($base_color, 0.35);
-      color: rgba($fg_color, 0.85);
+      color: gtkalpha($fg_color, 0.85);
-      border-bottom: 1px dashed rgba($borders_color, 0.05);
+      border-bottom: 1px dashed gtkalpha(currentColor, 0.05);
       padding: 6px;
 
       &:hover,
       &:active,
-      &:checked { color: $fg_color; background-color: rgba($fg_color, 0.05); }
+      &:checked { color: $fg_color; background-color: gtkalpha($fg_color, 0.05); }
 
       button.flat {
         min-width: 16px;
@@ -1991,12 +1991,12 @@ tabbox {
 
       &:hover {
         color: $fg_color;
-        background-color: rgba($borders_color, 0.1);
+        background-color: gtkalpha(currentColor, 0.1);
       }
 
       &:active, &:active:hover {
         color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
-        background-color: rgba($borders_color, 0.2);
+        background-color: gtkalpha(currentColor, 0.2);
       }
 
       &.tab-close-button {
@@ -2129,13 +2129,13 @@ stack.view.polari-entry-area {
 
   button.popup.flat.toggle.polari-nick-button {
     &:hover {
-      background-color: rgba($fg_color, 0.15);
+      background-color: gtkalpha($fg_color, 0.15);
       box-shadow: none;
       background-image: none;
     }
 
     &:active, &:checked {
-      background-color: rgba($fg_color, 0.25);
+      background-color: gtkalpha($fg_color, 0.25);
       box-shadow: none;
       background-image: none;
     }
@@ -2160,7 +2160,7 @@ stack:disabled.view.polari-entry-area { background-image: image($bg_color); }
   &, &.solid {
     color: lighten($osd_fg_color, 7%);
     background-color: $osd_bg_color;
-    border: 1px solid darken($osd_bg_color, 8%);
+    border: 1px solid darken($solid_osd_bg_color, 8%);
     border-radius: 2px;
   }
 
@@ -2171,7 +2171,7 @@ stack:disabled.view.polari-entry-area { background-image: image($bg_color); }
         border-color: $selected_bg_color;
       }
 
-      &.empty { background-color: darken($osd_bg_color, 5%); }
+      &.empty { background-color: darken($solid_osd_bg_color, 5%); }
     }
 
     trough { background: none; }
@@ -2390,7 +2390,7 @@ window.background.csd {
     // border-radius: 0 0 $wm_radius $wm_radius;
   }
 
-  .content-view:hover { background-color: rgba($fg_color, 0.08); }
+  .content-view:hover { background-color: gtkalpha($fg_color, 0.08); }
 
   viewport.frame { // Documents
     background-color: transparent;
@@ -2608,12 +2608,12 @@ window#GearyMainWindow.background.csd { // <= 3.32
 
           &:hover {
             color: $fg_color;
-            background-color: rgba($fg_color, 0.1);
+            background-color: gtkalpha($fg_color, 0.1);
           }
 
           &:selected {
             color: $fg_color;
-            background-color: rgba($fg_color, 0.15);
+            background-color: gtkalpha($fg_color, 0.15);
           }
         }
       }
@@ -2629,14 +2629,14 @@ window#GearyMainWindow.background.csd { // <= 3.32
     statusbar {
       margin: -8px -12px;
       border: none;
-      background-color: rgba($dark_sidebar_bg, 1);
+      background-color: gtkalpha($dark_sidebar_bg, 1);
       border-bottom-left-radius: $wm_radius;
 
       frame > border { border: none; }
     }
 
     frame.geary-conversation-frame {
-      background-color: rgba($dark_sidebar_bg, 1);
+      background-color: gtkalpha($dark_sidebar_bg, 1);
 
       > border { border: none; }
 
@@ -2650,10 +2650,10 @@ window#GearyMainWindow.background.csd { // <= 3.32
         treeview.view {
           background-image: none;
 
-          &:hover { background-color: rgba($fg_color, 0.1); }
+          &:hover { background-color: gtkalpha($fg_color, 0.1); }
 
           &:selected {
-            background-color: rgba($fg_color, 0.15);
+            background-color: gtkalpha($fg_color, 0.15);
             color: if($variant == 'light', $fg_color, $selected_fg_color);
           }
 
@@ -2754,15 +2754,15 @@ window#GearyMainWindow.background.csd { // <= 3.32
 
         &:hover {
           color: $fg_color;
-          background-color: rgba($fg_color, 0.1);
+          background-color: gtkalpha($fg_color, 0.1);
         }
 
         &:selected {
           color: $fg_color;
-          background-color: rgba($fg_color, 0.15);
+          background-color: gtkalpha($fg_color, 0.15);
 
           &:hover {
-            background-color: rgba($fg_color, 0.12);
+            background-color: gtkalpha($fg_color, 0.12);
           }
         }
       }
@@ -2785,15 +2785,15 @@ window#GearyMainWindow.background.csd { // <= 3.32
 
         &:hover {
           color: $fg_color;
-          background-color: rgba($fg_color, 0.1);
+          background-color: gtkalpha($fg_color, 0.1);
         }
 
         &:selected {
           color: $fg_color;
-          background-color: rgba($fg_color, 0.15);
+          background-color: gtkalpha($fg_color, 0.15);
 
           &:hover {
-            background-color: rgba($fg_color, 0.12);
+            background-color: gtkalpha($fg_color, 0.12);
           }
         }
       }
@@ -2819,14 +2819,14 @@ window#GearyMainWindow.background.csd { // <= 3.32
         margin: 0 $container_padding / 2;
 
         &:hover {
-          background-color: rgba($fg_color, 0.1);
+          background-color: gtkalpha($fg_color, 0.1);
           border-color: transparent;
         }
 
         &:selected, &:active {
           border-color: transparent;
           border-radius: $mn_radius;
-          background-color: rgba($fg_color, 0.15);
+          background-color: gtkalpha($fg_color, 0.15);
           color: if($variant == 'light', $fg_color, $selected_fg_color);
         }
 

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

@@ -5,7 +5,7 @@
 
 $nautilus_header_image: image($header_bg);
 $nautilus_header_borders_image: image($header_border);
-$nautilus_borders_color: if($variant=='light', darken(rgba($dark_sidebar_bg, 1), 12%), $header_border);
+$nautilus_borders_color: if($variant=='light', gtkmix(black, $dark_sidebar_bg, 12%), $header_border);
 $flap_sidebar_size: 240px;
 
 @if $nautilus_style == 'stable' {
@@ -22,7 +22,7 @@ $flap_sidebar_size: 240px;
   $nautilus_header_image: linear-gradient(90deg, transparent ($flap_sidebar_size / 2),
                                                  $dark_header_bg 40%);
 
-  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($flap_sidebar_size / 2) - 40px),
+  $nautilus_header_borders_image: linear-gradient(90deg, gtkalpha($header_border, 0) (($flap_sidebar_size / 2) - 40px),
                                                          $header_border 40%);
 }
 
@@ -96,7 +96,7 @@ $flap_sidebar_size: 240px;
       .navigation-sidebar:not(.view) {
         > row {
           &:selected {
-            background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
+            background-color: $sidebar_theme_color;
             color: $fg_color;
           }
 
@@ -133,7 +133,7 @@ $flap_sidebar_size: 240px;
   tabbar:not(.inline) {
     .box {
       @if $monterey == 'false' {
-        background-color: mix(black, $base_color, 6%);
+        background-color: color-mix(in srgb, black 6%, $base_color);
         border-top: 1px solid $borders_color;
       } @else {
         background-color: $base_color;
@@ -160,7 +160,7 @@ $flap_sidebar_size: 240px;
     listview.view {
       padding: 0;
       margin: 0;
-      border-spacing: 0;
+      border-spacing: $container_padding / 2;
 
       > row.activatable {
         padding: 0;
@@ -174,16 +174,13 @@ $flap_sidebar_size: 240px;
             padding: $container_padding $container_padding * 1.5;
           }
         }
+      }
+    }
+  }
+}
 
-        + row {
+// Floating Bar
-          margin-top: $container_padding / 2;
+.floating-bar {
-        }
-      }
-    }
-  }
-
-  // Floating Bar
-  .floating-bar {
   padding: 2px;
   background-color: $selected_bg_color;
   color: $selected_fg_color;
@@ -198,7 +195,6 @@ $flap_sidebar_size: 240px;
     padding: 0;
     @extend %selected-button;
   }
-  }
 }
 
 #NautilusViewCell {
@@ -289,7 +285,7 @@ window.background.csd {
 
       > scrolledwindow > viewport > widget > stack {
         > list.navigation-sidebar {
-          background-color: rgba($dark_sidebar_bg, 1);
+          background-color: $dark_sidebar_bg;
 
           > separator {
             background-color: transparent;
@@ -298,7 +294,7 @@ window.background.csd {
           }
         }
 
-        > box > list.navigation-sidebar { background-color: rgba($dark_sidebar_bg, 1); }
+        > box > list.navigation-sidebar { background-color: $dark_sidebar_bg; }
       }
 
       > stack.background { background-color: $base_color; }
@@ -1155,28 +1151,28 @@ carousel.card {
 
   &.green, &.details-rating-0 {
     color: darken($theme_color_green, 15%);
-    background-color: rgba($theme_color_green, 0.15);
+    background-color: gtkalpha($theme_color_green, 0.15);
   }
 
   &.blue,
   &.details-rating-5 {
     color: $theme_color_blue;
-    background-color: rgba($theme_color_blue, 0.15);
+    background-color: gtkalpha($theme_color_blue, 0.15);
   }
 
   &.yellow, &.details-rating-12 {
     color: darken($theme_color_yellow, 15%);
-    background-color: rgba($theme_color_yellow, 0.15);
+    background-color: gtkalpha($theme_color_yellow, 0.15);
   }
 
   &.details-rating-15 {
     color: $theme_color_orange;
-    background-color: rgba($theme_color_orange, .15);
+    background-color: gtkalpha($theme_color_orange, .15);
   }
 
   &.red, &.details-rating-18 {
     color: darken($theme_color_red, 15%);
-    background-color: rgba($theme_color_red, 0.15);
+    background-color: gtkalpha($theme_color_red, 0.15);
   }
 }
 
@@ -1282,9 +1278,146 @@ window.background.csd {
   }
 }
 
+//
+// Builder
+//
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+popover.background.pages-popover {
+  listview > row {
+    padding: $base_padding;
+
+    button {
+      margin: 0;
+    }
+
+    check {
+      margin: 4px 2px;
+      -gtk-icon-size: 12px;
+    }
+  }
+}
+
+panelresizer .top-bar {
+  box-shadow: inset 0 -1px $borders_color;
+}
+
+.frameheader.header:not(.vertical) {
+  min-height: $medium_size;
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid $borders_color;
+  background-color: color-mix(in srgb, black 6%, $base_color);
+
+  &:backdrop {
+    background-color: color-mix(in srgb, black 7%, $base_color);
+  }
+
+  tabbar.inline {
+    tabbox {
+      min-height: $medium_size;
+    }
+
+    .start-action {
+      padding: $container_padding / 2 $container_padding / 2 $container_padding / 2 $container_padding;
+    }
+
+    .end-action {
+      padding: $container_padding / 2 $container_padding $container_padding / 2 $container_padding / 2;
+    }
+  }
+}
+
+panelframeswitcher:not(.vertical) {
+  &.frameheader.header { padding: 0 $base_padding; }
+
+  > button.toggle.image-button {
+    border: none;
+    margin: $base_padding 0;
+  }
+}
+
+panelframeswitcher.frameheader.header.vertical {
+  > button.toggle.image-button {
+    min-height: 24px;
+    min-width: 24px;
+    padding: $base_padding;
+  }
+}
+
+panelstatusbar {
+  box-shadow: inset 0 1px $borders_color;
+
+  > menubutton > button,
+  > paneltogglebutton button {
+    border-radius: 0;
+    @extend %flat_button;
+  }
+}
+
+panelwidget entry.statusbar {
+  background-color: $bg_color;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  border-top: 1px solid $borders_color;
+
+  &:focus-within {
+    outline: none;
+  }
+}
+
+.IdeTweaksWindow,
+.org-gnome-Builder {
+  .boxed-list {
+    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, 0.08);
+  }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $base_padding * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $bt_radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $base_padding / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.05);
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.15);
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $primary_color;
+    }
+  }
+}
+
 //
 // Gnome extensions tool
 //
+
 popover.details-popover {
   .actions {
     border-spacing: 6px;
@@ -1334,3 +1467,64 @@ dialog-host > widget > widget > toolbarview {
     }
   }
 }
+
+//
+// Chrome
+//
+
+$chrome_bg_color: if($variant == 'light', #dedede, #242424);
+$chrome_fg_color: if($variant == 'light', #242424, #dedede);
+
+window.background.chromium {
+  box-shadow: 0 12px 20px rgba(black, 0.35),
+              0 0 0 1px rgba(black, 0.75);
+
+  &:backdrop {
+    transition: $shadow_transition;
+    box-shadow: 0 7px 12px rgba(black, 0.15),
+                0 0 0 1px rgba(black, 0.65);
+  }
+
+  &, headerbar {
+    &, &:backdrop {
+      background-color: $chrome_bg_color;
+      color: $chrome_fg_color;
+    }
+  }
+
+  headerbar.header-bar.titlebar {
+    padding: 0 $container_padding * 2;
+    color: currentColor;
+    box-shadow: inset 0 1px rgba(white, 0.1);
+    border-radius: $wm_radius $wm_radius 0 0;
+
+    button.titlebutton { // title-buttons
+      // define global titlebutton class sizing
+      min-width: 22px;
+      min-height: 22px;
+      margin: 0 3px; // unset margins
+      padding: 0;
+      color: currentColor; // hide stock icons
+      border: none;
+      border-radius: $circular_radius;
+      background-image: none;
+      background-color: gtkalpha(currentColor, 0.12);
+
+      &:hover {
+        background-color: gtkalpha(currentColor, 0.2);
+        transition-duration: $shorter_duration;
+      }
+
+      &:active {
+        background-color: gtkalpha(currentColor, 0.3);
+        transition-duration: $shorter_duration;
+      }
+    }
+  }
+
+  // internal region of toolbar's entry widget
+  > textview.view, textview {
+    background-color: gtkalpha(currentColor, 0.1);
+    color: $chrome_fg_color;
+  }
+}

src/sass/gtk/apps/_libadwaita.scss

@@ -236,35 +236,29 @@ toast {
 
 viewswitcher {
   margin: 0;
-  min-height: 26px;
+  min-height: $small_size + 8px;
-
-  &.wide {
   border-spacing: $container_padding / 2;
+
+  &.narrow {
+    margin-top: 0;
+    margin-bottom: 0;
+    min-height: $container_padding;
   }
 
-  &.narrow > button.toggle {
+  button.toggle {
-    border-radius: 0;
-    margin: 0;
-
-    indicatorbin > image {
-      -gtk-icon-size: 12px;
-    }
-  }
-
-  > button.toggle {
     font-weight: normal;
     padding: 0;
 
     > stack > box {
       &.narrow {
         font-size: 0.75rem;
-        padding-top: $container_padding;
+        padding-top: $container_padding + 2px;
-        padding-bottom: $container_padding;
-        border-spacing: $container_padding - 2px;
 
-        > stack > label {
+        > label {
-          padding-left: $container_padding + 2px;
+          min-height: 18px;
-          padding-right: $container_padding + 2px;
+          padding-left: 3px;
+          padding-right: 3px;
+          padding-bottom: 0;
         }
       }
 
@@ -276,10 +270,10 @@ viewswitcher {
   }
 }
 
-// AdwViewSwitcherBar
-
 viewswitcherbar actionbar > revealer > box {
-  padding: 0;
+  padding-left: $container_padding;
+  padding-right: $container_padding;
+  padding-top: $container_padding;
 }
 
 // AdwViewSwitcherTitle
@@ -354,11 +348,41 @@ indicatorbin {
 
     > label { color: $selected_fg_color; }
   }
+
+  &.badge {
+    > indicator,
+    > mask {
+      min-height: 13px;
+    }
+
+    > indicator > label {
+      font-size: 0.6rem;
+      font-weight: bold;
+      padding-left: 4px;
+      padding-right: 4px;
+      color: white;
+    }
+
+    &.needs-attention > indicator {
+      background: $selected_bg_color;
+
+      > label { color: $selected_fg_color; }
+    }
+  }
 }
 
 headerbar > windowhandle > box viewswitcher {
   min-height: 0;
 
+  &.narrow > button.toggle {
+    border-radius: 0;
+    margin: 0;
+
+    indicatorbin > image {
+      -gtk-icon-size: 12px;
+    }
+  }
+
   &.wide {
     box-shadow: inset 0 0 0 1px $light_borders_color;
     border-radius: $bt_radius;
@@ -395,10 +419,6 @@ headerbar > windowhandle > box viewswitcher {
 //
 
 tabbar {
-  .box {
-    min-height: $menuitem_size;
-  }
-
   .start-action,
   .end-action {
     padding: $container_padding;
@@ -414,19 +434,17 @@ tabbar {
     padding-left: 0;
   }
 
-  &:not(.inline) {
   .box {
+    min-height: $menuitem_size;
     color: $text_color;
     margin: 0;
+    box-shadow: none;
+    border-bottom: 1px solid $borders_color;
 
     @if $monterey == 'false' {
       padding: 0;
-        box-shadow: inset 0 -1px if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
+      background-color: color-mix(in srgb, black 15%, $header_bg);
-        border-bottom: none;
-        background-color: darken($header_bg, 10%);
     } @else {
-        box-shadow: none;
-        border-bottom: 1px solid $borders_color;
       padding: $container_padding / 2 0;
       background-color: $header_bg;
     }
@@ -439,13 +457,13 @@ tabbar {
       filter: opacity(0.5);
     }
   }
-  }
 
   tabbox {
     border: none;
     padding: 0;
     box-shadow: none;
     background-color: transparent;
+    min-height: $menuitem_size;
 
     > separator {
       margin: 0;
@@ -460,6 +478,7 @@ tabbar {
       min-width: 2px;
       border-radius: 2px;
       background: gtkalpha($selected_bg_color, 0.5);
+      margin: 3px 6px;
     }
 
     > tabboxchild {
@@ -482,6 +501,7 @@ tabbar {
       @if $monterey == 'false' {
         @extend %tabs_tab;
         border-top: none;
+        border-bottom: none;
       } @else {
         @extend %monterey_tab;
       }
@@ -507,12 +527,12 @@ tabbar {
 
         &:hover {
           color: $fg_color;
-          background-color: rgba($borders_color, 0.1);
+          background-color: gtkalpha(currentColor, 0.1);
         }
 
         &:active, &:active:hover {
-          color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
+          color: $text_color;
-          background-color: rgba($borders_color, 0.2);
+          background-color: gtkalpha(currentColor, 0.2);
         }
       }
     }
@@ -527,6 +547,22 @@ tabbar {
       }
     }
   }
+
+  scrolledwindow.pinned {
+    @if $monterey == 'false' {
+      padding: $container_padding / 2 0;
+    }
+
+    tabbox {
+      > tab,
+      > tabboxchild > tab {
+        @extend %monterey_tab;
+        @if $monterey == 'false' {
+          padding: 0 $container_padding / 2;
+        }
+      }
+    }
+  }
 }
 
 dnd tab {
@@ -591,8 +627,8 @@ toolbarview.undershoot-bottom scrolledwindow {
   color: $dark_sidebar_fg;
 
   &:backdrop {
-    background-color: $dark_sidebar_bg;
+    background-color: $bg_color;
-    // transition: background-color $longer_duration $deceleration_curve;
+    transition: background-color $longer_duration $deceleration_curve;
   }
 
   .sidebar,
@@ -686,8 +722,8 @@ toolbarview.undershoot-bottom scrolledwindow {
   color: $text_color;
 
   &:backdrop {
-    background-color: $base_color;
+    background-color: $bg_color;
-    // transition: background-color $longer_duration $deceleration_curve;
+    transition: background-color $longer_duration $deceleration_curve;
   }
 
   toolbarview.undershoot-top scrolledwindow {
@@ -788,13 +824,115 @@ toolbarview.undershoot-bottom scrolledwindow {
   }
 }
 
-.top-bar {
+//
-  background: none;
+// AdwToolbarView
+//
+
+toolbarview {
+  > .top-bar,
+  > .bottom-bar {
+    searchbar,
+    actionbar {
+      > revealer > box {
+        background-color: transparent;
         border: none;
         box-shadow: none;
+      }
+    }
+
+    .toolbar  {
+      background-color: transparent;
+    }
 
     .collapse-spacing {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      headerbar {
+        min-height: $headerbar_size;
+
+        > windowhandle > box {
+          padding-top: 8px;
+          padding-bottom: 8px;
+
+          > widget > box.vertical {
+            margin-top: -8px;
+            margin-bottom: -8px;
+          }
+        }
+
+        &.default-decoration {
+          min-height: $medium_size;
+
+          > windowhandle > box {
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+        }
+      }
+
+      searchbar,
+      actionbar {
+        > revealer > box {
+          padding-top: $container_padding;
+          padding-bottom: $container_padding;
+        }
+      }
+
+      .toolbar  {
+        padding-top: $container_padding;
+        padding-bottom: $container_padding;
+      }
+
+      tabbar {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    &.raised {
+      background-color: transparent;
+      color: $header_fg;
+
+      &:backdrop {
+        background-color: transparent;
+      }
+    }
+
+    &:backdrop > windowhandle {
+      filter: none;
+    }
+  }
+
+  > .bottom-bar {
     padding: 0;
+    border-spacing: 0;
+    box-shadow: inset 0 1px $borders_color;
+    background-color: color-mix(in srgb, black 5%, $bg_color);
+    color: $text_color;
+
+    &:backdrop {
+      background-color: $bg_color;
+      color: $disabled_fg_color;
+    }
+
+    actionbar { @extend %actionbar-inline; }
+  }
+
+  > .top-bar.raised {
+    box-shadow: none;
+
+    &.border {
+      box-shadow: none;
+    }
+  }
+
+  > .bottom-bar.raised {
+    box-shadow: none;
+
+    &.border {
+      box-shadow: none;
+    }
   }
 }
 
@@ -856,112 +994,6 @@ dialog-host > dialog.osd:not(progressbar):not(button):not(menubutton):not(splitb
   }
 }
 
-//
-// AdwToolbarView
-//
-toolbarview {
-  > .top-bar,
-  > .bottom-bar {
-    searchbar,
-    actionbar {
-      > revealer > box {
-        background-color: transparent;
-        border: none;
-        box-shadow: none;
-      }
-    }
-
-    .toolbar  {
-      background-color: transparent;
-    }
-
-    .collapse-spacing {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      headerbar {
-        min-height: $headerbar_size;
-
-        > windowhandle > box {
-          padding-top: 0;
-          padding-bottom: 0;
-        }
-
-        &.default-decoration {
-          min-height: $medium_size;
-
-          > windowhandle > box {
-            padding-top: 0;
-            padding-bottom: 0;
-          }
-        }
-      }
-
-      searchbar,
-      actionbar {
-        > revealer > box {
-          padding-top: $container_padding;
-          padding-bottom: $container_padding;
-        }
-      }
-
-      .toolbar  {
-        padding-top: $container_padding;
-        padding-bottom: $container_padding;
-      }
-
-      tabbar {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    }
-
-    &.raised {
-      background-color: transparent;
-      color: $header_fg;
-
-      &:backdrop {
-        background-color: transparent;
-      }
-    }
-
-    &:backdrop > windowhandle {
-      filter: none;
-    }
-  }
-
-  > .bottom-bar {
-    padding: 0;
-    border-spacing: 0;
-    box-shadow: inset 0 1px $borders_color;
-    background-color: darken($bg_color, 3%);
-    color: $text_color;
-
-    &:backdrop {
-      background-color: $bg_color;
-      color: $disabled_fg_color;
-    }
-
-    actionbar { @extend %actionbar-inline; }
-  }
-
-  > .top-bar.raised {
-    box-shadow: none;
-
-    &.border {
-      box-shadow: none;
-    }
-  }
-
-  > .bottom-bar.raised {
-    box-shadow: none;
-
-    &.border {
-      box-shadow: none;
-    }
-  }
-}
-
 // ThemeSelector
 themeselector, // Gnome text editor
 panelthemeselector { // Gnome builder

src/sass/gtk/apps/_mate.scss

@@ -67,7 +67,7 @@ panel-toplevel.background {
 //
 MsdOsdWindow.background.osd {
   border-radius: 2px;
-  border: 1px solid darken($osd_bg_color, 8%);
+  border: 1px solid darken($solid_osd_bg_color, 8%);
 
   .progressbar {
     background-color: $selected_bg_color;
@@ -75,8 +75,9 @@ MsdOsdWindow.background.osd {
     border-color: red;
     border-radius: 5px;
   }
+
   .trough {
-    background-color: darken($osd_bg_color, 5%);
+    background-color: darken($solid_osd_bg_color, 5%);
     border: none;
     border-radius: 5px;
   }

src/sass/gtk/apps/_misc.scss

@@ -195,7 +195,7 @@ $chrome_menu_fg_color: $fg_color;
 
 window.background.chromium {
   // checked-tab & toolbar & button widgets
-  background-color: $bg_color;
+  background-color: $chrome_bg_color;
   color: $text_color;
 
   headerbar.titlebar {
@@ -216,7 +216,7 @@ window.background.chromium {
       min-width: 16px;
       min-height: 16px;
       margin: 0; // unset margins
-      padding: 0 0;
+      padding: 0;
       background-size: 16px 16px;
       color: transparent; // hide stock icons
       border: none;
@@ -264,6 +264,7 @@ window.background.chromium {
 //
 // Libre-Office
 //
+
 window.background:not(.solid-csd):not(.csd) {
   // reserved area at the most-right side of GtkMenuBar
   > grid.horizontal > grid.horizontal {
@@ -294,33 +295,6 @@ window.background:not(.solid-csd):not(.csd) {
     }
   }
 
-  > grid.horizontal > widget > widget {
-    viewport.frame > box > box > box > grid toolbar {
-      background: none;
-      border: none;
-      padding: 3px;
-    }
-
-    > scrolledwindow > viewport.frame {
-      background: $base_color;
-
-      > grid > box.vertical {
-        > toolbar {
-          background: none;
-          border: none;
-          padding: 6px;
-        }
-      }
-
-      > grid > box.horizontal > #combobox.linked,
-      > grid > box.horizontal > grid.horizontal > box.horizontal { background: $base_color; }
-    }
-
-    toolbar.small-button {
-      border: none;
-    }
-  }
-
   // for 'Notebookbar' toolbar
   > notebook {
     border: none; // unset borders
@@ -366,6 +340,33 @@ window.background:not(.solid-csd):not(.csd) {
   }
 }
 
+window.background:not(.solid-csd) {
+  > grid.horizontal > widget > widget {
+    viewport.frame > box > box > box > grid toolbar {
+      background-color: transparent;
+      border: none;
+      padding: 3px;
+    }
+
+    > scrolledwindow > viewport.frame {
+      > grid > box.vertical {
+        > toolbar {
+          background-color: transparent;
+          border: none;
+          padding: 6px;
+        }
+      }
+
+      > grid > box.horizontal > #combobox.linked,
+      > grid > box.horizontal > grid.horizontal > box.horizontal { background-color: $base_color; }
+    }
+
+    toolbar.small-button {
+      border: none;
+    }
+  }
+}
+
 #combobox.linked {
   > entry.combo {
     border: 1px solid $dark_borders_color;
@@ -403,6 +404,14 @@ toolbar.toolbar {
       background-color: if($variant == 'light', mix(black, $bg_color, 5%), mix(white, $bg_color, 5%));
       border-color: transparent;
     }
+
+    &:disabled {
+      color: $disabled_fg_color;
+
+      label {
+        color: $disabled_fg_color;
+      }
+    }
   }
 }