From 1b3b2b4cfae01c00a1fd20d80284be057989458c Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sat, 12 Oct 2024 23:37:43 +0800
Subject: [PATCH] update #201

---
 src/sass/libadwaita/_apps.scss                |   4 +
 src/sass/libadwaita/_drawing.scss             |   4 +-
 src/sass/libadwaita/apps/_calendar.scss       | 182 ++++++++---------
 src/sass/libadwaita/apps/_clocks.scss         |   2 +-
 src/sass/libadwaita/apps/_console.scss        |  12 +-
 src/sass/libadwaita/apps/_nautilus.scss       |  68 +++++--
 src/sass/libadwaita/apps/_software.scss       | 188 ++++++++----------
 src/sass/libadwaita/widgets/_column-view.scss |   7 +-
 src/sass/libadwaita/widgets/_sidebars.scss    |  19 +-
 9 files changed, 265 insertions(+), 221 deletions(-)

diff --git a/src/sass/libadwaita/_apps.scss b/src/sass/libadwaita/_apps.scss
index 2eac7b86..a60d24a7 100644
--- a/src/sass/libadwaita/_apps.scss
+++ b/src/sass/libadwaita/_apps.scss
@@ -1,7 +1,11 @@
 @import 'apps/builder';
 @import 'apps/calculator';
+@import 'apps/calendar';
+@import 'apps/clocks';
+@import 'apps/console';
 @import 'apps/control-center';
 @import 'apps/editor';
 @import 'apps/nautilus';
+@import 'apps/software';
 @import 'apps/weather';
 @import 'apps/other';
diff --git a/src/sass/libadwaita/_drawing.scss b/src/sass/libadwaita/_drawing.scss
index 681b9d8f..8cf4639d 100644
--- a/src/sass/libadwaita/_drawing.scss
+++ b/src/sass/libadwaita/_drawing.scss
@@ -307,9 +307,9 @@
   }
 
   #{$_selector} undershoot.#{$p} {
