Update _control-center.scss

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

@@ -25,62 +25,66 @@ preferencesgroup > box {
     }
   }
 
-  .cutout-button { background-color: $dialog_bg_color; }
+  .cutout-button {
+    background-color: $dialog_bg_color;
+  }
 
-  @if $gnome_version == 'new' {
-    button.accent-button {
-      min-height: 24px;
-      min-width: 24px;
-      padding: $base_padding / 2;
-      border-radius: $circular_radius;
-      background: var(--accent-bg-color);
-      outline: none;
-      background-clip: content-box;
-      box-shadow: none;
-  
-      &:hover { box-shadow: 0 0 0 3px $hover_color; }
-  
-      &:checked { box-shadow: 0 0 0 3px $accent_color; }
-  
-      &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
-        --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
-      }
-      
-      &.blue {
-        --accent-bg-color: var(--accent-blue);
-      }
-      
-      &.teal {
-        --accent-bg-color: var(--accent-teal);
-      }
-      
-      &.green {
-        --accent-bg-color: var(--accent-green);
-      }
-      
-      &.yellow {
-        --accent-bg-color: var(--accent-yellow);
-      }
-      
-      &.orange {
-        --accent-bg-color: var(--accent-orange);
-      }
-      
-      &.red {
-        --accent-bg-color: var(--accent-red);
-      }
-      
-      &.pink {
-        --accent-bg-color: var(--accent-pink);
-      }
-      
-      &.purple {
-        --accent-bg-color: var(--accent-purple);
-      }
-      
-      &.slate {
-        --accent-bg-color: var(--accent-slate);
-      }
+  button.accent-button {
+    min-height: 24px;
+    min-width: 24px;
+    padding: $base_padding / 2;
+    border-radius: $circular_radius;
+    background: var(--accent-bg-color);
+    outline: none;
+    background-clip: content-box;
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: 0 0 0 3px $hover_color;
+    }
+
+    &:checked {
+      box-shadow: 0 0 0 3px $accent_color;
+    }
+
+    &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
+      --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
+    }
+
+    &.blue {
+      --accent-bg-color: var(--accent-blue);
+    }
+
+    &.teal {
+      --accent-bg-color: var(--accent-teal);
+    }
+
+    &.green {
+      --accent-bg-color: var(--accent-green);
+    }
+
+    &.yellow {
+      --accent-bg-color: var(--accent-yellow);
+    }
+
+    &.orange {
+      --accent-bg-color: var(--accent-orange);
+    }
+
+    &.red {
+      --accent-bg-color: var(--accent-red);
+    }
+
+    &.pink {
+      --accent-bg-color: var(--accent-pink);
+    }
+
+    &.purple {
+      --accent-bg-color: var(--accent-purple);
+    }
+
+    &.slate {
+      --accent-bg-color: var(--accent-slate);
     }
   }
-}
+}

src/sass/libadwaita/apps/_nautilus.scss

@@ -72,9 +72,9 @@
     margin: $base_padding 0;
 
     > button.image-button {
-      min-width: 24px;
-      min-height: 24px;
-      padding: $medium_size / 2 - $base_padding - 12px;
+      min-width: 16px;
+      min-height: 16px;
+      padding: $base_padding / 2;
     }
   }
 }

src/sass/libadwaita/widgets/_header-bar.scss

@@ -164,6 +164,22 @@ leaflet:first-child > headerbar {
     }
   }
 
+  windowcontrols > button {
+    @if $window_button =='mac' {
+      &.minimize, &.maximize, &.close {
+        &:backdrop {
+          > image {
+            background-color: gtkalpha($window_fg_color, 0.3);
+          }
+  
+          &:hover, &:active {
+            color: gtkalpha($window_fg_color, 0.45);
+          }
+        }
+      }
+    }
+  }
+
   .maximized &,
   .fullscreen &,
   .tiled &,

src/sass/libadwaita/widgets/_toggle-group.scss

