Fixed #1283

update
Fixed #1265
2025-06-04 13:13:04 +00:00 · 2025-05-14 11:55:46 +08:00 · 2025-04-25 00:03:35 +08:00 · 2025-04-20 22:28:50 +08:00 · 2025-04-14 08:32:34 +08:00 · 2025-04-12 20:32:28 +08:00
56 changed files with 1097 additions and 781 deletions
--- 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
--- a/libs/lib-core.sh
+++ b/libs/lib-core.sh
@ -259,7 +259,6 @@ if [[ -d "${WHITESUR_TMP_DIR}" ]]; then

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

--- a/libs/lib-install.sh
+++ b/libs/lib-install.sh
@ -77,7 +77,11 @@ prepare_deps() {
    prompt -w "DEPS: Your system clock is wrong"
    prompt -i "DEPS: Updating your system clock..."
    # Add "+ 25" here to accomodate potential time delay by sudo prompt
-    sudo date -s "@$((remote_time + 25))"; sudo hwclock --systohc
+    sudo date -s "@$((remote_time + 25))"
+
+    if has_command hwclock; then
+      sudo hwclock --systohc
+    fi
  fi
 }

@ -536,6 +540,11 @@ config_gtk4() {
 install_libadwaita() {
  color="${colors[0]}"
  opacity="${opacities[0]}"
+  alt="${alts[0]}"
+  theme="${themes[0]}"
+  scheme="${schemes[0]}"
+
+  install_theme_deps

  gtk_base && config_gtk4 "${color}" "${opacity}" "${alt}" "${theme}" "${scheme}"
 }
@ -904,6 +913,7 @@ gtk_base() {

  if [[ "${scheme}" == 'nord' ]]; then
    sed $SED_OPT "/\$scheme/s/standard/nord/"                                   "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
+    accent_type="fixed"
  fi

  if [[ "${GNOME_VERSION}" -ge '47-0' && "${libadwaita}" == 'true' ]]; then
@ -934,6 +944,10 @@ shell_base() {
 customize_theme() {
  cp -rf "${THEME_SRC_DIR}/sass/_theme-options"{".scss","-temp.scss"}

+  if [[ "${GNOME_VERSION}" -ge '47-0' ]]; then
+    sed $SED_OPT "/\$shell_version/s/old/new/"                                  "${THEME_SRC_DIR}/sass/_theme-options-temp.scss"
+  fi
+
  # Darker dark colors
  if [[ "${darker}" == 'true' ]]; then
    prompt -s "Changing dark color style to darker one ...\n"
--- a/make-release.sh
+++ b/make-release.sh
@ -62,8 +62,8 @@ echo "Nautilus style   : ${nautilus_style}" >> ${RELEASE_DIR}/release-info.txt
 #install && compress
 #prompt -s "Compress Gnome${RELEASE_VERSION} version finished!"; echo

-GNOME_VERSION="47-0"
-RELEASE_VERSION="47.0"
+GNOME_VERSION="48-0"
+RELEASE_VERSION="48.0"
 install && compress
 prompt -i "Compress ${THEME_NAME} themes finished!\n"
 release_info
--- a/release/WhiteSur-Dark-nord.tar.xz
+++ b/release/WhiteSur-Dark-nord.tar.xz
--- a/release/WhiteSur-Dark-solid-nord.tar.xz
+++ b/release/WhiteSur-Dark-solid-nord.tar.xz
--- a/release/WhiteSur-Dark-solid.tar.xz
+++ b/release/WhiteSur-Dark-solid.tar.xz
--- a/release/WhiteSur-Dark.tar.xz
+++ b/release/WhiteSur-Dark.tar.xz
--- a/release/WhiteSur-Light-nord.tar.xz
+++ b/release/WhiteSur-Light-nord.tar.xz
--- a/release/WhiteSur-Light-solid-nord.tar.xz
+++ b/release/WhiteSur-Light-solid-nord.tar.xz
--- a/release/WhiteSur-Light-solid.tar.xz
+++ b/release/WhiteSur-Light-solid.tar.xz
--- a/release/WhiteSur-Light.tar.xz
+++ b/release/WhiteSur-Light.tar.xz
--- a/release/release-info.txt
+++ b/release/release-info.txt
@ -1,6 +1,6 @@
-VERSION: (GNOME-SHELL) 47.0
+VERSION: (GNOME-SHELL) 48.0

-RELEASE TIME: Wed Feb 26 11:38:34 AM CST 2025
+RELEASE TIME: Sun Apr  6 06:14:30 PM CST 2025

 --->>> GTK | GNOME Shell | Cinnamon | Metacity | XFWM | Plank <<<---
 Color variants   : Dark;Light
--- 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})");
 }

@ -40,15 +40,15 @@ $hint_fg_color:                     if($variant == 'light', #565656, #999999);
 }

 //insensitive state derived colors
-$disabled_fg_color:                 if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65));
-$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_fg_color:                 if($variant == 'light', rgba($fg_color, 0.45), rgba($fg_color, 0.35));
+$alt_disabled_fg_color:             if($variant == 'light', rgba($alt_fg_color, 0.45), rgba($alt_fg_color, 0.35));
+$disabled_bg_color:                 if($variant == 'light', 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);
@ -100,8 +100,8 @@ $selected_borders_color:            darken($selected_bg_color, 10%);
 $borders_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
 $light_borders_color:               if($variant == 'light', rgba(black, 0.08), rgba(white, 0.10));
 $dark_borders_color:                if($variant == 'light', rgba(black, 0.08), rgba(black, 0.15));
-$solid_borders_color:               if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 12%));
-$dark_solid_borders_color:          if($variant == 'light', mix(black, $base_color, 12%), mix(black, $base_color, 15%));
+$solid_borders_color:               if($variant == 'light', gtkmix(black, $base_color, 12%), gtkmix(white, $base_color, 12%));
+$dark_solid_borders_color:          if($variant == 'light', gtkmix(black, $base_color, 12%), gtkmix(white, $base_color, 15%));
 $highlight_color:                   if($variant == 'light', rgba(white, 0.15), rgba(white, 0.1));

 // Gnome-shell background colors
@ -122,7 +122,7 @@ $link_color:                        if($scheme == 'nord', #5e81ac, #3484e2);
 $link_visited_color:                if($variant == 'light', lighten($text_color, 10%), darken($text_color, 15%));

 // Theme colors
-$selection_mode_bg:                 lighten($selected_bg_color, 15%);
+$selection_mode_bg:                 gtkmix(white, $selected_bg_color, 25%);
 $warning_color:                     if($scheme == 'nord', $nord_color_orange, $theme_color_orange);
 $error_color:                       if($scheme == 'nord', $nord_color_red, $theme_color_red);
 $success_color:                     if($scheme == 'nord', $nord_color_green, $theme_color_green);
@ -143,13 +143,14 @@ $header_fg:                         if($variant == 'light', #575757, #FDFDFD);
  $header_fg:                       if($variant == 'light', #57647f, #f8f9fc);
 }

-$dark_header_bg:                    if($trans == 'true', rgba($base_color, 0.96), $base_color);
-$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, 45%));

 // Sidebar colors
 $dark_sidebar_bg: white;
-$opacity: if($gnome_version == 'new', 0.92, 0.95);
+$opacity: 0.96;

