diff --git a/install.sh b/install.sh
index 0332eb56..059627b1 100755
--- a/install.sh
+++ b/install.sh
@@ -179,7 +179,11 @@ else
 
   prompt -w "Removing the old '${name}' themes...\n"
 
-  remove_themes; customize_theme; avoid_variant_duplicates;
+  if [[ "${libadwaita}" != 'true' ]]; then
+    remove_themes
+  fi
+
+  customize_theme; avoid_variant_duplicates;
 
   prompt -w "Installing '${name}' themes in '${dest}'...\n";
 
@@ -192,8 +196,6 @@ else
   prompt -i "Start icon style : ${icon}"
   prompt -i "Nautilus style   : ${nautilus_style}"
 
-  echo; install_themes; echo; prompt -s "Done!"
-
   if [[ "${libadwaita}" == 'true' ]]; then
     if [[ "$UID" != '0' ]]; then
       install_libadwaita
@@ -201,6 +203,8 @@ else
     else
       echo; prompt -e "Do not run '--libadwaita' option with sudo!"
     fi
+  else
+    echo; install_themes; echo; prompt -s "Done!"
   fi
 
   if (is_my_distro "solus") && (is_running "gnome-session"); then
diff --git a/libs/lib-install.sh b/libs/lib-install.sh
index 7a3af74a..661d379d 100755
--- a/libs/lib-install.sh
+++ b/libs/lib-install.sh
@@ -536,6 +536,9 @@ config_gtk4() {
 install_libadwaita() {
   color="${colors[0]}"
   opacity="${opacities[0]}"
+  alt="${alts[0]}"
+  theme="${themes[0]}"
+  scheme="${schemes[0]}"
 
   gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
 }
diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss
index 7690935c..8cef13bc 100644
--- a/src/sass/_colors.scss
+++ b/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})");
 }
 
@@ -42,13 +42,13 @@ $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));
 $alt_disabled_fg_color:             if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65));
-$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));
-$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));
+$active_color:                      if($variant == 'light', gtkalpha(currentColor, 0.26), gtkalpha(currentColor, 0.2));
+$track_color:                       if($variant == 'light', gtkalpha(currentColor, 0.20), gtkalpha(currentColor, 0.16));
+$visit_color:                       if($variant == 'light', gtkalpha(currentColor, 0.16), gtkalpha(currentColor, 0.12));
+$divider_color:                     if($variant == 'light', gtkalpha(currentColor, 0.12), gtkalpha(currentColor, 0.1));
+$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);
@@ -97,12 +97,12 @@ $selected_bg_color:                 if($scheme == 'nord', $nord_color_default, $
 $primary_color:                     $selected_bg_color;
 
 $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%));
-$dark_solid_borders_color:          if($variant == 'light', mix(black, $base_color, 12%), mix(black, $base_color, 15%));
-$highlight_color:                   if($variant == 'light', rgba(white, 0.15), rgba(white, 0.1));
+$borders_color:                     if($variant == 'light', gtkalpha(currentColor, 0.12), gtkalpha(currentColor, 0.12));
+$light_borders_color:               if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.10));
+$dark_borders_color:                if($variant == 'light', gtkalpha(black, 0.08), gtkalpha(black, 0.15));
+$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%));
+$highlight_color:                   if($variant == 'light', gtkalpha(white, 0.15), gtkalpha(white, 0.1));
 
 // Gnome-shell background colors
 $dark_bg_color:                     rgba(black, 0.6);
@@ -143,9 +143,10 @@ $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);
-$header_bg_backdrop:                if($variant == 'light', darken($header_bg, 0%), darken($header_bg, 0%));
-$header_border:                     if($variant == 'light', mix(black, $header_bg, 12%), mix(black, $header_bg, 75%));
+$dark_header_bg:                    if($trans == 'true', gtkalpha($base_color, 0.96), $base_color);
+$header_bg_backdrop:                if($variant == 'light', gtkmix(black, $header_bg, 2%), gtkmix(black, $header_bg, 1%));
+$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, 35%));
 
 // Sidebar colors
 $dark_sidebar_bg: white;
