update

src/sass/gtk/_common-3.0.scss

@@ -1247,30 +1247,28 @@ searchbar > revealer > box {
     // but let's keep it for backwards compatibility.
     transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
     animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
-    box-shadow: inset 0 1px highlight($primary), inset 0 -1px $border;
     background-color: $primary;
     color: on($primary);
 
+    @if $variant == 'light' or $rimless == 'true' {
+      box-shadow: inset 0 -1px $border, inset 0 1px highlight($primary);
+    } @else {
+      box-shadow: inset 0 -1px $border;
+    }
+
     &:backdrop {
       color: on($primary, secondary);
+      background-color: lighten($primary, 6%);
     }
 
     .subtitle:link { color: on($primary); }
 
     button:not(.suggested-action):not(.destructive-action) {
-      border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
-                                    currentColor 0%,
-                                    transparent 0%)
-                                    0 0 0 / 0 0 0px;
       color: on($primary);
 
       &:disabled { color: on($primary, disabled); }
 
       &:checked {
-        border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
-                                      currentColor 100%,
-                                      transparent 0%)
-                                      0 0 2 / 0 0 2px;
         color: on($primary);
 
         &:disabled { color: on($primary, disabled); }
@@ -1299,11 +1297,6 @@ searchbar > revealer > box {
     }
   }
 
-  .selection-mode {
-    box-shadow: inset 0 1px highlight($primary); // Avoid double shadows
-    background-color: $primary;
-  }
-
   // squared corners when the window is maximized, tiled, or fullscreen
   .tiled &,
   .tiled-top &,