@if $trans=='true' {
  @if $variant=='light' {
@ -174,42 +175,45 @@ $opacity: if($gnome_version == 'new', 0.92, 0.95);
 }

 $dark_sidebar_fg:                   $text_color;
-$dark_sidebar_border:               if($variant == 'light', $solid_borders_color, $header_border);
-$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
 $osd_fg_color:                      if($scheme == 'nord', #dadada, #d3d7df);
-$osd_bg_color:                      if($trans == 'true', rgba(if($darker == 'true', #1a1a1a, #2a2a2a), $opacity), if($darker == 'true', #1a1a1a, #2a2a2a));
+$solid_osd_bg_color:                if($darker == 'true', #1a1a1a, #2a2a2a);

@if $scheme == 'nord' {
-  $osd_bg_color:                    if($trans == 'true', rgba(if($darker == 'true', #16191e, #222730), $opacity), if($darker == 'true', #16191e, #222730));
+  $solid_osd_bg_color:              if($darker == 'true', #16191e, #222730);
 }

-$osd_button_bg:                     rgba(lighten($osd_bg_color, 22%), $opacity);
+$osd_bg_color:                      if($trans == 'true', rgba($solid_osd_bg_color, $opacity), $solid_osd_bg_color);
+
+$osd_button_bg:                     rgba(lighten($solid_osd_bg_color, 22%), $opacity);
 $osd_button_border:                 $dark_borders_color;
-$osd_entry_bg:                      rgba(lighten($osd_bg_color, 22%), $opacity);
+$osd_entry_bg:                      rgba(lighten($solid_osd_bg_color, 22%), $opacity);
 $osd_entry_border:                  $dark_borders_color;
-$osd_disabled_bg_color:             darken($osd_bg_color, 3%);
-$osd_disabled_fg_color:             rgba($osd_fg_color, 0.35);
+$osd_disabled_bg_color:             darken($solid_osd_bg_color, 3%);
+$osd_disabled_fg_color:             rgba($solid_osd_bg_color, 0.35);
 $osd_borders_color:                 $dark_borders_color;

 // Menu colors
 $menu_bg:                           if($variant == 'light', $base_color, $bg_color);
 $menu_bd:                           if($variant == 'light', rgba(black, 0.08), rgba(white, 0.07));

-$menu_opacity: 0.96;
-
@if $trans == 'true' {
-  $menu_bg:                         if($variant == 'light', rgba($base_color, $menu_opacity), rgba($bg_color, $menu_opacity));
+  $menu_bg:                         if($variant == 'light', rgba($base_color, $opacity), rgba($bg_color, $opacity));
 }

+$popover_opacity:                   if($trans == 'false', 1, if($shell_version == 'new', 0.92, 0.96));
+$popover_bg_color:                  if($variant == 'light', rgba($bg_color, $popover_opacity), rgba($base_color, $popover_opacity));
+
 $submenu_bg_color:                  if($variant == 'light', rgba(white, 1), rgba(white, 0.1));

@if $trans=='true' {
@ -269,14 +273,12 @@ $dash_bg:                           if($variant == 'light', rgba(#d1d1d1, $panel
 }

 // Entry colors
-$entry_bg:                          if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
-$entry_shell_bg:                    if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1));
+$entry_bg:                          if($variant=='light', rgba(black, 0.05), rgba(white, 0.05));
 $entry_border:                      $borders_color;
-$entry_highlight:                   rgba($selection_mode_bg, 0.75);
+$entry_highlight:                   gtkalpha($selection_mode_bg, 0.75);

 // Button colors
 $button_bg:                         if($variant == 'light', white, #656565);
-$button_shell_bg:                   if($variant == 'light', mix(black, $dialog_bg_color, 6%), mix(white, $dialog_bg_color, 6%));

@if $scheme == 'nord' {
  $button_bg:                       if($variant == 'light', #fbfcfd, #556075);
@ -317,4 +319,4 @@ $wm_button_maximize_bg:             if($variant == 'light', #28d33f, #59c837);
 $wm_button_maximize_hover_bg:       if($variant == 'light', #28d33f, #59c837);
 $wm_button_maximize_active_bg:      if($variant == 'light', #20a932, #47a02c);
 $wm_button_maximize_border:         if($variant == 'light', #20a932, #47a02c);
-$wm_icon_maximize_bg:               if($variant == 'light', #14691f, #2c641b);
+$wm_icon_maximize_bg:               if($variant == 'light', #14691f, #2c641b);
--- a/src/sass/_theme-options.scss
+++ b/src/sass/_theme-options.scss
@ -37,3 +37,6 @@ $darker: 'false';

 // GDM login dialog scale
 $scale: 'default';
+
+// gnome-shell version
+$shell_version: 'old';
--- a/src/sass/cinnamon/_common.scss
+++ b/src/sass/cinnamon/_common.scss
@ -5,9 +5,9 @@ $asset_path: assets;
 //
 $font-size: 9;
 $font-family: Futura Bk bt, sans, Sans-Serif;
-$_bubble_bg_color: opacify($osd_bg_color,0.25);
+$_bubble_bg_color: transparentize($solid_osd_bg_color, 0.75);
 $_bubble_fg_color: $osd_fg_color;
-$_bubble_borders_color: transparentize($osd_fg_color,0.8);
+$_bubble_borders_color: transparentize($osd_fg_color, 0.8);

 /* General Typography */
 %large_title {
@ -591,7 +591,7 @@ StScrollBar {
 }

 .expo-background {
-  background-color: opacify($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
 }

 .workspace {
@ -2217,7 +2217,7 @@ StScrollBar {
  .slider {
    height: 0.5em;
    padding: 0;
-    border: 0px solid darken($osd_bg_color, 8%);
+    border: 0px solid darken($solid_osd_bg_color, 8%);
    border-bottom: 1px;
    -slider-height: 0.5em;
    -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
--- 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: rgba($entry_bg, 0.45);
  }

  @if $t==osd {
@ -50,7 +50,7 @@

  @if $t==osd-insensitive {
    color: transparentize($osd_fg_color, 0.45);
-    background-color: transparentize($osd_entry_bg, 0.15);
+    background-color: rgba($osd_entry_bg, 0.85);
    box-shadow: inset 0 2px 4px transparentize(black, 0.95);
  }
 }
@ -76,21 +76,21 @@
    color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
    border: 1px solid $button_borders;
    background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
-    box-shadow: inset 0 1px rgba($button_highlight, 0.12);
+    box-shadow: inset 0 1px rgba(white, 0.12);
  }

  @else if $t==focus {
    color: $fg_color;
    background-color: $button_bg;
    border: 1px solid $selected_bg_color;
-    box-shadow: inset 0 1px rgba($button_highlight, 0.12);
+    box-shadow: inset 0 1px rgba(white, 0.12);
  }

  @else if $t==focus-hover {
    color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
    background-color: if($variant=='light', #ffffff, lighten($button_bg, 3%));
    border: 1px solid $selected_bg_color;
-    box-shadow: inset 0 1px rgba($button_highlight, 0.12);
+    box-shadow: inset 0 1px rgba(white, 0.12);
  }

  @else if $t==active {
@ -132,7 +132,7 @@

  @else if $t==osd-hover {
    color: $osd_fg_color;
-    background-color: opacify(lighten($osd_button_bg, 7%), 0.1);
+    background-color: rgba(mix($osd_fg_color, $osd_button_bg, 7%), 0.1);
  }

  @else if $t==osd-active {
@ -142,6 +142,6 @@

  @else if $t==osd-insensitive {
    color: $osd_disabled_fg_color;
-    background-color: transparentize($osd_button_bg, 0.15);
+    background-color: rgba($osd_button_bg, 0.85);
  }
 }
--- a/src/sass/gnome-shell/_common.scss
+++ b/src/sass/gnome-shell/_common.scss
@ -23,11 +23,33 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
 * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
 */

-@if $gnome_version == 'new' and $accent_type == 'default' {
+// reset colors
+
+@if $shell_version == 'new' and $accent_type == 'default' {
  $selected_bg_color: -st-accent-color;
  $primary_color: -st-accent-color;
 }

+@if $trans == 'true' {
+  $menu_bg:                         if($variant == 'light', rgba($base_color, $opacity), rgba($bg_color, $opacity));
+  $osd_bg_color:                    rgba($solid_osd_bg_color, $opacity);
+  $dialog_bg_color:                 if($variant == 'light', rgba($bg_color, $opacity), rgba($base_color, $opacity));
+}
+
+$active_color:                      if($variant == 'light', rgba(black, 0.26), rgba(white, 0.2));
+$track_color:                       if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16));
+$visit_color:                       if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12));
+$divider_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1));
+$fill_color:                        if($variant == 'light', rgba(black, 0.06), rgba(white, 0.05));
+
+$menu_bd:                           if($variant == 'light', rgba(black, 0.08), rgba(white, 0.08));
+$borders_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
+$light_borders_color:               if($variant == 'light', rgba(black, 0.08), rgba(white, 0.10));
+$dark_borders_color:                if($variant == 'light', rgba(black, 0.08), rgba(black, 0.15));
+$solid_borders_color:               if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 12%));
+$dark_solid_borders_color:          if($variant == 'light', mix(black, $base_color, 12%), mix(white, $base_color, 15%));
+$highlight_color:                   if($variant == 'light', rgba(white, 0.15), rgba(white, 0.1));
+
 // Stage
 stage {
  @include fontsize($base_font_size);
--- a/src/sass/gnome-shell/_drawing.scss
+++ b/src/sass/gnome-shell/_drawing.scss
@ -102,6 +102,7 @@
  }
 }

+$entry_shell_bg: if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1));

@mixin entry($t, $fc: $primary_color, $tc: $fg_color, $c: $entry_shell_bg) {
 //
@ -115,7 +116,7 @@
    background-color: $c;
    border-radius: $circular_radius;
    border: 2px solid transparent !important;
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
+    box-shadow: inset 0 0 0 1px transparent !important;
    outline: none;
  }

@ -125,8 +126,8 @@
  }

  @if $t == focus {
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
-    @if $gnome_version == 'old' {
+    box-shadow: inset 0 0 0 1px transparent !important;
+    @if $shell_version == 'old' {
      border: 2px solid lighten($fc, 15%) !important;
    } @else {
      border: 2px solid st-lighten($fc, 15%) !important;
@ -199,6 +200,9 @@
  }
 }

+$button_shell: if($variant == 'light', $bg_color, $base_color);
+$button_shell_bg: if($variant == 'light', mix(black, $button_shell, 6%), mix(white, $button_shell, 6%));
+
@mixin button($t, $c: $button_shell_bg, $tc: $fg_color) {
 //
 // button
@ -229,7 +233,7 @@
    border: none;
    text-shadow: none;
    icon-shadow: none;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      background-color: mix($tc, $c, 6%);
    } @else {
      background-color: st-mix($tc, $c, 6%);
@ -241,7 +245,7 @@
    border: none;
    text-shadow: none;
    icon-shadow: none;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      background-color: mix($tc, $c, 12%);
    } @else {
      background-color: st-mix($tc, $c, 12%);
--- a/src/sass/gnome-shell/common/_a11y.scss
+++ b/src/sass/gnome-shell/common/_a11y.scss
@ -4,7 +4,7 @@
  height: 48px;
  border-radius: 24px; // radius equals the size of the box to give us the curve

-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
    background-color: lighten(transparentize($primary_color, 0.7), 30%);
    box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
  } @else {
@ -20,7 +20,7 @@
  -pie-border-width: 3px;
  -pie-border-color: $primary_color;

-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
    -pie-background-color: lighten(transparentize($primary_color, 0.7), 40%);
  } @else {
    -pie-background-color: st-lighten(st-transparentize($primary_color, 0.7), 40%);
--- a/src/sass/gnome-shell/common/_calendar.scss
+++ b/src/sass/gnome-shell/common/_calendar.scss
@ -199,7 +199,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
    }

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

      &:hover, &:focus {
        color: $light_fg_color !important;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
          background-color: lighten($primary_color, 8%);
        } @else {
          background-color: st-lighten($primary_color, 8%);
--- a/src/sass/gnome-shell/common/_corner-ripple.scss
+++ b/src/sass/gnome-shell/common/_corner-ripple.scss
@ -8,7 +8,7 @@ $ripple_size: 50px;
  height: $ripple_size + 2px;
  border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve

-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
    background-color: transparentize($primary_color, 0.65);
    box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
  } @else {
--- a/src/sass/gnome-shell/common/_keyboard.scss
+++ b/src/sass/gnome-shell/common/_keyboard.scss
@ -4,7 +4,7 @@ $key_size: 1.2em;
 $key_border_radius: $base_border_radius + 3px;
 $key_bg_color:  $bg_color;
 // $default_key_bg_color: darken($key_bg_color, 4%);
-$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
+$default_key_bg_color: if($variant=='light', darken($solid_osd_bg_color, 11%), lighten($solid_osd_bg_color, 2%));


 // draw keys using button function
@ -63,7 +63,7 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
    background-color: $primary_color;
    box-shadow: 0 2px 3px rgba(black, 0.15);

-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      &:focus, &:hover { color: $light_fg_color; background-color: lighten($primary_color, 5%); }
      &:checked, &:active { color: $light_fg_color; background-color: darken($primary_color, 10%); }
    } @else {
@ -105,7 +105,7 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 .emoji-panel {
  .keyboard-key:latched {
    background-color: $primary_color;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      border-color: lighten($primary_color, 5%);
    } @else {
      border-color: st-lighten($primary_color, 5%);
--- a/src/sass/gnome-shell/common/_login-dialog.scss
+++ b/src/sass/gnome-shell/common/_login-dialog.scss
@ -1,7 +1,7 @@
 /* Login Dialog */

 #lockDialogGroup {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
  background-image: url("assets/background.png");
  background-size: cover;

@ -324,7 +324,7 @@
    padding: 0 !important;
    border-radius: $circular_radius;
    border: none;
-    background-color: rgba($borders_color, 0.1);
+    background-color: rgba($light_fg_color, 0.1);
    color: $light_fg_color;
  }
 }
--- a/src/sass/gnome-shell/common/_looking-glass.scss
+++ b/src/sass/gnome-shell/common/_looking-glass.scss
@ -2,7 +2,7 @@

 // Dialog
 #LookingGlassDialog {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
  spacing: $base_padding;
  margin: $base_padding;
  padding: 0;
@ -141,7 +141,7 @@

 // Inspector
 #LookingGlassPropertyInspector {
-  background: lighten(rgba($osd_bg_color, 1), 5%);
+  background: lighten($solid_osd_bg_color, 5%);
  border: 1px solid black;
  border-radius: $wm_radius;
  padding: $base_padding * 2;
--- a/src/sass/gnome-shell/common/_misc.scss
+++ b/src/sass/gnome-shell/common/_misc.scss
@ -3,7 +3,7 @@
  border: 1px solid $primary_color;
  border-radius: 3px;

-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
    background-color: transparentize($primary_color, 0.3);
  } @else {
    background-color: st-transparentize($primary_color, 0.3);
@ -73,5 +73,5 @@
 /* Workspace animation */

 .workspace-animation {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
 }
--- a/src/sass/gnome-shell/common/_notifications.scss
+++ b/src/sass/gnome-shell/common/_notifications.scss
@ -7,15 +7,14 @@
  min-height: $menuitem_size * 2;
  margin: 12px 6px 8px;
  border-radius: $wm_radius;
-  color: $fg_color;
-  background-color: $menu_bg;
  border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
  text-shadow: none;
  box-shadow: 0 3px 5px rgba(black, 0.15);

-  &:hover { background-color: rgba($menu_bg, 1); }
-
-  &:focus { background-color: $menu_bg; }
+  &, &:hover, &:focus {
+    color: $fg_color;
+    background-color: $popover_bg_color;
+  }

  .notification-icon { padding: $base_padding; }

@ -34,8 +33,8 @@
  }

  .notification-button {
-    min-height: 40px;
-    padding: 0 16px;
+    min-height: $medium_size;
+    padding: 0 $base_padding * 2;
    background-color: transparent;
    color: $alt_fg_color;
    font-weight: 500;
--- a/src/sass/gnome-shell/common/_popovers.scss
+++ b/src/sass/gnome-shell/common/_popovers.scss
@ -93,7 +93,7 @@ $popop_menuitem_radius: $po_radius - $base_padding;
  padding: $base_padding;
  box-shadow: 0 5px 10px 0 rgba(black, 0.18);
  margin: 4px 12px 17px 12px;
-  background-color: $dialog_bg_color;
+  background-color: $popover_bg_color;
  border-radius: $po_radius;
  border: solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
  border-width: if($variant=='light', 0, 1px);
@ -126,7 +126,7 @@ $popop_menuitem_radius: $po_radius - $base_padding;

    &:active {
      color: $selected_fg_color !important;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        background-color: mix($fg_color, $selected_bg_color, 5%) !important;
      } @else {
        background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
@ -144,7 +144,7 @@ $popop_menuitem_radius: $po_radius - $base_padding;

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

    &:active {
      color: $selected_fg_color !important;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        background-color: mix($fg_color, $selected_bg_color, 5%) !important;
      } @else {
        background-color: st-mix($fg_color, $selected_bg_color, 5%) !important;
--- a/src/sass/gnome-shell/common/_screen-shield.scss
+++ b/src/sass/gnome-shell/common/_screen-shield.scss
@ -70,7 +70,7 @@
    background-color: transparentize($bg_color,0.7);
    &:hover, &:focus { background-color: transparentize($bg_color, 0.5); }

-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      &:active { background-color: transparentize($selected_bg_color, 0.5); }
    } @else {
      &:active { background-color: st-transparentize($selected_bg_color, 0.5); }
--- a/src/sass/gnome-shell/common/_tiled-previews.scss
+++ b/src/sass/gnome-shell/common/_tiled-previews.scss
@ -4,7 +4,7 @@
 $tile_corner_radius: $base_border_radius + 1px;

 .tile-preview {
-  @if $gnome_version == 'old' {
+  @if $shell_version == 'old' {
    background-color: transparentize($primary_color, 0.75);
  } @else {
    background-color: st-transparentize($primary_color, 0.75);
--- a/src/sass/gnome-shell/widgets-40-0/_overview.scss
+++ b/src/sass/gnome-shell/widgets-40-0/_overview.scss
@ -3,7 +3,7 @@
 }

 #overviewGroup {
-  background-color: rgba($osd_bg_color, 1);
+  background-color: $solid_osd_bg_color;
  // background-image: url("assets/background.png");
  // background-repeat: no-repeat;
  // background-size: cover;
--- a/src/sass/gnome-shell/widgets-40-0/_screen-shield.scss
+++ b/src/sass/gnome-shell/widgets-40-0/_screen-shield.scss
@ -3,7 +3,7 @@
  StButton#vhandle, StButton#hhandle {
    background-color: transparentize($bg_color, 0.7);
    &:hover, &:focus { background-color: transparentize($bg_color, 0.5); }
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      &:active { background-color: transparentize($primary_color, 0.5); }
    } @else {
      &:active { background-color: st-transparentize($primary_color, 0.5); }
--- a/src/sass/gnome-shell/widgets-40-0/_window-picker.scss
+++ b/src/sass/gnome-shell/widgets-40-0/_window-picker.scss
@ -47,5 +47,5 @@ $window_close_button_padding: 3px;
  // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
  border-radius: 30px;
  background-color: $osd_bg_color;
-  box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
+  box-shadow: 0 4px 16px 4px transparentize(darken($solid_osd_bg_color, 30%), 0.7);
 }
--- a/src/sass/gnome-shell/widgets-42-0/_quick-settings.scss
+++ b/src/sass/gnome-shell/widgets-42-0/_quick-settings.scss
@ -112,7 +112,7 @@
 }

 .quick-toggle-menu {
-  background-color: $menu_bg !important;
+  background-color: if($variant == 'light', $base_color, $bg_color) !important;
  color: $text_color !important;
  border-radius: $base_border_radius * 3;
  padding: $base_padding * 3;
--- a/src/sass/gnome-shell/widgets-42-0/_screenshot.scss
+++ b/src/sass/gnome-shell/widgets-42-0/_screenshot.scss
@ -170,7 +170,7 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-window-selector-window {
  &:hover {
    .screenshot-ui-window-selector-window-border {
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        border-color: darken($primary_color, 15%);
      } @else {
        border-color: st-darken($primary_color, 15%);
@ -181,7 +181,7 @@ $screenshot_ui_button_red: $error_color;
  &:checked {
    .screenshot-ui-window-selector-window-border {
      border-color: $primary_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        background-color: transparentize($primary_color, 0.8);
      } @else {
        background-color: st-transparentize($primary_color, 0.8);
--- a/src/sass/gnome-shell/widgets-44-0/_quick-settings.scss
+++ b/src/sass/gnome-shell/widgets-44-0/_quick-settings.scss
@ -40,7 +40,7 @@

    &:hover {
      color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        background-color: mix($text_color, $primary_color, 6%) !important;
      } @else {
        background-color: st-mix($text_color, $primary_color, 6%) !important;
@ -49,7 +49,7 @@

    &:active {
      color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        background-color: mix($text_color, $primary_color, 15%) !important;
      } @else {
        background-color: st-mix($text_color, $primary_color, 15%) !important;
@ -109,7 +109,7 @@
  
      &:hover {
        color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
          background-color: mix($text_color, $primary_color, 6%) !important;
        } @else {
          background-color: st-mix($text_color, $primary_color, 6%) !important;
@ -118,7 +118,7 @@
  
      &:active {
        color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
          background-color: mix($text_color, $primary_color, 15%) !important;
        } @else {
          background-color: st-mix($text_color, $primary_color, 15%) !important;
@ -152,7 +152,7 @@
 }

 .quick-toggle-menu {
-  background-color: $menu_bg !important;
+  background-color: if($variant == 'light', $base_color, $bg_color) !important;
  color: $text_color !important;
  border-radius: $base_border_radius * 3;
  padding: $base_padding * 3;
--- a/src/sass/gnome-shell/widgets-46-0/_message-list.scss
+++ b/src/sass/gnome-shell/widgets-46-0/_message-list.scss
@ -66,7 +66,7 @@
    border-style: solid;

    &:focus {
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        border-color: transparentize($selected_bg_color, 0.4);
      } @else {
        border-color: st-transparentize($selected_bg_color, 0.4);
--- a/src/sass/gnome-shell/widgets-46-0/_notifications.scss
+++ b/src/sass/gnome-shell/widgets-46-0/_notifications.scss
@ -10,13 +10,14 @@ $notification_banner_width: 34em;
  border-radius: $wm_radius;
  margin: $base_padding * 2;
  padding: $scaled_padding;
-  color: $fg_color;
-  background-color: $menu_bg;
  border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
  text-shadow: none;
  box-shadow: 0 3px 5px rgba(black, 0.15);

-  &:hover, &:active { background-color: rgba($menu_bg, 1); }
+  &, &:hover, &:active {
+    color: $fg_color;
+    background-color: $popover_bg_color;
+  }
 }

 .notification-buttons-bin {
@ -25,8 +26,8 @@ $notification_banner_width: 34em;
 }

 .notification-button {
-  min-height: 40px;
-  padding: 0 16px;
+  min-height: $medium_size;
+  padding: 0 $base_padding * 2;
  background-color: $fill_color;
  color: $alt_fg_color;
  font-weight: 500;
--- a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
@ -16,7 +16,7 @@
  &:hover {
    color: white !important;
    background-gradient-direction: none !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      background-color: lighten($primary_color, 9%);
    } @else {
      background-color: st-lighten($primary_color, 9%);
@ -26,7 +26,7 @@
  &:active {
    color: white !important;
    background-gradient-direction: none !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      background-color: darken($primary_color, 5%);
    } @else {
      background-color: st-darken($primary_color, 5%);
@ -35,7 +35,7 @@

  &:insensitive {
    background-gradient-direction: none !important;
-    @if $gnome_version == 'old' {
+    @if $shell_version == 'old' {
      background-color: transparentize($primary_color, 0.9);
      color: transparentize($primary_color, 0.65) !important;
    } @else {
--- a/src/sass/gnome-shell/widgets-48-0/_message-list.scss
+++ b/src/sass/gnome-shell/widgets-48-0/_message-list.scss
@ -55,7 +55,7 @@
    border-style: solid;

    &:focus {
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        border-color: transparentize($selected_bg_color, 0.4);
      } @else {
        border-color: st-transparentize($selected_bg_color, 0.4);
--- a/src/sass/gnome-shell/widgets-48-0/_notifications.scss
+++ b/src/sass/gnome-shell/widgets-48-0/_notifications.scss
@ -11,12 +11,10 @@ $notification_banner_width: 34em;
  margin: $base_padding * 2;
  padding: $base_padding;
  color: $fg_color;
-  background-color: $menu_bg;
-  border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
+  background-color: $popover_bg_color;
+  border: 1px solid if($variant=='light', transparent, rgba(black, 0.75));
  text-shadow: none;
  box-shadow: 0 3px 5px rgba(black, 0.15);
-
-  &:hover, &:active { background-color: rgba($menu_bg, 1); }
 }

 .notification-buttons-bin {
@ -25,8 +23,8 @@ $notification_banner_width: 34em;
 }

 .notification-button {
-  min-height: 40px;
-  padding: 0 16px;
+  min-height: $medium_size;
+  padding: 0 $base_padding * 2;
  background-color: $fill_color;
  color: $alt_fg_color;
  font-weight: 500;
--- a/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss
+++ b/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss
@ -40,7 +40,7 @@

    &:hover {
      color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        background-color: mix($text_color, $primary_color, 6%) !important;
      } @else {
        background-color: st-mix($text_color, $primary_color, 6%) !important;
@ -49,7 +49,7 @@

    &:active {
      color: $light_fg_color;
-      @if $gnome_version == 'old' {
+      @if $shell_version == 'old' {
        background-color: mix($text_color, $primary_color, 15%) !important;
      } @else {
        background-color: st-mix($text_color, $primary_color, 15%) !important;
@ -111,7 +111,7 @@
  
      &:hover {
        color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
          background-color: mix($text_color, $primary_color, 6%) !important;
        } @else {
          background-color: st-mix($text_color, $primary_color, 6%) !important;
@ -120,7 +120,7 @@
  
      &:active {
        color: $light_fg_color;
-        @if $gnome_version == 'old' {
+        @if $shell_version == 'old' {
          background-color: mix($text_color, $primary_color, 15%) !important;
        } @else {
          background-color: st-mix($text_color, $primary_color, 15%) !important;
@ -158,7 +158,7 @@
 }

 .quick-toggle-menu {
-  background-color: $menu_bg !important;
+  background-color: if($variant == 'light', $base_color, $bg_color) !important;
  color: $text_color !important;
  border-radius: $base_border_radius * 3;
  padding: $base_padding * 3;
--- 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;
@ -229,10 +247,63 @@ $dark_5: #000000;
    --accent-fg-color: @accent_fg_color;
  }

-  $selected_bg_color: var(--accent-bg-color);
-  $primary_color: var(--accent-bg-color);
-  $entry_highlight: RGB(color-mix(in srgb, white 25%, var(--accent-bg-color)), 75%);
-  $progress_color: var(--accent-bg-color);
-  $selection_mode_bg: color-mix(in srgb, white 25%, var(--accent-bg-color));
-  $selected_borders_color:  color-mix(in srgb, black 25%, var(--accent-bg-color));
+  $selected_bg_color: gtkcolor(accent_bg_color);
+  $primary_color: gtkcolor(accent_bg_color);
+  $progress_color: gtkcolor(accent_bg_color);
+  $selected_bg_color: gtkcolor(accent_bg_color);
+  $primary_color: gtkcolor(accent_bg_color);
+  $progress_color: gtkcolor(accent_bg_color);
+  $selection_mode_bg: color-mix(in srgb, white 25%, gtkcolor(accent_bg_color));
+  $entry_highlight: color-mix(in srgb, gtkcolor(window_bg_color) 25%, $selection_mode_bg);
+
+  $bg_color: gtkcolor(window_bg_color);
+  $base_color: gtkcolor(view_bg_color);
+
+  $text_color: gtkcolor(window_fg_color);
+  $fg_color: gtkcolor(window_fg_color);
+  $alt_fg_color: gtkalpha($fg_color, 0.8);
+  $hint_fg_color: gtkalpha($fg_color, 0.6);
+  $disabled_fg_color: gtkalpha($fg_color, 0.45);
+  $alt_disabled_fg_color: gtkalpha($fg_color, 0.35);
+
+  $borders_color:                     gtkalpha(currentColor, 0.12);
+  $light_borders_color:               if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.10));
+  $solid_borders_color:               if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 12%));
+  $dark_solid_borders_color:          if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 15%));
+
+  $entry_bg:                          gtkalpha(currentColor, 0.05);
+  $entry_border:                      $borders_color;
+
+  $button_bg:                         gtkcolor(card_bg_color);
+  $button_border:                     $borders_color;
+  $button_highlight:                  if($variant == 'light', white, rgba(white, 0.1));
+  $button_borders:                    if($variant == 'light', $button_border, $dark_borders_color);
+
+  $header_bg: gtkcolor(headerbar_bg_color);
+  $header_fg: gtkcolor(headerbar_fg_color);
+  $header_border: gtkcolor(headerbar_darker_shade_color);
+  $header_bg_backdrop: gtkcolor(headerbar_backdrop_color);
+  $header_border_backdrop: gtkcolor(headerbar_shade_color);
+
+  $dialog_bg_color: gtkcolor(dialog_bg_color);
+  $dialog_fg_color: gtkcolor(dialog_fg_color);
+
+  $dark_sidebar_bg: gtkcolor(sidebar_bg_color);
+  $dark_sidebar_fg: gtkcolor(sidebar_fg_color);
+  $dark_sidebar_border: gtkcolor(headerbar_darker_shade_color);
+
+  $menu_bg: gtkcolor(popover_bg_color);
+  $menu_fg: gtkcolor(popover_fg_color);
+  $menu_bd: if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.07));
+
+  $wm_shadow: gtkcolor(headerbar_shade_color);
+  $wm_shadow_backdrop: gtkcolor(sidebar_shade_color);
+  $wm_outline: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px gtkcolor(headerbar_darker_shade_color);
+  $wm_border: gtkcolor(headerbar_darker_shade_color);
+
+  @if $trans=='true' {
+    $bg_color: color-mix(in srgb, gtkcolor(window_bg_color) 96%, transparent);
+    $dark_sidebar_bg: color-mix(in srgb, gtkcolor(sidebar_bg_color) 96%, transparent);
+    $menu_bg: color-mix(in srgb, gtkcolor(popover_bg_color) 96%, transparent);
+  }
 }
--- 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};
--- 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 #{"" + gtkmix($bg_color, $base_color, 60%)};
@define-color insensitive_fg_color #{"" + $disabled_fg_color};
@define-color insensitive_base_color #{"" + $base_color};
@define-color theme_unfocused_fg_color #{"" + $fg_color};
@define-color theme_unfocused_text_color #{"" + $theme_text};
@define-color theme_unfocused_bg_color #{"" + $bg_color};
@define-color theme_unfocused_base_color #{"" + $base_color};
-@define-color unfocused_insensitive_color #{"" + mix($fg_color, $bg_color, 35%)};
+@define-color unfocused_insensitive_color #{"" + gtkmix($fg_color, $bg_color, 35%)};
@define-color borders #{"" + $borders_color};
@define-color unfocused_borders #{"" + $borders_color};

@ -36,4 +36,4 @@ $theme_text: currentColor;
@define-color content_view_bg #{"" + $base_color};

 /* Very contrasty background for text views (@theme_text_color foreground) */
-@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color, 6%))};
+@define-color text_view_bg #{"" + $base_color};
--- 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; }
@ -817,7 +817,7 @@ button {
  &.osd {
    color: $osd_fg_color;
    background-color: $osd_bg_color;
-    border-color: darken($osd_bg_color, 8%);
+    border-color: darken($solid_osd_bg_color, 8%);

    &.image-button, &.round-button {
      padding: 0;
@ -1043,7 +1043,7 @@ modelbutton.flat {
  @extend %undecorated_button;

  &:hover {
-    background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%));
+    background-color: if($variant=='light', gtkmix($fg_color,$bg_color,5%), gtkmix($fg_color,$bg_color,10%));
    transition-duration: 50ms;
  }

@ -1081,20 +1081,20 @@ modelbutton.flat arrow {

  &:visited {
    color: $link_visited_color;
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
+    *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 60%); }
  }
  &:hover {
    color: lighten($link_color,10%);
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
+    *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 90%); }
  }
  &:active {
    color: $link_color;
-    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+    *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 80%); }
  }

  @at-root %link_selected,
  &:selected,
-  *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+  *:selected & { color: gtkmix($selected_fg_color, $selected_bg_color, 80%); }
 }

 button:link, button:visited {
@ -1154,29 +1154,11 @@ spinbutton {
    &:dir(ltr) entry,
    &:dir(rtl) button.up { border-radius: $bt_radius 0 0 $bt_radius; }

-    > button + button { border-left-style: none; }
-
-    > button:hover:not(:active),
-    > button:hover + button { box-shadow: inset 1px 0 $button_border; }
-
-    > button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover),
-    > button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 transparentize($button_border, 0.5); }
-
-    > button:first-child:hover:not(:active),
-    > button.up:dir(rtl):hover:not(:active),
-    > entry + button:not(:active):hover { box-shadow: none; }
-
    > entry:focus + button { border-left-color: $entry_highlight; }
    > entry:drop(active) + button { border-left-color: $drop_target_color; }

    .osd & {
      &, &:focus, &:drop(active) { border-image: none; }
-      > button:hover:not(:active),
-      > button:hover + button { box-shadow: inset 1px 0 $osd_button_border; }
-
-      > button:first-child:hover:not(:active),
-      > button.up:dir(rtl):hover:not(:active),
-      > entry + button:not(:active):hover { box-shadow: none; }

      > entry:focus + button { border-left-color: $entry_highlight; }
    }
@ -1238,7 +1220,7 @@ combobox {

  button.combo:disabled arrow,
  button.combo:backdrop arrow {
-    background-color: if($variant == 'light', rgba($text_color, 0.45), mix(white, $button_bg, 0.25));
+    background-color: if($variant == 'light', rgba($text_color, 0.45), gtkmix(white, $button_bg, 25%));
  }

  decoration,
@ -1519,7 +1501,7 @@ headerbar {
    transition: $backdrop_transition;
    color: transparentize($header_fg, 0.3);
    background-color: $header_bg_backdrop;
-    border-bottom: 1px solid if($variant=='light', lighten($header_border, 5%), darken($header_border, 3%));
+    border-bottom: 1px solid $header_border_backdrop;
  }

  .title {
@ -1569,7 +1551,7 @@ headerbar {
      &.#{$e_type} {
        color: $e_fg_color;
        border-color: if($variant=='light', $e_color, $entry_border);
-        background-color: mix($e_color, $header_bg, 60%);
+        background-color: gtkmix($e_color, $header_bg, 60%);

        &:focus {
          color: $e_fg_color;
@ -1748,7 +1730,7 @@ headerbar {
  &.selection-mode {
    color: $light_fg_color;
    background-color: $selection_mode_bg;
-    border-color: darken($selection_mode_bg, 4%);
+    border-color: gtkmix(black, $selection_mode_bg, 6%);
    box-shadow: none;
    background-image: none;
    text-shadow: none;
@ -1756,7 +1738,7 @@ headerbar {
    &:backdrop {
      background-color: $selection_mode_bg;
      color: transparentize($light_fg_color, 0.4);
-      border-color: darken($selection_mode_bg, 4%);
+      border-color: gtkmix(black, $selection_mode_bg, 6%);
    }

    button:not(.flat):not(.suggested-action):not(.destructive-action):not(.titlebutton):not(.combo) {
@ -2038,7 +2020,7 @@ treeview.view {

  &:selected {
    border-radius: 0;
-    border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
+    border-left-color: gtkmix($selected_fg_color, $selected_bg_color, 50%);
    border-top-color: rgba($fg_color, 0.15); // doesn't work unfortunately
    background-color: $selected_bg_color;
    color: $selected_fg_color;
@ -2053,7 +2035,7 @@ treeview.view {
    color: $disabled_fg_color;

    &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 40%);
+      color: gtkmix($selected_fg_color, $selected_bg_color, 40%);
    }
  }

@ -2063,7 +2045,7 @@ treeview.view {

    &:focus {
      color: $fg_color;
-      background-color: mix(white, $base_color, 8%);
+      background-color: gtkmix(white, $base_color, 8%);
    }
  }

@ -2075,7 +2057,7 @@ treeview.view {
  &:drop(active) {
    border-style: solid none;
    border-width: 1px;
-    border-color: mix($fg_color, $selected_bg_color, 50%);
+    border-color: gtkmix($fg_color, $selected_bg_color, 50%);

    &.after { border-top-style: none; }
    &.before { border-bottom-style: none; }
@ -2086,12 +2068,12 @@ treeview.view {

    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }

-    color: mix($fg_color, $base_color, 50%);
+    color: gtkmix($fg_color, $base_color, 50%);

    &:hover { color: $fg_color; }

    &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 70%);
+      color: gtkmix($selected_fg_color, $selected_bg_color, 70%);
      &:hover { color: $selected_fg_color; }
    }

@ -2126,7 +2108,7 @@ treeview.view {

  > header {
    > button {
-      $_column_header_color: mix($fg_color, $base_color, 80%);
+      $_column_header_color: gtkmix($fg_color, $base_color, 80%);

      min-height: if($variant =='light', 24px, 26px);
      min-width: 38px;
@ -2222,7 +2204,7 @@ menubar,
 menu {
  margin: 0;
  padding: $container_padding;
-  background-color: opacify($menu_bg, 1);
+  background-color: rgba($menu_bg, 1);
  color: $fg_color;
  border: none; // adds borders in a non composited env
  border-radius: 0;
@ -2364,7 +2346,7 @@ popover.background {

  .csd &, & {
    border-radius: $wm_radius;
-    border: 1px solid if($variant=='light', rgba($borders_color, 0.2), lighten($menu_bg, 6%));
+    border: 1px solid if($variant=='light', $track_color, gtkmix(white, $menu_bg, 6%));
  }

  separator,
@ -2380,7 +2362,7 @@ popover.background {
  }

  entry {
-    background-color: mix($fg_color, $menu_bg, 5%);
+    background-color: gtkmix($fg_color, $menu_bg, 5%);
  }

  > list,
@ -2432,7 +2414,7 @@ cursor-handle {
  padding: $container_padding - 4px $container_padding + 4px;

  &:hover:not(:checked) {
-    color: mix($fg_color, $disabled_fg_color, 50%);
+    color: gtkmix($fg_color, $disabled_fg_color, 50%);
    background-color: if($variant == 'light', rgba(white, 0.2), rgba(white, 0.05));
    border-color: if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
  }
@ -2453,7 +2435,7 @@ cursor-handle {
  padding: $container_padding - 4px $container_padding + 4px;

  &:hover:not(:checked) {
-    color: mix($fg_color, $disabled_fg_color, 50%);
+    color: gtkmix($fg_color, $disabled_fg_color, 50%);
    background-color: rgba($fg_color, 0.06);
  }

@ -2478,14 +2460,14 @@ notebook {
    background-color: $base_color;
  }

-  .csd &:not(.frame),
-  .csd &:not(.frame) > stack {
+  .background.csd > &:not(.frame),
+  .background.csd > &:not(.frame) > stack {
    border-radius: 0 0 $wm_radius $wm_radius;
  }

  > header {
    @if $monterey == 'false' {
-      background-color: mix(black, $base_color, if($variant == 'light', 6%, 6%));
+      background-color: gtkmix(black, $base_color, if($variant == 'light', 6%, 6%));

      // Set box-shadow to make the header frame color more easy to see
      // Set margin to hide the ugly borders around the header
@ -2609,7 +2591,7 @@ notebook {
    > tabs > arrow {
      color: $disabled_fg_color;

-      &:hover { color: mix($fg_color, $disabled_fg_color, 50%); }
+      &:hover { color: gtkmix($fg_color, $disabled_fg_color, 50%); }
      &:active { color: $fg_color; }
      &:disabled { color: transparentize($disabled_fg_color,0.3); }
    }
@ -2720,10 +2702,10 @@ scrollbar {
    border: 4px solid transparent;
    border-radius: $container_padding * 2;
    background-clip: padding-box;
-    background-color: mix($fg_color, $bg_color, 40%);
+    background-color: gtkmix($fg_color, $bg_color, 40%);

-    &:hover { background-color: mix($fg_color, $bg_color, 30%); }
-    &:hover: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: $borders_color;

    background-color: $selected_fg_color;
    border: 1px solid $_slider_border;
@ -3127,7 +3109,6 @@ scale {

    &:disabled {
      background-color: darken($selected_fg_color, 5%);
-      border-color: darken($_slider_border, 5%);
    }

    // Selected list-row and infobar sliders
@ -3139,16 +3120,16 @@ scale {
      border-color: $selected_fg_color;

      &:hover {
-        background-color: mix($selected_fg_color, $selected_bg_color, 85%);
-        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%);
      }
    }

@ -3172,10 +3153,10 @@ scale {
    }
  }

-  value { color: gtkalpha(currentColor, 0.4); }
+  value { color: gtkalpha(currentColor, 0.45); }

  marks {
-    color: gtkalpha(currentColor, 0.4);
+    color: gtkalpha(currentColor, 0.45);

    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
                                                     (bottom, bottom, top),
@ -3776,20 +3757,18 @@ filechooser {
      label, combobox { color: $dark_sidebar_fg; }
    }

-    paned {
-      stack {
-        &:dir(ltr) { border-radius: 0 0 (($wm_radius/1.5) + 2) 0 }
-        &:dir(rtl) { border-radius: 0 0 0 (($wm_radius/1.5) + 2) }
+    > box:only-child > paned {
+      stack.view {
+        &:dir(ltr) { border-radius: 0 0 $wm_radius 0; }
+        &:dir(rtl) { border-radius: 0 0 0 $wm_radius; }
      }
    }

    stack.view {
      background-color: $base_color;
-      border-bottom-right-radius: $wm_radius;

      scrolledwindow {
        background-color: transparent;
-        border-radius: 0 0 $wm_radius $wm_radius;

        list { background-color: transparent; }

@ -4126,15 +4105,18 @@ tooltip {
    &, &.csd {
      // background-color needs to be set this way otherwise it gets drawn twice
      // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
-      background-color: lighten($osd_bg_color, 10%);
+      background-color: $osd_bg_color;
      background-clip: padding-box;
-      border-radius: $bt_radius;
+      border-radius: $wm_radius;
+      color: $osd_fg_color;
+      border: 1px solid $wm_shadow;
+      box-shadow: inset 0 0 0 1px $highlight_color;

      label { padding: $container_padding; }
    }
  }

-  border-radius: $bt_radius;
+  border-radius: $wm_radius;
  box-shadow: none;

  decoration { background-color: transparent; }
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
--- a/src/sass/gtk/_drawing-3.0.scss
+++ b/src/sass/gtk/_drawing-3.0.scss
@ -106,7 +106,7 @@
  //
    color: $selected_fg_color;
    background-color: $selected_bg_color;
-    border-color: darken($selection_mode_bg, 5%);
+    border-color: gtkmix(black, $selected_bg_color, 8%);
  }

  @else if $t==osd-insensitive {
@ -114,7 +114,7 @@
  // insensitive osd entry
  //
    color: $osd_disabled_fg_color;
-    background-color: transparentize($osd_entry_bg, 0.15);
+    background-color: rgba($osd_entry_bg, 0.8);
  }
 }

@ -149,7 +149,7 @@
    background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
    @if $variant=='light' { box-shadow: none; }
    @if $variant=='dark' {
-      box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
+      box-shadow: inset 0 1px $light_divider_color, $shadow_3;
    }
  }

@ -488,7 +488,7 @@

  #{$_selector} undershoot.#{$p} {
    box-shadow: if($style == 'default', none, inset $_border_pos $borders_color);
-    background: linear-gradient(to $_direction, gtkalpha($c, .25), transparent 6px);
+    background: linear-gradient(to $_direction, rgba($c, .25), transparent 6px);
  }
 }

--- 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: $entry_bg;
  }

  @if $t==header-normal {
@ -67,7 +67,7 @@
  //
    color: $header_fg;
    background-color: $entry_bg;
-    box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
+    box-shadow: inset 0 0 0 1px gtkalpha($borders_color, 0.05), inset 0 0 0 2px transparent;
    transition-duration: $shorter_duration * 2;
  }

@ -85,8 +85,8 @@
  //
  // insensitive header-bar entry
  //
-    color: rgba($header_fg, 0.35);
-    background-color: rgba($entry_bg, 0.02);
+    color: gtkalpha($header_fg, 0.35);
+    background-color: gtkalpha($entry_bg, 0.02);
  }

  @else if $t==osd {
@ -108,7 +108,7 @@
    background-color: $selected_bg_color;

    @if $gnome_version == 'old' {
-      border-color: darken($selection_mode_bg, 5%);
+      border-color: gtkmix(black, $selected_bg_color, 6%);
    } @else {
      border-color: color-mix(in srgb, black 25%, $selected_bg_color)
    }
@ -119,7 +119,7 @@
  // insensitive osd entry
  //
    color: $osd_disabled_fg_color;
-    background-color: transparentize($osd_entry_bg, 0.15);
+    background-color: gtkalpha($osd_entry_bg, 0.8);
  }
 }

@ -136,7 +136,7 @@
  //
  // normal button
  //
-    color: $fg_color;
+    color: $alt_fg_color;
    border-color: $button_borders;
    background-color: $button_bg;
    @if $variant=='light' { box-shadow: $shadow_3; }
@ -149,12 +149,12 @@
  //
  // hovered button
  //
-    color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
+    color: $fg_color;
    border-color: $button_borders;
-    background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
+    background-color: gtkmix($fg_color, $button_bg, 5%);
    @if $variant=='light' { box-shadow: none; }
    @if $variant=='dark' {
-      box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
+      box-shadow: inset 0 1px $light_divider_color, $shadow_3;
    }
  }

@ -175,7 +175,7 @@
    label, & { color: $disabled_fg_color; }

    border-color: if($variant == 'light', $button_border, $dark_borders_color);
-    background-color: rgba($button_bg, 0.55);
+    background-color: gtkalpha($button_bg, 0.55);
    box-shadow: none;
  }

@ -183,10 +183,10 @@
  //
  // insensitive pushed button
  //
-    label, & { color: transparentize($selected_fg_color, 0.45); }
+    label, & { color: gtkalpha($selected_fg_color, 0.55); }

    border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
-    background-color: rgba($selected_bg_color, 0.45);
+    background-color: gtkalpha($selected_bg_color, 0.45);
    @if $variant=='light' { box-shadow: none; }

    opacity: 0.6;
@ -206,8 +206,7 @@
  //
  // hovered button
  //
-    color: darken($fg_color, 10%);
-    background-color: 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;
--- 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; } }
            }
          }
        }
--- 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%));
    }
  }

--- a/src/sass/gtk/apps/_gnome-3.22.scss
+++ b/src/sass/gtk/apps/_gnome-3.22.scss
@ -19,8 +19,8 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
@if $nautilus_style == 'stable' {
  $nautilus_sidebar_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
                                                  $dark_sidebar_bg $nautilus_sidebar_size,
-                                                  rgba($dark_sidebar_bg, 0) $nautilus_sidebar_size,
-                                                  rgba($dark_sidebar_bg, 0) 100%);
+                                                  gtkalpha($dark_sidebar_bg, 0) $nautilus_sidebar_size,
+                                                  gtkalpha($dark_sidebar_bg, 0) 100%);

  $nautilus_bg_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
                                             $dark_sidebar_bg $nautilus_sidebar_size,
@ -37,15 +37,15 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
  $dialog_header_borders_image: linear-gradient(90deg, $dialog_bg_color 0px,
                                                       $header_border 25%);

-  $nautilus_actionbar_image: linear-gradient(90deg, rgba($dark_header_bg, 0) 5%,
+  $nautilus_actionbar_image: linear-gradient(90deg, gtkalpha($dark_header_bg, 0) 5%,
                                                    transparentize($dark_header_bg, 0.2) 40%);

-  $nautilus_actionbar_borders_image: linear-gradient(90deg, rgba($header_border, 0) 0px,
+  $nautilus_actionbar_borders_image: linear-gradient(90deg, transparent 0px,
                                                            $header_border 25%);
 }

@if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
-  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) $nautilus_sidebar_size,
+  $nautilus_header_borders_image: linear-gradient(90deg, transparent $nautilus_sidebar_size,
                                                         $header_border $nautilus_sidebar_size);
 }

@ -58,7 +58,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
  $nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg ($nautilus_sidebar_size / 2),
                                                 $dark_header_bg 40%);

-  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($nautilus_sidebar_size / 2) - 40px),
+  $nautilus_header_borders_image: linear-gradient(90deg, transparent (($nautilus_sidebar_size / 2) - 40px),
                                                         $header_border 40%);
 }

@ -80,7 +80,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);

      > deck > box.vertical > headerbar.titlebar {
        @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
-          background-image: linear-gradient(90deg, rgba($dark_header_bg, 0) $nautilus_sidebar_size,
+          background-image: linear-gradient(90deg, transparent $nautilus_sidebar_size,
                                                   $nautilus_borders_color $nautilus_sidebar_size,
                                                   $nautilus_borders_color ($nautilus_sidebar_size + 1px),
                                                   $dark_header_bg ($nautilus_sidebar_size + 1px));
@ -207,19 +207,19 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
          padding: 2px 4px;

          &:hover {
-            background-color: rgba($fg_color, 0.1);
+            background-color: gtkalpha($fg_color, 0.1);
          }

          &:active, &:active:hover {
            transition: background-color ease-out 200ms;
-            background-color: rgba($fg_color, 0.2);
+            background-color: gtkalpha($fg_color, 0.2);
          }

          &:selected.has-open-popup,
          &:selected, &:selected:hover {
            color: $fg_color;
            transition: background-color ease-out 200ms;
-            background-color: rgba($fg_color, 0.15);
+            background-color: $sidebar_theme_color;

            &, label { color: $fg_color; }
          }
@ -240,14 +240,14 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
        &:drop(active):not(:disabled) {
          border: none;
          border-radius: 0;
-          background-color: rgba($dark_sidebar_fg, 0.15);
+          background-color: gtkalpha($dark_sidebar_fg, 0.15);

          &, label, .sidebar-icon { color: $dark_sidebar_fg; }

          &:selected.has-open-popup,
          &:selected, &:selected:hover {
            background-image: none;
-            background-color: rgba($selected_bg_color, 0.15);
+            background-color: gtkalpha($selected_bg_color, 0.15);
            &, label, .sidebar-icon { color: $selected_bg_color; }
          }
        }
@ -375,16 +375,16 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);

      button {
        color: $selection_mode_bg;
-        background-color: rgba($selection_mode_bg, 0.15);
+        background-color: gtkalpha($selection_mode_bg, 0.15);
        border: none;

-        &:hover { background-color: rgba($selection_mode_bg, 0.25); }
+        &:hover { background-color: gtkalpha($selection_mode_bg, 0.25); }
        &:active, &:checked { background-color: $selection_mode_bg; color: white; }
        &:disabled {
-          background-color: rgba($selection_mode_bg, 0.05);
-          color: rgba($selection_mode_bg, 0.35);
+          background-color: gtkalpha($selection_mode_bg, 0.05);
+          color: gtkalpha($selection_mode_bg, 0.35);

-          label { color: rgba($selection_mode_bg, 0.35); }
+          label { color: gtkalpha($selection_mode_bg, 0.35); }
        }
      }

@ -1082,7 +1082,7 @@ window.org-gnome-Builder.workspace {

        &:active, &:checked {
          color: $fg_color;
-          background-color: rgba($fg_color, 0.25);
+          background-color: gtkalpha($fg_color, 0.25);
        }

        > box.horizontal > box.horizontal {
@ -1199,9 +1199,9 @@ widget {
      margin: -1px; // kill ugly borders

      row.activatable {
-        color: rgba($fg_color, 0.75);
+        color: gtkalpha($fg_color, 0.75);
        &:hover,
-        &:active { color: rgba($fg_color, 0.75); }
+        &:active { color: gtkalpha($fg_color, 0.75); }
      }

      // kill ugly separators
@ -1225,7 +1225,7 @@ widget {
 }

 graph-switcher-button.toggle {
-  color: rgba($fg_color, 0.75);
+  color: gtkalpha($fg_color, 0.75);
  font-weight: 500;
  &:hover { // use opaque
    color: $fg_color;
@ -1248,7 +1248,7 @@ box.speedometer {
  &-outter { opacity: 0.8; } // reduce alpha for our troughs

  &-content-area { // cover up meter troughs with selection colour
-    box-shadow: 0 0 0 4px rgba($selected_bg_color, 0.2);
+    box-shadow: 0 0 0 4px gtkalpha($selected_bg_color, 0.2);
  }
 }

@ -1779,7 +1779,7 @@ window.background.csd {
    }

    > overlay > scrolledwindow > viewport.frame {
-      background-color: rgba($base_color, 1);
+      background-color: gtkalpha($base_color, 1);
      border-bottom-right-radius: $wm_radius;

      > hdycolumn > stack > box.horizontal > box.vertical > box.horizontal {
@ -1835,7 +1835,7 @@ headerbar.titlebar.incognito-mode {

 // reset inverted foreground colour
 notebook > box > stack > box.vertical > paned.vertical > overlay {
-  > .floating-bar { color: rgba($fg_color, 0.75); }
+  > .floating-bar { color: gtkalpha($fg_color, 0.75); }
 }

 // overrides foregrounds for 3.24's ssd-mode
@ -1872,11 +1872,11 @@ popover.background:not(.emoji-picker) > box.vertical > scrolledwindow {

    > row.activatable {
      background-color: if($variant=='light', $bg_color, lighten($bg_color, 10%));
-      color: rgba($fg_color, 0.85);
+      color: gtkalpha($fg_color, 0.85);
      border-radius: $bt_radius;
      border: 1px solid $borders_color;
      margin: 2px;
-      @if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); }
+      @if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px gtkalpha(currentColor, 0.01); }

      &:hover { @include button(hover); }
      &:active, &:checked { @include button(flat-active); }
@ -1890,14 +1890,14 @@ popover.background:not(.emoji-picker) > box.vertical > stack > box.vertical {
    border: 1px solid $borders_color;

    > list.background > row.activatable.bookmarks-row {
-      background-color: rgba($base_color, 0.35);
-      color: rgba($fg_color, 0.85);
-      border-bottom: 1px dashed rgba($borders_color, 0.05);
+      background-color: gtkalpha($base_color, 0.35);
+      color: gtkalpha($fg_color, 0.85);
+      border-bottom: 1px dashed gtkalpha(currentColor, 0.05);
      padding: 6px;

      &:hover,
      &:active,
-      &:checked { color: $fg_color; background-color: rgba($fg_color, 0.05); }
+      &:checked { color: $fg_color; background-color: gtkalpha($fg_color, 0.05); }

      button.flat {
        min-width: 16px;
@ -1991,12 +1991,12 @@ tabbox {

      &:hover {
        color: $fg_color;
-        background-color: rgba($borders_color, 0.1);
+        background-color: gtkalpha(currentColor, 0.1);
      }

      &:active, &:active:hover {
        color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
-        background-color: rgba($borders_color, 0.2);
+        background-color: gtkalpha(currentColor, 0.2);
      }

      &.tab-close-button {
@ -2129,13 +2129,13 @@ stack.view.polari-entry-area {

  button.popup.flat.toggle.polari-nick-button {
    &:hover {
-      background-color: rgba($fg_color, 0.15);
+      background-color: gtkalpha($fg_color, 0.15);
      box-shadow: none;
      background-image: none;
    }

    &:active, &:checked {
-      background-color: rgba($fg_color, 0.25);
+      background-color: gtkalpha($fg_color, 0.25);
      box-shadow: none;
      background-image: none;
    }
@ -2160,7 +2160,7 @@ stack:disabled.view.polari-entry-area { background-image: image($bg_color); }
  &, &.solid {
    color: lighten($osd_fg_color, 7%);
    background-color: $osd_bg_color;
-    border: 1px solid darken($osd_bg_color, 8%);
+    border: 1px solid darken($solid_osd_bg_color, 8%);
    border-radius: 2px;
  }

@ -2171,7 +2171,7 @@ stack:disabled.view.polari-entry-area { background-image: image($bg_color); }
        border-color: $selected_bg_color;
      }

-      &.empty { background-color: darken($osd_bg_color, 5%); }
+      &.empty { background-color: darken($solid_osd_bg_color, 5%); }
    }

    trough { background: none; }
@ -2390,7 +2390,7 @@ window.background.csd {
    // border-radius: 0 0 $wm_radius $wm_radius;
  }

-  .content-view:hover { background-color: rgba($fg_color, 0.08); }
+  .content-view:hover { background-color: gtkalpha($fg_color, 0.08); }

  viewport.frame { // Documents
    background-color: transparent;
@ -2608,12 +2608,12 @@ window#GearyMainWindow.background.csd { // <= 3.32

          &:hover {
            color: $fg_color;
-            background-color: rgba($fg_color, 0.1);
+            background-color: gtkalpha($fg_color, 0.1);
          }

          &:selected {
            color: $fg_color;
-            background-color: rgba($fg_color, 0.15);
+            background-color: gtkalpha($fg_color, 0.15);
          }
        }
      }
@ -2629,14 +2629,14 @@ window#GearyMainWindow.background.csd { // <= 3.32
    statusbar {
      margin: -8px -12px;
      border: none;
-      background-color: rgba($dark_sidebar_bg, 1);
+      background-color: gtkalpha($dark_sidebar_bg, 1);
      border-bottom-left-radius: $wm_radius;

      frame > border { border: none; }
    }

    frame.geary-conversation-frame {
-      background-color: rgba($dark_sidebar_bg, 1);
+      background-color: gtkalpha($dark_sidebar_bg, 1);

      > border { border: none; }

@ -2650,10 +2650,10 @@ window#GearyMainWindow.background.csd { // <= 3.32
        treeview.view {
          background-image: none;

-          &:hover { background-color: rgba($fg_color, 0.1); }
+          &:hover { background-color: gtkalpha($fg_color, 0.1); }

          &:selected {
-            background-color: rgba($fg_color, 0.15);
+            background-color: gtkalpha($fg_color, 0.15);
            color: if($variant == 'light', $fg_color, $selected_fg_color);
          }

@ -2754,15 +2754,15 @@ window#GearyMainWindow.background.csd { // <= 3.32

        &:hover {
          color: $fg_color;
-          background-color: rgba($fg_color, 0.1);
+          background-color: gtkalpha($fg_color, 0.1);
        }

        &:selected {
          color: $fg_color;
-          background-color: rgba($fg_color, 0.15);
+          background-color: gtkalpha($fg_color, 0.15);

          &:hover {
-            background-color: rgba($fg_color, 0.12);
+            background-color: gtkalpha($fg_color, 0.12);
          }
        }
      }
@ -2785,15 +2785,15 @@ window#GearyMainWindow.background.csd { // <= 3.32

        &:hover {
          color: $fg_color;
-          background-color: rgba($fg_color, 0.1);
+          background-color: gtkalpha($fg_color, 0.1);
        }

        &:selected {
          color: $fg_color;
-          background-color: rgba($fg_color, 0.15);
+          background-color: gtkalpha($fg_color, 0.15);

          &:hover {
-            background-color: rgba($fg_color, 0.12);
+            background-color: gtkalpha($fg_color, 0.12);
          }
        }
      }
@ -2819,14 +2819,14 @@ window#GearyMainWindow.background.csd { // <= 3.32
        margin: 0 $container_padding / 2;

        &:hover {
-          background-color: rgba($fg_color, 0.1);
+          background-color: gtkalpha($fg_color, 0.1);
          border-color: transparent;
        }

        &:selected, &:active {
          border-color: transparent;
          border-radius: $mn_radius;
-          background-color: rgba($fg_color, 0.15);
+          background-color: gtkalpha($fg_color, 0.15);
          color: if($variant == 'light', $fg_color, $selected_fg_color);
        }

--- 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' {
@ -22,7 +22,7 @@ $flap_sidebar_size: 240px;
  $nautilus_header_image: linear-gradient(90deg, transparent ($flap_sidebar_size / 2),
                                                 $dark_header_bg 40%);

-  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($flap_sidebar_size / 2) - 40px),
+  $nautilus_header_borders_image: linear-gradient(90deg, gtkalpha($header_border, 0) (($flap_sidebar_size / 2) - 40px),
                                                         $header_border 40%);
 }

@ -96,7 +96,7 @@ $flap_sidebar_size: 240px;
      .navigation-sidebar:not(.view) {
        > row {
          &:selected {
-            background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
+            background-color: $sidebar_theme_color;
            color: $fg_color;
          }

@ -133,7 +133,7 @@ $flap_sidebar_size: 240px;
  tabbar:not(.inline) {
    .box {
      @if $monterey == 'false' {
-        background-color: mix(black, $base_color, 6%);
+        background-color: color-mix(in srgb, black 6%, $base_color);
        border-top: 1px solid $borders_color;
      } @else {
        background-color: $base_color;
@ -160,7 +160,7 @@ $flap_sidebar_size: 240px;
    listview.view {
      padding: 0;
      margin: 0;
-      border-spacing: 0;
+      border-spacing: $container_padding / 2;

      > row.activatable {
        padding: 0;
@ -174,30 +174,26 @@ $flap_sidebar_size: 240px;
            padding: $container_padding $container_padding * 1.5;
          }
        }
-
-        + row {
-          margin-top: $container_padding / 2;
-        }
      }
    }
  }
+}

-  // Floating Bar
-  .floating-bar {
-    padding: 2px;
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-    border-radius: $wm_radius - $container_padding;
-    margin: $container_padding;
-    box-shadow: $shadow_5;
+// Floating Bar
+.floating-bar {
+  padding: 2px;
+  background-color: $selected_bg_color;
+  color: $selected_fg_color;
+  border-radius: $wm_radius - $container_padding;
+  margin: $container_padding;
+  box-shadow: $shadow_5;

-    > button.circular.flat {
-      border-radius: $circular_radius;
-      min-height: 24px;
-      min-width: 24px;
-      padding: 0;
-      @extend %selected-button;
-    }
+  > button.circular.flat {
+    border-radius: $circular_radius;
+    min-height: 24px;
+    min-width: 24px;
+    padding: 0;
+    @extend %selected-button;
  }
 }

@ -289,7 +285,7 @@ window.background.csd {

      > scrolledwindow > viewport > widget > stack {
        > list.navigation-sidebar {
-          background-color: rgba($dark_sidebar_bg, 1);
+          background-color: $dark_sidebar_bg;

          > separator {
            background-color: transparent;
@ -298,7 +294,7 @@ window.background.csd {
          }
        }

-        > box > list.navigation-sidebar { background-color: rgba($dark_sidebar_bg, 1); }
+        > box > list.navigation-sidebar { background-color: $dark_sidebar_bg; }
      }

      > stack.background { background-color: $base_color; }
@ -1155,28 +1151,28 @@ carousel.card {

  &.green, &.details-rating-0 {
    color: darken($theme_color_green, 15%);
-    background-color: rgba($theme_color_green, 0.15);
+    background-color: gtkalpha($theme_color_green, 0.15);
  }

  &.blue,
  &.details-rating-5 {
    color: $theme_color_blue;
-    background-color: rgba($theme_color_blue, 0.15);
+    background-color: gtkalpha($theme_color_blue, 0.15);
  }

  &.yellow, &.details-rating-12 {
    color: darken($theme_color_yellow, 15%);
-    background-color: rgba($theme_color_yellow, 0.15);
+    background-color: gtkalpha($theme_color_yellow, 0.15);
  }

  &.details-rating-15 {
    color: $theme_color_orange;
-    background-color: rgba($theme_color_orange, .15);
+    background-color: gtkalpha($theme_color_orange, .15);
  }

  &.red, &.details-rating-18 {
    color: darken($theme_color_red, 15%);
-    background-color: rgba($theme_color_red, 0.15);
+    background-color: gtkalpha($theme_color_red, 0.15);
  }
 }

@ -1282,9 +1278,146 @@ window.background.csd {
  }
 }

+//
+// Builder
+//
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+popover.background.pages-popover {
+  listview > row {
+    padding: $base_padding;
+
+    button {
+      margin: 0;
+    }
+
+    check {
+      margin: 4px 2px;
+      -gtk-icon-size: 12px;
+    }
+  }
+}
+
+panelresizer .top-bar {
+  box-shadow: inset 0 -1px $borders_color;
+}
+
+.frameheader.header:not(.vertical) {
+  min-height: $medium_size;
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid $borders_color;
+  background-color: color-mix(in srgb, black 6%, $base_color);
+
+  &:backdrop {
+    background-color: color-mix(in srgb, black 7%, $base_color);
+  }
+
+  tabbar.inline {
+    tabbox {
+      min-height: $medium_size;
+    }
+
+    .start-action {
+      padding: $container_padding / 2 $container_padding / 2 $container_padding / 2 $container_padding;
+    }
+
+    .end-action {
+      padding: $container_padding / 2 $container_padding $container_padding / 2 $container_padding / 2;
+    }
+  }
+}
+
+panelframeswitcher:not(.vertical) {
+  &.frameheader.header { padding: 0 $base_padding; }
+
+  > button.toggle.image-button {
+    border: none;
+    margin: $base_padding 0;
+  }
+}
+
+panelframeswitcher.frameheader.header.vertical {
+  > button.toggle.image-button {
+    min-height: 24px;
+    min-width: 24px;
+    padding: $base_padding;
+  }
+}
+
+panelstatusbar {
+  box-shadow: inset 0 1px $borders_color;
+
+  > menubutton > button,
+  > paneltogglebutton button {
+    border-radius: 0;
+    @extend %flat_button;
+  }
+}
+
+panelwidget entry.statusbar {
+  background-color: $bg_color;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  border-top: 1px solid $borders_color;
+
+  &:focus-within {
+    outline: none;
+  }
+}
+
+.IdeTweaksWindow,
+.org-gnome-Builder {
+  .boxed-list {
+    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, 0.08);
+  }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $base_padding * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $bt_radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $base_padding / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.05);
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.15);
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $primary_color;
+    }
+  }
+}
+
 //
 // Gnome extensions tool
 //
+
 popover.details-popover {
  .actions {
    border-spacing: 6px;
@ -1333,4 +1466,65 @@ dialog-host > widget > widget > toolbarview {
      border-top: 1px solid $header_border;
    }
  }
+}
+
+//
+// Chrome
+//
+
+$chrome_bg_color: if($variant == 'light', #dedede, #242424);
+$chrome_fg_color: if($variant == 'light', #242424, #dedede);
+
+window.background.chromium {
+  box-shadow: 0 12px 20px rgba(black, 0.35),
+              0 0 0 1px rgba(black, 0.75);
+
+  &:backdrop {
+    transition: $shadow_transition;
+    box-shadow: 0 7px 12px rgba(black, 0.15),
+                0 0 0 1px rgba(black, 0.65);
+  }
+
+  &, headerbar {
+    &, &:backdrop {
+      background-color: $chrome_bg_color;
+      color: $chrome_fg_color;
+    }
+  }
+
+  headerbar.header-bar.titlebar {
+    padding: 0 $container_padding * 2;
+    color: currentColor;
+    box-shadow: inset 0 1px rgba(white, 0.1);
+    border-radius: $wm_radius $wm_radius 0 0;
+
+    button.titlebutton { // title-buttons
+      // define global titlebutton class sizing
+      min-width: 22px;
+      min-height: 22px;
+      margin: 0 3px; // unset margins
+      padding: 0;
+      color: currentColor; // hide stock icons
+      border: none;
+      border-radius: $circular_radius;
+      background-image: none;
+      background-color: gtkalpha(currentColor, 0.12);
+
+      &:hover {
+        background-color: gtkalpha(currentColor, 0.2);
+        transition-duration: $shorter_duration;
+      }
+
+      &:active {
+        background-color: gtkalpha(currentColor, 0.3);
+        transition-duration: $shorter_duration;
+      }
+    }
+  }
+
+  // internal region of toolbar's entry widget
+  > textview.view, textview {
+    background-color: gtkalpha(currentColor, 0.1);
+    color: $chrome_fg_color;
+  }
 }
--- a/src/sass/gtk/apps/_libadwaita.scss
+++ b/src/sass/gtk/apps/_libadwaita.scss
@ -236,35 +236,29 @@ toast {

 viewswitcher {
  margin: 0;
-  min-height: 26px;
+  min-height: $small_size + 8px;
+  border-spacing: $container_padding / 2;

-  &.wide {
-    border-spacing: $container_padding / 2;
+  &.narrow {
+    margin-top: 0;
+    margin-bottom: 0;
+    min-height: $container_padding;
  }

-  &.narrow > button.toggle {
-    border-radius: 0;
-    margin: 0;
-
-    indicatorbin > image {
-      -gtk-icon-size: 12px;
-    }
-  }
-
-  > button.toggle {
+  button.toggle {
    font-weight: normal;
    padding: 0;

    > stack > box {
      &.narrow {
        font-size: 0.75rem;
-        padding-top: $container_padding;
-        padding-bottom: $container_padding;
-        border-spacing: $container_padding - 2px;
+        padding-top: $container_padding + 2px;

-        > stack > label {
-          padding-left: $container_padding + 2px;
-          padding-right: $container_padding + 2px;
+        > label {
+          min-height: 18px;
+          padding-left: 3px;
+          padding-right: 3px;
+          padding-bottom: 0;
        }
      }

@ -276,10 +270,10 @@ viewswitcher {
  }
 }

-// AdwViewSwitcherBar
-
 viewswitcherbar actionbar > revealer > box {
-  padding: 0;
+  padding-left: $container_padding;
+  padding-right: $container_padding;
+  padding-top: $container_padding;
 }

 // AdwViewSwitcherTitle
@ -354,11 +348,41 @@ indicatorbin {

    > label { color: $selected_fg_color; }
  }
+
+  &.badge {
+    > indicator,
+    > mask {
+      min-height: 13px;
+    }
+
+    > indicator > label {
+      font-size: 0.6rem;
+      font-weight: bold;
+      padding-left: 4px;
+      padding-right: 4px;
+      color: white;
+    }
+
+    &.needs-attention > indicator {
+      background: $selected_bg_color;
+
+      > label { color: $selected_fg_color; }
+    }
+  }
 }

 headerbar > windowhandle > box viewswitcher {
  min-height: 0;

+  &.narrow > button.toggle {
+    border-radius: 0;
+    margin: 0;
+
+    indicatorbin > image {
+      -gtk-icon-size: 12px;
+    }
+  }
+
  &.wide {
    box-shadow: inset 0 0 0 1px $light_borders_color;
    border-radius: $bt_radius;
@ -395,10 +419,6 @@ headerbar > windowhandle > box viewswitcher {
 //

 tabbar {
-  .box {
-    min-height: $menuitem_size;
-  }
-
  .start-action,
  .end-action {
    padding: $container_padding;
@ -414,30 +434,27 @@ tabbar {
    padding-left: 0;
  }

-  &:not(.inline) {
-    .box {
-      color: $text_color;
-      margin: 0;
+  .box {
+    min-height: $menuitem_size;
+    color: $text_color;
+    margin: 0;
+    box-shadow: none;
+    border-bottom: 1px solid $borders_color;

-      @if $monterey == 'false' {
-        padding: 0;
-        box-shadow: inset 0 -1px if($variant == 'light', darken($header_bg, 15%), lighten($header_bg, 5%));
-        border-bottom: none;
-        background-color: darken($header_bg, 10%);
-      } @else {
-        box-shadow: none;
-        border-bottom: 1px solid $borders_color;
-        padding: $container_padding / 2 0;
-        background-color: $header_bg;
-      }
+    @if $monterey == 'false' {
+      padding: 0;
+      background-color: color-mix(in srgb, black 15%, $header_bg);
+    } @else {
+      padding: $container_padding / 2 0;
+      background-color: $header_bg;
    }
+  }

-    &:backdrop .box {
-      > scrolledwindow,
-      > .start-action,
-      > .end-action {
-        filter: opacity(0.5);
-      }
+  &:backdrop .box {
+    > scrolledwindow,
+    > .start-action,
+    > .end-action {
+      filter: opacity(0.5);
    }
  }

@ -446,6 +463,7 @@ tabbar {
    padding: 0;
    box-shadow: none;
    background-color: transparent;
+    min-height: $menuitem_size;

    > separator {
      margin: 0;
@ -460,6 +478,7 @@ tabbar {
      min-width: 2px;
      border-radius: 2px;
      background: gtkalpha($selected_bg_color, 0.5);
+      margin: 3px 6px;
    }

    > tabboxchild {
@ -482,6 +501,7 @@ tabbar {
      @if $monterey == 'false' {
        @extend %tabs_tab;
        border-top: none;
+        border-bottom: none;
      } @else {
        @extend %monterey_tab;
      }
@ -507,12 +527,12 @@ tabbar {

        &:hover {
          color: $fg_color;
-          background-color: rgba($borders_color, 0.1);
+          background-color: gtkalpha(currentColor, 0.1);
        }

        &:active, &:active:hover {
-          color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
-          background-color: rgba($borders_color, 0.2);
+          color: $text_color;
+          background-color: gtkalpha(currentColor, 0.2);
        }
      }
    }
@ -527,6 +547,22 @@ tabbar {
      }
    }
  }
+
+  scrolledwindow.pinned {
+    @if $monterey == 'false' {
+      padding: $container_padding / 2 0;
+    }
+
+    tabbox {
+      > tab,
+      > tabboxchild > tab {
+        @extend %monterey_tab;
+        @if $monterey == 'false' {
+          padding: 0 $container_padding / 2;
+        }
+      }
+    }
+  }
 }

 dnd tab {
@ -591,8 +627,8 @@ toolbarview.undershoot-bottom scrolledwindow {
  color: $dark_sidebar_fg;

  &:backdrop {
-    background-color: $dark_sidebar_bg;
-    // transition: background-color $longer_duration $deceleration_curve;
+    background-color: $bg_color;
+    transition: background-color $longer_duration $deceleration_curve;
  }

  .sidebar,
@ -686,8 +722,8 @@ toolbarview.undershoot-bottom scrolledwindow {
  color: $text_color;

  &:backdrop {
-    background-color: $base_color;
-    // transition: background-color $longer_duration $deceleration_curve;
+    background-color: $bg_color;
+    transition: background-color $longer_duration $deceleration_curve;
  }

  toolbarview.undershoot-top scrolledwindow {
@ -788,13 +824,115 @@ toolbarview.undershoot-bottom scrolledwindow {
  }
 }

-.top-bar {
-  background: none;
-  border: none;
-  box-shadow: none;
+//
+// AdwToolbarView
+//

-  .collapse-spacing {
+toolbarview {
+  > .top-bar,
+  > .bottom-bar {
+    searchbar,
+    actionbar {
+      > revealer > box {
+        background-color: transparent;
+        border: none;
+        box-shadow: none;
+      }
+    }
+
+    .toolbar  {
+      background-color: transparent;
+    }
+
+    .collapse-spacing {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      headerbar {
+        min-height: $headerbar_size;
+
+        > windowhandle > box {
+          padding-top: 8px;
+          padding-bottom: 8px;
+
+          > widget > box.vertical {
+            margin-top: -8px;
+            margin-bottom: -8px;
+          }
+        }
+
+        &.default-decoration {
+          min-height: $medium_size;
+
+          > windowhandle > box {
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+        }
+      }
+
+      searchbar,
+      actionbar {
+        > revealer > box {
+          padding-top: $container_padding;
+          padding-bottom: $container_padding;
+        }
+      }
+
+      .toolbar  {
+        padding-top: $container_padding;
+        padding-bottom: $container_padding;
+      }
+
+      tabbar {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    &.raised {
+      background-color: transparent;
+      color: $header_fg;
+
+      &:backdrop {
+        background-color: transparent;
+      }
+    }
+
+    &:backdrop > windowhandle {
+      filter: none;
+    }
+  }
+
+  > .bottom-bar {
    padding: 0;
+    border-spacing: 0;
+    box-shadow: inset 0 1px $borders_color;
+    background-color: color-mix(in srgb, black 5%, $bg_color);
+    color: $text_color;
+
+    &:backdrop {
+      background-color: $bg_color;
+      color: $disabled_fg_color;
+    }
+
+    actionbar { @extend %actionbar-inline; }
+  }
+
+  > .top-bar.raised {
+    box-shadow: none;
+
+    &.border {
+      box-shadow: none;
+    }
+  }
+
+  > .bottom-bar.raised {
+    box-shadow: none;
+
+    &.border {
+      box-shadow: none;
+    }
  }
 }

@ -856,112 +994,6 @@ dialog-host > dialog.osd:not(progressbar):not(button):not(menubutton):not(splitb
  }
 }

-//
-// AdwToolbarView
-//
-toolbarview {
-  > .top-bar,
-  > .bottom-bar {
-    searchbar,
-    actionbar {
-      > revealer > box {
-        background-color: transparent;
-        border: none;
-        box-shadow: none;
-      }
-    }
-
-    .toolbar  {
-      background-color: transparent;
-    }
-
-    .collapse-spacing {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      headerbar {
-        min-height: $headerbar_size;
-
-        > windowhandle > box {
-          padding-top: 0;
-          padding-bottom: 0;
-        }
-
-        &.default-decoration {
-          min-height: $medium_size;
-
-          > windowhandle > box {
-            padding-top: 0;
-            padding-bottom: 0;
-          }
-        }
-      }
-
-      searchbar,
-      actionbar {
-        > revealer > box {
-          padding-top: $container_padding;
-          padding-bottom: $container_padding;
-        }
-      }
-
-      .toolbar  {
-        padding-top: $container_padding;
-        padding-bottom: $container_padding;
-      }
-
-      tabbar {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    }
-
-    &.raised {
-      background-color: transparent;
-      color: $header_fg;
-
-      &:backdrop {
-        background-color: transparent;
-      }
-    }
-
-    &:backdrop > windowhandle {
-      filter: none;
-    }
-  }
-
-  > .bottom-bar {
-    padding: 0;
-    border-spacing: 0;
-    box-shadow: inset 0 1px $borders_color;
-    background-color: darken($bg_color, 3%);
-    color: $text_color;
-
-    &:backdrop {
-      background-color: $bg_color;
-      color: $disabled_fg_color;
-    }
-
-    actionbar { @extend %actionbar-inline; }
-  }
-
-  > .top-bar.raised {
-    box-shadow: none;
-
-    &.border {
-      box-shadow: none;
-    }
-  }
-
-  > .bottom-bar.raised {
-    box-shadow: none;
-
-    &.border {
-      box-shadow: none;
-    }
-  }
-}
-
 // ThemeSelector
 themeselector, // Gnome text editor
 panelthemeselector { // Gnome builder
--- a/src/sass/gtk/apps/_mate.scss
+++ b/src/sass/gtk/apps/_mate.scss
@ -67,7 +67,7 @@ panel-toplevel.background {
 //
 MsdOsdWindow.background.osd {
  border-radius: 2px;
-  border: 1px solid darken($osd_bg_color, 8%);
+  border: 1px solid darken($solid_osd_bg_color, 8%);

  .progressbar {
    background-color: $selected_bg_color;
@ -75,8 +75,9 @@ MsdOsdWindow.background.osd {
    border-color: red;
    border-radius: 5px;
  }
+
  .trough {
-    background-color: darken($osd_bg_color, 5%);
+    background-color: darken($solid_osd_bg_color, 5%);
    border: none;
    border-radius: 5px;
  }
--- a/src/sass/gtk/apps/_misc.scss
+++ b/src/sass/gtk/apps/_misc.scss
@ -195,7 +195,7 @@ $chrome_menu_fg_color: $fg_color;

 window.background.chromium {
  // checked-tab & toolbar & button widgets
-  background-color: $bg_color;
+  background-color: $chrome_bg_color;
  color: $text_color;

  headerbar.titlebar {
@ -216,7 +216,7 @@ window.background.chromium {
      min-width: 16px;
      min-height: 16px;
      margin: 0; // unset margins
-      padding: 0 0;
+      padding: 0;
      background-size: 16px 16px;
      color: transparent; // hide stock icons
      border: none;
@ -264,6 +264,7 @@ window.background.chromium {
 //
 // Libre-Office
 //
+
 window.background:not(.solid-csd):not(.csd) {
  // reserved area at the most-right side of GtkMenuBar
  > grid.horizontal > grid.horizontal {
@ -294,33 +295,6 @@ window.background:not(.solid-csd):not(.csd) {
    }
  }

-  > grid.horizontal > widget > widget {
-    viewport.frame > box > box > box > grid toolbar {
-      background: none;
-      border: none;
-      padding: 3px;
-    }
-
-    > scrolledwindow > viewport.frame {
-      background: $base_color;
-
-      > grid > box.vertical {
-        > toolbar {
-          background: none;
-          border: none;
-          padding: 6px;
-        }
-      }
-
-      > grid > box.horizontal > #combobox.linked,
-      > grid > box.horizontal > grid.horizontal > box.horizontal { background: $base_color; }
-    }
-
-    toolbar.small-button {
-      border: none;
-    }
-  }
-
  // for 'Notebookbar' toolbar
  > notebook {
    border: none; // unset borders
@ -366,6 +340,33 @@ window.background:not(.solid-csd):not(.csd) {
  }
 }

+window.background:not(.solid-csd) {
+  > grid.horizontal > widget > widget {
+    viewport.frame > box > box > box > grid toolbar {
+      background-color: transparent;
+      border: none;
+      padding: 3px;
+    }
+
+    > scrolledwindow > viewport.frame {
+      > grid > box.vertical {
+        > toolbar {
+          background-color: transparent;
+          border: none;
+          padding: 6px;
+        }
+      }
+
+      > grid > box.horizontal > #combobox.linked,
+      > grid > box.horizontal > grid.horizontal > box.horizontal { background-color: $base_color; }
+    }
+
+    toolbar.small-button {
+      border: none;
+    }
+  }
+}
+
 #combobox.linked {
  > entry.combo {
    border: 1px solid $dark_borders_color;
@ -403,6 +404,14 @@ toolbar.toolbar {
      background-color: if($variant == 'light', mix(black, $bg_color, 5%), mix(white, $bg_color, 5%));
      border-color: transparent;
    }
+
+    &:disabled {
+      color: $disabled_fg_color;
+
+      label {
+        color: $disabled_fg_color;
+      }
+    }
  }
 }
Author	SHA1	Message	Date
vinceliuice	1e0656208d	Fixed #1283	2025-05-14 11:55:46 +08:00
vinceliuice	f67de5aeab	update	2025-04-25 00:03:35 +08:00
vinceliuice	3dc9dc0fb1	Fixed #1265	2025-04-20 22:28:50 +08:00
vinceliuice	20c07522ec	update	2025-04-14 08:32:34 +08:00
vinceliuice	4090a93776	update	2025-04-12 20:32:28 +08:00
vinceliuice	7d9b702418	Update #1259	2025-04-12 13:59:40 +08:00
vinceliuice	1b4893fc93	update	2025-04-12 12:12:31 +08:00
vinceliuice	22bcd1a0f6	Update _colors-libadwaita.scss	2025-04-11 08:38:28 +08:00
vinceliuice	29dc25d7a4	Fixed builder issues	2025-04-11 08:35:24 +08:00
vinceliuice	5cbdad0eb6	update	2025-04-10 17:28:59 +08:00
vinceliuice	e754e93a2d	update	2025-04-10 13:41:26 +08:00
vinceliuice	8fa229c58e	update	2025-04-10 13:22:58 +08:00
vinceliuice	12aa63f12d	update	2025-04-10 12:41:17 +08:00
vinceliuice	e289dab0ac	Fixed #1258	2025-04-10 11:54:13 +08:00
vinceliuice	a40015ccb6	Update _common-4.0.scss	2025-04-10 11:38:08 +08:00
vinceliuice	4ced02d386	update #1257	2025-04-10 10:32:34 +08:00
vinceliuice	126d75ec2d	update	2025-04-10 07:41:24 +08:00
vinceliuice	611c499519	update	2025-04-10 00:27:21 +08:00
vinceliuice	20ea5a2a57	update	2025-04-09 23:49:35 +08:00
vinceliuice	a8314c62b7	Merge branch 'master' of https://github.com/vinceliuice/WhiteSur-gtk-theme	2025-04-09 05:40:11 +08:00
vinceliuice	deea65de36	update	2025-04-09 05:39:47 +08:00
Vince	e4a2990668	Merge pull request #1251 from ging-dev/fix fix: Theme parser error	2025-04-05 12:03:30 +08:00
ging-dev	219e7f9914	fix: Theme parser error	2025-04-05 10:26:27 +07:00
vinceliuice	e8b316057a	Update _gnome-40.0.scss	2025-04-05 10:30:14 +08:00