@@ -174,14 +175,14 @@ $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);
-$sidebar_theme_color:               if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
+$dark_sidebar_border:               if($variant == 'light', $solid_borders_color, gtkmix(black, $dark_sidebar_bg, 75%));
+$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
@@ -192,22 +193,22 @@ $osd_bg_color:                      if($trans == 'true', rgba(if($darker == 'tru
   $osd_bg_color:                    if($trans == 'true', rgba(if($darker == 'true', #16191e, #222730), $opacity), if($darker == 'true', #16191e, #222730));
 }
 
-$osd_button_bg:                     rgba(lighten($osd_bg_color, 22%), $opacity);
+$osd_button_bg:                     gtkalpha(lighten($osd_bg_color, 22%), $opacity);
 $osd_button_border:                 $dark_borders_color;
-$osd_entry_bg:                      rgba(lighten($osd_bg_color, 22%), $opacity);
+$osd_entry_bg:                      gtkalpha(lighten($osd_bg_color, 22%), $opacity);
 $osd_entry_border:                  $dark_borders_color;
 $osd_disabled_bg_color:             darken($osd_bg_color, 3%);
-$osd_disabled_fg_color:             rgba($osd_fg_color, 0.35);
+$osd_disabled_fg_color:             gtkalpha($osd_fg_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_bd:                           if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 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', gtkalpha($base_color, $menu_opacity), gtkalpha($bg_color, $menu_opacity));
 }
 
 $submenu_bg_color:                  if($variant == 'light', rgba(white, 1), rgba(white, 0.1));
@@ -269,14 +270,14 @@ $dash_bg:                           if($variant == 'light', rgba(#d1d1d1, $panel
 }
 
 // Entry colors
-$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_bg:                          gtkalpha(currentColor, 0.05);
+$entry_shell_bg:                    gtkalpha(currentColor, 0.1);
 $entry_border:                      $borders_color;
 $entry_highlight:                   rgba($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%));
+$button_shell_bg:                   if($variant == 'light', gtkmix(black, $dialog_bg_color, 6%), gtkmix(white, $dialog_bg_color, 6%));
 
 @if $scheme == 'nord' {
   $button_bg:                       if($variant == 'light', #fbfcfd, #556075);
diff --git a/src/sass/cinnamon/_drawing.scss b/src/sass/cinnamon/_drawing.scss
index 8a74ac93..722314cc 100644
--- a/src/sass/cinnamon/_drawing.scss
+++ b/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: gtkalpha($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: gtkalpha($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 gtkalpha($button_highlight, 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 gtkalpha($button_highlight, 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 gtkalpha($button_highlight, 0.12);
   }
 
   @else if $t==active {
@@ -102,7 +102,7 @@
   @else if $t==insensitive {
     color: $disabled_fg_color;
     border: 1px solid if($variant == 'light', $button_border, $dark_borders_color);
-    background-color: rgba($button_bg, 0.55);
+    background-color: gtkalpha($button_bg, 0.55);
   }
 
   @else if $t==flat {
@@ -112,12 +112,12 @@
 
   @else if $t==flat-hover {
     color: $fg_color;
-    background-color: rgba($fg_color, 0.1);
+    background-color: gtkalpha($fg_color, 0.1);
   }
 
   @else if $t==flat-active {
     color: $fg_color;
-    background-color: rgba($fg_color, 0.2);
+    background-color: gtkalpha($fg_color, 0.2);
   }
 
   @else if $t==flat-insensitive {
@@ -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: gtkalpha(gtkmix($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: gtkalpha($osd_button_bg, 0.85);
   }
 }
diff --git a/src/sass/gnome-shell/_drawing.scss b/src/sass/gnome-shell/_drawing.scss
index a50bd521..c3057c0a 100644
--- a/src/sass/gnome-shell/_drawing.scss
+++ b/src/sass/gnome-shell/_drawing.scss
@@ -115,17 +115,17 @@
     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;
   }
 
   @if $t == hover {
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0.1) !important;
+    box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.1) !important;
     border: 2px solid transparent !important;
   }
 
   @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' {
       border: 2px solid lighten($fc, 15%) !important;
     } @else {
@@ -134,7 +134,7 @@
   }
 
   @if $t == insensitive {
-    background-color: rgba($c, 0.05);
+    background-color: gtkalpha($c, 0.05);
     color: $disabled_fg_color;
   }
 
@@ -148,20 +148,20 @@
 
   @if $t == flat-hover {
     background-color: $c;
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05) !important;
+    box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05) !important;
     color: $tc;
   }
 
   @if $t == flat-focus {
     border: none !important;
-    background-color: rgba($c, 0.2);
+    background-color: gtkalpha($c, 0.2);
     color: $tc;
   }
 
   @if $t == flat-insensitive {
     border: none !important;
-    background-color: rgba($c, 0.05);
-    color: rgba($tc, 0.45);
+    background-color: gtkalpha($c, 0.05);
+    color: gtkalpha($tc, 0.45);
   }
 }
 
@@ -230,7 +230,7 @@
     text-shadow: none;
     icon-shadow: none;
     @if $gnome_version == 'old' {
-      background-color: mix($tc, $c, 6%);
+      background-color: gtkmix($tc, $c, 6%);
     } @else {
       background-color: st-mix($tc, $c, 6%);
     }
@@ -242,7 +242,7 @@
     text-shadow: none;
     icon-shadow: none;
     @if $gnome_version == 'old' {
-      background-color: mix($tc, $c, 12%);
+      background-color: gtkmix($tc, $c, 12%);
     } @else {
       background-color: st-mix($tc, $c, 12%);
     }
diff --git a/src/sass/gnome-shell/common/_login-dialog.scss b/src/sass/gnome-shell/common/_login-dialog.scss
index de63e514..49b31a66 100644
--- a/src/sass/gnome-shell/common/_login-dialog.scss
+++ b/src/sass/gnome-shell/common/_login-dialog.scss
@@ -324,7 +324,7 @@
     padding: 0 !important;
     border-radius: $circular_radius;
     border: none;
-    background-color: rgba($borders_color, 0.1);
+    background-color: gtkalpha(currentColor, 0.1);
     color: $light_fg_color;
   }
 }
diff --git a/src/sass/gnome-shell/widgets-48-0/_notifications.scss b/src/sass/gnome-shell/widgets-48-0/_notifications.scss
index fcf259b3..d1f5223f 100644
--- a/src/sass/gnome-shell/widgets-48-0/_notifications.scss
+++ b/src/sass/gnome-shell/widgets-48-0/_notifications.scss
@@ -16,7 +16,7 @@ $notification_banner_width: 34em;
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(black, 0.15);
 
-  &:hover, &:active { background-color: rgba($menu_bg, 1); }
+  &:hover, &:active { background-color: gtkalpha($menu_bg, 1); }
 }
 
 .notification-buttons-bin {
diff --git a/src/sass/gtk/_colors-libadwaita.scss b/src/sass/gtk/_colors-libadwaita.scss
index a3a4ad57..fbb6f338 100644
--- a/src/sass/gtk/_colors-libadwaita.scss
+++ b/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};
-
-// 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' {
+@if $gnome_version == 'new' and $accent_type != 'fixed' {
   :root {
     --accent-blue: #{$theme_color_default};
     --accent-teal: #2190a4;
@@ -235,4 +253,35 @@ $dark_5: #000000;
   $progress_color: var(--accent-bg-color);
   $selection_mode_bg: color-mix(in srgb, white 25%, var(--accent-bg-color));
   $selected_borders_color:  color-mix(in srgb, black 25%, var(--accent-bg-color));
+
+  $bg_color: gtkcolor(window_bg_color);
+  $base_color: gtkcolor(view_bg_color);
+  $button_bg: gtkcolor(card_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);
+
+  $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);
+
+  $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);
+
+  $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);
 }
diff --git a/src/sass/gtk/_colors-other.scss b/src/sass/gtk/_colors-other.scss
index 9348204d..0114112b 100644
--- a/src/sass/gtk/_colors-other.scss
+++ b/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_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
+@define-color wm_title alpha(#{"" + $header_fg}, 0.8);
+@define-color wm_unfocused_title alpha(#{"" + $header_fg}, 0.5);
 
-@define-color wm_bg #{"" + opacify($header_bg, 1)};
-@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
+@define-color wm_bg #{"" + $header_bg};
+@define-color wm_bg_unfocused #{"" + $header_bg_backdrop};
 
 @define-color wm_border_focused #{"" + $wm_borders_focused};
 @define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
diff --git a/src/sass/gtk/_colors-public.scss b/src/sass/gtk/_colors-public.scss
index 70efd48a..c8e5043f 100644
--- a/src/sass/gtk/_colors-public.scss
+++ b/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 #{"" + color-mix(in srgb, $bg_color 60%, $base_color)};
 @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 #{"" + color-mix(in srgb, $fg_color 35%, $bg_color)};
 @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};
diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss
index 4864460f..564d7ce1 100644
--- a/src/sass/gtk/_common-3.0.scss
+++ b/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; }
@@ -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;
@@ -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: gtkalpha($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);
   }
 
@@ -2485,7 +2467,7 @@ notebook {
 
   > 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:active { background-color: mix($fg_color, $bg_color, 50%); }
+    &:hover { background-color: gtkmix($fg_color, $bg_color, 30%); }
+    &: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: rgba($fg_color, 0.15);
 
     background-color: $selected_fg_color;
     border: 1px solid $_slider_border;
@@ -3139,16 +3121,16 @@ scale {
       border-color: $selected_fg_color;
 
       &:hover {
-        background-color: mix($selected_fg_color, $selected_bg_color, 85%);
-        border-color: mix($selected_fg_color, $selected_bg_color, 85%);
+        background-color: gtkmix($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%);
-        border-color: mix($selected_fg_color, $selected_bg_color, 50%);
+        background-color: gtkmix($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%);
-        border-color: mix($selected_fg_color, $selected_bg_color, 55%);
+        background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
+        border-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
       }
     }
 
diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index 98d71040..0eee3a33 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -8,7 +8,7 @@ $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;
 }