@@ -2813,7 +2806,8 @@ actionbar > revealer > box {
   background-color: $base;
   background-clip: border-box;
 
-  .background.csd box.vertical > & {
+  .background.csd box.vertical > &
+  .background.csd box.vertical > revealer > & {
     border-radius: 0 0 $window-radius $window-radius;
   }
 

src/sass/gtk/_common-4.0.scss

@@ -138,7 +138,74 @@ label {
   }
 }
 
-%dim-label, .dim-label { color: $text-secondary; }
+%dim-label, .dim-label {
+  color: $text-secondary;
+  opacity: 1;
+}
+
+.accent {
+  color: $primary;
+}
+
+.success {
+  color: $success;
+}
+
+.warning {
+  color: $warning;
+}
+
+.error {
+  color: $error;
+}
+
+// General Typography
+.large-title {
+  font-weight: 300;
+  font-size: 24pt;
+}
+
+.title {
+  &-1 {
+    font-weight: 800;
+    font-size: 20pt;
+  }
+
+  &-2 {
+     font-weight: 800;
+     font-size: 15pt;
+  }
+
+  &-3 {
+    font-weight: 700;
+    font-size: 15pt;
+  }
+
+  &-4 {
+    font-weight: 700;
+    font-size: 13pt;
+  }
+}
+
+.heading {
+  font-weight: 700;
+  font-size: 11pt;
+}
+
+.body {
+  font-weight: 400;
+  font-size: 11pt;
+}
+
+.caption {
+  font-weight: 400;
+  font-size: 9pt;
+
+  &-heading {
+    font-weight: 700;
+    font-size: 9pt;
+  }
+}
 
 window.assistant {
   .sidebar {
@@ -197,54 +264,6 @@ spinner {
   }
 }
 
-// General Typography
-.large-title {
-  font-weight: 300;
-  font-size: 24pt;
-}
-
-.title {
-  &-1 {
-    font-weight: 800;
-    font-size: 20pt;
-  }
-
-  &-2 {
-     font-weight: 800;
-     font-size: 15pt;
-  }
-
-  &-3 {
-    font-weight: 700;
-    font-size: 15pt;
-  }
-
-  &-4 {
-    font-weight: 700;
-    font-size: 13pt;
-  }
-}
-
-.heading {
-  font-weight: 700;
-  font-size: 11pt;
-}
-
-.body {
-  font-weight: 400;
-  font-size: 11pt;
-}
-
-.caption {
-  font-weight: 400;
-  font-size: 9pt;
-
-  &-heading {
-    font-weight: 700;
-    font-size: 9pt;
-  }
-}
-
 /****************
  * Text Entries *
  ****************/
@@ -268,10 +287,14 @@ entry {
     // &.search { border-radius: $circular-radius; }
 
     &.flat {
-      min-height: 0;
-      padding: 2px;
-      border-radius: 0;
-      background-color: transparent;
+      &:focus-within, &:disabled, &:hover, & {
+        min-height: 0;
+        padding: 2px;
+        background-color: transparent;
+        box-shadow: none;
+        border-radius: 0;
+        outline: none;
+      }
     }
 
     image { // icons inside the entry
@@ -282,13 +305,11 @@ entry {
       &:disabled { color: $text-disabled; }
 
       &.left {
-        margin-left: ($medium-size - 16px) / 2 - 8px;
-        margin-right: 6px;
+        margin: 0 6px 0 ($medium-size - 16px) / 2 - 8px;
       }
 
       &.right {
-        margin-left: 6px;
-        margin-right: ($medium-size - 16px) / 2 - 8px;
+        margin: 0 ($medium-size - 16px) / 2 - 8px 0 6px;
       }
     }
 
@@ -570,7 +591,6 @@ button {
     background-color: $fill;
     background-clip: padding-box;
     font-weight: inherit;
-    padding: 0;
     border: 1px solid $border;
     background-clip: border-box;
 
@@ -612,6 +632,13 @@ button {
     }
   }
 
+  .linked > & {
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+
   .linked:not(.vertical) > &,
   .linked:not(.vertical) > &.image-button {
     @extend %linked;
@@ -2039,7 +2066,13 @@ popover.background {
       margin: $space-size / 2 0;
     }
 
-    list separator { margin: 0; }
+    list {
+      separator { margin: 0; }
+
+      > row {
+        border-radius: $corner-radius;
+      }
+    }
 
     stack > box { padding: 0; }
 
@@ -2416,6 +2449,16 @@ tabbar {
       background: none;
     }
 
+    > separator {
+      margin-top: 9px;
+      margin-bottom: 9px;
+      transition: opacity 150ms ease-in-out;
+
+      &.hidden {
+        opacity: 0;
+      }
+    }
+
     > tabboxchild {
       margin: 0 -3px;
 
@@ -3408,38 +3451,24 @@ listview,
 list {
   border-color: $border;
   background-color: $base;
+  background-clip: padding-box;
 
-  row { padding: $space-size; }
+  > row {
+    padding: $space-size;
+    background-clip: padding-box;
+  }
 
   > row.expander { padding: 0px; }
   > row.expander .row-header { padding: 2px; }
 
-  &.content:not(.conversation-listbox) {
-    @extend %circular_list;
-
-    > row {
-      @extend %circular_row;
-    }
+  &.horizontal row.separator:not(:last-child),
+  &.separators.horizontal > row:not(.separator):not(:last-child) {
+    border-left: 1px solid $border;
   }
 
-  &.boxed-list {
-    @extend %circular_list;
-
-    > row {
-      @extend %circular_row;
-
-      &.expander {
-        list {
-          background-color: transparent;
-          box-shadow: none;
-          border: none;
-
-          > row {
-            @extend %circular_row;
-          }
-        }
-      }
-    }
+  &:not(.horizontal) row.separator:not(:last-child),
+  &.separators:not(.horizontal) > row:not(.separator):not(:last-child) {
+    border-bottom: 1px solid $border;
   }
 }
 
@@ -3527,10 +3556,6 @@ row {
     }
   }
 
-  button {
-    @extend %button-flat-simple;
-  }
-
   button &.activatable {
     &:focus, &:hover, &:active {
       box-shadow: none;
@@ -3560,6 +3585,253 @@ row {
   }
 }
 
+.rich-list { /* rich lists usually containing other widgets than just labels/text */
+  & > row {
+    padding: $space-size * 1.5 $space-size * 2;
+    min-height: 32px; /* should be tall even when only containing a label */
+
+    &:last-child { border-bottom: none; }
+
+    & > box {
+      border-spacing: $space-size * 2;
+    }
+  }
+}
+
+// AdwActionRow
+row {
+  label.subtitle {
+    font-size: smaller;
+    @extend .dim-label;
+  }
+
+  > box.header {
+    margin-left: $space-size * 2;
+    margin-right: $space-size * 2;
+    border-spacing: $space-size;
+    min-height: 50px;
+
+    > .icon:disabled {
+      filter: opacity(0.45);
+    }
+
+    > box.title {
+      margin-top: $space-size;
+      margin-bottom: $space-size;
+      border-spacing: $space-size / 2;
+      padding: 0;
+
+      // Specificity bump for header bar
+      &,
+      > .title,
+      > .subtitle {
+        padding: 0;
+        font-weight: inherit;
+      }
+    }
+
+    > .prefixes,
+    > .suffixes {
+      border-spacing: $space-size;
+    }
+
+    > .icon,
+    > .prefixes {
+      &:dir(ltr) { margin-right: $space-size; }
+      &:dir(rtl) { margin-left: $space-size; }
+    }
+  }
+}
+
+// AdwEntryRow
+row.entry {
+  &:not(:selected).activatable.focused:hover,
+  &:not(:selected).activatable.focused:active {
+    background-color: transparent;
+  }
+
+  .edit-icon, .indicator {
+    min-width: 24px;
+    min-height: 24px;
+    padding: 5px;
+  }
+
+  .edit-icon:disabled {
+    opacity: 0.5;
+  }
+
+  .indicator {
+    opacity: 0.65;
+  }
+
+  &.monospace {
+    font-family: inherit;
+
+    text {
+      font-family: monospace;
+    }
+  }
+
+  @each $e_type, $e_color in (error,   $error),
+                             (warning, $warning),
+                             (success, $success) {
+    &.#{$e_type} {
+      @include entry($e_color);
+
+      text {
+        > selection:focus-within { background-color: gtkalpha($e_color, .2); }
+
+        > cursor-handle > contents { background-color: currentColor; }
+      }
+    }
+  }
+}
+
+// AdwComboRow
+row.combo {
+  image.dropdown-arrow:disabled {
+    filter: opacity(0.45);
+  }
+
+  listview.inline {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: inherit;
+
+    &, &:disabled {
+      background: none;
+      color: inherit;
+    }
+  }
+
+  popover > contents {
+    min-width: 120px;
+  }
+}
+
+// AdwExpanderRow
+@mixin margin-start($margin) {
+  &:dir(ltr) {
+    margin-left: $margin;
+  }
+
+  &:dir(rtl) {
+    margin-right: $margin;
+  }
+}
+
+%boxed_list_row {
+  border-bottom: 1px solid $border;
+
+  &:not(:selected).activatable {
+    &:hover {
+      background-color: $overlay-hover;
+    }
+
+    &:active {
+      background-color: $overlay-active;
+    }
+
+    &.has-open-popup {
+      background-color: gtkalpha(currentColor, .03);
+    }
+  }
+}
+
+row.expander {
+  // Drop transparent background on expander rows to let nested rows handle it,
+  // avoiding double highlights.
+  background: none;
+  padding: 0px;
+
+  > box > list {
+    background: none;
+    color: inherit;
+  }
+
+  list.nested {
+    color: inherit;
+  }
+
+  list.nested > row {
+    @extend %boxed_list_row;
+  }
+
+  // AdwExpanderRow arrow rotation
+  image.expander-row-arrow {
+    @extend .dim-label;
+
+    transition: -gtk-icon-transform 200ms $ease-out;
+    @include margin-start($space-size);
+
+    &:dir(ltr) {
+      -gtk-icon-transform: rotate(0.5turn);
+    }
+
+    &:dir(rtl) {
+      -gtk-icon-transform: rotate(-0.5turn);
+    }
+
+    &:disabled {
+      filter: opacity(0.45);
+    }
+  }
+
+  &:checked image.expander-row-arrow {
+    -gtk-icon-transform: rotate(0turn);
+    opacity: 1;
+
+    &:not(:disabled) {
+      color: $primary;
+    }
+  }
+
+  .osd &:checked image.expander-row-arrow:not(:disabled) {
+    color: inherit;
+  }
+}
+
+// Boxed Lists
+
+// Deprecated: use .boxed-list instead
+list.content,
+list.boxed-list {
+  @extend %circular_list;
+
+  > row {
+    // Regular rows and expander header rows background
+    &, &.expander row.header {
+      @extend %boxed_list_row;
+    }
+
+    &.expander {
+      border: none;
+    }
+
+    // Rounded top
+    &:first-child {
+      &, &.expander row.header {
+        border-top-left-radius: $corner-radius;
+        border-top-right-radius: $corner-radius;
+      }
+    }
+
+    // Rounded bottom
+    &:last-child {
+      &,
+      &.expander:not(:checked),
+      &.expander:not(:checked) row.header,
+      &.expander:checked list.nested,
+      &.expander:checked list.nested > row:last-child {
+        border-bottom-left-radius: $corner-radius;
+        border-bottom-right-radius: $corner-radius;
+        border-bottom-width: 0;
+      }
+    }
+  }
+}
+
 columnview {
   // move padding to child cells
   > listview > row {
@@ -3608,18 +3880,6 @@ columnview {
   }
 }
 
-.rich-list { /* rich lists usually containing other widgets than just labels/text */
-  & > row {
-    padding: $space-size * 1.5 $space-size * 2;
-    min-height: 32px; /* should be tall even when only containing a label */
-
-    &:last-child { border-bottom: none; }
-
-    & > box {
-      border-spacing: $space-size * 2;
-    }
-  }
-}
 
 /*********************
  * App Notifications *
@@ -4009,6 +4269,10 @@ separator.sidebar {
     color: $text-secondary;
   }
 
+  > separator {
+    margin: $space-size * 0.75 0;
+  }
+
   > row {
     min-height: $small-size;
     padding: $space-size;
@@ -4692,12 +4956,13 @@ stackswitcher {
  *************/
 // Outline for low res icons
 .lowres-icon {
-  -gtk-icon-shadow: none;
+  -gtk-icon-shadow: 0 1px 2px rgba(black, 0.1);
 }
 
 // Drapshadow for large icons
 .icon-dropshadow {
-  -gtk-icon-shadow: none;
+  -gtk-icon-shadow: 0 1px 12px rgba(black, 0.05),
+                    0 1px 6px rgba(black, 0.1)
 }
 
 

src/sass/gtk/_drawing-4.0.scss

@@ -136,7 +136,6 @@
   }
 
   @if $t == flat-focus {
-    background-color: transparent;
     color: $text;
     box-shadow: inset 0 0 0 2px $fill;
   }

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

@@ -1415,6 +1415,13 @@ box.vertical > revealer > toolbar.search-bar {
   }
 }
 
+window.background.csd {
+  > stack > box > revealer > actionbar > revealer > box {
+    border-bottom-left-radius: $window-radius;
+    border-bottom-right-radius: $window-radius;
+  }
+}
+
 
 /*******************
  * Document Viewer *

src/sass/gtk/apps/_libadwaita.scss

@@ -45,12 +45,14 @@ avatar {
 // Card
 .card {
   @at-root %card, & {
-    @include button(normal);
     border-radius: $corner-radius;
     border: 1px solid $border;
     background-clip: border-box;
     color: $text-secondary;
     box-shadow: none;
+    outline: none;
+    background-color: $base;
+    color: $text;
   }
 
   &.activatable {