-    @if $style==default {
+    @if $style == 'default' {
       box-shadow: none;
-    } @else if $style==frame {
+    } @else if $style == 'frame' {
       box-shadow: inset $_border_pos $border_color;
     }
 
diff --git a/src/sass/libadwaita/apps/_calendar.scss b/src/sass/libadwaita/apps/_calendar.scss
index 604ec6b5..cfa15670 100644
--- a/src/sass/libadwaita/apps/_calendar.scss
+++ b/src/sass/libadwaita/apps/_calendar.scss
@@ -7,15 +7,15 @@ label {
   &.primary-label, &.month-name, &.secondary-label {
     font-size: 16pt;
     font-weight: bold;
-    padding: $space-size * 2;
+    padding: $base_padding * 2;
   }
 
   &.primary-label, &.month-name {
-    color: $primary;
+    color: $accent_color;
   }
 
   &.secondary-label {
-    color: $text-disabled;
+    color: $disabled_text_color;
   }
 }
 
@@ -23,7 +23,7 @@ calendar-view {
   font-size: 10pt;
 
   &:selected {
-    color: $primary;
+    color: $accent_color;
     font-weight: bold;
   }
 }
@@ -32,26 +32,28 @@ calendar-view.header,
 label.header {
   font-size: 10pt;
   font-weight: bold;
-  color: $text-disabled;
+  color: $disabled_text_color;
 }
 
 calendar-view.current,
 weekgrid.current {
-  background-color: gtkalpha($primary, 0.3);
+  background-color: gtkalpha($accent_color, 0.3);
 }
 
 popover.events {
-  background-color: $popover;
+  background-color: $popover_bg_color;
+  color: $popover_fg_color;
   padding: 0;
 
   box {
-    border-top-left-radius: $corner-radius;
-    border-top-right-radius: $corner-radius;
+    border-top-left-radius: $button_radius;
+    border-top-right-radius: $button_radius;
   }
 
   list {
-    background-color: $base;
-    border-radius: $corner-radius;
+    color: $view_fg_color;
+    background-color: $view_bg_color;
+    border-radius: $button_radius;
   }
 
   scrolledwindow {
@@ -59,7 +61,7 @@ popover.events {
   }
 
   button {
-    border-radius: $corner-radius;
+    border-radius: $button_radius;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-style: solid none none;
@@ -78,37 +80,25 @@ event {
 
   &.timed,
   &:not(.slanted):not(.slanted-start):not(.slanted-end) {
-    border-radius: $corner-radius;
+    border-radius: $button_radius;
   }
 
   &.timed widget.edge {
-    border-radius: $corner-radius / 2;
+    border-radius: $button_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;
+    padding-left: $base_padding * 2 + 4px;
+    border-radius: 0 $button_radius / 2 $button_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;
+    padding-right: $base_padding * 2 + 4px;
+    border-radius: $button_radius / 2 0 0 $button_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
@@ -118,7 +108,7 @@ popover.event-popover > contents {
 }
 
 .search-viewport {
-  background-color: $base;
+  background-color: $view_bg_color;
 }
 
 // calendar popover
@@ -149,27 +139,29 @@ button:checked:not(:backdrop) .calendar-color-image,
 
 // month/year controls
 datechooser {
+  color: $sidebar_fg_color;
+
   navigator { // add some space between the two controls
-    margin-right: $space-size;
-    margin-left: $space-size;
-    margin-bottom: $space-size;
+    margin-right: $base_padding;
+    margin-left: $base_padding;
+    margin-bottom: $base_padding;
   }
 
   navigator {
     label { font-weight: bold; }
 
     button.flat,
-    button.toggle,
+    button.pill,
     button.image-button {
-      min-height: $medium-size;
-      min-width: $medium-size;
-      padding: 0;
+      min-height: 24px;
+      min-width: 24px;
+      padding: $base_padding;
     }
   }
 
   // day names and week numbers
   .weeknum, .weekday {
-    color: $text-disabled;
+    color: $disabled_text_color;
     font-size: smaller;
   }
 
@@ -177,45 +169,45 @@ datechooser {
   button.day {
     font-size: 10pt;
     font-weight: normal;
-    margin: $space-size / 2;
-    padding: 0;
-    min-height: $medium-size;
-    min-width: $medium-size;
+    margin: 2px;
+    padding: $base_padding - 2px;
+    min-height: 24px;
+    min-width: 24px;
     transition: none;
 
     dot {
-      background-color: $text;
+      background-color: $text_color;
       border-radius: 50%;
-      min-height: $space-size / 2;
-      min-width: $space-size / 2;
+      min-height: $base_padding / 2;
+      min-width: $base_padding / 2;
     }
 
     &:selected, &.today:selected {
-      background-color: $primary;
-      color: on($primary);
+      background-color: $accent_bg_color;
+      color: $accent_fg_color;
       font-weight: bold;
 
-      dot { background-color: on($primary); }
+      dot { background-color: $accent_fg_color; }
     }
 
     &.today {
-      color: $primary;
+      color: $accent_bg_color;
 
-      dot { background-color: $primary; }
+      dot { background-color: $accent_bg_color; }
     }
 
     &.other-month {
       &:not(:hover),
       &:backdrop {
-        color: gtkalpha(currentColor, 0.1);
+        color: $secondary_disabled_text_color;
 
-        dot { background-color: gtkalpha(currentColor, 0.1); }
+        dot { background-color: $secondary_disabled_text_color; }
       }
 
       &:hover:not(:backdrop) {
-        color: $text-disabled;
+        color: $disabled_text_color;
 
-        dot { background-color: $text-disabled; }
+        dot { background-color: $disabled_text_color; }
       }
     }
   }
@@ -226,38 +218,38 @@ datechooser {
   padding: 0;
 
   & > box:first-child {
-    border-bottom: 1px solid $border;
+    border-bottom: 1px solid $border_color
   }
 
   .week-number {
     font-size: 16pt;
     font-weight: bold;
-    padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
-    color: $track;
+    padding: $base_padding * 2 $base_padding * 2 $base_padding * 3 $base_padding * 2;
+    color: $secondary_disabled_text_color;
   }
 
   &.week-temperature {
     font-size: 10pt;
     font-weight: bold;
-    color: $text-disabled;
+    color: $disabled_text_color;
   }
 
   &.lines {
-    color: $border;
+    color: $border_color
   }
 }
 
 weekhourbar > label {
   font-size: 10pt;
-  padding: 4px $space-size;
+  padding: 4px $base_padding;
 }
 
 .week-view .lines {
-  color: $border;
+  color: $border_color
 }
 
 weekgrid > widget.now-strip {
-  background-color: gtkalpha($primary, 0.8);
+  background-color: gtkalpha($accent_color, 0.8);
   margin: 0 0 0 1px;
   min-height: 3px;
 }
@@ -265,28 +257,28 @@ weekgrid > widget.now-strip {
 weekgrid,
 .week-header {
   &:selected, &.dnd {
-    background-color: gtkalpha($primary, 0.25);
+    background-color: gtkalpha($accent_color, 0.25);
   }
 }
 
 // Month cell
 monthcell {
-  border: solid 1px $border;
+  border: solid 1px $border_color;
   border-width: 1px 0 0 1px;
   background-color: transparent;
   transition: background-color 200ms;
 
   &:hover:not(.out-of-month):not(.today) {
-    background-color: $base-alt;
+    background-color: $dialog_bg_color;
     transition: background-color 200ms;
-    color: $text;
+    color: $text_color;
   }
 
   &:selected {
-    background-color: gtkalpha($primary, 0.1);
+    background-color: gtkalpha($accent_color, 0.1);
 
     &:hover {
-      background-color: gtkalpha($primary, 0.2);
+      background-color: gtkalpha($accent_color, 0.2);
     }
 
     label.day-label { font-weight: bold; }
@@ -295,24 +287,24 @@ monthcell {
   &:nth-child(7n + 1) { border-left-width: 0; }
 
   &.today {
-    background-color: gtkalpha($primary, 0.2);
+    background-color: gtkalpha($accent_color, 0.2);
 
     &:hover {
-      background-color: gtkalpha($primary, 0.3);
-      color: $primary;
+      background-color: gtkalpha($accent_color, 0.3);
+      color: $accent_color;
     }
 
     &:selected {
-      background-color: gtkalpha($primary, 0.25);
+      background-color: gtkalpha($accent_color, 0.25);
 
       &:hover {
-        background-color: gtkalpha($primary, 0.35);
+        background-color: gtkalpha($accent_color, 0.35);
       }
     }
   }
 
   label {
-    color: $text;
+    color: $text_color;
     font-size: 0.9rem;
 
     &.day-label {
@@ -321,15 +313,15 @@ monthcell {
   }
 
   &.out-of-month {
-    background-color: $fill;
+    background-color: $button_color;
 
     label {
-      color: $text-secondary;
+      color: $secondary_text_color;
     }
   }
 
   button {
-    padding: 0 $space-size;
+    padding: 0 $base_padding;
     border-radius: 0;
     border-bottom: none;
     border-right: none;
@@ -344,8 +336,8 @@ monthpopover > box {
 }
 
 .notes-section box > textview {
-  border-radius: $corner-radius;
-  padding: $space-size;
+  border-radius: $button_radius;
+  padding: $base_padding;
 
   > text {
     background: none;
@@ -356,11 +348,11 @@ monthpopover > box {
 agenda-view {
   list {
     > row {
-      padding: 2px $space-size * 2;
+      padding: 2px $base_padding * 2;
     }
 
     > label {
-      padding: $space-size $space-size * 2;
+      padding: $base_padding $base_padding * 2;
     }
   }
 
@@ -381,12 +373,12 @@ searchbutton > popover > arrow {
 
 // Month selector
 datechooser {
-  padding: $space-size;
+  padding: $base_padding;
 
   .current-week {
-    background: gtkalpha($titlebar, 0.7);
-    color: on($titlebar);
-    border-radius: $corner-radius;
+    background: $hover_color;
+    color: $sidebar_fg_color;
+    border-radius: $button_radius;
   }
 }
 
@@ -394,7 +386,7 @@ menubutton {
   &.sources-button {
     margin-top: 0;
     margin-bottom: 0;
-    border-radius: 0;
+    border-radius: $button_radius;
     border-top-style: none;
     border-bottom-style: none;
     
@@ -404,17 +396,19 @@ menubutton {
     }
 
     > button {
-      border-radius: 0;
+      border-radius: $button_radius;
+      min-height: 0;
+      padding: 0 $base_padding;
 
       .title {
         font-size: 10pt;
         font-weight: normal;
-        padding: 0 $space-size;
+        padding: 0 $base_padding;
       }
 
       .subtitle {
         font-size: 8pt;
-        padding: 0 $space-size;
+        padding: 0 $base_padding;
       }
 
       .calendar-color-image {
@@ -424,12 +418,6 @@ menubutton {
   }
 
   stack > box {
-    border-spacing: $space-size;
-  }
-
-  .topbar headerbar &.sources-button {
-    > button {
-      border-radius: 0 0 $corner-radius $corner-radius;
-    }
+    border-spacing: $base_padding;
   }
 }
\ No newline at end of file
diff --git a/src/sass/libadwaita/apps/_clocks.scss b/src/sass/libadwaita/apps/_clocks.scss
index d6e24758..b07a16bc 100644
--- a/src/sass/libadwaita/apps/_clocks.scss
+++ b/src/sass/libadwaita/apps/_clocks.scss
@@ -3,7 +3,7 @@
 //
 
 .large-button {
-  padding: $space-size;
+  padding: $base_padding;
 }
 
 // alarms
diff --git a/src/sass/libadwaita/apps/_console.scss b/src/sass/libadwaita/apps/_console.scss
index 4d2cfde1..360f0f5b 100644
--- a/src/sass/libadwaita/apps/_console.scss
+++ b/src/sass/libadwaita/apps/_console.scss
@@ -4,13 +4,13 @@
 
 .exit-info {
   padding: 6px;
-  border-top: 2px solid $primary;
-  background: rgba($primary, 0.9);
-  color: on($primary);
+  border-top: 2px solid $accent_color;
+  background: gtkalpha($accent_color, 0.9);
+  color: $accent_fg_color;
 }
 
 .error .exit-info {
-  border-top: 2px solid $error;
-  background: rgba($error, 0.9);
-  color: on($error);
+  border-top: 2px solid $error_color;
+  background: gtkalpha($error_color, 0.9);
+  color: $error_fg_color;
 }
\ No newline at end of file
diff --git a/src/sass/libadwaita/apps/_nautilus.scss b/src/sass/libadwaita/apps/_nautilus.scss
index b7f10197..1806ee47 100644
--- a/src/sass/libadwaita/apps/_nautilus.scss
+++ b/src/sass/libadwaita/apps/_nautilus.scss
@@ -1,22 +1,64 @@
 //
 // Nautilus
 //
-.nautilus-window {
-  .floating-bar {
-    min-height: 32px;
-    padding: 0;
-    margin: $base_padding;
-    border-style: none;
-    border-radius: $button_radius;
-    background-color: $accent_color;
+.floating-bar {
+  min-height: 32px;
+  padding: 0;
+  margin: $base_padding / 2;
+  border-style: none;
+  border-radius: $button_radius;
+  background-color: $accent_color;
+  color: $accent_fg_color;
+  box-shadow: $shadow-z3;
+
+  button {
+    margin: (32px - $small_size) / 2;
     color: $accent_fg_color;
-    box-shadow: $shadow-z3;
 
-    button {
-      margin: (32px - $small_size) / 2;
-      color: $accent_fg_color;
+    @extend %small_button;
+  }
+}
 
-      @extend %small_button;
+.nautilus-list-view {
+  columnview.view {
+    padding: 0;
+
+    > header > button {
+      border-top: 1px solid $border_color;
+
+      &:last-child {
+        padding-right: 24px;
+      }
+    }
+  }
+
+  listview.view {
+    padding: $base_padding;
+    margin: 0;
+    border-spacing: $base_padding / 2;
+
+    > row {
+      margin: 0;
+
+      > cell {
+        padding: $base_padding - 2px;
+
+        &:last-child {
+          padding-right: 24px;
+        }
+      }
+    }
+
+    #NautilusViewCell {
+      padding: 0;
+
+      button.star.circular {
+        margin: 0;
+        min-height: 24px;
+        min-width: 24px;
+        padding: $base_padding / 2;
+        border-radius: $circular_radius;
+      }
     }
   }
 }
diff --git a/src/sass/libadwaita/apps/_software.scss b/src/sass/libadwaita/apps/_software.scss
index 47402915..8522975d 100644
--- a/src/sass/libadwaita/apps/_software.scss
+++ b/src/sass/libadwaita/apps/_software.scss
@@ -3,15 +3,15 @@
 //
 
 .details-page {
-  margin: $space-size * 4 0px;
+  margin: $base_padding * 4 0px;
 }
 
 .installed-overlay-box {
   font-size: smaller;
-  background-color: $primary;
+  background-color: $accent_color;
   border-radius: 0;
-  color: on($primary);
-  text-shadow: 0 1px 0 rgba(black, 0.2);
+  color: $accent_fg_color;
+  text-shadow: 0 1px 0 gtkalpha(black, 0.2);
 }
 
 screenshot-carousel box.frame {
@@ -21,15 +21,15 @@ screenshot-carousel box.frame {
 
 screenshot-carousel button,
 .featured-carousel button {
-  margin: $space-size * 2;
+  margin: $base_padding * 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;
+  margin-top: $base_padding;
+  margin-bottom: $base_padding * 2;
+  margin-left: $base_padding;
+  margin-right: $base_padding;
 }
 
 .app-tile-label {
@@ -37,13 +37,13 @@ screenshot-carousel button,
 }
 
 .review-textbox {
-  padding: $space-size;
+  padding: $base_padding;
 }
 
 .origin-rounded-box {
-  background-color: $divider;
-  border-radius: $circular-radius;
-  padding: $space-size - 2px;
+  background-color: $hover_color;
+  border-radius: $circular_radius;
+  padding: $base_padding - 2px;
 }
 
 .origin-beta {
@@ -51,7 +51,7 @@ screenshot-carousel button,
 }
 
 .origin-button > button {
-  padding: $space-size / 2 $space-size * 1.5;
+  padding: $base_padding / 2 $base_padding * 1.5;
 }
 
 .card flowboxchild {
@@ -64,21 +64,21 @@ screenshot-carousel button,
 }
 
 .category-tile.card {
-  padding: $space-size * 3.5;
+  padding: $base_padding * 3.5;
   border: none;
-  border-radius: $corner-radius;
+  border-radius: $button_radius;
   min-width: 140px;
   font-weight: 900;
   font-size: larger;
   box-shadow: $shadow-z3;
 
   &.category-tile-iconless {
-    padding: $space-size * 1.5 $space-size * 2.5;
+    padding: $base_padding * 1.5 $base_padding * 2.5;
     min-width: 130px;
     font-size: 105%;
     font-weight: normal;
     box-shadow: none;
-    background-color: $fill;
+    background-color: $button_color;
   }
 
   // Styling for specific category buttons.
@@ -144,7 +144,7 @@ screenshot-carousel button,
 
   &.category-socialize {
     background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
-    color: $text-secondary;
+    color: $secondary_text_color;
 
     &:hover {
       background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
@@ -159,23 +159,23 @@ screenshot-carousel button,
     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-image: linear-gradient($border_color 1px, transparent 1px),
+             linear-gradient(90deg, $border_color 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);
+      background-image: linear-gradient($border_color 1px, transparent 1px),
+               linear-gradient(90deg, $border_color 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);
+      background-image: linear-gradient($border_color 1px, transparent 1px),
+               linear-gradient(90deg, $border_color 1px, transparent 1px);
     }
   }
 }
@@ -189,11 +189,11 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 .featured-tile {
   padding: 0;
   box-shadow: none;
-  color: $text;
+  color: $text_color;
 
   label.title-1 {
-    margin-top: $space-size;
-    margin-bottom: $space-size;
+    margin-top: $base_padding;
+    margin-bottom: $base_padding;
   }
 
   &.narrow label.title-1 {
@@ -203,15 +203,15 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 
 .application-details-infobar {
   &, &.info {
-    background-color: $fill;
-    color: $text;
-    border: 1px solid $border;
+    background-color: $button_color;
+    color: $text_color;
+    border: 1px solid $border_color;
   }
 
   &.warning {
-    background-color: $warning;
-    color: on($warning);
-    border: 1px solid on($warning, divider);
+    background-color: $warning_color;
+    color: $warning_fg_color;
+    border: 1px solid gtkalpha($warning_fg_color, 0.1);
   }
 }
 
@@ -222,12 +222,12 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 }
 
 .application-details-description .button {
-  padding-left: $space-size * 4;
-  padding-right: $space-size * 4;
+  padding-left: $base_padding * 4;
+  padding-right: $base_padding * 4;
 }
 
 .install-progress {
-  background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px);
+  background-image: linear-gradient(to top, $accent_color 2px, gtkalpha($accent_color, 0) 2px);
   background-repeat: no-repeat;
   background-position: 0 bottom;
   background-size: 0;
@@ -237,7 +237,7 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 .install-progress:dir(rtl) { background-position: 100% bottom; }
 
 .review-row > * {
-  margin: $space-size * 2;
+  margin: $base_padding * 2;
 }
 
 .review-row button { font-size: smaller; }
@@ -248,7 +248,7 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 
 // 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;
+  border-image: linear-gradient(to top, $border_color, $border_color) 0 0 0 1 / 5px 0 5px 1px;
 }
 
 .review-row .vote-buttons button:hover,
@@ -259,13 +259,13 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 }
 
 review-bar {
-  color: $text-disabled;
+  color: $disabled_text_color;
   background-image: none;
-  background-color: $track;
+  background-color: $secondary_disabled_text_color;
 }
 
 .review-histogram star-image {
-  color: $text-disabled;
+  color: $disabled_text_color;
 }
 
 .version-arrow-label {
@@ -274,7 +274,7 @@ review-bar {
 
 .overview-more-button {
   font-size: smaller;
-  padding: 0 $space-size * 2 + 4px;
+  padding: 0 $base_padding * 2 + 4px;
 }
 
 .app-row-origin-text {
@@ -282,8 +282,8 @@ review-bar {
 }
 
 .app-listbox-header {
-  padding: $space-size;
-  border-bottom: 1px solid $border;
+  padding: $base_padding;
+  border-bottom: 1px solid $border_color;
 }
 
 .image-list {
@@ -318,12 +318,12 @@ star-image {
 .update-failed-details {
   font-family: Monospace;
   font-size: smaller;
-  padding: $space-size * 2 + 4px;
+  padding: $base_padding * 2 + 4px;
 }
 
 .upgrade-banner {
   padding: 0px;
-  border-radius: $corner-radius;
+  border-radius: $button_radius;
   border: none;
 }
 
@@ -333,25 +333,25 @@ star-image {
 }
 
 .upgrade-buttons #button_upgrades_install {
-  padding-left: $space-size * 2 + 4px;
-  padding-right: $space-size * 2 + 4px;
+  padding-left: $base_padding * 2 + 4px;
+  padding-right: $base_padding * 2 + 4px;
 }
 
 scrolledwindow.list-page > viewport > clamp > box {
-  margin: $space-size * 4 $space-size * 2;
-  border-spacing: $space-size * 4;
+  margin: $base_padding * 4 $base_padding * 2;
+  border-spacing: $base_padding * 4;
 }
 
 .update-preferences preferencesgroup > box > box {
-  margin-top: $space-size * 3;
+  margin-top: $base_padding * 3;
 }
 
-.section > label:not(:first-child) { margin-top: $space-size; }
+.section > label:not(:first-child) { margin-top: $base_padding; }
 
-.section > box:not(:first-child) { margin-top: $space-size * 2; }
+.section > box:not(:first-child) { margin-top: $base_padding * 2; }
 
 clamp.status-page {
-	margin: $space-size * 6 $space-size * 2;
+	margin: $base_padding * 6 $base_padding * 2;
 }
 
 clamp.status-page .iconbox {
@@ -360,25 +360,25 @@ clamp.status-page .iconbox {
 }
 
 clamp.status-page .icon {
-  color: $text-disabled;
+  color: $disabled_text_color;
   min-height: 32px;
   min-width: 32px;
 }
 
 clamp.status-page .icon:not(:last-child) {
-  margin-bottom: $space-size * 6;
+  margin-bottom: $base_padding * 6;
 }
 
 clamp.status-page .title:not(:last-child) {
-  margin-bottom: $space-size * 2;
+  margin-bottom: $base_padding * 2;
 }
 
 app-context-bar {
   .context-tile {
-    border: 1px solid $border;
+    border: 1px solid $border_color;
     background-color: transparent;
     border-radius: 0;
-    padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2;
+    padding: $base_padding * 4 $base_padding * 2 $base_padding * 3.5 $base_padding * 2;
     outline-offset: 5px;
     transition-property: outline, outline-offset, background-image;
     border-bottom: none;
@@ -386,12 +386,12 @@ app-context-bar {
 
     &:hover {
       background-image: none;
-      background-color: $overlay-hover;
+      background-color: $hover_color;
     }
 
     &.keyboard-activating,
     &:active {
-      background-color: $overlay-active;
+      background-color: $active_color;
     }
 
     &:focus:focus-visible {
@@ -413,7 +413,7 @@ app-context-bar {
     border-radius: 0;
 
     &:last-child {
-      border-radius: 0 $corner-radius $corner-radius 0;
+      border-radius: 0 $button_radius $button_radius 0;
     }
   }
 
@@ -421,27 +421,27 @@ app-context-bar {
     border-radius: 0;
 
     &:first-child {
-      border-radius: $corner-radius 0 0 $corner-radius;
+      border-radius: $button_radius 0 0 $button_radius;
     }
   }
 
   > box > button.flat {
-    border-left-color: $border;
+    border-left-color: $border_color;
   }
 }
 
 carousel.card {
   border: none;
-  background-color: $fill;
+  background-color: $button_color;
 }
 
 .context-tile-lozenge {
   min-height: 28px;
   min-width: 28px;
-  padding: $space-size;
+  padding: $base_padding;
   font-size: 18px;
   font-weight: bold;
-  border-radius: $circular-radius;
+  border-radius: $circular_radius;
 
   &.large {
     font-size: 24px;
@@ -458,40 +458,40 @@ carousel.card {
   image { -gtk-icon-style: symbolic; }
 
   &.grey {
-    color: $text;
-    background-color: $divider;
+    color: $text_color;
+    background-color: $hover_color;
   }
 
   &.green, &.details-rating-0 {
-    color: darken($success, 15%);
-    background-color: rgba($success, 0.15);
+    color: gtkmix(black, $success_color, 15%);
+    background-color: gtkalpha($success_color, 0.15);
   }
 
   &.blue,
   &.details-rating-5 {
     color: $blue-light;
-    background-color: rgba($blue-light, 0.15);
+    background-color: gtkalpha($blue-light, 0.15);
   }
 
   &.yellow, &.details-rating-12 {
-    color: darken($warning, 15%);
-    background-color: rgba($warning, 0.15);
+    color: gtkmix(black, $warning_color, 15%);
+    background-color: gtkalpha($warning_color, 0.15);
   }
 
   &.details-rating-15 {
     color: $orange-light;
-    background-color: rgba($orange-light, .15);
+    background-color: gtkalpha($orange-light, .15);
   }
 
   &.red, &.details-rating-18 {
-    color: darken($error, 15%);
-    background-color: rgba($error, 0.15);
+    color: gtkmix(black, $error_color, 15%);
+    background-color: gtkalpha($error_color, 0.15);
   }
 }
 
 .eol-red {
   font-weight: bold;
-  color: $error;
+  color: $error_color;
 }
 
 window.narrow .app-title {
@@ -507,10 +507,10 @@ window.narrow .app-developer {
   font-feature-settings: "tnum";
 }
 
-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; }
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $base_padding * 6 $base_padding * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $base_padding * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $base_padding * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $base_padding * 2; }
 
 statuspage.icon-dropshadow image.icon {
 	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
@@ -532,17 +532,17 @@ window.info scrollbar.vertical trough {
 
 // GsAppRow
 row.app > box.header {
-  margin-left: $space-size * 2;
-  margin-right: $space-size * 2;
+  margin-left: $base_padding * 2;
+  margin-right: $base_padding * 2;
 }
 
 row.app > box.header {
-  border-spacing: $space-size * 2;
+  border-spacing: $base_padding * 2;
 }
 
 row.app > box.header > image {
-  margin-top: $space-size * 2;
-  margin-bottom: $space-size * 2;
+  margin-top: $base_padding * 2;
+  margin-bottom: $base_padding * 2;
 }
 
 row.app label.warning {
@@ -565,16 +565,4 @@ row.app label.warning {
 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
-window > contents > leaflet { // Gnome control center
-  > box > stack.background {
-    background-color: transparent;
-    background-image: linear-gradient(to bottom,
-                                      transparent,
-                                      transparent $large-size,
-                                      $background $large-size,
-                                      $background);
-  }
 }
\ No newline at end of file
diff --git a/src/sass/libadwaita/widgets/_column-view.scss b/src/sass/libadwaita/widgets/_column-view.scss
index 5e6a6507..66eb6c62 100644
--- a/src/sass/libadwaita/widgets/_column-view.scss
+++ b/src/sass/libadwaita/widgets/_column-view.scss
@@ -13,6 +13,7 @@ columnview {
     line-height: 100%;
     border-left: 1px solid $border_color;
     border-bottom: 1px solid $border_color;
+    background-clip: padding-box;
 
     &:first-child {
       border-left-width: 0;
@@ -97,7 +98,11 @@ columnview {
     padding-bottom: $base_padding / 2;
   }
 
-  @include undershoot(top, $shade_color, true);
+  @include undershoot(top, $shade_color, $neighbor: true, $style: default);
+
+  ~ undershoot.top {
+    box-shadow: none;
+  }
 }
 
 columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
diff --git a/src/sass/libadwaita/widgets/_sidebars.scss b/src/sass/libadwaita/widgets/_sidebars.scss
index daaf5539..0acb25e9 100644
--- a/src/sass/libadwaita/widgets/_sidebars.scss
+++ b/src/sass/libadwaita/widgets/_sidebars.scss
@@ -14,6 +14,19 @@
     }
   }
 
+  @if $colorscheme != 'default' or $blackness == 'true' or $colortype == 'fixed' {
+    listview,
+    list,
+    list.boxed-list {
+      background-color: gtkmix(white, $sidebar_bg_color, 5%);
+      color: $sidebar_fg_color;
+    }
+
+    list.boxed-list-separate {
+      color: $sidebar_fg_color;
+    }
+  }
+
   flap,
   leaflet,
   navigation-view,
@@ -46,6 +59,10 @@
 .sidebar-pane, .content-pane {
   toolbarview.undershoot-top scrolledwindow {
     @include undershoot(top, $sidebar_shade_color, $style: frame);
+
+    columnview.view ~ undershoot.top {
+      box-shadow: none;
+    }
   }
 
   toolbarview.undershoot-bottom scrolledwindow {
@@ -104,7 +121,7 @@
     }
 
     &.undershoot-bottom {
-      @include undershoot(bottom, $secondary_sidebar_shade_color)
+      @include undershoot(bottom, $secondary_sidebar_shade_color);
     }
 
     &.undershoot-start {