@@ -16,7 +16,7 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
 %side_headerbar_left {
   &, &:backdrop {
     background-image: $side_style_shadow;
-    background-color: rgba($dark_sidebar_bg, 1);
+    background-color: $dark_sidebar_bg;
     border: none;
   }
 }
@@ -24,14 +24,14 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
 %side_headerbar_right {
   &, &:backdrop {
     background-image: none;
-    background-color: rgba($base_color, 1);
+    background-color: $base_color;
     border: none;
   }
 }
 
 %side_searchbar {
   > revealer > box {
-    background-color: rgba($dark_sidebar_bg, 1);
+    background-color: $dark_sidebar_bg;
     border-color: $dark_sidebar_border;
   }
 }
@@ -45,13 +45,13 @@ $side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light',
 }
 
 $list_shadow: if($variant == 'light',
-                (inset 0 0 0 1px rgba(black, 0.04), inset 0 1px rgba(black, 0.05)),
-                (inset 0 0 0 1px rgba(white, 0.04), inset 0 1px rgba(white, 0.06)));
+                (inset 0 0 0 1px gtkalpha(currentColor, 0.04), inset 0 1px gtkalpha(currentColor, 0.05)),
+                (inset 0 0 0 1px gtkalpha(currentColor, 0.04), inset 0 1px gtkalpha(currentColor, 0.06)));
 
 %circular_list {
   border-radius: $bd_radius;
   box-shadow: $list_shadow;
-  background-color: if($variant == 'light', rgba(black, 0.03), rgba(white, 0.05));
+  background-color: if($variant == 'light', gtkalpha(currentColor, 0.03), gtkalpha(currentColor, 0.05));
   border: none;
   color: $text_color;
 
@@ -109,7 +109,7 @@ $list_shadow: if($variant == 'light',
 
   &:disabled {
     @if $gnome_version == 'old' {
-      color: mix($selected_fg_color, $selected_bg_color, 50%);
+      color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
     } @else {
       color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
     }
@@ -121,7 +121,7 @@ $list_shadow: if($variant == 'light',
 
   &:disabled {
     @if $gnome_version == 'old' {
-      color: mix($selected_fg_color, $selected_bg_color, 50%);
+      color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
     } @else {
       color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
     }
@@ -190,54 +190,54 @@ $list_shadow: if($variant == 'light',
 // Buttons on selected backgrounds
 %selected-button {
   color: $selected_fg_color;
-  background-color: transparentize($selected_fg_color, 1);
-  border-color: transparentize($selected_fg_color, 0.5);
+  background-color: transparent;
+  border-color: gtkalpha($selected_fg_color, 0.5);
   background-image: none;
   box-shadow: none;
 
   &.flat {
     @include button(undecorated);
     color: $selected_fg_color;
-    background-color: transparentize($selected_fg_color, 1);
+    background-color: transparent;
     background-image: none;
   }
 
   &.flat:disabled {
-    &, label { color: transparentize($selected_fg_color, 0.6); }
+    &, label { color: gtkalpha($selected_fg_color, 0.4); }
   }
 
   &:hover {
     color: $selected_fg_color;
-    background-color: transparentize($selected_fg_color, 0.8);
-    border-color: transparentize($selected_fg_color, 0.5);
+    background-color: gtkalpha($selected_fg_color, 0.2);
+    border-color: gtkalpha($selected_fg_color, 0.5);
     box-shadow: none;
   }
 
   &:active, &:active:hover, &:checked {
     color: $selected_fg_color;
-    background-color: transparentize($selected_fg_color, 0.6);
-    border-color: transparentize($selected_fg_color, 0.5);
+    background-color: gtkalpha($selected_fg_color, 0.4);
+    border-color: gtkalpha($selected_fg_color, 0.5);
     box-shadow: none;
   }
 
   &:disabled {
-    &, label { color: transparentize($selected_fg_color, 0.5); }
-    background-color: transparentize($selected_fg_color, 1);
-    border-color: transparentize($selected_fg_color, 0.6);
+    &, label { color: gtkalpha($selected_fg_color, 0.5); }
+    background-color: transparent;
+    border-color: gtkalpha($selected_fg_color, 0.4);
     box-shadow: none;
   }
 
   &:disabled:active, &:disabled:checked {
     color: $selected_bg_color;
-    background-color: transparentize($selected_fg_color, 0.5);
-    border-color: transparentize($selected_fg_color, 0.6);
+    background-color: gtkalpha($selected_fg_color, 0.5);
+    border-color: gtkalpha($selected_fg_color, 0.4);
   }
 }
 
 %normal_selected_button {
   color: $selected_fg_color;
-  background-color: transparentize($selected_fg_color, 1);
-  border-color: transparentize($selected_fg_color, 0.5);
+  background-color: transparent;
+  border-color: gtkalpha($selected_fg_color, 0.5);
   background-image: none;
 }
 
@@ -246,19 +246,7 @@ $list_shadow: if($variant == 'light',
 //
 .background {
   color: $fg_color;
-  background-color: rgba($bg_color, 1);
-
-  // > box > stack { background-color: $bg_color; }
-
-  &.csd {
-    border-radius: $wm_radius; // Set csd windows botttom border radius
-
-    &.maximized, &.tiled, &.fullscreen {
-      border-radius: $maximized_radius; // Set csd windows botttom border radius
-    }
-  }
-
-  &.solid-csd { border-radius: 0; }
+  background-color: $bg_color;
 }
 
 dnd {
@@ -285,8 +273,6 @@ treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
   background-color: $base_color;
   transition: all 200ms $ease-out-quad;
 
-  // &:hover { background-color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 3%)); }
-
   &:selected {
     color: $selected_fg_color;
     background-color: $selected_bg_color;
@@ -308,7 +294,7 @@ textview {
   }
 
   border {
-    background-color: mix($bg_color, $base_color, 50%);
+    background-color: color-mix(in srgb, $bg_color 50%, $base_color);
   }
 
   &:drop(active) {
@@ -326,10 +312,11 @@ iconview {
 rubberband {
   @if $gnome_version == 'old' {
     border: 1px solid darken($selected_bg_color, 10%);
-    background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
+    background-color: transparentize(darken($selected_bg_color, 10%), 0.75);
   } @else {
+    --accent-bg-color: @accent_bg_color;
     border: 1px solid color-mix(in srgb, black 10%, $selected_bg_color);
-    background-color: RGB(color-mix(in srgb, black 10%, $selected_bg_color), 80%);
+    background-color: gtkalpha(color-mix(in srgb, black 10%, $selected_bg_color), 0.25);
   }
 }
 
@@ -337,7 +324,7 @@ flowbox {
   > rubberband { @extend %rubberband; }
 
   > flowboxchild {
-    padding: 3px;
+    padding: $container_padding / 2;
     border-radius: $bt_radius;
 
     &:selected {
@@ -392,7 +379,7 @@ label {
 
   > selection {
     color: $selected_fg_color;
-    background-color: $selected_bg_color;
+    background-color: gtkmix($selected_fg_color, $selected_bg_color, 15%);
   }
 
   &:disabled {
@@ -401,7 +388,7 @@ label {
 
     selection {
       @if $gnome_version == 'old' {
-        color: mix($selected_fg_color, $selected_bg_color, 50%);
+        color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
       } @else {
         color: color-mix(in srgb, $selected_fg_color 50%, $selected_bg_color);
       }
@@ -562,7 +549,7 @@ entry {
   @include entry(normal);
 
   > image { // icons inside the entry
-    color: mix($fg_color, $base_color, 80%);
+    color: $alt_fg_color;
 
     &:first-child { padding-left: 0; padding-right: $container_padding; }
     &:last-child { padding-right: 0; padding-left: $container_padding; }
@@ -605,7 +592,7 @@ entry {
                                           (search-missing, $error_color, $light_fg_color) { // entry.search-missing for Gnome-Builder
     &.#{$e_type} {
       color: $e_fg_color;
-      background-color: mix($e_color, $base_color, 60%);
+      background-color: color-mix(in srgb, $e_color 60%, $base_color);
       border-image: none;
 
       image { color: $e_fg_color; }
@@ -883,7 +870,7 @@ button {
   &.opaque {
     @extend %opaque_button;
 
-    background-color: mix($bg_color, $fg_color, 80%);
+    background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
     color: $fg_color;
   }
 
@@ -1185,7 +1172,7 @@ menubutton {
   }
 
   &.opaque {
-    background-color: mix($bg_color, $fg_color, 80%);
+    background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
     color: $fg_color;
   }
 
@@ -1340,7 +1327,7 @@ splitbutton {
   }
 
   &.opaque {
-    background-color: mix($bg_color, $fg_color, 80%);
+    background-color: color-mix(in srgb, $bg_color 80%, $fg_color);
     color: $fg_color;
   }
 
@@ -1440,7 +1427,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: $divider_color;
     transition-duration: 50ms;
   }
 
@@ -1488,7 +1475,7 @@ modelbutton.flat {
 %list_button,
 list > row button.image-button:not(.flat) {
   @extend %undecorated_button;
-  border: 1px solid transparentize($borders_color, .5);
+  border: 1px solid $fill_color;
   &:hover { @include button(hover); }
   &:active,
   &:checked { @include button(active); }
@@ -1528,7 +1515,7 @@ button.link {
   @at-root %link_selected,
   &:selected {
     @if $gnome_version == 'old' {
-      color: mix($selected_fg_color, $selected_bg_color, 80%);
+      color: gtkmix($selected_fg_color, $selected_bg_color, 80%);
     } @else {
       color: color-mix(in srgb, $selected_fg_color 80%, $selected_bg_color);
     }
@@ -1616,7 +1603,7 @@ spinbutton {
     > 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:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 $fill_color; }
 
     > button:first-child:hover:not(:active),
     > button.up:dir(rtl):hover:not(:active),
@@ -1664,9 +1651,9 @@ spinbutton {
     padding: 0 $container_padding / 2;
     border-style: none;
     border-radius: $bt_radius;
-    background-color: rgba($fg_color, 0.08);
+    background-color: gtkalpha($fg_color, 0.08);
 
-    &:focus, &:hover, &:selected { background-color: rgba($fg_color, 0.12); }
+    &:focus, &:hover, &:selected { background-color: gtkalpha($fg_color, 0.12); }
 
     &:focus-within {
       box-shadow: inset 0 0 0 2px $entry_highlight;
@@ -1693,8 +1680,8 @@ spinbutton {
       margin: 4px 2px;
       background-color: transparent;
 
-      &:hover { background-color: rgba($fg_color, 0.1); }
-      &:active { background-color: rgba($fg_color, 0.15); color: $fg_color; }
+      &:hover { background-color: gtkalpha($fg_color, 0.1); }
+      &:active { background-color: gtkalpha($fg_color, 0.15); color: $fg_color; }
     }
 
     > button:hover:not(:active),
@@ -1918,7 +1905,7 @@ actionbar > revealer > box {
   padding: $container_padding;
   border-spacing: $container_padding;
   border-top: 1px solid $borders_color;
-  background-color: darken($bg_color, 3%);
+  background-color: transparentize(black, 0.88);
   box-shadow: none;
   color: $text_color;
 
@@ -2001,7 +1988,7 @@ actionbar > revealer > box {
     &.#{$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: color-mix(in srgb, $e_color 60%, $header_bg);
 
       &:focus {
         color: $e_fg_color;
@@ -2048,6 +2035,18 @@ actionbar > revealer > box {
 
   &.flat {
     @include button(undecorated);
+
+    &:hover {
+      @include button(header-hover);
+    }
+  
+    &:active {
+      @include button(header-active);
+    }
+  
+    &:checked {
+      @include button(header-checked);
+    }
   }
 }
 
@@ -2063,9 +2062,9 @@ headerbar {
   &:backdrop {
     opacity: 1;
     transition: $backdrop_transition;
-    color: transparentize($header_fg, 0.3);
+    color: color-mix(in srgb, $header_fg 70%, $header_bg_backdrop);
     background-color: $header_bg_backdrop;
-    border-color: if($variant=='light', lighten($header_border, 5%), darken($header_border, 3%));
+    border-color: $header_border_backdrop;
     box-shadow: none;
   }
 
@@ -2233,7 +2232,7 @@ headerbar {
 
     &:backdrop {
       background-color: $selection_mode_bg;
-      color: transparentize($light_fg_color, 0.4);
+      color: gtkalpha($light_fg_color, 0.6);
 
       @if $gnome_version == 'old' {
         border-color: darken($selection_mode_bg, 5%);
@@ -2270,12 +2269,12 @@ headerbar {
 
   .maximized & {
     background-color: $header_bg;
-    border-color: opacify($header_border, 1);
+    border-color: $header_border;
     box-shadow: none;
 
     &:backdrop {
       background-color: $header_bg_backdrop;
-      border-color: if($variant=='light', lighten($header_border, 15%), darken($header_border, 3%));
+      border-color: gtkalpha($header_border, 0.65);
     }
 
     &.flat {
@@ -2298,7 +2297,7 @@ headerbar {
       &.end:dir(rtl) {
         margin-right: $container_padding + 2px;
       }
-  
+
       &.start:dir(rtl),
       &.end:dir(ltr) {
         margin-left: $container_padding + 2px;
@@ -2308,7 +2307,7 @@ headerbar {
     headerbar.titlebar & {
       border-spacing: $container_padding;
     }
-  
+
     button {
       > image {
         padding: 0;
@@ -2316,7 +2315,7 @@ headerbar {
         background-color: transparent;
         background-image: none;
       }
-  
+
       &.close, &.maximize, &.minimize {
         min-width: 16px;
         min-height: 16px;
@@ -2324,15 +2323,15 @@ headerbar {
         background-position: center;
         background-repeat: no-repeat;
         background-size: 16px 16px;
-  
+
         &, &:hover, &:focus, &:active, &:backdrop {
           @include button(undecorated);
           color: transparent;
         }
-  
+
         &:backdrop { opacity: 1; }
       }
-  
+
       // Load png assets for each button, Fix the Chrome window restore button bug
       @each $k in ('close', 'maximize', 'minimize') {
         @each $l, $m in ('',''), (':backdrop','-backdrop'), (':backdrop:hover','-backdrop-hover'), (':hover','-hover'), (':active','-active') {
@@ -2493,7 +2492,7 @@ treeview.view {
     color: $disabled_fg_color;
 
     &:selected {
-      color: rgba($selected_fg_color, 0.45);
+      color: gtkalpha($selected_fg_color, 0.45);
     }
   }
 
@@ -2556,14 +2555,12 @@ treeview.view {
 
   > header {
     > button {
-      $_column_header_color: mix($fg_color,$base_color,80%);
-
       min-height: if($variant =='light', 24px, 26px);
       min-width: 38px;
       padding: 0 $container_padding;
       font-weight: bold;
 
-      color: $_column_header_color;
+      color: $alt_fg_color;
       background-color: $base_color;
       background-image: none;
       box-shadow: none;
@@ -2571,8 +2568,8 @@ treeview.view {
       border-radius: 0;
       border-image: linear-gradient(to bottom,
                                     $base_color 20%,
-                                    transparentize(if($variant == 'light', black, white), 0.89) 20%,
-                                    transparentize(if($variant == 'light', black, white), 0.89) 80%,
+                                    $borders_color 20%,
+                                    $borders_color 80%,
                                     $base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch;
 
       &:hover { color: $selected_bg_color; }
@@ -2620,9 +2617,7 @@ menubar {
   box-shadow: inset 0 -1px $borders_color;
 
   &:backdrop {
-    color: transparentize($header_fg, 0.2);
-    // background-image: none;
-    // background-color: opacify($header_bg_backdrop, 1);
+    color: color-mix(in srgb, $header_fg 70%, $header_bg);
   }
 
   > item {
@@ -2637,7 +2632,7 @@ menubar {
     }
 
     &:disabled {
-      color: transparentize($header_fg, 0.6);
+      color: color-mix(in srgb, $header_fg 50%, $header_bg);
     }
   }
 
@@ -2672,8 +2667,8 @@ popover {
     background-clip: padding-box;
     background-color: $menu_bg;
     box-shadow: 0 3px 6px 0 if($variant=='light', transparentize(black, 0.85), transparentize(black, 0.85)),
-                0 0 0 1px if($variant=='light', rgba($borders_color, 0.03), rgba($dark_borders_color, 0.55));
-    border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
+                0 0 0 1px if($variant=='light', gtkalpha(black, 0.03), $wm_border);
+    border: 1px solid if($variant=='light', gtkalpha(black, 0.2), color-mix(in srgb, white 8%, $menu_bg));
   }
 
   &, &:backdrop {
@@ -2713,6 +2708,7 @@ popover {
       > row {
         padding: $container_padding $container_padding * 2;
         margin: 0;
+        border-radius: $bt_radius;
 
         &:selected {
           color: $selected_fg_color;
@@ -2723,7 +2719,7 @@ popover {
   }
 
   entry {
-    background-color: mix($fg_color, $menu_bg, 5%);
+    background-color: $fill_color;
   }
 
   .osd &,
@@ -2843,7 +2839,7 @@ popover.menu {
     &:focus {
       background-color: transparent;
       color: $fg_color;
-      box-shadow: inset 0 0 0 2px rgba($fg_color, 0.06);
+      box-shadow: inset 0 0 0 2px gtkalpha($fg_color, 0.06);
       transition: none;
     }
 
@@ -2885,7 +2881,7 @@ popover.menu {
 
 %tabs_tab {
   color: $disabled_fg_color;
-  background-color: transparentize($base_color, 1);
+  background-color: transparent;
   border: 1px solid transparent;
   transition: all 150ms ease-out;
   border-radius: 0;
@@ -2894,23 +2890,23 @@ popover.menu {
   box-shadow: none;
 
   &:hover:not(:checked):not(:selected) {
-    color: mix($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%));
+    color: $text_color;
+    border-color: if($variant == 'light', gtkmix($fg_color, $header_bg, 15%), gtkmix($fg_color, $header_bg, 8%));
+    background-color: if($variant == 'light', gtkalpha(white, 0.2), gtkalpha(white, 0.06));
     box-shadow: none;
   }
 
   &:checked, &:selected {
     color: $fg_color;
+    border-color: if($variant == 'light', gtkmix($fg_color, $header_bg, 15%), gtkmix($fg_color, $header_bg, 8%));
     background-color: $header_bg;
-    border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
     box-shadow: none;
   }
 }
 
 %monterey_tab {
   color: $disabled_fg_color;
-  background-color: transparentize($base_color, 1);
+  background-color: transparent;
   border: none;
   transition: all 150ms ease-out;
   border-radius: $bt_radius;
@@ -2919,14 +2915,14 @@ popover.menu {
   box-shadow: none;
 
   &:hover:not(:checked):not(:selected){
-    color: mix($fg_color, $disabled_fg_color, 50%);
-    background-color: rgba($fg_color, 0.06);
+    color: $hint_fg_color;
+    background-color: $fill_color;
     box-shadow: none;
   }
 
   &:checked, &:selected {
     color: $fg_color;
-    background-color: rgba($fg_color, 0.12);
+    background-color: $divider_color;
     box-shadow: none;
   }
 }
@@ -2942,42 +2938,24 @@ notebook {
 
   > header {
     @if $monterey == 'false' {
-      background-color: darken($header_bg, 10%);
+      background-color: color-mix(in srgb, black 6%, $base_color);
       border: none;
+    }
 
-      // Set box-shadow to make the header frame color more easy to see
-      // Set margin to hide the ugly borders around the header
-      &.top {
-        box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color;
-      }
+    &.top {
+      border-bottom: 1px solid $borders_color;
+    }
 
-      &.bottom {
-        box-shadow: inset 0 1px $borders_color, inset 0 -1px $borders_color;
-      }
+    &.bottom {
+      border-top: 1px solid $borders_color;
+    }
 
-      &.right {
-        box-shadow: inset 1px 0 $borders_color, inset -1px 0 $borders_color;
-      }
+    &.right {
+      border-left: 1px solid $borders_color;
+    }
 
-      &.left {
-        box-shadow: inset 1px 0 $borders_color, inset -1px 0 $borders_color;
-      }
-    } @else {
-      &.top {
-        border-bottom: 1px solid $borders_color;
-      }
-
-      &.bottom {
-        border-top: 1px solid $borders_color;
-      }
-
-      &.right {
-        border-left: 1px solid $borders_color;
-      }
-
-      &.left {
-        border-right: 1px solid $borders_color;
-      }
+    &.left {
+      border-right: 1px solid $borders_color;
     }
 
     button.flat.toggle.popup {
@@ -3003,7 +2981,6 @@ notebook {
       // sizing and borders
       &.#{$_pos} {
         @if $monterey == 'false' {
-          margin-#{$_pos}: -1px;
           padding: 0;
         } @else {
           padding: $container_padding / 2;
@@ -3063,15 +3040,17 @@ notebook {
     > tabs > arrow {
       color: $disabled_fg_color;
 
-      &:hover { color: mix($fg_color, $disabled_fg_color, 50%); }
+      &:hover { color: $hint_fg_color; }
       &:active { color: $fg_color; }
-      &:disabled { color: transparentize($disabled_fg_color,0.3); }
+      &:disabled { color: $alt_disabled_fg_color; }
     }
 
     @if $monterey == 'false' {
       &.top,
       &.bottom {
         > tabs > tab {
+          border-top: none;
+          border-bottom: none;
           &:first-child { border-left: none; }
           &:last-child { border-right: none; }
         }
@@ -3080,6 +3059,8 @@ notebook {
       &.left,
       &.right {
         > tabs > tab {
+          border-left: none;
+          border-right: none;
           &:first-child { border-top: none; }
           &:last-child { border-bottom: none; }
         }
@@ -3111,12 +3092,12 @@ notebook {
 
         &:hover {
           color: $fg_color;
-          background-color: rgba($fg_color, 0.1);
+          background-color: gtkalpha($fg_color, 0.1);
         }
 
         &:active {
-          color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
-          background-color: rgba($fg_color, 0.2);
+          color: $text_color;
+          background-color: gtkalpha($fg_color, 0.2);
         }
       }
     }
@@ -3126,7 +3107,6 @@ notebook {
 //
 // Scrollbars
 //
-$_scrollbar_bg_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
 
 scrollbar {
   $_slider_min_length: 40px;
@@ -3163,13 +3143,13 @@ scrollbar {
       border: 4px solid transparent;
       border-radius: $container_padding * 2;
       background-clip: padding-box;
-      background-color: mix($fg_color, $bg_color, 40%);
+      background-color: color-mix(in srgb, $fg_color 40%, $bg_color);
       box-shadow: none;
       outline: none;
       transition: all 200ms linear;
 
-      &:hover { background-color: mix($fg_color, $bg_color, 30%); }
-      &:hover:active { background-color: mix($fg_color, $bg_color, 50%); }
+      &:hover { background-color: color-mix(in srgb, $fg_color 30%, $bg_color); }
+      &:hover:active { background-color: color-mix(in srgb, $fg_color 50%, $bg_color);}
       &:disabled { background-color: transparent; }
     }
   }
@@ -3209,7 +3189,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: color-mix(in srgb, $fg_color 70%, $bg_color);
         border: none;
       }
 
@@ -3239,9 +3219,9 @@ scrollbar {
 // Switches
 //
 
-$switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%);
-$switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%);
-$switch_checked_backdrop_image: linear-gradient(0deg, rgba($fg_color, 0.45) 0%, rgba($fg_color, 0.55) 100%);
+$switch_image: linear-gradient(0deg, gtkalpha($fg_color, 0.25) 0%, gtkalpha($fg_color, 0.35) 100%);
+$switch_disabled_image: linear-gradient(0deg, gtkalpha($fg_color, 0.1) 0%, gtkalpha($fg_color, 0.15) 100%);
+$switch_checked_backdrop_image: linear-gradient(0deg, gtkalpha($fg_color, 0.45) 0%, gtkalpha($fg_color, 0.55) 100%);
 
 $switch_checked_image: '';
 $switch_checked_disabled_image: '';
@@ -3265,7 +3245,7 @@ $switch_animation: switch_ripple_effect 0.1s cubic-bezier(0, 0, 0.2, 1);
 
   to {
     background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center,
-                                      rgba($selected_bg_color, 0.75) 100%,
+                                      gtkalpha($selected_bg_color, 0.75) 100%,
                                       transparent 0%);
   }
 }
@@ -3302,7 +3282,7 @@ switch {
     transition: background-image 0.1s, box-shadow 0;
 
     @if $gnome_version == 'old' {
-      background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%);
+      background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, gtkalpha($selected_bg_color, 0.75) 100%, transparent 0%);
     } @else {
       background-image: $switch_checked_image;
     }
@@ -3368,7 +3348,7 @@ checkbutton, radiobutton {
     padding: 2px 0;
     outline-offset: 0;
 
-    &:hover { color: darken($fg_color, 15%); }
+    &:hover { color: $fg_color; }
     &:disabled { color: $disabled_fg_color; }
   }
 
@@ -3383,8 +3363,10 @@ $check_radio_image: linear-gradient(0deg, #6a6a6a 0%, #545454 100%);
 $check_radio_checked_image: '';
 
 @if $gnome_version == 'old' {
+  $check_radio_image: linear-gradient(0deg, #6a6a6a 0%, #545454 100%);
   $check_radio_checked_image: linear-gradient(0deg, darken($selected_bg_color, 5%) 0%, lighten($selected_bg_color, 5%) 100%);
 } @else {
+  $check_radio_image: linear-gradient(0deg, gtkmix(white, $bg_color, 27%) 0%, gtkmix(white, $bg_color, 17%) 100%);
   $check_radio_checked_image: linear-gradient(0deg, color-mix(in srgb, black 5%, $selected_bg_color) 0%, color-mix(in srgb, white 5%, $selected_bg_color) 100%);
 }
 
@@ -3403,7 +3385,7 @@ radio {
 
   @if $variant == 'dark' {
     background-image: $check_radio_image;
-    box-shadow: inset 0 1px $highlight_color, 0 1px 2px rgba(black, 0.25);
+    box-shadow: inset 0 1px $highlight_color, 0 1px 2px rgba(black, 0.25), 0 0 0 1px $check_radio_border;
 
     &:hover {
       box-shadow: inset 0 1px $highlight_color;
@@ -3531,7 +3513,7 @@ scale {
     border-radius: $bt_radius;
     background-color: $_scale_trough_bg;
 
-    &:disabled { background-color: rgba($_scale_trough_bg, 0.12); }
+    &:disabled { background-color: gtkalpha($_scale_trough_bg, 0.12); }
 
     //OSD troughs
     .osd & {
@@ -3551,7 +3533,7 @@ scale {
       > trough > highlight {
         background-color: $selected_fg_color;
 
-        &:disabled { background-color: rgba($selected_fg_color, 0.5); }
+        &:disabled { background-color: gtkalpha($selected_fg_color, 0.5); }
       }
 
       &:disabled { background-color: transparentize(black, 0.9); }
@@ -3563,20 +3545,20 @@ scale {
     border-radius: $bt_radius;
     background-color: $selected_bg_color;
 
-    &:disabled { background-color: rgba($selected_bg_color, 0.55); }
+    &:disabled { background-color: gtkalpha($selected_bg_color, 0.55); }
   }
 
   // this is another differently styled part of the trough, the most relevant use case is for example
   // in media player to indicate how much video stream as been cached
   > trough > fill {
     border-radius: $bt_radius;
-    background-color: rgba($selected_bg_color, 0.5);
+    background-color: gtkalpha($selected_bg_color, 0.5);
 
     &:disabled { background-color: transparent; }
   }
 
   > trough > slider {
-    $_slider_border: if($variant=='light', transparentize(darken($button_border, 0%), 0), transparentize($button_border, 0));
+    $_slider_border: $button_border;
 
     background-color: $selected_fg_color;
     border: 1px solid $_slider_border;
@@ -3600,8 +3582,8 @@ scale {
     }
 
     &:disabled {
-      background-color: darken($selected_fg_color, 5%);
-      border-color: darken($_slider_border, 5%);
+      background-color: gtkalpha($selected_fg_color, 0.5);
+      border-color: gtkalpha($_slider_border, 0.5);
       box-shadow: none;
     }
 
@@ -3614,16 +3596,16 @@ scale {
 
       @if $gnome_version == 'old' {
         &:hover {
-          background-color: mix($selected_fg_color, $selected_bg_color, 85%);
-          border-color: mix($selected_fg_color, $selected_bg_color, 85%);
+          background-color: gtkmix($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%);
-          border-color: mix($selected_fg_color, $selected_bg_color, 50%);
+          background-color: gtkmix($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%);
-          border-color: mix($selected_fg_color, $selected_bg_color, 55%);
+          background-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
+          border-color: gtkmix($selected_fg_color, $selected_bg_color, 55%);
         }
       } @else {
         &:hover {
@@ -3801,7 +3783,7 @@ scale {
 progressbar {
   padding: 0;
   font-size: smaller;
-  color: transparentize($fg_color, 0.3);
+  color: gtkalpha($fg_color, 0.7);
   font-feature-settings: "tnum";
 
   // sizing
@@ -3868,7 +3850,7 @@ progressbar {
     min-width: $container_padding - 2px;
     border: none;
     border-radius: $bt_radius;
-    background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
+    background-color: if($variant == 'light', $button_border, transparentize(black, 0.8));
 
     row:selected &,
     infobar & { background-color: transparentize(black, 0.8); }
@@ -3893,7 +3875,7 @@ levelbar {
     border: none;
     padding: $container_padding / 2;
     border-radius: $bt_radius;
-    background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
+    background-color: if($variant == 'light', $button_border, transparentize(black, 0.8));
   }
 
   &.horizontal.discrete block { margin: 0 1px; }
@@ -3917,8 +3899,8 @@ levelbar {
     background-color: $success_color;
   }
   block.empty {
-    background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
-    border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
+    background-color: if($variant=='light', gtkalpha($fg_color, 0.2), $base_color);
+    border-color: if($variant=='light', gtkalpha($fg_color, 0.2), $base_color);
   }
 }
 
@@ -4048,7 +4030,7 @@ scrolledwindow {
 
   > junction { // the small square between two scrollbars
     border: none;
-    background-color: $_scrollbar_bg_color;
+    background-color: $fill_color;
 
     // &:dir(rtl) { border-style: solid solid none none; }
   }
@@ -4482,7 +4464,7 @@ row.expander {
   }
 
   list.nested {
-    background-color: rgba($base_color, 0.5);
+    background-color: gtkalpha($base_color, 0.5);
     color: inherit;
   }
 
@@ -4710,8 +4692,7 @@ list.boxed-list-separate {
   padding: $container_padding;
   margin: 6px 16px 16px 16px;
   color: $fg_color;
-  background-color: rgba($header_bg, 0.85);
-  // background-image: linear-gradient(0deg, $bg_color 0%, $bg_color 85%, darken($bg_color, 5%) 95%, darken($bg_color, 15%) 100%);
+  background-color: gtkalpha($header_bg, 0.85);
   border-radius: $wm_radius;
   border: none;
   box-shadow: 0 5px 15px 0 rgba(black, 0.25),
@@ -4744,7 +4725,7 @@ expander {
   -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
 
   &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
-  &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
+  &:hover { color: $alt_fg_color; } //only lightens the arrow
   &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
   &:disabled { filter: opacity($disabled_opacity); }
 }
@@ -4794,7 +4775,7 @@ calendar {
       background: none;
       border-radius: 0;
 
-      &:hover { background-color: rgba($fg_color, 0.1); }
+      &:hover { background-color: gtkalpha($fg_color, 0.1); }
       &:active { background-color: $selected_bg_color; }
     }
 
@@ -4805,7 +4786,7 @@ calendar {
 
   > grid {
     > label.today {
-      background-color: rgba($fg_color, 0.15);
+      background-color: gtkalpha($fg_color, 0.15);
       border-radius: 3px;
 
       &:selected {
@@ -4836,7 +4817,7 @@ calendar {
 // Dialogs
 //
 
-$messagedialog_bg: if($trans == 'true', rgba($bg_color, 0.95), $bg_color);
+$messagedialog_bg: if($trans == 'true', gtkalpha($bg_color, 0.95), $bg_color);
 
 window.dialog.message { // Message Dialog styling
   &.background { background-color: $messagedialog_bg; }
@@ -5041,28 +5022,28 @@ stacksidebar {
 
     &:hover,
     &:focus-visible:focus-within {
-      background-color: rgba($fg_color, 0.1);
+      background-color: gtkalpha($fg_color, 0.1);
     }
 
     &:active {
       color: $fg_color;
-      background-color: rgba($fg_color, 0.2);
+      background-color: gtkalpha($fg_color, 0.2);
     }
 
     &: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.2);
+        background-color: gtkalpha($fg_color, 0.2);
       }
 
       &:focus-visible:focus-within {
         outline: none;
         color: $fg_color;
-        background-color: rgba($fg_color, 0.15);
+        background-color: gtkalpha($fg_color, 0.15);
 
-        &:hover { background-color: rgba($fg_color, 0.2); }
+        &:hover { background-color: gtkalpha($fg_color, 0.2); }
       }
     }
 
@@ -5294,7 +5275,7 @@ tooltip {
   &.background {
     // 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: rgba($osd_bg_color, 0.96);
+    background-color: gtkalpha($osd_bg_color, 0.96);
     background-clip: padding-box;
     border-radius: $wm_radius;
     color: $osd_fg_color;
@@ -5442,7 +5423,7 @@ colorchooser .popover.osd { border-radius: $bt_radius; }
     padding: 0;
 
     &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
-    &:disabled { background-color: if($variant=='light', transparent, mix($bg_color, $base_color, 60%)); }
+    &:disabled { background-color: if($variant=='light', transparent, color-mix(in srgb, $bg_color 60%, $base_color)); }
   }
 
   > rubberband { @extend %rubberband; }
@@ -5597,9 +5578,9 @@ popover.emoji-picker {
 }
 
 .emoji-searchbar {
-  padding: 6px;
-  border-spacing: 6px;
-  border-bottom: 1px solid $borders_color;
+  padding: $container_padding;
+  border-spacing: $container_padding;
+  // border-bottom: 1px solid $borders_color;
 
   entry { margin: 0; }
 }
@@ -5608,21 +5589,20 @@ popover.emoji-picker {
   padding: $container_padding / 2;
   border-spacing: 0;
   border-top: 1px solid $borders_color;
+
+  button.image-button {
+    border-radius: $bt_radius;
+  }
 }
 
 // mimic tab style
 button.emoji-section {
-  margin: $container_padding / 2 1px;
+  margin: 0;
   padding: 1px $container_padding * 2;
   border-radius: $bt_radius;
   border: none;
   outline-offset: -2px;
   box-shadow: none;
-  transition: none;
-  animation: none;
-
-  &:first-child { margin-left: $container_padding; }
-  &:last-child { margin-right: $container_padding; }
 }
 
 popover.emoji-picker emoji {
diff --git a/src/sass/gtk/_drawing-3.0.scss b/src/sass/gtk/_drawing-3.0.scss
index 833eda5e..cd685c4c 100644
--- a/src/sass/gtk/_drawing-3.0.scss
+++ b/src/sass/gtk/_drawing-3.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: gtkalpha($entry_bg, 0.02);
   }
 
   @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);
-    background-color: rgba($entry_bg, 0.02);
+    color: gtkalpha($header_fg, 0.35);
+    background-color: gtkalpha($entry_bg, 0.02);
   }
 
   @else if $t==osd {
@@ -114,7 +114,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);
   }
 }
 
@@ -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;
     }
   }
 
@@ -170,7 +170,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;
   }
 
@@ -181,7 +181,7 @@
     label, & { color: transparentize($selected_fg_color, 0.45); }
 
     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;
@@ -261,7 +261,7 @@
   // hovered header-bar button
   //
     color: darken($header_fg, 2%);
-    background-color: rgba($header_fg, 0.1);
+    background-color: gtkalpha($header_fg, 0.1);
     background-image: none;
     box-shadow: none;
   }
@@ -271,7 +271,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;
   }
@@ -281,7 +281,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;
   }
@@ -290,7 +290,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;
@@ -300,7 +300,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;
@@ -428,13 +428,13 @@
                                   $_position, 0,
                                   $_position, 0.5,
                                   to($_small_gradient_color),
-                                  to(rgba($_small_gradient_color, 0)));
+                                  to(gtkalpha($_small_gradient_color, 0)));
 
   $_big_gradient: -gtk-gradient(radial,
                                 $_position, 0,
                                 $_position, 0.6,
-                                from(rgba($_big_gradient_color, 0.07)),
-                                to(rgba($_big_gradient_color, 0)));
+                                from(gtkalpha($_big_gradient_color, 0.07)),
+                                to(gtkalpha($_big_gradient_color, 0)));
 
   @if $t==normal {
     background-image: $_small_gradient, $_big_gradient;
diff --git a/src/sass/gtk/_drawing-4.0.scss b/src/sass/gtk/_drawing-4.0.scss
index f9b3e008..ed8ed18d 100644
--- a/src/sass/gtk/_drawing-4.0.scss
+++ b/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: gtkalpha($entry_bg, 0.02);
   }
 
   @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);
-    background-color: rgba($entry_bg, 0.02);
+    color: gtkalpha($header_fg, 0.35);
+    background-color: gtkalpha($entry_bg, 0.02);
   }
 
   @else if $t==osd {
@@ -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: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
+    background-color: gtkalpha(currentColor, 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;
-    background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
+    color: if($variant=='light', $light_fg_color, $fg_color);
+    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;
-    background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
+    color: if($variant=='light', $light_fg_color, $fg_color);
+    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%);
-    background-color: rgba($header_fg, 0.1);
+    color: $header_fg;
+    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;
diff --git a/src/sass/gtk/apps/_budgie.scss b/src/sass/gtk/apps/_budgie.scss
index 39052cb1..5c097e6c 100644
--- a/src/sass/gtk/apps/_budgie.scss
+++ b/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; } }
             }
           }
         }
diff --git a/src/sass/gtk/apps/_elementary.scss b/src/sass/gtk/apps/_elementary.scss
index d1735ca3..6e101133 100644
--- a/src/sass/gtk/apps/_elementary.scss
+++ b/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%));
     }
   }
 
diff --git a/src/sass/gtk/apps/_gnome-3.22.scss b/src/sass/gtk/apps/_gnome-3.22.scss
index 0d226d26..4a23c978 100644
--- a/src/sass/gtk/apps/_gnome-3.22.scss
+++ b/src/sass/gtk/apps/_gnome-3.22.scss
@@ -40,12 +40,12 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
   $nautilus_actionbar_image: linear-gradient(90deg, rgba($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));
@@ -219,7 +219,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
           &: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; }
           }
@@ -1876,7 +1876,7 @@ popover.background:not(.emoji-picker) > box.vertical > scrolledwindow {
       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); }
@@ -1892,7 +1892,7 @@ popover.background:not(.emoji-picker) > box.vertical > stack > box.vertical {
     > list.background > row.activatable.bookmarks-row {
       background-color: rgba($base_color, 0.35);
       color: rgba($fg_color, 0.85);
-      border-bottom: 1px dashed rgba($borders_color, 0.05);
+      border-bottom: 1px dashed gtkalpha(currentColor, 0.05);
       padding: 6px;
 
       &:hover,
@@ -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 {
diff --git a/src/sass/gtk/apps/_gnome-40.0.scss b/src/sass/gtk/apps/_gnome-40.0.scss
index 237ff66f..6f210d6e 100644
--- a/src/sass/gtk/apps/_gnome-40.0.scss
+++ b/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' {
@@ -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;
@@ -289,7 +289,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 +298,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; }
diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss
index 48cd6176..180c1e26 100644
--- a/src/sass/gtk/apps/_libadwaita.scss
+++ b/src/sass/gtk/apps/_libadwaita.scss
@@ -418,15 +418,13 @@ tabbar {
     .box {
       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%));
-        border-bottom: none;
-        background-color: darken($header_bg, 10%);
+        background-color: color-mix(in srgb, black 15%, $header_bg);
       } @else {
-        box-shadow: none;
-        border-bottom: 1px solid $borders_color;
         padding: $container_padding / 2 0;
         background-color: $header_bg;
       }
@@ -482,6 +480,7 @@ tabbar {
       @if $monterey == 'false' {
         @extend %tabs_tab;
         border-top: none;
+        border-bottom: none;
       } @else {
         @extend %monterey_tab;
       }
@@ -507,12 +506,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%));
-          background-color: rgba($borders_color, 0.2);
+          color: $text_color;
+          background-color: gtkalpha(currentColor, 0.2);
         }
       }
     }
@@ -934,7 +933,7 @@ toolbarview {
     padding: 0;
     border-spacing: 0;
     box-shadow: inset 0 1px $borders_color;
-    background-color: darken($bg_color, 3%);
+    background-color: color-mix(in srgb, black 5%, $bg_color);
     color: $text_color;
 
     &:backdrop {