@@ -7,30 +7,28 @@ $toggle_transition: color 200ms $ease-out-quad,
                     box-shadow 200ms $ease-out-quad;
 
 toggle-group {
-  ---group-padding: 3px;
-
   background: $button_color;
-  border-radius: $button_radius;
-  padding: var(---group-padding);
+  border-radius: $button_radius + $base_padding / 2;
+  padding: $base_padding / 2;
 
   &:disabled {
-    background-color: color-mix(in srgb, $button_color var(--disabled-opacity), transparent);
+    background-color: color-mix(in srgb, $button_color 45%, transparent);
   }
 
   > toggle {
-    border-radius: calc(#{$button_radius} - var(---group-padding);
+    border-radius: $button_radius;
     font-weight: bold;
     min-width: 34px;
-    min-height: calc(34px - var(---group-padding) * 2);
+    min-height: 34px - $base_padding;
 
     &.image-button > image:disabled {
       filter: opacity($strong_disabled_opacity);
     }
 
     &.text-button {
-      min-width: calc(18px + var(---group-padding) * 2);
-      padding-left: calc(11px - var(---group-padding));
-      padding-right: calc(11px - var(---group-padding));
+      min-width: 18px - $base_padding;
+      padding-left: 11px - $base_padding / 2;
+      padding-right: 11px - $base_padding / 2;
 
       > label:disabled {
         filter: opacity($strong_disabled_opacity);
@@ -38,9 +36,9 @@ toggle-group {
     }
 
     &.image-text-button {
-      min-width: calc(10px + var(---group-padding) * 2);
-      padding-left: calc(11px - var(---group-padding));
-      padding-right: calc(11px - var(---group-padding));
+      min-width: 10px + $base_padding;
+      padding-left: 11px - $base_padding / 2;
+      padding-right: 11px - $base_padding / 2;
 
       > buttoncontent > box > label {
         padding: 0;
@@ -63,13 +61,12 @@ toggle-group {
     }
 
     &:checked {
-      background-color: var(--active-toggle-bg-color);
-      color: var(--active-toggle-fg-color);
-      box-shadow: 0 1px 3px 1px RGB(0 0 6 / 7%),
-                  0 2px 6px 2px RGB(0 0 6 / 3%);
+      background-color: $selected_color;
+      color: $card_fg_color;
+      box-shadow: none;
 
       &:disabled {
-        background-color: color-mix(in srgb, var(--active-toggle-bg-color) var(--disabled-opacity), transparent);
+        background-color: $hover_color;
         box-shadow: none;
       }
     }
@@ -81,24 +78,22 @@ toggle-group {
     --active-toggle-fg-color: rgb(0 0 0 / 80%);
 
     &:not(.flat) > toggle:checked {
-      --accent-bg-color: rgb(0 0 0 / 75%);
-      --accent-fg-color: white;
-
-      --standalone-color-oklab: #{$standalone-color-oklab-light};
-      --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
-      --destructive-color: oklab(from var(--destructive-bg-color) var(--standalone-color-oklab));
-      --success-color: oklab(from var(--success-bg-color) var(--standalone-color-oklab));
-      --warning-color: oklab(from var(--warning-bg-color) var(--standalone-color-oklab));
-      --error-color: oklab(from var(--error-bg-color) var(--standalone-color-oklab));
-
       @include focus-ring($transition: $toggle_transition, $outer: true, $offset: 1px);
 
       &:focus:focus-visible {
-        outline-color: color-mix(in srgb, RGB(255 255 255 / 75%) $focus_border_opacity, transparent);
+        outline-color: color-mix(in srgb, #ffffff 25%, transparent);
       }
 
-      box-shadow: 0 1px 3px 1px RGB(0 0 6 / 7%),
-                  0 2px 6px 2px RGB(0 0 6 / 3%);
+      &, &:hover, &:active, &.keyboard-activating {
+        color: $osd_fg_color;
+      }
+
+      &:checked {
+        background-color: $accent_bg_color;
+        color: $accent_fg_color;
+      }
+
+      box-shadow: none;
 
       &:disabled {
         box-shadow: none;
@@ -107,18 +102,18 @@ toggle-group {
   }
 
   &.vertical > toggle:not(.text-button):not(.image-text-button) {
-    min-width: calc(34px - var(---group-padding) * 2);
+    min-width: 34px - $base_padding;
   }
 
   > separator {
     transition: opacity 200ms $ease-out-quad;
 
     &.horizontal {
-      margin: calc(6px - var(---group-padding)) 1px;
+      margin: $base_padding / 2 1px;
     }
 
     &.vertical {
-      margin: 1px calc(6px - var(---group-padding));
+      margin: 1px $base_padding / 2;
     }
 
     &.hidden {
@@ -126,7 +121,7 @@ toggle-group {
     }
 
     &:disabled {
-      filter: Opacity(var(--disabled-opacity));
+      filter: Opacity($disabled_opacity);
     }
   }
 
@@ -134,34 +129,47 @@ toggle-group {
     border-radius: 17px;
 
     toggle {
-      border-radius: calc(17px - var(---group-padding));
+      border-radius: 17px - $base_padding / 2;
 
       &.text-button,
       &.image-text-button {
-        padding-left: calc(15px - var(---group-padding));
-        padding-right: calc(15px - var(---group-padding));
+        padding-left: 15px - $base_padding;
+        padding-right: 15px - $base_padding;
       }
     }
 
     separator {
       &.horizontal {
-        margin: calc(9px - var(---group-padding)) 1px;
+        margin: $base_padding 1px;
       }
 
       &.vertical {
-        margin: 1px calc(9px - var(---group-padding));
+        margin: 1px $base_padding;
       }
     }
   }
 
   &.flat {
-    ---group-padding: 0px;
     background: none;
     color: inherit;
     box-shadow: none;
+    padding: 0;
 
     > toggle {
       @include focus-ring($transition: $button_transition);
+      min-height: 34px;
+  
+      &.text-button {
+        min-width: 18px;
+        padding-left: 11px - $base_padding / 2;
+        padding-right: 11px - $base_padding / 2;
+      }
+  
+      &.image-text-button {
+        min-width: 10px + $base_padding;
+        padding-left: 11px;
+        padding-right: 11px;
+      }
 
       &:checked {
         background-color: $selected_color;

src/sass/libadwaita/widgets/_toolbars.scss

@@ -97,12 +97,12 @@
 searchbar {
   > revealer > box {
     padding: $base_padding $base_padding $base_padding + 1px $base_padding;
-    background-color: $headerbar_backdrop_color;
-    color: $headerbar_fg_color;
+    background-color: $window_bg_color;
+    color: $window_fg_color;
     box-shadow: inset 0 -1px $headerbar_border_color;
 
     &:backdrop {
-      background-color: $headerbar_bg_color;
+      background-color: $view_bg_color;
       transition: background-color $backdrop_transition;
 
       > * {
@@ -168,8 +168,8 @@ searchbar {
  ****************/
 
 actionbar > revealer > box {
-  background-color: $headerbar_backdrop_color;
-  color: $headerbar_fg_color;
+  background-color: $window_bg_color;
+  color: $window_fg_color;
   box-shadow: inset 0 1px $headerbar_border_color;
   padding: $base_padding + 1px $base_padding $base_padding $base_padding;
   @extend %toolbar;
@@ -179,7 +179,7 @@ actionbar > revealer > box {
   }
 
   &:backdrop {
-    background-color: $headerbar_bg_color;
+    background-color: $view_bg_color;
     transition: background-color $backdrop_transition;
 
     > * {
@@ -237,6 +237,10 @@ banner > revealer > widget {
 toolbarview {
   > .top-bar,
   > .bottom-bar {
+    button.pill {
+      padding: ($medium_size - 24px) / 2 $small_size;
+    }
+
     headerbar { @extend %headerbar-inline; }
     searchbar { @extend %searchbar-inline; }
     actionbar { @extend %actionbar-inline; }
@@ -261,6 +265,33 @@ toolbarview {
 
       viewswitcherbar { @extend %viewswitcherbar-shrunk; }
     }
+
+    &.raised {
+      background-color: $headerbar_backdrop_color;
+      color: $headerbar_fg_color;
+    
+      &:backdrop {
+        background-color: $headerbar_bg_color;
+        transition: background-color $backdrop_transition;
+    
+        > windowhandle {
+          filter: opacity(.5);
+          transition: filter $backdrop_transition;
+        }
+      }
+
+      searchbar, actionbar {
+        > revealer > box {
+          background-color: $headerbar_backdrop_color;
+          color: $headerbar_fg_color;
+          box-shadow: inset 0 1px $headerbar_border_color;
+    
+          &:backdrop {
+            background-color: $headerbar_bg_color;
+          }
+        }
+      }
+    }
   }
 
   &.undershoot-top    scrolledwindow { @include undershoot(top); }
@@ -277,27 +308,7 @@ toolbarview {
     background-repeat: unset;
   }
 
-  > .top-bar,
-  > .bottom-bar {
-    background-color: $headerbar_backdrop_color;
-    color: $headerbar_fg_color;
-
-    &:backdrop {
-      background-color: $headerbar_bg_color;
-      transition: background-color $backdrop_transition;
-
-      > windowhandle {
-        filter: opacity(.5);
-        transition: filter $backdrop_transition;
-      }
-    }
-
-    button.pill {
-      padding: ($medium_size - 24px) / 2 $small_size;
-    }
-  }
-
-  > .top-bar {
+  > .top-bar.raised {
     box-shadow: 0 1px $border_color;
 
     &.border {
@@ -305,7 +316,7 @@ toolbarview {
     }
   }
 
-  > .bottom-bar {
+  > .bottom-bar.raised {
     box-shadow: 0 -1px $border_color;
 
     &.border {
@@ -313,16 +324,67 @@ toolbarview {
     }
   }
 
+  columnview, treeview.view {
+    > header > button {
+      border-bottom: none;
+      border-color: transparent;
+      border-image: linear-gradient(to bottom,
+                    $window_bg_color 20%,
+                    $border_color 20%,
+                    $border_color 80%,
+                    $window_bg_color 80%) 0 0 0 1 / 0 0 0 1px stretch;
+
+      &:first-child {
+        border-image: none;
+      }
+    }
+  }
+
   .sidebar-pane &,
   .content-pane &,
   .about & { // reset
-    > .top-bar,
-    > .bottom-bar {
+    > .top-bar.raised,
+    > .bottom-bar.raised {
       box-shadow: none;
 
       &, &:backdrop {
+        color: inherit;
         background-color: transparent;
       }
     }
   }
+
+  .sidebar-pane & { // reset
+    > .top-bar.raised,
+    > .bottom-bar.raised {
+      searchbar, actionbar {
+        > revealer > box {
+          background-color: transparent;
+          color: $sidebar_fg_color;
+          box-shadow: inset 0 1px $sidebar_border_color;
+
+          &:backdrop {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  .content-pane & { // reset
+    > .top-bar.raised,
+    > .bottom-bar.raised {
+      searchbar, actionbar {
+        > revealer > box {
+          background-color: transparent;
+          color: $window_fg_color;
+          box-shadow: inset 0 1px $border_color;
+
+          &:backdrop {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
 }