diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss
index 74fcec38..d3ddec6e 100644
--- a/src/sass/gtk/_common-3.0.scss
+++ b/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;
   }
 
diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index 813239d8..14db9481 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/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)
 }
 
 
diff --git a/src/sass/gtk/_drawing-4.0.scss b/src/sass/gtk/_drawing-4.0.scss
index bf6dd06a..d000c4a3 100644
--- a/src/sass/gtk/_drawing-4.0.scss
+++ b/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;
   }
diff --git a/src/sass/gtk/apps/_gnome-3.0.scss b/src/sass/gtk/apps/_gnome-3.0.scss
index 17801008..7350077c 100644
--- a/src/sass/gtk/apps/_gnome-3.0.scss
+++ b/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 *
diff --git a/src/sass/gtk/apps/_gnome-4.0.scss b/src/sass/gtk/apps/_gnome-4.0.scss
index 329f1f60..e8fe9ba1 100644
--- a/src/sass/gtk/apps/_gnome-4.0.scss
+++ b/src/sass/gtk/apps/_gnome-4.0.scss
@@ -68,6 +68,7 @@
 //
 // Gnome Control Center
 //
+
 window.dialog {
   > box > stack > box > box {
     > notebook.frame {
@@ -126,6 +127,385 @@ datechooser.view {
   }
 }
 
+// labels
+label {
+  &.primary-label, &.month-name, &.secondary-label {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2;
+  }
+
+  &.primary-label, &.month-name {
+    color: $primary;
+  }
+
+  &.secondary-label {
+    color: $text-disabled;
+  }
+}
+
+calendar-view {
+  font-size: 10pt;
+
+  &:selected {
+    color: $primary;
+    font-weight: bold;
+  }
+}
+
+calendar-view.header,
+label.header {
+  font-size: 10pt;
+  font-weight: bold;
+  color: $text-disabled;
+}
+
+calendar-view.current,
+weekgrid.current {
+  background-color: gtkalpha($primary, 0.3);
+}
+
+popover.events {
+  background-color: $popover;
+  padding: 0;
+
+  box {
+    border-top-left-radius: $corner-radius;
+    border-top-right-radius: $corner-radius;
+  }
+
+  list {
+    background-color: $base;
+    border-radius: $corner-radius;
+  }
+
+  scrolledwindow {
+    border-width: 0;
+  }
+
+  button {
+    border-radius: $corner-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-style: solid none none;
+    box-shadow: none;
+  }
+}
+
+// Event widget
+event {
+  margin: 1px;
+  font-size: 0.9rem;
+
+  widget.content {
+    margin: 4px;
+  }
+
+  &.timed,
+  &:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: $corner-radius;
+  }
+
+  &.timed widget.edge {
+    border-radius: $corner-radius / 2;
+    min-width: 5px;
+  }
+
+  &.slanted-start,
+  &.slanted-end:dir(rtl) {
+    padding-left: $space-size * 2 + 4px;
+    border-radius: 0 $corner-radius / 2 $corner-radius / 2 0;
+  }
+
+  &.slanted-end,
+  &.slanted-start:dir(rtl) {
+    padding-right: $space-size * 2 + 4px;
+    border-radius: $corner-radius / 2 0 0 $corner-radius / 2;
+  }
+
+  &:not(.timed).color-dark {
+    color: white;
+    outline-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &.timed,
+  &:not(.timed).color-light {
+    color: gtkalpha(black, 0.75);
+    outline-color: rgba(255, 255, 255, 0.5);
+  }
+
+}
+
+// Event Popover
+popover.event-popover,
+popover.event-popover > contents {
+  padding: 0;
+}
+
+.search-viewport {
+  background-color: $base;
+}
+
+// calendar popover
+.calendar-list {
+  background-color: transparent;
+}
+
+.calendar-list > list {
+  border-radius: 4px;
+}
+
+// Edit dialog's header button
+.sources-button {
+  margin-top: 0;
+  margin-bottom: 0;
+  border-radius: 0;
+  border-top-style: none;
+  border-bottom-style: none;
+}
+
+.sources-button:hover:not(:backdrop) {
+  background-image: none;
+  text-shadow: none;
+}
+
+// defeats the ugly hover effect of the calendar color dot on buttons
+.calendar-color-image {
+  -gtk-icon-filter: none;
+}
+
+// adds a subtle shadow to the calendar color dot when it makes sense
+image.calendar-color-image,
+button:active:not(:backdrop) .calendar-color-image,
+button:checked:not(:backdrop) .calendar-color-image,
+.calendars-list .calendar-color-image:not(:backdrop):not(:disabled),
+.calendar-list .calendar-color-image:not(:backdrop):not(:disabled),
+.sources-button:not(:backdrop):not(:disabled) .calendar-color-image {
+  -gtk-icon-shadow: 0 1px gtkalpha(black, 0.1);
+}
+
+// Date chooser
+
+// month/year controls
+datechooser {
+  navigator { // add some space between the two controls
+    margin-right: $space-size;
+    margin-left: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  navigator {
+    label { font-weight: bold; }
+
+    button { padding: 0; }
+  }
+
+  // day names and week numbers
+  .weeknum, .weekday {
+    color: $text-disabled;
+    font-size: smaller;
+  }
+
+  // days
+  button.day {
+    font-size: 10pt;
+    font-weight: normal;
+    margin: $space-size / 2;
+    min-height: $menuitem-size;
+    min-width: $menuitem-size;
+    transition: none;
+
+    dot {
+      background-color: $text;
+      border-radius: 50%;
+      min-height: $space-size / 2;
+      min-width: $space-size / 2;
+    }
+
+    &:selected, &.today:selected {
+      background-color: $primary;
+      color: on($primary);
+      font-weight: bold;
+
+      dot { background-color: on($primary); }
+    }
+
+    &.today {
+      color: $primary;
+
+      dot { background-color: $primary; }
+    }
+
+    &.other-month {
+      &:not(:hover),
+      &:backdrop {
+        color: gtkalpha(currentColor, 0.1);
+
+        dot { background-color: gtkalpha(currentColor, 0.1); }
+      }
+
+      &:hover:not(:backdrop) {
+        color: $text-disabled;
+
+        dot { background-color: $text-disabled; }
+      }
+    }
+  }
+}
+
+// Week View CSS
+.week-header {
+  padding: 0;
+
+  & > box:first-child {
+    border-bottom: 1px solid $border;
+  }
+
+  .week-number {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
+    color: $track;
+  }
+
+  &.week-temperature {
+    font-size: 10pt;
+    font-weight: bold;
+    color: $text-disabled;
+  }
+
+  &.lines {
+    color: $border;
+  }
+}
+
+weekhourbar > label {
+  font-size: 10pt;
+  padding: 4px $space-size;
+}
+
+.week-view .lines {
+  color: $border;
+}
+
+weekgrid > widget.now-strip {
+  background-color: gtkalpha($primary, 0.8);
+  margin: 0 0 0 1px;
+  min-height: 3px;
+}
+
+weekgrid:selected,
+.week-header:selected {
+  background-color: gtkalpha($primary, 0.25);
+}
+
+weekgrid.dnd, .week-header.dnd {
+  background-color: gtkalpha($primary, 0.25);
+}
+
+// Month cell
+monthcell {
+  border: solid 1px $border;
+  border-width: 1px 0 0 1px;
+  background: transparent;
+  transition: background-color 200ms;
+
+  &:selected {
+    background-color: gtkalpha($primary, 0.1);
+
+    label.day-label { font-weight: bold; }
+  }
+
+  &:nth-child(7n + 1) { border-left-width: 0; }
+
+  &.today {
+    background-color: gtkalpha($primary, 0.25);
+
+    &:selected { background-color: gtkalpha($primary, 0.33); }
+  }
+
+  &.out-of-month {
+    background-color: $fill;
+  }
+
+  label {
+    color: $text;
+    font-size: 0.9rem;
+  }
+
+  label.day-label {
+    font-size: 1rem;
+  }
+
+  &.out-of-month label {
+    color: $text-secondary;
+  }
+
+  &:hover:not(.out-of-month) {
+    background-color: $background;
+    transition: background-color 200ms;
+  }
+
+  button {
+    padding: 0 $space-size;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+// Month popover
+monthpopover > box {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+.notes-section box > textview {
+  border-radius: $corner-radius;
+  padding: $space-size;
+
+  > text {
+    background: none;
+  }
+}
+
+// Agenda View CSS
+agenda-view list {
+  > row {
+    padding: 2px $space-size * 2;
+  }
+
+  > label {
+    padding: $space-size $space-size * 2;
+  }
+}
+
+label.no-events {
+  font-style: italic;
+}
+
+// Search
+searchbutton > popover > arrow {
+  background: none;
+  border: none;
+}
+
+// Month selector
+datechooser {
+  padding: $space-size;
+
+  .current-week {
+    background: gtkalpha($titlebar, 0.7);
+    color: on($titlebar);
+    border-radius: $corner-radius;
+  }
+}
+
+menubutton stack > box {
+  border-spacing: $space-size;
+}
+
 //
 // Contacts
 //
@@ -138,19 +518,402 @@ datechooser.view {
 // Gnome Software
 //
 
-flowboxchild > button.card {
-  &.category-tile {
-    padding: $space-size * 3.5;
-    border: none;
-    border-radius: $corner-radius;
-  }
+.details-page {
+  margin: $space-size * 4 0px;
+}
+
+.installed-overlay-box {
+  font-size: smaller;
+  background-color: $primary;
+  border-radius: 0;
+  color: on($primary);
+  text-shadow: 0 1px 0 rgba(black, 0.2);
+}
+
+screenshot-carousel box.frame {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+screenshot-carousel button,
+.featured-carousel button {
+  margin: $space-size * 2;
+}
+
+.screenshot-image-main .image1,
+.screenshot-image-main .image2 {
+  margin-top: $space-size;
+  margin-bottom: $space-size * 2;
+  margin-left: $space-size;
+  margin-right: $space-size;
+}
+
+.app-tile-label {
+  font-size: 105%;
+}
+
+.review-textbox {
+  padding: $space-size;
+}
+
+.origin-rounded-box {
+  background-color: $divider;
+  border-radius: $circular_radius;
+  padding: $space-size - 2px;
+}
+
+.origin-beta {
+  color: $warning;
+}
+
+.origin-button > button {
+  padding: $space-size / 2 $space-size * 1.5;
+}
+
+button.card.category-tile {
+  padding: $space-size * 3.5;
+  border: none;
+  border-radius: $corner-radius;
+  min-width: 140px;
+  font-weight: 900;
+  font-size: larger;
 
   &.category-tile-iconless {
     padding: $space-size * 1.5 $space-size * 2.5;
+    min-width: 130px;
+    font-size: 105%;
+    font-weight: normal;
+  }
+
+  // Styling for specific category buttons.
+  &.category-create {
+    background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-develop {
+    background: #5e5c64;
+    color: white;
+
+    &:hover {
+      background: shade(#5e5c64, 1.2);
+      color: white;
+    }
+
+    &:active {
+      background-color: shade(#5e5c64, .95);
+      color: white;
+    }
+  }
+
+  &.category-learn {
+    background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-play {
+    background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
+    color: #393484;
+
+    &:hover {
+      background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+
+    &:active {
+      background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+  }
+
+  &.category-socialize {
+    background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+    color: $text-secondary;
+
+    &:hover {
+      background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+    }
+
+    &:active {
+      background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+    }
+  }
+
+  &.category-work {
+    padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
+    color: #1c71d8;
+    background-color:#fdf8d7;
+    background-image: linear-gradient($border 1px, transparent 1px),
+             linear-gradient(90deg, $border 1px, transparent 1px);
+    background-size: 10px 10px, 10px 10px;
+    background-position: -1px -4px, center -1px;
+
+    &:hover {
+      color: #1c71d8;
+      background-color: lighten(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+
+    &:active {
+      color: #1c71d8;
+      background-color: darken(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
   }
 }
 
+clamp.medium .category-tile:not(.category-tile-iconless),
+clamp.large .category-tile:not(.category-tile-iconless) {
+  font-size: larger;
+}
+
+// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
+.featured-tile {
+  all: unset;
+  padding: 0;
+  box-shadow: none;
+  color: $text;
+
+  label.title-1 {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  &.narrow label.title-1 {
+    font-size: 16pt;
+  }
+}
+
+.application-details-infobar {
+  &, &.info {
+    background-color: $fill;
+    color: $text;
+    border: 1px solid $border;
+  }
+
+  &.warning {
+    background-color: $warning;
+    color: on($warning);
+    border: 1px solid on($warning, divider);
+  }
+}
+
+@keyframes install-progress-unknown-move {
+  0% { background-position: 0%; }
+  50% { background-position: 100%; }
+  100% { background-position: 0%; }
+}
+
+.application-details-description .button {
+  padding-left: $space-size * 4;
+  padding-right: $space-size * 4;
+}
+
+.install-progress {
+  background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px);
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: 0;
+  transition: none;
+}
+
+.install-progress:dir(rtl) { background-position: 100% bottom; }
+
+.review-row > * {
+  margin: $space-size * 2;
+}
+
+.review-row button { font-size: smaller; }
+
+.review-row .vote-buttons button {
+  margin-right: -1px;
+}
+
+// this is the separator between yes and no vote buttons, gtk+ 3.20 only
+.review-row .vote-buttons button:not(:first-child) {
+  border-image: linear-gradient(to top, $border, $border) 0 0 0 1 / 5px 0 5px 1px;
+}
+
+.review-row .vote-buttons button:hover,
+.review-row .vote-buttons button:active,
+.review-row .vote-buttons button:hover + button,
+.review-row .vote-buttons button:active + button {
+  border-image: none;
+}
+
+review-bar {
+  color: $text-disabled;
+  background-image: none;
+  background-color: $track;
+}
+
+.review-histogram star-image {
+  color: $text-disabled;
+}
+
+.version-arrow-label {
+  font-size: x-small;
+}
+
+.overview-more-button {
+  font-size: smaller;
+  padding: 0 $space-size * 2 + 4px;
+}
+
+.app-row-origin-text {
+  font-size: smaller;
+}
+
+.app-listbox-header {
+  padding: $space-size;
+  border-bottom: 1px solid $border;
+}
+
+.image-list {
+  background-color: transparent;
+}
+
+box.star {
+  background-color: transparent;
+  background-image: none;
+}
+
+button.star {
+  outline-offset: 0;
+  background-color: transparent;
+  background-image: none;
+  border-image: none;
+  border-radius: 0;
+  border-width: 0;
+  padding: 0;
+  box-shadow: none;
+  outline-offset: -1px;
+}
+
+star-image {
+  color: $yellow-dark;
+}
+
+.dimmer-label {
+  opacity: 0.25;
+}
+
+.update-failed-details {
+  font-family: Monospace;
+  font-size: smaller;
+  padding: $space-size * 2 + 4px;
+}
+
+.upgrade-banner {
+  padding: 0px;
+  border-radius: $corner-radius;
+  border: none;
+}
+
+.upgrade-banner-background {
+  background: linear-gradient(to bottom, $green-light, $blue-light);
+  color: white;
+}
+
+.upgrade-buttons #button_upgrades_install {
+  padding-left: $space-size * 2 + 4px;
+  padding-right: $space-size * 2 + 4px;
+}
+
+scrolledwindow.list-page > viewport > clamp > box {
+  margin: $space-size * 4 $space-size * 2;
+  border-spacing: $space-size * 4;
+}
+
+.update-preferences preferencesgroup > box > box {
+  margin-top: $space-size * 3;
+}
+
+.section > label:not(:first-child) { margin-top: $space-size; }
+
+.section > box:not(:first-child) { margin-top: $space-size * 2; }
+
+clamp.status-page {
+	margin: $space-size * 6 $space-size * 2;
+}
+
+clamp.status-page .iconbox {
+  min-height: 128px;
+  min-width: 128px;
+}
+
+clamp.status-page .icon {
+  color: $text-disabled;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+clamp.status-page .icon:not(:last-child) {
+  margin-bottom: $space-size * 6;
+}
+
+clamp.status-page .title:not(:last-child) {
+  margin-bottom: $space-size * 2;
+}
+
 app-context-bar {
+  .context-tile {
+    border: 1px solid $border;
+    background-color: transparent;
+    border-radius: 0;
+    padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2;
+    outline-offset: 5px;
+    transition-property: outline, outline-offset, background-image;
+    border-bottom: none;
+    border-right: none;
+
+    &:hover {
+      background-image: none;
+      background-color: $overlay-hover;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $overlay-active;
+    }
+
+    &:focus:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+
+  &.horizontal box:first-child .context-tile:first-child,
+  &.vertical .context-tile:first-child {
+    border-left: none;
+  }
+
+  &.horizontal .context-tile,
+  &.vertical box:first-child .context-tile {
+  	border-top: none;
+  }
+
   > box:not(:first-child) > button.flat {
     border-radius: 0;
 
@@ -174,12 +937,30 @@ app-context-bar {
 
 carousel.card {
   border: none;
+  background-color: $fill;
 }
 
 .context-tile-lozenge {
   min-height: 28px;
   min-width: 28px;
   padding: $space-size;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: $circular_radius;
+
+  &.large {
+    font-size: 24px;
+    padding: 16px;
+    min-width: 24px;  /* 60px minus the left and right padding */
+    min-height: 24px;  /* 60px minus the top and bottom padding */
+  }
+
+  &.wide-image image {
+    margin-top: -28px;
+    margin-bottom: -28px;
+  }
+
+  image { -gtk-icon-style: symbolic; }
 
   &.grey {
     color: $text;
@@ -213,98 +994,82 @@ carousel.card {
   }
 }
 
-screenshot-carousel box.frame.view {
-  border-width: 1px 0;
-  border-radius: 0;
+.eol-red {
+  font-weight: bold;
+  color: $error;
 }
 
-
-/* Styling for specific category buttons. */
-.category-tile.category-create {
-  background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
-  color: white;
-
-  &:hover {
-    background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
-  }
-
-  &:active {
-    background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
-  }
+window.narrow .app-title {
+  font-size: 16pt;
 }
 
-.category-tile.category-develop {
-  background: #5e5c64;
-  color: white;
-
-  &:hover {
-    background: shade(#5e5c64, 1.2);
-  }
-
-  &:active {
-    background-color: shade(#5e5c64, .95);
-  }
+window.narrow .app-developer {
+  font-size: small;
 }
 
-.category-tile.category-learn {
-  background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
-  color: white;
-
-  &:hover {
-    background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
-  }
-
-  &:active {
-    background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
-  }
+.install-progress-label {
+  font-size: smaller;
+  font-feature-settings: "tnum";
 }
 
-.category-tile.category-play {
-  background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
-  color: #393484;
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $space-size * 6 $space-size * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $space-size * 2; }
 
-  &:hover {
-    background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
-  }
-
-  &:active {
-    background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
-  }
+statuspage.icon-dropshadow image.icon {
+	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+	                  0 -1px rgba(0,0,0,0.05),
+	                  1px 0 rgba(0,0,0,0.1),
+	                  0 1px rgba(0,0,0,0.3),
+	                  -1px 0 rgba(0,0,0,0.1);
 }
 
-.category-tile.category-socialize {
-  background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
-  color: $text-secondary;
-
-  &:hover {
-    background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
-  }
-
-  &:active {
-    background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
-  }
+window.info scrollbar.vertical {
+  margin-top: 48px;
+  background: none;
+  box-shadow: none;
 }
 
-.category-tile.category-work {
-  padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
-  color: #1c71d8;
-  background-color:#fdf8d7;
-  background-image: linear-gradient($border 1px, transparent 1px),
-           linear-gradient(90deg, $border 1px, transparent 1px);
-  background-size: 10px 10px, 10px 10px;
-  background-position: -1px -4px, center -1px;
+window.info scrollbar.vertical trough {
+  margin-top: 0;
+}
 
-  &:hover {
-    background-color: lighten(#fdf8d7, 5%);
-    background-image: linear-gradient($border 1px, transparent 1px),
-             linear-gradient(90deg, $border 1px, transparent 1px);
-  }
+// GsAppRow
+row.app > box.header {
+  margin-left: $space-size * 2;
+  margin-right: $space-size * 2;
+}
 
-  &:active {
-    background-color: darken(#fdf8d7, 5%);
-    background-image: linear-gradient($border 1px, transparent 1px),
-             linear-gradient(90deg, $border 1px, transparent 1px);
-  }
+row.app > box.header {
+  border-spacing: $space-size * 2;
+}
+
+row.app > box.header > image {
+  margin-top: $space-size * 2;
+  margin-bottom: $space-size * 2;
+}
+
+row.app label.warning {
+  color: $error;
+}
+
+// GtkSpinner
+
+// Ensure the spinner is hidden before the animation is triggered.
+@keyframes pre-delay {
+  from { opacity: 0; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { filter: opacity(0%); }
+}
+
+/* Give a fade-in animation to spinners. */
+spinner.fade-in:checked {
+  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
+  animation-delay: 0s, 0.5s, 0.5s;
 }
 
 // Leaflets
@@ -319,6 +1084,256 @@ window > contents > leaflet { // Gnome control center
   }
 }
 
+//
+// Gnome Weather
+//
+
+$weather_temp_chart_fill_color: rgba(248, 228, 92, 0.5);
+$weather_temp_chart_stroke_color: rgba(246, 211, 45, 1.0);
+
+$weather_thermometer_warm_color: if($variant == 'light', $yellow-dark, $yellow-light);
+$weather_thermometer_cold_color: if($variant == 'light', $blue-dark, $blue-light);
+
+$weather_thermometer_high_color: $yellow-light;
+$weather_thermometer_low_color: $blue-light;
+$weather_forecast_color: #ae7b03;
+
+#places-label {
+  font-weight: bold;
+}
+
+#temperature-label {
+  font-size: 32pt;
+  font-weight: 900;
+  margin-left: 9px;
+}
+
+#conditions-grid *:backdrop {
+  color: $text-secondary;
+}
+
+.content-view.cell {
+  font-weight: bold;
+}
+
+#locationEntry {
+  margin: $space-size;
+}
+
+.weather-popover {
+  margin-top: $space-size;
+}
+
+.forecast-card {
+  transition: border-radius 100ms ease-out;
+  border-radius: $corner-radius;
+}
+
+.forecast-card separator {
+  background-color: $border;
+}
+
+#conditions-grid,
+#attributionGrid {
+  margin-left: $space-size * 3;
+  margin-right: $space-size * 3;
+}
+
+#weather-page .small .forecast-card {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
+}
+
+.forecast-temperature-label {
+  font-weight: bold;
+  color: $weather_forecast_color;
+}
+
+WeatherThermometer {
+  margin-bottom: $space-size * 2;
+}
+
+WeatherThermometer > label.high {
+  font-weight: bold;
+  color: $weather_thermometer_high_color;
+}
+
+WeatherThermometer > label.low {
+  font-weight: bold;
+  color: $weather_thermometer_low_color;
+}
+
+.forecast-button {
+  margin: 0 $space-size * 2;
+}
+
+.forecast-graphic {
+  margin: $space-size * 3;
+}
+
+button.osd.circular {
+  border-radius: $circular_radius;
+  min-width: $small-size;
+  min-height: $small-size;
+}
+
+button.osd.circular > image {
+  padding: $space-size * 2;
+}
+
+scrolledwindow.inline list,
+scrolledwindow.inline listview {
+  background: none;
+  color: inherit;
+}
+
+scrolledwindow.inline undershoot.top {
+  box-shadow: inset 0 1px $border;
+}
+
+.search-view {
+  background-color: $blue-dark;
+  color: on($blue-dark);
+}
+
+.search-view menubutton button:focus:focus-visible {
+  outline-color: rgba(white, 0.3);
+}
+
+image.circular {
+  min-width: $medium-size;
+  min-height: $medium-size;
+  padding: 0;
+  border-radius: $circular_radius;
+}
+
+WeatherThermometerScale {
+  border-radius: $circular_radius;
+  background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
+  margin: 0 36px;
+  padding: 0;
+}
+
+//
+// Gnome Clocks
+//
+
+.large-button {
+  padding: $space-size;
+}
+
+// alarms
+.alarm-time {
+  font-size: 2.5em;
+  font-weight: 300;
+}
+
+.clocks-ampm-toggle-button,
+.clocks-secondary-standalone-label {
+  font-size: 18pt;
+}
+
+.clocks-standalone-label,
+.clocks-ringing-label {
+  font-size: 6em;
+  font-weight: 300;
+}
+
+.clocks-ringing-title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.clocks-alarm-setup-time {
+  font-size: 32pt;
+}
+
+// Timer Panel
+.clocks-timer-label,
+.clocks-spinbutton {
+  font-size: 48pt;
+}
+
+// disguise insensitive spinbuttons as normal labels
+.timer-panel .timer-header {
+  font-size: 20pt;
+  font-weight: 300;
+}
+
+.timer-countdown {
+  font-size: 40pt;
+  font-weight: 300;
+}
+
+/* Stopwatch Panel */
+.lap-time {
+  font-weight: bold;
+}
+
+.stopped-stopwatch label,
+.running-stopwatch label,
+.paused-stopwatch label {
+  font-size: 70px;
+  font-weight: lighter;
+}
+
+.stopped-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+.running-stopwatch .seconds-label,
+.running-stopwatch .miliseconds-label {
+  color: $primary;
+}
+
+.stopped-stopwatch .miliseconds-label,
+.running-stopwatch .miliseconds-label,
+.paused-stopwatch .miliseconds-label {
+  font-size: 50px;
+}
+
+.running-stopwatch .seconds-label,
+.paused-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+// World
+.clock-location {
+  font-weight: bolder;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.clock-time {
+  font-size: 2em;
+  padding: 0.2em 0.5em;
+  border-radius: 1em;
+}
+
+.none .clock-time {
+  background: gtkalpha(currentColor, 0.2);
+}
+
+.night .clock-time {
+  color: $blue-dark;
+  background-color: gtkalpha($blue-light, 0.25);
+}
+
+.naut .clock-time,
+.astro .clock-time {
+  color: $orange-dark;
+  background-color: gtkalpha($orange-light, 0.25);
+}
+
+.civil .clock-time,
+.day .clock-time {
+  color: $yellow-dark;
+  background: gtkalpha($yellow-light, 0.25);
+}
+
 //
 // Builder
 //
@@ -378,7 +1393,6 @@ panelstatusbar {
 }
 
 // Setting window
-
 .style-variant {
   padding: 0 $space-size * 2;
 
diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss
index 946136cf..617a82d9 100644
--- a/src/sass/gtk/apps/_libadwaita.scss
+++ b/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 {