Gtk-4: Fix switch styling issues

Gulpfile.js

@@ -11,7 +11,7 @@ gulp.task('styles', function(done) {
 });
 
 gulp.task('shell-style', function(done) {
-    gulp.src('gnome-shell/*.scss')
+    gulp.src('gnome-shell/**/*.scss')
         .pipe(sass().on('error', sass.logError))
         .pipe(gulp.dest('./gnome-shell/'))
         .pipe(exec('gsettings set org.gnome.shell.extensions.user-theme name "Sweet"'))

cinnamon/_common.scss

@@ -1254,182 +1254,225 @@ StScrollBar {
 //
 
 .window-list {
-  &-box {
-    spacing: 0;
 
-    .panel-top,
-    .panel-bottom & {
-      &:ltr { padding: 0 0 0 8px; }
-      &:rtl { padding: 0 8px 0 0; }
+  &-box {
+    spacing: 6px;
+    padding-left: 10px;
+    padding-top: 1px;
+
+    &.vertical {
+      spacing: 2px;
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-top: 10px;
+      padding-bottom: 10px;
     }
 
-    &.vertical { padding: 6px 0 0 0; }
+    &:highlight {
+      background-color: transparentize($error_color, 0.5);
+    }
+  }
 
-    &:highlight { background-color: $selected_bg_color }
+  &-item-label {
+    font-weight: bold;
+    width: 15em;
+    min-width: 5px;
   }
 
   &-item-box {
-    border: 0 none transparent;
-    border-image: none;
+    font-weight: bold;
     background-image: none;
-    background-color: $panel_bg;
-    color: $osd_fg_color;
-    box-shadow: none;
-    font-weight: 400;
-    
-    &:hover {
-      color: $selected_fg_color;
-      @each $position, $_indicator in (top, 0 2px),
-                                      (bottom, 0 -2px),
-                                      (left, 2px 0),
-                                      (right, -2px 0) {
-        .panel-#{$position} & {
-          box-shadow: inset #{$_indicator} $selected_bg_color;
-        }
-      }
+    padding-top: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+    transition-duration: 100;
+    color: transparentize($selected_fg_color, 0.4);
 
+    &.top,
+    &.bottom {
+      border-bottom-width: 2px;
+
+      & StLabel { padding-left: 2px; }
     }
+
+    &.right {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-right-width: 2px;
+
+      & StBin { padding-right: 0; }
+    }
+
+    &.left {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-left-width: 2px;
+
+      & StBin { padding-left: 1px; }
+    }
+
+    &:hover,
+    &:groupFocus {
+      color: $selected_fg_color;
+      background-color: transparentize($selected_fg_color, 0.9);
+    }
+
     &:active,
     &:checked,
-    &:focus {
-      &, &:hover {
-        color: $selected_fg_color;
-
-        @each $position, $_indicator in (top, 0 2px),
-                                        (bottom, 0 -2px),
-                                        (left, 2px 0),
-                                        (right, -2px 0) {
-          .panel-#{$position} & {
-            box-shadow: inset #{$_indicator} $red;
-          }
-        }
-      }
+    &:focus,
+    &:running {
+      color: $selected_fg_color;
+      border-color: $selected_bg_color;
     }
 
-    StIcon,
-    StBin {
-      .panel-top &,
-      .panel-bottom & { padding: 0 (6px - 2px); }
-    }
-
-    &.vertical StIcon,
-    &.vertical StBin { padding: 0; }
-
-    StLabel {
-      font-weight: 400;
-
-      .panel-top &,
-      .panel-bottom & {
-        &:ltr { padding: 0 (6px - 2px) 0 0; }
-        &:rtl { padding: 0 0 0 (6px - 2px); }
-      }
-    }
-
-    &:progress,
-    .progress {
-      background-gradient-start: $selected_bg_color;
-      background-gradient-end: $selected_bg_color;
+    & .progress {
+      background-color: transparentize($selected_bg_color, 0.2);
     }
   }
 
   &-item-demands-attention {
-    background-gradient-start: $selected_bg_color;
-    background-gradient-end: $selected_bg_color;
-    color: $selected_fg_color;
-
-    @each $position, $_indicator in (top, 0 2px),
-                                    (bottom, 0 -2px),
-                                    (left, 2px 0),
-                                    (right, -2px 0) {
-      .panel-#{$position} & {
-        box-shadow: inset #{$_indicator} $selected_bg_color;
-      }
-    }
+    background-gradient-direction: vertical;
+    background-gradient-start: $destructive_color;
+    background-gradient-end: $destructive_color;
   }
 
-  
-
-  // >= 3.6.7
-  &-preview { // thumbnail popup windows = .switcher-list
-    padding: 20px - 8px; // = .switcher-list - .item-box
-    spacing: 8px; // = .switcher-list-item-container
-    border: none;
-    border-image: url("assets/misc/osd.svg") 9 9 9 9;
-    border-radius: 2px;
-    color: $osd_fg_color;
-    background: none;
+  &-preview {
+    spacing: 6px;
+    color: $fg_color;
+    border: 1px solid $borders_color;
+    background-color: $bg_color;
+    border-radius: 3px;
+    padding: 6px 12px 12px 12px;
+    font-size: 1em;
   }
 }
 
+//
+// Grouped window list
+//
 
 .grouped-window-list {
+
+  &-item-label {
+    font-weight: bold;
+    width: 15em;
+    min-width: 5px;
+  }
+
   &-item-box {
-    border: 0 none transparent;
-    border-image: none;
+    text-align: left;
+    font-weight: bold;
     background-image: none;
-    background-color: $panel_bg;
-    color: $osd_fg_color;
-    box-shadow: none;
-    font-weight: 400;
-    
-    StIcon,
-    StBin {
-      .panel-top &,
-      .panel-bottom & { padding: 0 (6px - 2px); }
+    padding-top: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+    transition-duration: 100;
+    color: transparentize($selected_fg_color, 0.4);
+
+    &.top,
+    &.bottom {
+      border-bottom-width: 2px;
+
+      & StLabel { padding-left: 2px; }
+    }
+
+    &.right {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-right-width: 2px;
+
+      & StBin { padding-right: 0; }
+    }
+
+    &.left {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-left-width: 2px;
+
+      & StBin { padding-left: 1px; }
+    }
+
+    &:hover,
+    &:focus {
+      color: $selected_fg_color;
+      background-color: transparentize($panel_bg, 0.7);
     }
 
     &:active,
     &:checked {
-          @each $position, $_indicator in (top, 0 2px),
-                                        (bottom, 0 -2px),
-                                        (left, 2px 0),
-                                        (right, -2px 0) {
-          .panel-#{$position} & {
-            box-shadow: inset #{$_indicator} lighten($panel_bg, 30%);
-          }
-        }
+      color: $selected_fg_color;
+      border-color: $selected_bg_color;
     }
 
-    &:hover,
-    &:active:hover,
-    &:focus,
-    &:active:focus,
-    &:focus:hover,
-    &:active:focus:hover {
-        @each $position, $_indicator in (top, 0 2px),
-                                        (bottom, 0 -2px),
-                                        (left, 2px 0),
-                                        (right, -2px 0) {
-          .panel-#{$position} & {
-            box-shadow: inset #{$_indicator} $selected_bg_color
-          }
-        }
-    }
-
-
-    &:progress,
-    .progress {
-      background-gradient-start: $selected_bg_color;
-      background-gradient-end: $selected_bg_color;
+    & .progress {
+      background-color: transparentize($selected_bg_color, 0.2);
     }
   }
 
   &-item-demands-attention {
-    background-gradient-start: $selected_bg_color;
-    background-gradient-end: $selected_bg_color;
-    color: $selected_fg_color;
-
-    @each $position, $_indicator in (top, 0 2px),
-                                    (bottom, 0 -2px),
-                                    (left, 2px 0),
-                                    (right, -2px 0) {
-      .panel-#{$position} & {
-        box-shadow: inset #{$_indicator} $selected_bg_color;
-      }
-    }
+    background-gradient-direction: vertical;
+    background-gradient-start: $destructive_color;
+    background-gradient-end: $destructive_color;
   }
 
+  &-thumbnail-label {
+    padding-left: 4px;
+  }
+
+  &-number-label {
+    z-index: 99;
+    color: $fg_color;
+  }
+
+  &-badge {
+    border-radius: 256px;
+    background-color: $panel_bg;
+  }
+
+  &-button-label {
+    padding-left: 4px;
+  }
+
+  &-thumbnail-alert {
+    background: rgba(255,52,52,0.3);
+  }
+
+  &-thumbnail-menu {
+    color: $fg_color;
+    border: 1px solid $borders_color;
+    background-color: $bg_color;
+    border-radius: 3px;
+    padding: 0px;
+
+    > StBoxLayout {
+      padding: 4px;
+    }
+
+    .item-box {
+      padding: 10px;
+      border-radius: 2px;
+      spacing: 4px;
+
+      &:outlined {
+        padding: 8px;
+        border: 1px solid $selected_bg_color;
+      }
+
+      &:selected {
+        border: 1px solid $selected_bg_color;
+      }
+    }
+
+    .thumbnail { width: 256px; }
+
+    .separator {
+      width: 1px;
+      background: rgba(255,255,255,0.2);
+    }
+  }
 }
+
+
 ///
 // Sound Applet (status/volume.js)
 //
@@ -1809,3 +1852,25 @@ StScrollBar {
   background-color: rgba(0,0,0,0);
   border-radius: 0px;
 }
+
+//
+// Cinnamenu applet
+//
+
+.menu-category-button {
+
+  padding: 7px;
+  border: 1px solid rgba(0, 0, 0, 0); 
+  
+  &-selected {
+    padding: 7px;
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+    border: 1px solid $borders_color; 
+  }
+
+  &-hover {
+    background-color: transparentize($selected_bg_color, 0.7);
+    border-radius: 2px; 
+  }
+}

cinnamon/cinnamon-dark.css

@@ -1088,137 +1088,153 @@ StScrollBar {
     background-color: #00e8b7; }
 
 .window-list-box {
-  spacing: 0; }
-  .window-list-box .panel-top:ltr,
-  .panel-bottom .window-list-box:ltr {
-    padding: 0 0 0 8px; }
-  .window-list-box .panel-top:rtl,
-  .panel-bottom .window-list-box:rtl {
-    padding: 0 8px 0 0; }
+  spacing: 6px;
+  padding-left: 10px;
+  padding-top: 1px; }
   .window-list-box.vertical {
-    padding: 6px 0 0 0; }
+    spacing: 2px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px; }
   .window-list-box:highlight {
-    background-color: #00e8b7; }
+    background-color: rgba(252, 65, 56, 0.5); }
+
+.window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .window-list-item-box {
-  border: 0 none transparent;
-  border-image: none;
+  font-weight: bold;
   background-image: none;
-  background-color: #182129;
-  color: #BAC3CF;
-  box-shadow: none;
-  font-weight: 400; }
-  .window-list-item-box:hover {
-    color: #f7f7f7; }
-    .panel-top .window-list-item-box:hover {
-      box-shadow: inset 0 2px #00e8b7; }
-    .panel-bottom .window-list-item-box:hover {
-      box-shadow: inset 0 -2px #00e8b7; }
-    .panel-left .window-list-item-box:hover {
-      box-shadow: inset 2px 0 #00e8b7; }
-    .panel-right .window-list-item-box:hover {
-      box-shadow: inset -2px 0 #00e8b7; }
-  .window-list-item-box:active, .window-list-item-box:active:hover, .window-list-item-box:checked, .window-list-item-box:checked:hover, .window-list-item-box:focus, .window-list-item-box:focus:hover {
-    color: #f7f7f7; }
-    .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:active:hover, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:checked:hover, .panel-top .window-list-item-box:focus, .panel-top .window-list-item-box:focus:hover {
-      box-shadow: inset 0 2px #ed254e; }
-    .panel-bottom .window-list-item-box:active, .panel-bottom .window-list-item-box:active:hover, .panel-bottom .window-list-item-box:checked, .panel-bottom .window-list-item-box:checked:hover, .panel-bottom .window-list-item-box:focus, .panel-bottom .window-list-item-box:focus:hover {
-      box-shadow: inset 0 -2px #ed254e; }
-    .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:active:hover, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:checked:hover, .panel-left .window-list-item-box:focus, .panel-left .window-list-item-box:focus:hover {
-      box-shadow: inset 2px 0 #ed254e; }
-    .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:active:hover, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:checked:hover, .panel-right .window-list-item-box:focus, .panel-right .window-list-item-box:focus:hover {
-      box-shadow: inset -2px 0 #ed254e; }
-  .panel-top .window-list-item-box StIcon,
-  .panel-bottom .window-list-item-box StIcon, .panel-top
-  .window-list-item-box StBin,
-  .panel-bottom
-  .window-list-item-box StBin {
-    padding: 0 4px; }
-  .window-list-item-box.vertical StIcon,
-  .window-list-item-box.vertical StBin {
-    padding: 0; }
-  .window-list-item-box StLabel {
-    font-weight: 400; }
-    .panel-top .window-list-item-box StLabel:ltr,
-    .panel-bottom .window-list-item-box StLabel:ltr {
-      padding: 0 4px 0 0; }
-    .panel-top .window-list-item-box StLabel:rtl,
-    .panel-bottom .window-list-item-box StLabel:rtl {
-      padding: 0 0 0 4px; }
-  .window-list-item-box:progress,
+  padding-top: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+  transition-duration: 100;
+  color: rgba(247, 247, 247, 0.6); }
+  .window-list-item-box.top, .window-list-item-box.bottom {
+    border-bottom-width: 2px; }
+    .window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel {
+      padding-left: 2px; }
+  .window-list-item-box.right {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-right-width: 2px; }
+    .window-list-item-box.right StBin {
+      padding-right: 0; }
+  .window-list-item-box.left {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-left-width: 2px; }
+    .window-list-item-box.left StBin {
+      padding-left: 1px; }
+  .window-list-item-box:hover, .window-list-item-box:groupFocus {
+    color: #f7f7f7;
+    background-color: rgba(247, 247, 247, 0.1); }
+  .window-list-item-box:active, .window-list-item-box:checked, .window-list-item-box:focus, .window-list-item-box:running {
+    color: #f7f7f7;
+    border-color: #00e8b7; }
   .window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
-    background-gradient-end: #00e8b7; }
+    background-color: rgba(0, 232, 183, 0.8); }
 
 .window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
-  background-gradient-end: #00e8b7;
-  color: #f7f7f7; }
-  .panel-top .window-list-item-demands-attention {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .window-list-item-demands-attention {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .window-list-item-demands-attention {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .window-list-item-demands-attention {
-    box-shadow: inset -2px 0 #00e8b7; }
+  background-gradient-direction: vertical;
+  background-gradient-start: #F04A50;
+  background-gradient-end: #F04A50; }
 
 .window-list-preview {
-  padding: 12px;
-  spacing: 8px;
-  border: none;
-  border-image: url("assets/misc/osd.svg") 9 9 9 9;
-  border-radius: 2px;
-  color: #BAC3CF;
-  background: none; }
+  spacing: 6px;
+  color: #98abb2;
+  border: 1px solid #161819;
+  background-color: #222e39;
+  border-radius: 3px;
+  padding: 6px 12px 12px 12px;
+  font-size: 1em; }
+
+.grouped-window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .grouped-window-list-item-box {
-  border: 0 none transparent;
-  border-image: none;
+  text-align: left;
+  font-weight: bold;
   background-image: none;
-  background-color: #182129;
-  color: #BAC3CF;
-  box-shadow: none;
-  font-weight: 400; }
-  .panel-top .grouped-window-list-item-box StIcon,
-  .panel-bottom .grouped-window-list-item-box StIcon, .panel-top
-  .grouped-window-list-item-box StBin,
-  .panel-bottom
-  .grouped-window-list-item-box StBin {
-    padding: 0 4px; }
-  .panel-top .grouped-window-list-item-box:active, .panel-top .grouped-window-list-item-box:checked {
-    box-shadow: inset 0 2px #526e89; }
-  .panel-bottom .grouped-window-list-item-box:active, .panel-bottom .grouped-window-list-item-box:checked {
-    box-shadow: inset 0 -2px #526e89; }
-  .panel-left .grouped-window-list-item-box:active, .panel-left .grouped-window-list-item-box:checked {
-    box-shadow: inset 2px 0 #526e89; }
-  .panel-right .grouped-window-list-item-box:active, .panel-right .grouped-window-list-item-box:checked {
-    box-shadow: inset -2px 0 #526e89; }
-  .panel-top .grouped-window-list-item-box:hover, .panel-top .grouped-window-list-item-box:active:hover, .panel-top .grouped-window-list-item-box:focus, .panel-top .grouped-window-list-item-box:active:focus, .panel-top .grouped-window-list-item-box:focus:hover, .panel-top .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .grouped-window-list-item-box:hover, .panel-bottom .grouped-window-list-item-box:active:hover, .panel-bottom .grouped-window-list-item-box:focus, .panel-bottom .grouped-window-list-item-box:active:focus, .panel-bottom .grouped-window-list-item-box:focus:hover, .panel-bottom .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .grouped-window-list-item-box:hover, .panel-left .grouped-window-list-item-box:active:hover, .panel-left .grouped-window-list-item-box:focus, .panel-left .grouped-window-list-item-box:active:focus, .panel-left .grouped-window-list-item-box:focus:hover, .panel-left .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .grouped-window-list-item-box:hover, .panel-right .grouped-window-list-item-box:active:hover, .panel-right .grouped-window-list-item-box:focus, .panel-right .grouped-window-list-item-box:active:focus, .panel-right .grouped-window-list-item-box:focus:hover, .panel-right .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset -2px 0 #00e8b7; }
-  .grouped-window-list-item-box:progress,
+  padding-top: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+  transition-duration: 100;
+  color: rgba(247, 247, 247, 0.6); }
+  .grouped-window-list-item-box.top, .grouped-window-list-item-box.bottom {
+    border-bottom-width: 2px; }
+    .grouped-window-list-item-box.top StLabel, .grouped-window-list-item-box.bottom StLabel {
+      padding-left: 2px; }
+  .grouped-window-list-item-box.right {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-right-width: 2px; }
+    .grouped-window-list-item-box.right StBin {
+      padding-right: 0; }
+  .grouped-window-list-item-box.left {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-left-width: 2px; }
+    .grouped-window-list-item-box.left StBin {
+      padding-left: 1px; }
+  .grouped-window-list-item-box:hover, .grouped-window-list-item-box:focus {
+    color: #f7f7f7;
+    background-color: rgba(24, 33, 41, 0.3); }
+  .grouped-window-list-item-box:active, .grouped-window-list-item-box:checked {
+    color: #f7f7f7;
+    border-color: #00e8b7; }
   .grouped-window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
-    background-gradient-end: #00e8b7; }
+    background-color: rgba(0, 232, 183, 0.8); }
 
 .grouped-window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
-  background-gradient-end: #00e8b7;
-  color: #f7f7f7; }
-  .panel-top .grouped-window-list-item-demands-attention {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .grouped-window-list-item-demands-attention {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .grouped-window-list-item-demands-attention {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .grouped-window-list-item-demands-attention {
-    box-shadow: inset -2px 0 #00e8b7; }
+  background-gradient-direction: vertical;
+  background-gradient-start: #F04A50;
+  background-gradient-end: #F04A50; }
+
+.grouped-window-list-thumbnail-label {
+  padding-left: 4px; }
+
+.grouped-window-list-number-label {
+  z-index: 99;
+  color: #98abb2; }
+
+.grouped-window-list-badge {
+  border-radius: 256px;
+  background-color: #182129; }
+
+.grouped-window-list-button-label {
+  padding-left: 4px; }
+
+.grouped-window-list-thumbnail-alert {
+  background: rgba(255, 52, 52, 0.3); }
+
+.grouped-window-list-thumbnail-menu {
+  color: #98abb2;
+  border: 1px solid #161819;
+  background-color: #222e39;
+  border-radius: 3px;
+  padding: 0px; }
+  .grouped-window-list-thumbnail-menu > StBoxLayout {
+    padding: 4px; }
+  .grouped-window-list-thumbnail-menu .item-box {
+    padding: 10px;
+    border-radius: 2px;
+    spacing: 4px; }
+    .grouped-window-list-thumbnail-menu .item-box:outlined {
+      padding: 8px;
+      border: 1px solid #00e8b7; }
+    .grouped-window-list-thumbnail-menu .item-box:selected {
+      border: 1px solid #00e8b7; }
+  .grouped-window-list-thumbnail-menu .thumbnail {
+    width: 256px; }
+  .grouped-window-list-thumbnail-menu .separator {
+    width: 1px;
+    background: rgba(255, 255, 255, 0.2); }
 
 .sound-button {
   width: 22px;
@@ -1514,3 +1530,15 @@ StScrollBar {
   border: 0px;
   background-color: rgba(0, 0, 0, 0);
   border-radius: 0px; }
+
+.menu-category-button {
+  padding: 7px;
+  border: 1px solid rgba(0, 0, 0, 0); }
+  .menu-category-button-selected {
+    padding: 7px;
+    color: #f7f7f7;
+    background-color: #00e8b7;
+    border: 1px solid #161819; }
+  .menu-category-button-hover {
+    background-color: rgba(0, 232, 183, 0.3);
+    border-radius: 2px; }

cinnamon/cinnamon.css

@@ -1088,137 +1088,153 @@ StScrollBar {
     background-color: #00e8b7; }
 
 .window-list-box {
-  spacing: 0; }
-  .window-list-box .panel-top:ltr,
-  .panel-bottom .window-list-box:ltr {
-    padding: 0 0 0 8px; }
-  .window-list-box .panel-top:rtl,
-  .panel-bottom .window-list-box:rtl {
-    padding: 0 8px 0 0; }
+  spacing: 6px;
+  padding-left: 10px;
+  padding-top: 1px; }
   .window-list-box.vertical {
-    padding: 6px 0 0 0; }
+    spacing: 2px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px; }
   .window-list-box:highlight {
-    background-color: #00e8b7; }
+    background-color: rgba(252, 65, 56, 0.5); }
+
+.window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .window-list-item-box {
-  border: 0 none transparent;
-  border-image: none;
+  font-weight: bold;
   background-image: none;
-  background-color: #182129;
-  color: #BAC3CF;
-  box-shadow: none;
-  font-weight: 400; }
-  .window-list-item-box:hover {
-    color: #f7f7f7; }
-    .panel-top .window-list-item-box:hover {
-      box-shadow: inset 0 2px #00e8b7; }
-    .panel-bottom .window-list-item-box:hover {
-      box-shadow: inset 0 -2px #00e8b7; }
-    .panel-left .window-list-item-box:hover {
-      box-shadow: inset 2px 0 #00e8b7; }
-    .panel-right .window-list-item-box:hover {
-      box-shadow: inset -2px 0 #00e8b7; }
-  .window-list-item-box:active, .window-list-item-box:active:hover, .window-list-item-box:checked, .window-list-item-box:checked:hover, .window-list-item-box:focus, .window-list-item-box:focus:hover {
-    color: #f7f7f7; }
-    .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:active:hover, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:checked:hover, .panel-top .window-list-item-box:focus, .panel-top .window-list-item-box:focus:hover {
-      box-shadow: inset 0 2px #ed254e; }
-    .panel-bottom .window-list-item-box:active, .panel-bottom .window-list-item-box:active:hover, .panel-bottom .window-list-item-box:checked, .panel-bottom .window-list-item-box:checked:hover, .panel-bottom .window-list-item-box:focus, .panel-bottom .window-list-item-box:focus:hover {
-      box-shadow: inset 0 -2px #ed254e; }
-    .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:active:hover, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:checked:hover, .panel-left .window-list-item-box:focus, .panel-left .window-list-item-box:focus:hover {
-      box-shadow: inset 2px 0 #ed254e; }
-    .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:active:hover, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:checked:hover, .panel-right .window-list-item-box:focus, .panel-right .window-list-item-box:focus:hover {
-      box-shadow: inset -2px 0 #ed254e; }
-  .panel-top .window-list-item-box StIcon,
-  .panel-bottom .window-list-item-box StIcon, .panel-top
-  .window-list-item-box StBin,
-  .panel-bottom
-  .window-list-item-box StBin {
-    padding: 0 4px; }
-  .window-list-item-box.vertical StIcon,
-  .window-list-item-box.vertical StBin {
-    padding: 0; }
-  .window-list-item-box StLabel {
-    font-weight: 400; }
-    .panel-top .window-list-item-box StLabel:ltr,
-    .panel-bottom .window-list-item-box StLabel:ltr {
-      padding: 0 4px 0 0; }
-    .panel-top .window-list-item-box StLabel:rtl,
-    .panel-bottom .window-list-item-box StLabel:rtl {
-      padding: 0 0 0 4px; }
-  .window-list-item-box:progress,
+  padding-top: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+  transition-duration: 100;
+  color: rgba(247, 247, 247, 0.6); }
+  .window-list-item-box.top, .window-list-item-box.bottom {
+    border-bottom-width: 2px; }
+    .window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel {
+      padding-left: 2px; }
+  .window-list-item-box.right {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-right-width: 2px; }
+    .window-list-item-box.right StBin {
+      padding-right: 0; }
+  .window-list-item-box.left {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-left-width: 2px; }
+    .window-list-item-box.left StBin {
+      padding-left: 1px; }
+  .window-list-item-box:hover, .window-list-item-box:groupFocus {
+    color: #f7f7f7;
+    background-color: rgba(247, 247, 247, 0.1); }
+  .window-list-item-box:active, .window-list-item-box:checked, .window-list-item-box:focus, .window-list-item-box:running {
+    color: #f7f7f7;
+    border-color: #00e8b7; }
   .window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
-    background-gradient-end: #00e8b7; }
+    background-color: rgba(0, 232, 183, 0.8); }
 
 .window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
-  background-gradient-end: #00e8b7;
-  color: #f7f7f7; }
-  .panel-top .window-list-item-demands-attention {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .window-list-item-demands-attention {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .window-list-item-demands-attention {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .window-list-item-demands-attention {
-    box-shadow: inset -2px 0 #00e8b7; }
+  background-gradient-direction: vertical;
+  background-gradient-start: #F04A50;
+  background-gradient-end: #F04A50; }
 
 .window-list-preview {
-  padding: 12px;
-  spacing: 8px;
-  border: none;
-  border-image: url("assets/misc/osd.svg") 9 9 9 9;
-  border-radius: 2px;
-  color: #BAC3CF;
-  background: none; }
+  spacing: 6px;
+  color: #98abb2;
+  border: 1px solid #161819;
+  background-color: #222e39;
+  border-radius: 3px;
+  padding: 6px 12px 12px 12px;
+  font-size: 1em; }
+
+.grouped-window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .grouped-window-list-item-box {
-  border: 0 none transparent;
-  border-image: none;
+  text-align: left;
+  font-weight: bold;
   background-image: none;
-  background-color: #182129;
-  color: #BAC3CF;
-  box-shadow: none;
-  font-weight: 400; }
-  .panel-top .grouped-window-list-item-box StIcon,
-  .panel-bottom .grouped-window-list-item-box StIcon, .panel-top
-  .grouped-window-list-item-box StBin,
-  .panel-bottom
-  .grouped-window-list-item-box StBin {
-    padding: 0 4px; }
-  .panel-top .grouped-window-list-item-box:active, .panel-top .grouped-window-list-item-box:checked {
-    box-shadow: inset 0 2px #526e89; }
-  .panel-bottom .grouped-window-list-item-box:active, .panel-bottom .grouped-window-list-item-box:checked {
-    box-shadow: inset 0 -2px #526e89; }
-  .panel-left .grouped-window-list-item-box:active, .panel-left .grouped-window-list-item-box:checked {
-    box-shadow: inset 2px 0 #526e89; }
-  .panel-right .grouped-window-list-item-box:active, .panel-right .grouped-window-list-item-box:checked {
-    box-shadow: inset -2px 0 #526e89; }
-  .panel-top .grouped-window-list-item-box:hover, .panel-top .grouped-window-list-item-box:active:hover, .panel-top .grouped-window-list-item-box:focus, .panel-top .grouped-window-list-item-box:active:focus, .panel-top .grouped-window-list-item-box:focus:hover, .panel-top .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .grouped-window-list-item-box:hover, .panel-bottom .grouped-window-list-item-box:active:hover, .panel-bottom .grouped-window-list-item-box:focus, .panel-bottom .grouped-window-list-item-box:active:focus, .panel-bottom .grouped-window-list-item-box:focus:hover, .panel-bottom .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .grouped-window-list-item-box:hover, .panel-left .grouped-window-list-item-box:active:hover, .panel-left .grouped-window-list-item-box:focus, .panel-left .grouped-window-list-item-box:active:focus, .panel-left .grouped-window-list-item-box:focus:hover, .panel-left .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .grouped-window-list-item-box:hover, .panel-right .grouped-window-list-item-box:active:hover, .panel-right .grouped-window-list-item-box:focus, .panel-right .grouped-window-list-item-box:active:focus, .panel-right .grouped-window-list-item-box:focus:hover, .panel-right .grouped-window-list-item-box:active:focus:hover {
-    box-shadow: inset -2px 0 #00e8b7; }
-  .grouped-window-list-item-box:progress,
+  padding-top: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+  transition-duration: 100;
+  color: rgba(247, 247, 247, 0.6); }
+  .grouped-window-list-item-box.top, .grouped-window-list-item-box.bottom {
+    border-bottom-width: 2px; }
+    .grouped-window-list-item-box.top StLabel, .grouped-window-list-item-box.bottom StLabel {
+      padding-left: 2px; }
+  .grouped-window-list-item-box.right {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-right-width: 2px; }
+    .grouped-window-list-item-box.right StBin {
+      padding-right: 0; }
+  .grouped-window-list-item-box.left {
+    padding-left: 0px;
+    padding-right: 0px;
+    border-left-width: 2px; }
+    .grouped-window-list-item-box.left StBin {
+      padding-left: 1px; }
+  .grouped-window-list-item-box:hover, .grouped-window-list-item-box:focus {
+    color: #f7f7f7;
+    background-color: rgba(24, 33, 41, 0.3); }
+  .grouped-window-list-item-box:active, .grouped-window-list-item-box:checked {
+    color: #f7f7f7;
+    border-color: #00e8b7; }
   .grouped-window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
-    background-gradient-end: #00e8b7; }
+    background-color: rgba(0, 232, 183, 0.8); }
 
 .grouped-window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
-  background-gradient-end: #00e8b7;
-  color: #f7f7f7; }
-  .panel-top .grouped-window-list-item-demands-attention {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .grouped-window-list-item-demands-attention {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .grouped-window-list-item-demands-attention {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .grouped-window-list-item-demands-attention {
-    box-shadow: inset -2px 0 #00e8b7; }
+  background-gradient-direction: vertical;
+  background-gradient-start: #F04A50;
+  background-gradient-end: #F04A50; }
+
+.grouped-window-list-thumbnail-label {
+  padding-left: 4px; }
+
+.grouped-window-list-number-label {
+  z-index: 99;
+  color: #98abb2; }
+
+.grouped-window-list-badge {
+  border-radius: 256px;
+  background-color: #182129; }
+
+.grouped-window-list-button-label {
+  padding-left: 4px; }
+
+.grouped-window-list-thumbnail-alert {
+  background: rgba(255, 52, 52, 0.3); }
+
+.grouped-window-list-thumbnail-menu {
+  color: #98abb2;
+  border: 1px solid #161819;
+  background-color: #222e39;
+  border-radius: 3px;
+  padding: 0px; }
+  .grouped-window-list-thumbnail-menu > StBoxLayout {
+    padding: 4px; }
+  .grouped-window-list-thumbnail-menu .item-box {
+    padding: 10px;
+    border-radius: 2px;
+    spacing: 4px; }
+    .grouped-window-list-thumbnail-menu .item-box:outlined {
+      padding: 8px;
+      border: 1px solid #00e8b7; }
+    .grouped-window-list-thumbnail-menu .item-box:selected {
+      border: 1px solid #00e8b7; }
+  .grouped-window-list-thumbnail-menu .thumbnail {
+    width: 256px; }
+  .grouped-window-list-thumbnail-menu .separator {
+    width: 1px;
+    background: rgba(255, 255, 255, 0.2); }
 
 .sound-button {
   width: 22px;
@@ -1514,3 +1530,15 @@ StScrollBar {
   border: 0px;
   background-color: rgba(0, 0, 0, 0);
   border-radius: 0px; }
+
+.menu-category-button {
+  padding: 7px;
+  border: 1px solid rgba(0, 0, 0, 0); }
+  .menu-category-button-selected {
+    padding: 7px;
+    color: #f7f7f7;
+    background-color: #00e8b7;
+    border: 1px solid #161819; }
+  .menu-category-button-hover {
+    background-color: rgba(0, 232, 183, 0.3);
+    border-radius: 2px; }

gnome-shell/_common.scss

@@ -74,6 +74,8 @@ StEntry {
     warning-color: $warning_color;
     padding: 0 4px;
   }
+
+  StLabel.hint-text { color: transparentize($fg_color, 0.3); }
 }
 
 
@@ -522,7 +524,11 @@ StScrollBar {
     box-shadow: $depth6;
   }
 
-  .popup-menu-content { padding: 15px 0; }
+  .popup-menu-content { 
+    padding: 15px 0; 
+    background-color: $bg_color;
+    border-radius: 7px;
+  }
   .popup-menu-item {
     spacing: 5px;
     padding: 5px;
@@ -718,7 +724,10 @@ StScrollBar {
     spacing: 8px;
   }
 
-  .ws-switcher-active-up, .ws-switcher-active-down {
+  .ws-switcher-active-up,
+  .ws-switcher-active-down,
+  .ws-switcher-active-left,
+  .ws-switcher-active-right {
     height: 50px;
     background-color: $selected_bg_color;
     color: $selected_fg_color;
@@ -1379,6 +1388,10 @@ StScrollBar {
   spacing: 24px; //
 }
 
+#overview.cosmic-solid-bg {
+  background-color: $base_color !important;
+}
+
 .overview-controls {
   padding-bottom: 32px;
 }
@@ -1433,6 +1446,20 @@ StScrollBar {
 
   //search results
 
+  %search-section-content-item {  
+    &:focus,
+    &:hover,
+    &:selected {
+      background-color: transparentize($osd_fg_color, .9);
+      transition-duration: 200ms;
+    }
+  
+    &:active,
+    &:checked {
+      background-color: transparentize(darken($osd_bg_color, 10%), .1);
+    }
+  }
+
   #searchResultsBin {
     max-width: 1000px;
   }
@@ -1457,7 +1484,7 @@ StScrollBar {
   }
   .list-search-results { spacing: 3px; }
 
-  .search-section-separator { height: 2px; background-color: rgba(255, 255, 255, 0.2); }
+  .search-section-separator { height: 2px; background-color: $gray; }
 
   .list-search-result-content { spacing: 30px; }
   .list-search-result-title { color: lighten($topbar_color,5%); spacing: 12px; }
@@ -1466,6 +1493,12 @@ StScrollBar {
   .list-search-provider-content { spacing: 20px; }
   .search-provider-icon { padding: 15px; }
 
+  //Icon tile
+  .search-provider-icon,
+  .list-search-result {
+    @extend %search-section-content-item;
+  }
+
 
   /* DASHBOARD */
 
@@ -1548,16 +1581,6 @@ StScrollBar {
     }
   }
 
-  //Icon tile
-  .search-provider-icon,
-  .list-search-result {
-    @extend %icon_tile;
-    &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); }
-    &:focus, &:selected, &:hover {
-      background-color: transparentize($bg_color,.7);
-      transition-duration: 200ms;
-    }
-  }
   .app-well-app,
   .app-well-app.app-folder,
   .show-apps,

gnome-shell/_cosmic.scss

@@ -0,0 +1,31 @@
+
+/* Pop_OS COSMIC Dock styling, append !important to any changed rules */
+
+.cosmic-dock #dock {
+  border-radius: 12px 12px 12px 12px !important;
+  border: 0 !important;
+  background-color: darken($bg_color, 3%);
+  margin: 4px !important; 
+}
+
+.cosmic-dock.extended #dock {
+  border-radius: 0px !important;
+  margin: 0 !important; }
+
+.cosmic-dock.extended.side #dock {
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important; }
+
+.cosmic-dock.extended.side.left #dock {
+  border-left-width: 0 !important; }
+
+.cosmic-dock.extended.side.right #dock {
+  border-right-width: 0 !important; }
+
+.cosmic-dock.extended.bottom #dock {
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important; }
+
+.cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon {
+  border-radius: 11px; }

gnome-shell/gnome-shell.css

@@ -111,11 +111,12 @@ StEntry {
     icon-size: 16px;
     warning-color: #ff9f39;
     padding: 0 4px; }
+  StEntry StLabel.hint-text {
+    color: rgba(152, 171, 178, 0.7); }
 
 /* Scrollbars */
 StScrollView.vfade {
   -st-vfade-offset: 68px; }
-
 StScrollView.hfade {
   -st-hfade-offset: 68px; }
 
@@ -162,18 +163,14 @@ StScrollBar {
 /* Check Boxes */
 .check-box StBoxLayout {
   spacing: .8em; }
-
 .check-box StBin {
   width: 24px;
   height: 22px;
   background-image: url("assets/checkbox-off.svg"); }
-
 .check-box:focus, .check-box:hover StBin {
   background-image: url("assets/checkbox-off-focused.svg"); }
-
 .check-box:checked StBin {
   background-image: url("assets/checkbox.svg"); }
-
 .check-box:focus:checked StBin {
   background-image: url("assets/checkbox-focused.svg"); }
 
@@ -373,7 +370,6 @@ StScrollBar {
 
 .mount-dialog-app-list-item-icon:ltr {
   padding-right: 17px; }
-
 .mount-dialog-app-list-item-icon:rtl {
   padding-left: 17px; }
 
@@ -473,7 +469,6 @@ StScrollBar {
 .extension-dialog .message-dialog-main-layout {
   spacing: 24px;
   padding: 10px; }
-
 .extension-dialog .message-dialog-title {
   color: #576c74; }
 
@@ -499,7 +494,9 @@ StScrollBar {
     background-color: rgba(0, 0, 0, 0.2);
     box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
   .popup-menu .popup-menu-content {
-    padding: 15px 0; }
+    padding: 15px 0;
+    background-color: #222e39;
+    border-radius: 7px; }
   .popup-menu .popup-menu-item {
     spacing: 5px;
     padding: 5px; }
@@ -663,7 +660,10 @@ StScrollBar {
   padding: 0px;
   spacing: 8px; }
 
-.ws-switcher-active-up, .ws-switcher-active-down {
+.ws-switcher-active-up,
+.ws-switcher-active-down,
+.ws-switcher-active-left,
+.ws-switcher-active-right {
   height: 50px;
   background-color: #00e8b7;
   color: #f7f7f7;
@@ -772,17 +772,9 @@ StScrollBar {
     #panel .panel-button .system-status-icon {
       icon-size: 1.09em;
       padding: 0 5px; }
-    .unlock-screen #panel .panel-button,
-    .login-screen #panel .panel-button,
-    .lock-screen #panel .panel-button {
+    .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
       color: #b5c3c8; }
-      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
-      .login-screen #panel .panel-button:focus,
-      .login-screen #panel .panel-button:hover,
-      .login-screen #panel .panel-button:active,
-      .lock-screen #panel .panel-button:focus,
-      .lock-screen #panel .panel-button:hover,
-      .lock-screen #panel .panel-button:active {
+      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
         color: #b5c3c8; }
     #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
       box-shadow: none; }
@@ -867,7 +859,6 @@ StScrollBar {
 .events-button:hover,
 .events-button:focus {
   background-color: #2c3b49; }
-
 .datemenu-today-button:active,
 .world-clocks-button:active,
 .weather-button:active,
@@ -1031,9 +1022,8 @@ StScrollBar {
   padding: 8px;
   color: #98abb2;
   background-color: transparent; }
-
-.message-list-section-close:hover > StIcon,
-.message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon {
+.message-list-section-close:hover > StIcon, .message-list-section-close:focus > StIcon
+.message-list-section-close:active > StIcon {
   color: #ff007a;
   background: transparent; }
 
@@ -1062,7 +1052,7 @@ StScrollBar {
   color: #6c8791;
   font-size: 0.7em;
   /* HACK: the label should be baseline-aligned with a 1em label,
-                     fake this with some bottom padding */
+           fake this with some bottom padding */
   padding-bottom: 0.13em; }
 
 .message-secondary-bin > StIcon {
@@ -1100,13 +1090,11 @@ StScrollBar {
 .world-clocks-button .world-clocks-city {
   color: #98abb2;
   font-weight: normal; }
-
 .world-clocks-button .world-clocks-time {
   font-weight: bold;
   color: #98abb2;
   font-feature-settings: "lnum";
   text-align: right; }
-
 .world-clocks-button .world-clocks-timezone {
   color: #627a82;
   font-feature-settings: "tnum"; }
@@ -1117,14 +1105,12 @@ StScrollBar {
   font-weight: bold; }
   .weather-button .weather-header.location {
     font-weight: normal; }
-
 .weather-button .weather-forecast-time {
   color: #7b939c;
   font-feature-settings: "tnum";
   font-weight: normal;
   padding-top: 0.2em;
   padding-bottom: 0.4em; }
-
 .weather-button .weather-forecast-temp {
   font-weight: bold; }
 
@@ -1255,6 +1241,9 @@ StScrollBar {
 #overview {
   spacing: 24px; }
 
+#overview.cosmic-solid-bg {
+  background-color: #1E282C !important; }
+
 .overview-controls {
   padding-bottom: 32px; }
 
@@ -1299,6 +1288,17 @@ StScrollBar {
     .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
       color: #98abb2; }
 
+.search-provider-icon:focus,
+.list-search-result:focus, .search-provider-icon:hover,
+.list-search-result:hover, .search-provider-icon:selected,
+.list-search-result:selected {
+  background-color: rgba(152, 171, 178, 0.1);
+  transition-duration: 200ms; }
+.search-provider-icon:active,
+.list-search-result:active, .search-provider-icon:checked,
+.list-search-result:checked {
+  background-color: rgba(15, 20, 25, 0.85); }
+
 #searchResultsBin {
   max-width: 1000px; }
 
@@ -1322,7 +1322,7 @@ StScrollBar {
 
 .search-section-separator {
   height: 2px;
-  background-color: rgba(255, 255, 255, 0.2); }
+  background-color: #2f404f; }
 
 .list-search-result-content {
   spacing: 30px; }
@@ -1408,25 +1408,12 @@ StScrollBar {
   .app-view-control:last-child {
     border-radius: 0 3px 3px 0; }
 
-.search-provider-icon:active, .search-provider-icon:checked,
-.list-search-result:active,
-.list-search-result:checked {
-  background-color: rgba(15, 20, 25, 0.85); }
-
-.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
-.list-search-result:focus,
-.list-search-result:selected,
-.list-search-result:hover {
-  background-color: rgba(34, 46, 57, 0.3);
-  transition-duration: 200ms; }
-
 .app-well-app,
 .app-well-app.app-folder,
 .show-apps,
 .grid-search-result {
   border: none; }
-  .app-well-app:active .overview-icon,
-  .app-well-app:checked .overview-icon,
+  .app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
   .app-well-app.app-folder:active .overview-icon,
   .app-well-app.app-folder:checked .overview-icon,
   .show-apps:active .overview-icon,
@@ -1436,9 +1423,7 @@ StScrollBar {
     background-color: rgba(21, 28, 35, 0.85);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
     color: #98abb2; }
-  .app-well-app:hover .overview-icon,
-  .app-well-app:focus .overview-icon,
-  .app-well-app:selected .overview-icon,
+  .app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon,
   .app-well-app.app-folder:hover .overview-icon,
   .app-well-app.app-folder:focus .overview-icon,
   .app-well-app.app-folder:selected .overview-icon,
@@ -1461,8 +1446,7 @@ StScrollBar {
   box-shadow: 0px 0px 5px 4px rgba(0, 232, 183, 0.8);
   margin-bottom: 0px; }
 
-.search-provider-icon,
-.list-search-result, .app-well-app .overview-icon,
+.app-well-app .overview-icon,
 .app-well-app.app-folder .overview-icon,
 .show-apps .overview-icon,
 .grid-search-result .overview-icon {
@@ -1853,8 +1837,7 @@ StScrollBar {
 
 .login-dialog-not-listed-label {
   padding-left: 2px; }
-  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
-  .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
+  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
     color: #98abb2; }
 
 .login-dialog-not-listed-label {
@@ -1901,7 +1884,6 @@ StScrollBar {
 
 .user-widget-label:ltr {
   padding-left: 18px; }
-
 .user-widget-label:rtl {
   padding-right: 18px; }
 
@@ -2029,7 +2011,6 @@ StScrollBar {
 .lg-dialog StEntry {
   selection-background-color: #bbbbbb;
   selected-color: #333333; }
-
 .lg-dialog .shell-link {
   color: #999999; }
   .lg-dialog .shell-link:hover {
@@ -2084,3 +2065,34 @@ StScrollBar {
 
 .openweather-current-databox-captions, .openweather-forecast-day {
   color: #00e8b7; }
+
+/* Pop_OS COSMIC Dock styling, append !important to any changed rules */
+.cosmic-dock #dock {
+  border-radius: 12px 12px 12px 12px !important;
+  border: 0 !important;
+  background-color: #1c262f;
+  margin: 4px !important; }
+
+.cosmic-dock.extended #dock {
+  border-radius: 0px !important;
+  margin: 0 !important; }
+
+.cosmic-dock.extended.side #dock {
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important; }
+
+.cosmic-dock.extended.side.left #dock {
+  border-left-width: 0 !important; }
+
+.cosmic-dock.extended.side.right #dock {
+  border-right-width: 0 !important; }
+
+.cosmic-dock.extended.bottom #dock {
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important; }
+
+.cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon {
+  border-radius: 11px; }
+
+/*# sourceMappingURL=gnome-shell.css.map */

gnome-shell/gnome-shell.scss

@@ -3,4 +3,5 @@ $subtheme: 'main';
 @import "colors"; //use gtk colors
 @import "drawing";
 @import "common";
-@import "extensions"
+@import "extensions";
+@import "cosmic"

gnome-shell/v40/gnome-shell.scss

@@ -0,0 +1,6 @@
+$subtheme: 'main';
+
+@import "../colors"; //use gtk colors
+@import "../drawing";
+@import "common";
+@import "../extensions"

gtk-3.0/_colors-public.scss

@@ -108,4 +108,78 @@ read if you used those and something break with a version upgrade you're on your
 
 //Budgie desktop
 @define-color budgie_tasklist_indicator_color #{"" +$selected_bg_color};
-@define-color budgie_tasklist_indicator_color_active #{"" +$selected_bg_color};
+@define-color budgie_tasklist_indicator_color_active #{"" +$selected_bg_color};
+
+
+// Elementary OS colors
+@define-color STRAWBERRY_100 #{$STRAWBERRY_100};
+@define-color STRAWBERRY_300 #{$STRAWBERRY_300};
+@define-color STRAWBERRY_500 #{$STRAWBERRY_500};
+@define-color STRAWBERRY_700 #{$STRAWBERRY_700};
+@define-color STRAWBERRY_900 #{$STRAWBERRY_900};
+
+@define-color ORANGE_100 #{$ORANGE_100};
+@define-color ORANGE_300 #{$ORANGE_300};
+@define-color ORANGE_500 #{$ORANGE_500};
+@define-color ORANGE_700 #{$ORANGE_700};
+@define-color ORANGE_900 #{$ORANGE_900};
+
+@define-color BANANA_100 #{$BANANA_100};
+@define-color BANANA_300 #{$BANANA_300};
+@define-color BANANA_500 #{$BANANA_500};
+@define-color BANANA_700 #{$BANANA_700};
+@define-color BANANA_900 #{$BANANA_900};
+
+@define-color LIME_100 #{$LIME_100};
+@define-color LIME_300 #{$LIME_300};
+@define-color LIME_500 #{$LIME_500};
+@define-color LIME_700 #{$LIME_700};
+@define-color LIME_900 #{$LIME_900};
+
+@define-color MINT_100 #{$MINT_100};
+@define-color MINT_300 #{$MINT_300};
+@define-color MINT_500 #{$MINT_500};
+@define-color MINT_700 #{$MINT_700};
+@define-color MINT_900 #{$MINT_900};
+
+@define-color BLUEBERRY_100 #{$BLUEBERRY_100};
+@define-color BLUEBERRY_300 #{$BLUEBERRY_300};
+@define-color BLUEBERRY_500 #{$BLUEBERRY_500};
+@define-color BLUEBERRY_700 #{$BLUEBERRY_700};
+@define-color BLUEBERRY_900 #{$BLUEBERRY_900};
+
+@define-color BUBBLEGUM_100 #{$BUBBLEGUM_100};
+@define-color BUBBLEGUM_300 #{$BUBBLEGUM_300};
+@define-color BUBBLEGUM_500 #{$BUBBLEGUM_500};
+@define-color BUBBLEGUM_700 #{$BUBBLEGUM_700};
+@define-color BUBBLEGUM_900 #{$BUBBLEGUM_900};
+
+@define-color GRAPE_100 #{$GRAPE_100};
+@define-color GRAPE_300 #{$GRAPE_300};
+@define-color GRAPE_500 #{$GRAPE_500};
+@define-color GRAPE_700 #{$GRAPE_700};
+@define-color GRAPE_900 #{$GRAPE_900};
+
+@define-color COCOA_100 #{$COCOA_100};
+@define-color COCOA_300 #{$COCOA_300};
+@define-color COCOA_500 #{$COCOA_500};
+@define-color COCOA_700 #{$COCOA_700};
+@define-color COCOA_900 #{$COCOA_900};
+
+@define-color SILVER_100 #{$SILVER_100};
+@define-color SILVER_300 #{$SILVER_300};
+@define-color SILVER_500 #{$SILVER_500};
+@define-color SILVER_700 #{$SILVER_700};
+@define-color SILVER_900 #{$SILVER_900};
+
+@define-color SLATE_100 #{$SLATE_100};
+@define-color SLATE_300 #{$SLATE_300};
+@define-color SLATE_500 #{$SLATE_500};
+@define-color SLATE_700 #{$SLATE_700};
+@define-color SLATE_900 #{$SLATE_900};
+
+@define-color BLACK_100 #{$BLACK_100};
+@define-color BLACK_300 #{$BLACK_300};
+@define-color BLACK_500 #{$BLACK_500};
+@define-color BLACK_700 #{$BLACK_700};
+@define-color BLACK_900 #{"" + $BLACK_900};

gtk-3.0/_elementary-colors.scss

@@ -0,0 +1,71 @@
+$STRAWBERRY_100: #ff8c82;
+$STRAWBERRY_300: #ed5353;
+$STRAWBERRY_500: #c6262e;
+$STRAWBERRY_700: #a10705;
+$STRAWBERRY_900: #7a0000;
+
+$ORANGE_100: #ffc27d;
+$ORANGE_300: #ffa154;
+$ORANGE_500: #f37329;
+$ORANGE_700: #cc3b02;
+$ORANGE_900: #a62100;
+
+$BANANA_100: #fff394;
+$BANANA_300: #ffe16b;
+$BANANA_500: #f9c440;
+$BANANA_700: #d48e15;
+$BANANA_900: #ad5f00;
+
+$LIME_100: #d1ff82;
+$LIME_300: #9bdb4d;
+$LIME_500: #68b723;
+$LIME_700: #3a9104;
+$LIME_900: #206b00;
+
+$MINT_100: #89ffdd;
+$MINT_300: #43d6b5;
+$MINT_500: #28bca3;
+$MINT_700: #0e9a83;
+$MINT_900: #007367;
+
+$BLUEBERRY_100: #8cd5ff;
+$BLUEBERRY_300: #64baff;
+$BLUEBERRY_500: #3689e6;
+$BLUEBERRY_700: #0d52bf;
+$BLUEBERRY_900: #002e99;
+
+$BUBBLEGUM_100: #fe9ab8;
+$BUBBLEGUM_300: #f4679d;
+$BUBBLEGUM_500: #de3e80;
+$BUBBLEGUM_700: #bc245d;
+$BUBBLEGUM_900: #910e38;
+
+$GRAPE_100: #e4c6fa;
+$GRAPE_300: #cd9ef7;
+$GRAPE_500: #a56de2;
+$GRAPE_700: #7239b3;
+$GRAPE_900: #452981;
+
+$COCOA_100: #a3907c;
+$COCOA_300: #8a715e;
+$COCOA_500: #715344;
+$COCOA_700: #57392d;
+$COCOA_900: #3d211b;
+
+$SILVER_100: #fafafa;
+$SILVER_300: #d4d4d4;
+$SILVER_500: #abacae;
+$SILVER_700: #7e8087;
+$SILVER_900: #555761;
+
+$SLATE_100: #95a3ab;
+$SLATE_300: #667885;
+$SLATE_500: #485a6c;
+$SLATE_700: #273445;
+$SLATE_900: #0e141f;
+
+$BLACK_100: #666;
+$BLACK_300: #4d4d4d;
+$BLACK_500: #333;
+$BLACK_700: #1a1a1a;
+$BLACK_900: #000;

gtk-3.0/apps/_nemo.scss

@@ -60,5 +60,10 @@
             &:checked { @include button(active-header); }
         }
     }
+
+    .nemo-inactive-pane .view,
+    .nemo-inactive-pane iconview {
+        background-color: darken($base_color, 5%); 
+    }
     
 }

gtk-3.0/apps/_pantheon.scss

@@ -304,4 +304,142 @@ LibraryWindow {
       }
     }
   }
+}
+
+
+/**************************
+ * Colors in context menu *
+**************************/
+
+checkbutton.color-button {
+  border: 1px solid $borders_color;
+  border-radius: 100px;
+  background-clip: border-box;
+  padding: 0;
+  margin: 2px 1px;
+
+  > check {
+    -gtk-icon-source: none;
+    background: none;
+    margin-right: 0;
+    padding: 2px;
+  }
+
+  &.none {
+    > check {
+      background-color: transparent;
+      border-radius: 100px;
+      -gtk-icon-source: -gtk-icontheme("close-symbolic");
+    }
+  }
+
+}
+
+radiobutton.color-button {
+  > radio {
+    -gtk-icon-source: none;
+    margin-right: 0;
+    border: 1px solid rgba(black, 0.15);
+    border-radius: 100px;
+    background-clip: border-box;
+  }
+
+  &:active > radio {
+    border: 1px solid rgba(black, 0.35);
+  }
+}
+
+.color-button {
+  check,
+  check:checked,
+  radio,
+  radio:checked, {
+      background-image: none;
+      border: 1px solid rgba(black, 0.2);
+      border-radius: 50%;
+      color: $base_color;
+      -gtk-icon-source: -gtk-icontheme("check-active-symbolic");
+  }
+
+  &.red check,
+  &.red radio,
+  &.strawberry check,
+  &.strawberry radio {
+      background-color: #{'@STRAWBERRY_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'};
+  }
+
+  &.orange check,
+  &.orange radio {
+      background-color: #{'@ORANGE_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'};
+  }
+
+  &.yellow check,
+  &.yellow radio,
+  &.banana check,
+  &.banana radio {
+      background-color: #{'@BANANA_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'};
+  }
+
+  &.green check,
+  &.green radio,
+  &.lime check,
+  &.lime radio {
+      background-color: #{'@LIME_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'};
+  }
+
+  &.blue check,
+  &.blue radio,
+  &.blueberry check,
+  &.blueberry radio {
+      background-color: #{'@BLUEBERRY_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'};
+  }
+
+  &.purple check,
+  &.purple radio,
+  &.grape check,
+  &.grape radio {
+      background-color: #{'@GRAPE_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'};
+  }
+
+  &.brown check,
+  &.brown radio,
+  &.cocoa check,
+  &.cocoa radio {
+      background-color: #{'@COCOA_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'};
+  }
+
+  &.mint check,
+  &.mint radio  {
+      background-color: #{'@MINT_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'};
+  }
+
+  &.pink check,
+  &.pink radio,
+  &.bubblegum check,
+  &.bubblegum radio  {
+      background-color: #{'@BUBBLEGUM_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'};
+  }
+
+  &.slate check,
+  &.slate radio  {
+      background-color: #{'@SLATE_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'};
+
+  }
+
+  &.auto radio {
+      background-image: url("assets/color-button-auto.png");
+      background-position: -1px -1px;
+      background-repeat: no-repeat;
+      background-size: calc(100% + 2px);
+  }
 }

gtk-3.0/apps/_xfce.scss

@@ -75,14 +75,14 @@ scrolledwindow.sidebar treeview.view {
 }
 
 /* path-bar of thunar */
-window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button {
+window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button, .thunar toolbar .path-bar-button {
   margin-top: 7px;
   margin-bottom: 7px;
   &:hover { color: $selected_bg_color; }
   &:checked { @include button(active-header); }
 }
 
-window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button {
+window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button, .thunar toolbar .path-bar-button {
   background: none;
   outline: none;
   border: none;

gtk-3.0/gtk-dark.scss

@@ -3,6 +3,7 @@
 $variant: 'dark';
 
 @import 'colors';
+@import 'elementary-colors';
 @import 'colors-public';
 @import 'drawing';
 @import 'common';

gtk-3.0/gtk.scss

@@ -3,6 +3,7 @@
 $variant: 'light';
 
 @import 'colors';
+@import 'elementary-colors';
 @import 'colors-public';
 @import 'drawing';
 @import 'common';

gtk-4.0/_apps.scss

@@ -0,0 +1,19 @@
+/**********************
+ * DE-Specific Styles *
+ **********************/
+
+@import 'apps/budgie';
+@import 'apps/gnome';
+@import 'apps/xfce';
+@import 'apps/pantheon';
+@import 'apps/unity';
+@import 'apps/mate';
+
+/***********************
+ * App-Specific Styles *
+ ***********************/
+
+@import 'apps/geary';
+@import 'apps/lightdm';
+@import 'apps/nemo';
+@import 'apps/caja';

gtk-4.0/_colors-public.scss

@@ -0,0 +1,185 @@
+//apps rely on some named colors to be exported
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using "" + $var
+
+/* widget text/foreground color */
+@define-color theme_fg_color #{"" +$fg_color};
+
+/* text color for entries, views and content in general */
+@define-color theme_text_color #{"" +$text_color};
+
+/* widget base background color */
+@define-color theme_bg_color #{"" +$bg_color};
+
+/* text widgets and the like base background color */
+@define-color theme_base_color #{"" +$base_color};
+
+/* base background color of selections */
+@define-color theme_selected_bg_color #{"" +$selected_bg_color};
+
+/* text/foreground color of selections */
+@define-color theme_selected_fg_color #{"" +$selected_fg_color};
+
+/* base background color of disabled widgets */
+@define-color insensitive_bg_color #{"" +$insensitive_bg_color};
+
+/* text foreground color of disabled widgets */
+@define-color insensitive_fg_color #{"" +$insensitive_fg_color};
+
+/* disabled text widgets and the like base background color */
+@define-color insensitive_base_color #{"" +$base_color};
+
+/* widget text/foreground color on backdrop windows */
+@define-color theme_unfocused_fg_color #{"" +$backdrop_fg_color};
+
+/* text color for entries, views and content in general on backdrop windows */
+@define-color theme_unfocused_text_color #{"" +$text_color};
+
+/* widget base background color on backdrop windows */
+@define-color theme_unfocused_bg_color #{"" +$backdrop_bg_color};
+
+/* text widgets and the like base background color on backdrop windows */
+@define-color theme_unfocused_base_color #{"" +$backdrop_base_color};
+
+/* base background color of selections on backdrop windows */
+@define-color theme_unfocused_selected_bg_color #{"" +$selected_bg_color};
+
+/* text/foreground color of selections on backdrop windows */
+@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color};
+
+/* widgets main borders color */
+@define-color borders #{"" +$borders_color};
+
+/* widgets main borders color on backdrop windows */
+@define-color unfocused_borders #{"" +$backdrop_borders_color};
+
+/* these are pretty self explicative */
+@define-color warning_color #{"" +$warning_color};
+@define-color error_color #{"" +$error_color};
+@define-color success_color #{"" +$success_color};
+//@define-color destructive_color #{$destructive_color}
+
+@define-color fg_color #{"" +$fg_color};
+@define-color text_color #{"" +$text_color};
+@define-color bg_color #{"" +$bg_color};
+@define-color base_color #{"" +$base_color};
+@define-color selected_bg_color #{"" +$selected_bg_color};
+@define-color selected_fg_color #{"" +$selected_fg_color};
+@define-color unfocused_fg_color #{"" +$backdrop_fg_color};
+@define-color unfocused_text_color #{"" +$text_color};
+@define-color unfocused_bg_color #{"" +$backdrop_bg_color};
+@define-color unfocused_base_color #{"" +$backdrop_base_color};
+@define-color unfocused_selected_bg_color #{"" +$selected_bg_color};
+@define-color unfocused_selected_fg_color #{"" + $selected_fg_color};
+
+//WM
+
+$_wm_highlight: if($variant=='light', $top_highlight,  // Sass gets mad if this is
+                  transparentize(black,1));          // done directly in the
+                                                     // color definition
+
+/* these colors are exported for the window manager and shouldn't be used in applications,
+read if you used those and something break with a version upgrade you're on your own... */
+@define-color wm_title shade(#{$fg_color}, 1.8);
+@define-color wm_unfocused_title #{$backdrop_fg_color};
+@define-color wm_highlight #{"" + $_wm_highlight};
+@define-color wm_borders_edge #{"" + $borders_edge};
+
+@define-color wm_bg_a shade(#{$bg_color}, 1.2);
+@define-color wm_bg_b #{$bg_color};
+
+@define-color wm_shadow alpha(black, 0.35);
+@define-color wm_border alpha(black, 0.18);
+
+@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3);
+@define-color wm_button_hover_color_b #{$bg_color};
+@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85);
+@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89);
+@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9);
+
+//FIXME this is really an API
+
+@define-color content_view_bg #{"" + $base_color};
+@define-color text_view_bg #{"" + $base_color};
+
+//Budgie desktop
+@define-color budgie_tasklist_indicator_color #{"" +$selected_bg_color};
+@define-color budgie_tasklist_indicator_color_active #{"" +$selected_bg_color};
+@define-color placeholder_text_color #{"" +$backdrop_text_color};
+
+// Elementary OS colors
+@define-color STRAWBERRY_100 #{$STRAWBERRY_100};
+@define-color STRAWBERRY_300 #{$STRAWBERRY_300};
+@define-color STRAWBERRY_500 #{$STRAWBERRY_500};
+@define-color STRAWBERRY_700 #{$STRAWBERRY_700};
+@define-color STRAWBERRY_900 #{$STRAWBERRY_900};
+
+@define-color ORANGE_100 #{$ORANGE_100};
+@define-color ORANGE_300 #{$ORANGE_300};
+@define-color ORANGE_500 #{$ORANGE_500};
+@define-color ORANGE_700 #{$ORANGE_700};
+@define-color ORANGE_900 #{$ORANGE_900};
+
+@define-color BANANA_100 #{$BANANA_100};
+@define-color BANANA_300 #{$BANANA_300};
+@define-color BANANA_500 #{$BANANA_500};
+@define-color BANANA_700 #{$BANANA_700};
+@define-color BANANA_900 #{$BANANA_900};
+
+@define-color LIME_100 #{$LIME_100};
+@define-color LIME_300 #{$LIME_300};
+@define-color LIME_500 #{$LIME_500};
+@define-color LIME_700 #{$LIME_700};
+@define-color LIME_900 #{$LIME_900};
+
+@define-color MINT_100 #{$MINT_100};
+@define-color MINT_300 #{$MINT_300};
+@define-color MINT_500 #{$MINT_500};
+@define-color MINT_700 #{$MINT_700};
+@define-color MINT_900 #{$MINT_900};
+
+@define-color BLUEBERRY_100 #{$BLUEBERRY_100};
+@define-color BLUEBERRY_300 #{$BLUEBERRY_300};
+@define-color BLUEBERRY_500 #{$BLUEBERRY_500};
+@define-color BLUEBERRY_700 #{$BLUEBERRY_700};
+@define-color BLUEBERRY_900 #{$BLUEBERRY_900};
+
+@define-color BUBBLEGUM_100 #{$BUBBLEGUM_100};
+@define-color BUBBLEGUM_300 #{$BUBBLEGUM_300};
+@define-color BUBBLEGUM_500 #{$BUBBLEGUM_500};
+@define-color BUBBLEGUM_700 #{$BUBBLEGUM_700};
+@define-color BUBBLEGUM_900 #{$BUBBLEGUM_900};
+
+@define-color GRAPE_100 #{$GRAPE_100};
+@define-color GRAPE_300 #{$GRAPE_300};
+@define-color GRAPE_500 #{$GRAPE_500};
+@define-color GRAPE_700 #{$GRAPE_700};
+@define-color GRAPE_900 #{$GRAPE_900};
+
+@define-color COCOA_100 #{$COCOA_100};
+@define-color COCOA_300 #{$COCOA_300};
+@define-color COCOA_500 #{$COCOA_500};
+@define-color COCOA_700 #{$COCOA_700};
+@define-color COCOA_900 #{$COCOA_900};
+
+@define-color SILVER_100 #{$SILVER_100};
+@define-color SILVER_300 #{$SILVER_300};
+@define-color SILVER_500 #{$SILVER_500};
+@define-color SILVER_700 #{$SILVER_700};
+@define-color SILVER_900 #{$SILVER_900};
+
+@define-color SLATE_100 #{$SLATE_100};
+@define-color SLATE_300 #{$SLATE_300};
+@define-color SLATE_500 #{$SLATE_500};
+@define-color SLATE_700 #{$SLATE_700};
+@define-color SLATE_900 #{$SLATE_900};
+
+@define-color BLACK_100 #{$BLACK_100};
+@define-color BLACK_300 #{$BLACK_300};
+@define-color BLACK_500 #{$BLACK_500};
+@define-color BLACK_700 #{$BLACK_700};
+@define-color BLACK_900 #{"" + $BLACK_900};

gtk-4.0/_colors.scss

@@ -0,0 +1,116 @@
+// When color definition differs for dark and light variant
+// it gets @if ed depending on $variant
+
+// Main definitions
+$base_color: if($variant == 'light', #ebf0f5, lighten(#161925, 1%));
+$text_color: if($variant == 'light', #31363D, #C3C7D1);
+$bg_color: if($variant == 'light', darken( #EEEEEE, 3%), #161925);
+$fg_color: if($variant == 'light', #31363d, #C3C7D1);
+$switch_bg: if($variant == 'light', #ffffff, transparentize(black,1));
+$shadow_color: rgba(162, 162, 165, 0.21);
+$_sidebar_color: if($variant == 'light', #222e39, #161925);
+
+// Primary colors
+$lime: #71f79f;
+$red: #ed254e;
+$orange: #ff6a00;
+$yellow: #f9dc5c;
+$purple: #c74ded;
+$darkpurple: #7b7bbd;
+$blue: #7cb7ff;
+$cyan: #00c1e4;
+$slider: #7b7bbd;
+$teal: #00e8c6;
+
+$selected_fg_color: #fefefe;
+$selected_bg_color: #c50ed2;
+//$selected_bg_color: #f7005a;
+/*$selected_bg_color: #00e8c6;06d6a0*/
+$selected_borders_color: darken($selected_bg_color, 10%);
+$borders_color: if($variant == 'light', transparentize(black,0.87), transparentize(#0C0E15,0.2));
+$borders_edge: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9));
+
+$selected-tab-gradient-start: #5800E2;
+$selected-tab-gradient-end: #FF00E6;
+
+$link_color: $blue;
+$link_visited_color:transparentize($link_color,0.5);
+$top_highlight: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9));
+$bottom_highlight: if($variant == 'light', transparentize(black, 0.8), transparentize(black, 0.9));
+$dark_fill: mix($borders_color, $bg_color, 35%);
+$headerbar_color: mix($base_color, darken($bg_color, 8%), 30%);
+$headerbar_fg_color: $text_color;
+$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%));
+$popover_bg_color: $base_color;
+$popover_hover_color: lighten($bg_color, 5%);
+
+$scrollbar_bg_color: mix($base_color, $bg_color, 50%);
+$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
+$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
+$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
+
+$warning_color: if($variant == 'light', $orange, darken($orange,10%));
+$error_color: if($variant == 'light', $red, darken($red,5%));
+$success_color: if($variant == 'light', $cyan, darken($cyan,10%));
+$destructive_color: if($variant == 'light', darken($red,5%), darken($red,10%));
+$suggested_color: if($variant == 'light', $selected_bg_color, darken($selected_bg_color,10%));
+
+$osd_fg_color: #fefefe;
+$osd_text_color: white;
+$osd_bg_color:  transparentize(darken($_sidebar_color, 3%), 0.02);
+$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
+$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
+$osd_borders_color: transparentize(black, 0.3);
+
+$sidebar_bg_color: mix($bg_color, $base_color, 50%);
+$base_hover_color: transparentize($fg_color, 0.95);
+
+$tooltip_borders_color: transparentize(white, 0.9);
+$shadow_color: transparentize(black, 0.9);
+
+$drop_target_color: #a1ce4b;
+
+$text_shadow_color: if($variant == 'dark', $shadow_color, transparentize(white, 0.9));
+$icon_shadow_color: $text_shadow_color;
+
+$drop_target_color: $lime;
+
+// Infobar colors
+$info_color: $lime;
+$question_color: $cyan;
+
+// Panel colors
+$panel_bg_color: transparentize($base_color, 0);
+$panel_fg_color: white;
+$panel_borders_color: transparentize($base_color, 0.8);
+
+// Disabled state colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_base_color: darken($base_color, 5%);
+$insensitive_borders_color: $borders_color;
+
+// Backdrop state colors
+$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
+$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
+$backdrop_bg_color: $bg_color;
+$backdrop_headerbar_bg_color: $headerbar_color;
+$backdrop_headerbar_fg_color: if($variant == 'light', transparentize($headerbar_fg_color, 0.5), transparentize($headerbar_fg_color, 0.2));
+$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
+$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
+$backdrop_selected_bg_color:  transparentize($selected_bg_color, 0.4);
+$backdrop_selected_fg_color: if($variant == 'light', $selected_fg_color, transparentize($selected_fg_color, 0.5));
+$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
+$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
+$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
+
+$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
+$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
+
+$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
+
+$scale_bg: if($variant == 'light', transparentize(black,0.86) ,transparentize(white,0.86));
+$scale_disabled_bg: if($variant == 'light', transparentize(black, 0.94) ,transparentize(white, 0.94));
+$suggested_bg_color: linear-gradient(to right, #654ea3 0%, #eaafc8 100%);
+$destructive_bg_color: linear-gradient(to right, #FF416C, #FF4B2B);
+$menu_shadow_color: $borders_color;

gtk-4.0/_common.scss

@@ -0,0 +1,26 @@
+/*********
+* Common *
+*********/
+
+@function gtkalpha($c,$a) {
+  @return unquote("alpha(#{$c},#{$a})");
+}
+
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$asset_suffix: if($variant=='dark', '-dark', '');
+$backdrop_transition: 200ms ease-out;
+$button_transition: all 200ms $ease-out-quad;
+
+* {
+  padding: 0;
+  // We use the outline properties to signal the focus properties
+  // to the adwaita engine: using real CSS properties is faster,
+  // and we don't use any outlines for now.
+
+  outline-color: transparentize($fg_color, 0.7);
+  outline-style: dashed;
+  outline-offset: -3px;
+  outline-width: 0px;
+
+  -gtk-secondary-caret-color: $selected_bg_color;
+}

gtk-4.0/_drawing.scss

@@ -0,0 +1,613 @@
+/*****************
+* Drawing mixins *
+*****************/
+
+// generic drawing of more complex things
+
+@function _widget_edge($c:$borders_edge) {
+// outer highlight "used" on most widgets
+  @if $c == none { @return none; }
+  @else { @return 0 1px $c; }
+}
+
+@mixin lines($t, $c:$selected_bg_color) {
+    @if $t==up {
+      box-shadow: inset 0 -3px 0 0 darken($c,5%);
+    }
+    @if $t==down {
+      box-shadow: inset 0 3px 0 0 darken($c,5%);
+    }
+    @if $t==both {
+      box-shadow: inset 0 -3px 0 0 darken($c,5%),
+                  inset 0 3px 0 0 darken($c,5%);
+    }
+}
+
+@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
+//
+// Helper function to stack up to 4 box-shadows;
+//
+  @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
+  @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
+  @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
+  @else { box-shadow: $shadow1; }
+}
+
+// entries
+
+@function entry_focus_border($fc:$selected_bg_color) {
+  @if $variant == 'light' { @return $fc; }
+  @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); }
+}
+
+
+@function entry_gradient($c) {
+  @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 45%),
+                                                             mix($borders_color, $c, 3%) 2px,
+                                                             $c 90%); }
+  @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%),
+                                             mix($borders_color, $c, 40%) 3px,
+                                             $c 90%); }
+}
+
+@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
+//
+// Entries drawing function
+//
+// $t: entry type
+// $fc: focus color
+// $edge: set to none to not draw the bottom edge or specify a color to not
+//        use the default one
+//
+// possible $t values:
+// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
+//
+
+  $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
+  $_entry_edge: if($edge == none, none, _widget_edge($edge));
+
+  @if $t==normal {
+    color: $text_color;
+    border-color: $borders_color;
+    background-color: $base_color;
+    // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
+  }
+  @if $t==focus {
+    border-color: entry_focus_border($fc);
+  }
+  @if $t==insensitive {
+    color: $insensitive_fg_color;
+    border-color: $borders_color;
+    background-color: $insensitive_bg_color;
+    box-shadow: $_entry_edge;
+  }
+  @if $t==backdrop {
+    color: $backdrop_text_color;
+    border-color: $backdrop_borders_color;
+    background-color: $backdrop_base_color;
+    box-shadow: $_blank_edge;
+  }
+  @if $t==backdrop-insensitive {
+    color: $backdrop_insensitive_color;
+    border-color: $backdrop_borders_color;
+    background-color: $insensitive_bg_color;
+    box-shadow: $_blank_edge;
+  }
+  @if $t==osd {
+    color: $osd_text_color;
+    border-color: $osd_borders_color;
+    background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+    box-shadow: none;
+    text-shadow: 0 1px black;
+    -gtk-icon-shadow: 0 1px black;
+  }
+  @if $t==osd-focus {
+    color: $osd_text_color;
+    border-color: $selected_bg_color;
+    background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+    background-clip: padding-box;
+    text-shadow: 0 1px black;
+    -gtk-icon-shadow: 0 1px black;
+  }
+  @if $t==osd-insensitive {
+    color: $osd_insensitive_fg_color;
+    border-color: $osd_borders_color;
+    background-color: $osd_insensitive_bg_color;
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+  @if $t==osd-backdrop {
+    color: $osd_text_color;
+    border-color: $osd_borders_color;
+    background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+}
+
+// buttons
+
+@function _border_color ($c) { @return darken($c, 25%); } // colored buttons want
+                                                         // the border form the
+                                                         // base color
+
+@function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) {
+//
+// calculate the color of text shadows
+//
+// $tc is the text color
+// $bg is the background color
+//
+  $_lbg: lightness($bg)/100%;
+  @if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); }
+  @else { @return transparentize(black, $_lbg*0.8); }
+}
+
+@function _button_hilight_color($c) {
+//
+// calculate the right top hilight color for buttons
+//
+// $c: base color;
+//
+  @if lightness($c)>95% { @return white; }
+  @else if lightness($c)>90% { @return transparentize(white, 0.2); }
+  @else if lightness($c)>80% { @return transparentize(white, 0.4); }
+  @else if lightness($c)>50% { @return transparentize(white, 0.6); }
+  @else if lightness($c)>40% { @return transparentize(white, 0.8); }
+  @else { @return transparentize(white, 0.95); }
+}
+
+@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
+//
+// helper function for the text emboss effect
+//
+// $tc is the optional text color, not the shadow color
+//
+// TODO: this functions needs a way to deal with special cases
+//
+
+  $_shadow: _text_shadow_color($tc, $bg);
+
+  @if lightness($tc)<50% {
+    text-shadow: 0 1px $_shadow;
+    -gtk-icon-shadow: 0 1px $_shadow;
+  }
+  @else {
+    text-shadow: 0 -1px $_shadow;
+    -gtk-icon-shadow: 0 -1px $_shadow;
+  }
+}
+
+@mixin button($t, $c:$base_color, $tc:$text_color, $edge: none) {
+//
+// Button drawing function
+//
+// $t:    button type,
+// $c:    base button color for colored* types
+// $tc:   optional text color for colored* types
+// $edge: set to none to not draw the bottom edge or specify a color to not
+//        use the default one
+//
+// possible $t values:
+// normal, hover, active, insensitive, insensitive-active,
+// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
+// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
+//
+
+  $_hilight_color: _button_hilight_color($c);
+  $_button_edge: if($edge == none, none, _widget_edge($edge));
+  $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
+
+
+  @if $t==rounded {
+    box-shadow: none;
+  //  border: 1px solid $c;
+    color: white;
+    border-radius: 100px;
+    background: $suggested_bg_color; }
+
+    @if $t==rounded-red {
+      box-shadow: none;
+    //  border: 1px solid $c;
+      color: white;
+      border-radius: 100px;
+      background: $destructive_bg_color; 
+    }
+  
+  @if $t==normal {
+  //
+  // normal button
+  //
+    font-weight: normal;
+    color: $tc;
+    background-color: mix($bg_color, $base_color, 15%);
+    text-shadow: none;
+  }
+
+  @else if $t==hover {
+  //
+  // hovered button
+  //
+    color: $tc;
+    outline-color: transparentize($tc, 0.7);
+    background-color: $c;
+    text-shadow: none;
+  }
+
+  @if $t==normal-header {
+  //
+  // normal button headerbar look
+  //
+  color: if($tc==$text_color, #8b8b8b, $tc);
+  text-shadow: none;
+  box-shadow: none;
+  background: transparent;
+  border: none;
+}
+
+  @else if $t==hover-header {
+  //
+  // hovered button headerbar look
+  //
+  color: if($tc==$text_color, $selected_bg_color, $tc);
+  border-radius: 0;
+  text-shadow: none;
+  border:none;
+}
+
+@else if $t==active-header {
+  border-radius: 23px;
+  background: linear-gradient(to right, #c50ed2, #8500f7);
+  box-shadow: 0px 0px 5px transparentize(#c50ed2, 0.02);
+  color: rgb(255, 255, 255);
+}
+
+@else if $t==backdrop-header {
+//
+// backdrop button headerbar look
+//
+color: if($tc==$text_color, transparentize($tc, 0.6), $tc);
+background-color: transparent;
+border-radius: 0;
+text-shadow: none;
+box-shadow: none;
+}
+
+
+  @else if $t==active {
+  //
+  // pushed button
+  //
+  color: $tc;
+  outline-color: transparentize($tc, 0.7);
+  background-color: if($c==$base_color, $selected_bg_color, $c);
+  text-shadow: none;
+}
+  @else if $t==insensitive {
+  //
+  // insensitive button
+  //
+  color: if($tc==$text_color, $backdrop_text_color, $tc);
+  outline-color: transparentize($tc, 0.7);
+  background-color: if($c==$base_color, $insensitive_bg_color, $c);
+  text-shadow: none;
+}
+  @else if $t==insensitive-active {
+  //
+  // insensitive pushed button
+  //
+  color: transparentize($selected_fg_color, 0.3);
+  outline-color: transparentize($tc, 0.7);
+  background-color: if($c==$base_color, $selected_bg_color, $c);
+  text-shadow: none;
+  label { color: transparentize($selected_fg_color, 0.3); }
+}
+  @else if $t==backdrop {
+  //
+  // backdrop button
+  //
+  color: if($tc==$text_color, $backdrop_text_color, transparentize($tc, 0.6));
+  outline-color: transparentize($tc, 0.7);
+  background-color: if($c==$base_color, $backdrop_base_color, $c);
+  text-shadow: none;
+}
+
+  @else if $t==backdrop-active {
+  //
+  // backdrop pushed button FIXME no colors here!
+  //
+  color: transparentize($selected_fg_color, 0.3);
+  outline-color: transparentize($tc, 0.7);
+  background-color: $selected_bg_color;
+  text-shadow: none;
+  label { color: transparentize($selected_fg_color, 0.3); }
+}
+
+  @else if $t==backdrop-insensitive {
+  //
+  // backdrop insensitive button
+  //
+  color: if($tc==$text_color, $backdrop_text_color, $tc);
+  outline-color: transparentize($tc, 0.7);
+  background-color: if($c==$base_color, $insensitive_bg_color, $c);
+  text-shadow: none;
+}
+
+  @else if $t==backdrop-insensitive-active {
+  //
+  // backdrop insensitive pushed button
+  //
+  color: transparentize($selected_fg_color, 0.3);
+  outline-color: transparentize($tc, 0.7);
+  background-color: $selected_bg_color;
+  text-shadow: none;
+}
+
+  @else if $t==osd {
+  //
+  // normal osd button
+  //
+    $_bg: if($c!=$base_color, transparentize($c, 0.5),
+                            $osd_bg_color);
+
+    color: $osd_fg_color;
+    border-color: $osd_borders_color;
+    background-color: $_bg;
+    background-clip: padding-box;
+    box-shadow: inset 0 1px transparentize(white, 0.9);
+    text-shadow: 0 1px black;
+    -gtk-icon-shadow: 0 1px black;
+    outline-color: transparentize($osd_fg_color, 0.7);
+  }
+  @else if $t==osd-hover {
+  //
+  // active osd button
+  //
+    $_bg: if($c!=$base_color, transparentize($c, 0.3),
+                            lighten($osd_bg_color, 12%));
+
+    color: white;
+    border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, $_bg, $_bg);
+    background-clip: padding-box;
+    box-shadow: inset 0 1px transparentize(white, 0.9);
+    text-shadow: 0 1px black;
+    -gtk-icon-shadow: 0 1px black;
+    outline-color: transparentize($osd_fg_color, 0.7);
+  }
+  @else if $t==osd-active {
+  //
+  // active osd button
+  //
+    $_bg: if($c!=$base_color, $c, lighten($osd_bg_color, 6%));
+
+    color: white;
+    border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, $_bg, $_bg);
+    background-clip: padding-box;
+    box-shadow: inset 0 1px transparentize(white, 0.9);
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+    outline-color: transparentize($osd_fg_color, 0.7);
+  }
+  @else if $t==osd-insensitive {
+  //
+  // insensitive osd button
+  //
+    color: $osd_insensitive_fg_color;
+    border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, $osd_insensitive_bg_color, $osd_insensitive_bg_color);
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+  @else if $t==osd-backdrop {
+  //
+  // backdrop osd button
+  //
+    $_bg: if($c!=$base_color, transparentize($c, 0.5),
+                            $osd_bg_color);
+
+    color: $osd_fg_color;
+    border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, $_bg, $_bg);
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+  @else if $t==undecorated {
+  //
+  // reset
+  //
+   // border-color: transparent;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    @include _shadows(inset 0 1px transparentize(white, 1),
+                      $_blank_edge);
+
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+}
+
+@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:true) {
+  color: mix($tc, $bg_color, 80%);
+  @if $flat { background-image: linear-gradient(to bottom, $c, $c); }
+  @else {
+    background-image: linear-gradient(to bottom,
+                                      mix(black,$c,15%) 5%,
+                                      mix(black,$c,10%) 20%,
+                                      mix(black,$c,10%) 90%,
+                                      $c);
+  }
+
+  border-color: if($c!=$bg_color, _border_color($c), $border_color);
+
+  @if not($noedge) {
+    @if lightness($c) > 60% {
+      box-shadow: inset 0 -1px $borders_edge,
+                  0 1px $borders_edge;
+    }
+    @else {
+      box-shadow: inset 0 -1px transparentize($borders_edge, 0.5),
+                  0 1px transparentize($borders_edge, 0.5);
+    }
+  }
+  @else { box-shadow: none; }
+}
+
+@mixin headerbar_fill($c:$headerbar_color, $hc:$top_highlight, $ov: none) {
+//
+// headerbar fill
+//
+// $c:  base color
+// $hc: top highlight color
+// $ov: a background layer for background shorthand (hence no commas!)
+//
+  $gradient: linear-gradient(to top, darken($c, 13%), darken($c, 2%) 2px, $c 3px);
+
+  @if $variant == 'dark' { $gradient: linear-gradient(to top, darken($c, 3%), darken($c, 1%) 2px, $c 3px); }
+
+  @if $ov != none { background: $c $ov, $gradient; }
+  @else { background: $c $gradient; }
+
+  box-shadow: inset 0 1px $hc; // top highlight
+}
+
+@mixin overshoot($p, $t:normal, $c:$fg_color) {
+//
+// overshoot
+//
+// $p: position
+// $t: type
+// $c: base color
+//
+// possible $p values:
+// top, bottom, right, left
+//
+// possible $t values:
+// normal, backdrop
+//
+
+  $_small_gradient_length: 5%;
+  $_big_gradient_length: 100%;
+
+  $_position: center top;
+  $_small_gradient_size: 100% $_small_gradient_length;
+  $_big_gradient_size: 100% $_big_gradient_length;
+
+  @if $p==bottom {
+    $_position: center bottom;
+    $_linear_gradient_direction: to top;
+  }
+
+  @else if $p==right {
+    $_position: right center;
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
+  }
+
+  @else if $p==left {
+    $_position: left center;
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
+  }
+
+  $_small_gradient_color: $c;
+  $_big_gradient_color: $c;
+
+  @if $c==$fg_color {
+    $_small_gradient_color: darken($borders_color, 10%);
+    $_big_gradient_color: $fg_color;
+
+    @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
+  }
+
+  $_small_gradient: radial-gradient(farthest-side at $p,
+                                    $_small_gradient_color 85%,
+                                    transparentize($_small_gradient_color, 1));
+
+  $_big_gradient: radial-gradient(farthest-side at $p,
+                                $_big_gradient_color,
+                                transparentize($_big_gradient_color, 1));
+
+  @if $t==normal {
+    background-image: $_small_gradient, $_big_gradient;
+    background-size: $_small_gradient_size, $_big_gradient_size;
+  }
+
+  @else if $t==backdrop {
+    background-image: $_small_gradient;
+    background-size: $_small_gradient_size;
+  }
+
+  background-repeat: no-repeat;
+  background-position: $_position;
+
+  background-color: transparent; // reset some properties to be sure to not inherit them somehow
+  border: none;                  //
+  box-shadow: none;              //
+}
+
+@mixin undershoot($p) {
+//
+// undershoot
+//
+// $p: position
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+  $_undershoot_color_dark: transparentize(black, 0.8);
+  $_undershoot_color_light: transparentize(white, 0.8);
+
+  $_gradient_dir: left;
+  $_dash_bg_size: 10px 1px;
+  $_gradient_repeat: repeat-x;
+  $_bg_pos: center $p;
+
+  background-color: transparent; // shouldn't be needed, but better to be sure;
+
+  @if ($p == left) or ($p == right) {
+    $_gradient_dir: top;
+    $_dash_bg_size: 1px 10px;
+    $_gradient_repeat: repeat-y;
+    $_bg_pos: $p center;
+  }
+
+  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
+                                    $_undershoot_color_light 50%,
+                                    $_undershoot_color_dark 50%);
+
+  padding-#{$p}: 1px;
+  background-size: $_dash_bg_size;
+  background-repeat: $_gradient_repeat;
+  background-origin: content-box;
+  background-position: $_bg_pos;
+  border: none;
+  box-shadow: none;
+}
+
+@mixin scale-highlight($dir) {
+  background: linear-gradient(to $dir, #00f17d, #00f7d2);
+}
+
+@mixin selected-tab($dir) {
+  background:
+  linear-gradient(to $dir, $selected-tab-gradient-start, $selected-tab-gradient-end)
+  left 
+  bottom
+  lighten(mix($base_color, $headerbar_color, 30%), 2%)
+  no-repeat; 
+  @if $dir==right { background-size: 100% 2px; }
+  @else if $dir==bottom { background-size: 2px 100%; } 
+  border: 0;
+}

gtk-4.0/_elementary-colors.scss

@@ -0,0 +1,71 @@
+$STRAWBERRY_100: #ff8c82;
+$STRAWBERRY_300: #ed5353;
+$STRAWBERRY_500: #c6262e;
+$STRAWBERRY_700: #a10705;
+$STRAWBERRY_900: #7a0000;
+
+$ORANGE_100: #ffc27d;
+$ORANGE_300: #ffa154;
+$ORANGE_500: #f37329;
+$ORANGE_700: #cc3b02;
+$ORANGE_900: #a62100;
+
+$BANANA_100: #fff394;
+$BANANA_300: #ffe16b;
+$BANANA_500: #f9c440;
+$BANANA_700: #d48e15;
+$BANANA_900: #ad5f00;
+
+$LIME_100: #d1ff82;
+$LIME_300: #9bdb4d;
+$LIME_500: #68b723;
+$LIME_700: #3a9104;
+$LIME_900: #206b00;
+
+$MINT_100: #89ffdd;
+$MINT_300: #43d6b5;
+$MINT_500: #28bca3;
+$MINT_700: #0e9a83;
+$MINT_900: #007367;
+
+$BLUEBERRY_100: #8cd5ff;
+$BLUEBERRY_300: #64baff;
+$BLUEBERRY_500: #3689e6;
+$BLUEBERRY_700: #0d52bf;
+$BLUEBERRY_900: #002e99;
+
+$BUBBLEGUM_100: #fe9ab8;
+$BUBBLEGUM_300: #f4679d;
+$BUBBLEGUM_500: #de3e80;
+$BUBBLEGUM_700: #bc245d;
+$BUBBLEGUM_900: #910e38;
+
+$GRAPE_100: #e4c6fa;
+$GRAPE_300: #cd9ef7;
+$GRAPE_500: #a56de2;
+$GRAPE_700: #7239b3;
+$GRAPE_900: #452981;
+
+$COCOA_100: #a3907c;
+$COCOA_300: #8a715e;
+$COCOA_500: #715344;
+$COCOA_700: #57392d;
+$COCOA_900: #3d211b;
+
+$SILVER_100: #fafafa;
+$SILVER_300: #d4d4d4;
+$SILVER_500: #abacae;
+$SILVER_700: #7e8087;
+$SILVER_900: #555761;
+
+$SLATE_100: #95a3ab;
+$SLATE_300: #667885;
+$SLATE_500: #485a6c;
+$SLATE_700: #273445;
+$SLATE_900: #0e141f;
+
+$BLACK_100: #666;
+$BLACK_300: #4d4d4d;
+$BLACK_500: #333;
+$BLACK_700: #1a1a1a;
+$BLACK_900: #000;

gtk-4.0/_widgets.scss

@@ -0,0 +1,40 @@
+/***********
+ * Widgets *
+ ***********/
+
+@import 'widgets/action-bars';
+@import 'widgets/app-notifications';
+@import 'widgets/base-states';
+@import 'widgets/buttons';
+@import 'widgets/calendar';
+@import 'widgets/checks-radios';
+@import 'widgets/color-chooser';
+@import 'widgets/comboboxes';
+@import 'widgets/dialogs';
+@import 'widgets/entries';
+@import 'widgets/expanders';
+@import 'widgets/floating-bar';
+@import 'widgets/frames';
+@import 'widgets/granite';
+@import 'widgets/header-bars';
+@import 'widgets/infobars';
+@import 'widgets/level-bars';
+@import 'widgets/links';
+@import 'widgets/lists';
+@import 'widgets/menus';
+@import 'widgets/misc';
+@import 'widgets/notebooks';
+@import 'widgets/paned';
+@import 'widgets/pathbars';
+@import 'widgets/popovers';
+@import 'widgets/progress-bars';
+@import 'widgets/scales';
+@import 'widgets/scrollbars';
+@import 'widgets/sidebar';
+@import 'widgets/spinbuttons';
+@import 'widgets/spinner';
+@import 'widgets/switches';
+@import 'widgets/toolbars';
+@import 'widgets/tooltips';
+@import 'widgets/treeviews';
+@import 'widgets/windows';

gtk-4.0/apps/_caja.scss

@@ -0,0 +1,79 @@
+.caja-notebook {
+
+    .frame { border-width: 0 0 1px; }
+
+    .entry {
+        background: $bg_color;
+        color: $fg_color;
+        border-color: $borders_color;
+        &:selected {
+            background: $selected_bg_color;
+            color: $selected_fg_color;
+        }
+    }
+}
+  
+  /**************
+  * Caja sidebar *
+  **************/
+  
+.caja-side-pane {
+
+    .frame { border-width: 1px 0 0; }
+
+    background: $headerbar_color;
+    treeview.view,
+    textview.view text,
+    viewport.frame,
+    widget .vertical {
+        background: $_sidebar_color;
+        padding: 3px 2px;
+        color: #98abb2;
+        &:hover {
+        background-color: transparentize(darken($_sidebar_color, 2%), 0.05);
+        }
+        &:selected {
+        color: $selected_fg_color;
+        background:$selected_bg_color;
+        }
+    }
+}
+  
+  /**************
+  * Caja pathbar *
+  **************/
+  
+.caja-navigation-window paned, .caja-navigation-window .primary-toolbar {
+    background: $headerbar_color;
+}
+  
+.caja-navigation-window   {
+
+    .primary-toolbar button,
+    .vertical  button.image-button.toggle:not(.text-button) {
+        &, &:backdrop { @include button(undecorated); }
+        &:hover,
+        &:active,
+        &:backdrop:active,
+        &:backdrop:checked {
+            background: $selected_bg_color;
+            box-shadow: none;
+            &, & label {
+                color: $selected_fg_color;  
+            }
+        }
+    }
+}
+  
+.caja-pathbar button {
+    @include button(normal-header);
+    margin-top: 7px;
+    margin-bottom: 7px;
+    &:hover { color: $selected_bg_color; }
+    &:checked { @include button(active-header); }
+    &:backdrop:disabled {
+        @include button(backdrop-header,$base_color,transparentize($fg_color,0.8));
+    }
+
+}
+  

gtk-4.0/apps/_geary.scss

@@ -0,0 +1,36 @@
+/*********
+ * Geary *
+ *********/
+
+.geary-titlebar-left,
+.geary-titlebar-right {
+
+  .separator {
+    opacity: 0;
+  }
+}
+
+ConversationListView {
+
+  .view {
+    &:active,
+    &:selected {
+      background-color: $selected_bg_color;
+      color: $selected_fg_color;
+
+      &:backdrop {
+        background-color: $backdrop_selected_bg_color;
+        color: $backdrop_selected_fg_color;
+      }
+    }
+
+    .cell {
+      border: solid transparentize(black, 0.8);
+      border-width: 0 0 1px 0;
+      &:selected {
+        color: $selected_fg_color;
+        border: 0px solid darken($selected_bg_color, 10% );
+      }
+    }
+  }
+}

gtk-4.0/apps/_gnome.scss

@@ -0,0 +1,205 @@
+/************
+ * Nautilus *
+ ************/
+.nautilus-window {
+  .frame{
+    *:selected, *:selected:backdrop{
+      background: transparent;
+      color: $selected_bg_color;
+      label {
+        color: $selected_bg_color;
+      }
+    } 
+  }
+  paned {
+    > separator { background-image: none; }
+  }
+  .sidebar {
+    background-color: transparent;
+    // background-image: none;
+
+    &:backdrop {
+      background-color: transparent;
+      // background-image: none;
+    }
+
+    .list-row {
+      button {
+        border: none;
+        background-color: transparentize(darken($base_color,3%),0.05);
+        &:active {
+          background-color: transparentize($selected_bg_color,0.25);
+        }
+      }
+
+      &:selected {
+        background-color: transparentize($selected_bg_color,0.25);
+        &:hover {
+          background-color: transparentize($selected_bg_color,0.1);
+        }
+      }
+
+      &:hover {
+        background-color: transparentize($base_color,0.5);
+        &:active {
+          background-color: transparentize($selected_bg_color,0.1);
+        }
+      }
+    }
+  }
+  &.background {
+    background-color: transparentize(darken($base_color,3%),0.05);
+    &:backdrop {
+      background-color: transparentize(darken($base_color,3%),0.05);
+    }
+  }
+
+  notebook {
+    > stack:only-child { // the :not(:only-child) is for "hidden" notebooks
+        background-color: $base_color;
+        &:backdrop { background-color: $backdrop_base_color; }
+    }
+  }
+
+  searchbar {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  
+ .searchbar-container {
+    margin-top: -1px;
+  }
+
+  .titlebar {
+    .search {
+      border: 1px solid transparent;
+      border-radius: 10px;
+      box-shadow: none;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+    .path-bar-box {
+      .dim-label {
+        color:transparent;
+      }
+      widget > .text-button:last-child,
+      widget > .text-button:last-child:active,
+      widget > .text-button:last-child:checked,
+      button:active, button:checked {
+          @include button(active-header);
+          &:backdrop{
+            &, label{
+              color: darken(rgb(255, 255, 255), 4%);
+            }
+          }
+      }
+    }
+    .linked:not(.path-bar) {
+      button {
+        &:active, &:checked, &:active:backdrop, &:checked:backdrop {
+          background: transparent;
+          color: $selected_bg_color;
+          box-shadow: none;
+          border: none;      }
+      }
+    }
+  }
+
+  .linked:not(.vertical) > entry { 
+    border-radius: 10px;
+    margin-right: 5px;
+    &:focus {
+      border-color: transparentize($selected_bg_color, 0.4);
+    }
+  }
+}
+
+.nautilus-circular-button {
+  border-radius: 20px;
+}
+
+.disk-space-display {
+  border: 2px solid;
+
+  .unknown {
+    background-color: #888a85;
+    border-color: darken(#888a85, 20%);
+  }
+
+  .used {
+    background-color: #9FB0B9;
+    border-color: darken(#9FB0B9, 20%);
+  }
+
+  .free {
+    background-color: #D8D8D8;
+    border-color: darken(#D8D8D8, 20%);
+  }
+}
+
+.nautilus-desktop {
+
+  color: $fg_color;
+
+  .nautilus-canvas-item {
+    border-radius: 5px;
+    color: $selected_fg_color;
+    text-shadow: 1px 1px transparentize(black, 0.4);
+
+    &:active {
+      color: $fg_color;
+      text-shadow: none;
+    }
+
+    &:hover {
+      color: $fg_color;
+      text-shadow: none;
+    }
+
+    &:selected {
+      color: $selected_fg_color;
+      text-shadow: none;
+    }
+
+    .dim-label {
+      &:selected {
+        color: $selected_fg_color;
+      }
+    }
+  }
+
+  .nautilus-list {
+
+    .dim-label {
+      &:selected {
+        color: $selected_fg_color;
+      }
+    }
+  }
+}
+
+/*********
+ * Gedit *
+ *********/
+.gedit-search-slider {
+     padding: 4px;
+     border-radius: 0 0 3px 3px;
+     border: 0;
+     background-color: $bg_color;
+ }
+
+
+ /*********
+ * Gnucash *
+ *********/
+ #gnc-id-main-window {
+  entry.gnc-class-register-foreground {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  } 
+  .arrow.button.toggle {
+    transition: none;
+    box-shadow: none;
+    &:hover { border-color: $selected_bg_color; }
+  } 
+}

gtk-4.0/apps/_lightdm.scss

@@ -0,0 +1,115 @@
+/***********
+ * LightDm *
+ ***********/
+
+// the panel widget at the top
+#panel_window {
+  background-color: $panel_bg_color;
+  color: $panel_fg_color;
+  font-weight: bold;
+  box-shadow: inset 0 -1px darken($panel_bg_color, 7%);
+
+  // the menubars/menus of the panel, i.e. indicators
+  .menubar,
+  .menubar > .menuitem
+  menubar,
+  menubar > menuitem {
+    background-color: transparent;
+    color: $panel_fg_color;
+    font-weight: bold;
+  }
+
+  .menubar .menuitem:disabled,
+  menubar menuitem:disabled {
+    color: transparentize($panel_fg_color, 0.5);
+
+    GtkLabel { color: inherit; }
+    label { color: inherit; }
+  }
+  .menubar .menu > .menuitem,
+  menubar menu > menuitem { font-weight: normal; }
+}
+
+// the login window
+#login_window,
+#shutdown_dialog,
+#restart_dialog {
+  font-weight: normal;
+  border-style: none;
+  background-color: transparent;
+  color: $fg_color;
+}
+
+// the top half of the login-window, in GtkDialog terms, the content
+#content_frame {
+  padding-bottom: 14px;
+  background-color: $bg_color;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border: solid transparentize(black, 0.9);
+  border-width: 1px 1px 0 1px;
+}
+
+#content_frame button {
+  @include button(normal);
+
+  &:hover { @include button(hover); }
+  &:active, &:checked { @include button(active); }
+  &:disabled { @include button(insensitive); }
+}
+
+// the lower half of the login-window, in GtkDialog terms the buttonbox or action area
+#buttonbox_frame {
+  padding-top: 20px;
+  padding-bottom: 0px;
+  border-style: none;
+  background-color: if($variant=='light', $osd_bg_color, $headerbar_color);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border: solid transparentize(black, 0.9);
+  border-width: 0 1px 1px 1px;
+}
+
+#buttonbox_frame button{
+  @include button(osd);
+
+  &:hover { @include button(osd-hover); }
+  &:active, &:checked { @include button(osd-active); }
+  &:disabled { @include button(osd-insensitive); }
+}
+
+#login_window #user_combobox {
+  color: $fg_color;
+  font-size: 13px;
+
+  .menu,
+  menu { font-weight: normal; }
+}
+
+// the user's avatar box
+#user_image {
+  padding: 3px;
+  border-radius: 2px;
+}
+
+// the shutdown button
+#shutdown_button.button {
+  @include button(suggested_destructive, $destructive_color);
+
+  &:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); }
+  &:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); }
+}
+
+// the restart button
+#restart_button.button {
+  @include button(suggested_destructive, $suggested_color);
+
+  &:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); }
+  &:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); }
+}
+
+// the warning, in case a wrong password is entered or something else goes wrong according to PAM
+#greeter_infobar {
+  border-bottom-width: 0;
+  font-weight: bold;
+}

gtk-4.0/apps/_mate.scss

@@ -0,0 +1,20 @@
+//
+// Mate OSD Window
+//
+
+MsdOsdWindow.background.osd {
+    border-radius: 2px;
+    border: 1px solid $borders_color;
+  
+    .progressbar {
+      background-color: $selected_bg_color;
+      border: none;
+      border-color: $selected_bg_color;
+      border-radius: 5px;
+    }
+    .trough {
+      background-color: darken($osd_bg_color, 5%);
+      border: none;
+      border-radius: 5px;
+    }
+  }

gtk-4.0/apps/_nemo.scss

@@ -0,0 +1,65 @@
+.nemo-window {
+    .places-treeview {
+        .view.cell,
+        iconview.cell {
+            &:hover {
+                background: transparentize(darken($_sidebar_color, 3%), 0.3);
+            }
+            &:selected {
+                background: $selected_bg_color;
+            }
+        }
+    }
+
+    .sidebar {
+        color: #98abb2;
+        background-color: $_sidebar_color; 
+        .view, .iconview, row {
+            background-color: transparent;
+        }
+    }
+
+    .nemo-window-pane {
+        widget.entry {
+            background-clip: padding-box;
+            min-height: 28px;
+            padding: 5px;
+            color: $fg_color;
+            border: 1px solid $borders_color;
+            border-radius: 3px;
+            box-shadow: inset 0 1px transparentize(black, 0.1),
+                        inset 1px 0 transparentize(black, 0.04),
+                        inset -1px 0 transparentize(black, 0.04),
+                        inset 0 -1px transparentize(black, 0.02),
+                        0 1px transparentize(white, 0.4);
+            &:selected {
+                background-color: $selected_bg_color;
+                color: $selected_fg_color;
+            }
+        }
+    }
+
+    toolbar.primary-toolbar {
+        margin-bottom: -1px;
+        background: $headerbar_color;
+        button {
+            @include button(normal-header);
+            margin-top: 5px;
+            margin-bottom: 5px;
+            min-height: 24px;
+            &:hover { 
+                background: transparent;
+                color: $selected_bg_color; 
+            }
+            &:selected,
+            &:active,
+            &:checked { @include button(active-header); }
+        }
+    }
+
+    .nemo-inactive-pane .view,
+    .nemo-inactive-pane iconview {
+        background-color: darken($base_color, 2%); 
+    }
+    
+}

gtk-4.0/apps/_pantheon.scss

@@ -0,0 +1,445 @@
+/********
+ * Gala *
+ *******/
+
+ .gala-notification {
+  border-width: 0;
+  border-radius: 2px;
+  color: white;
+  border: 1px solid $base_color;
+  background-color: $base_color;
+
+  .title,
+  .label {
+    color: $fg_color;
+  }
+}
+
+.gala-button {
+    padding: 3px;
+    color: $base_color;
+    border: none;
+    border-radius: 50%;
+    background-image: linear-gradient(to bottom,
+                                  #7e7e7e,
+                                  #3e3e3e
+                                  );
+    box-shadow: inset 0 0 0 1px transparentize(white, 0.02),
+                inset 0 1px 0 0 transparentize(white, 0.07),
+                inset 0 -1px 0 0 transparentize(white, 0.01),
+                0 0 0 1px transparentize(black, 0.40),
+                0 3px 6px transparentize(black, 0.16),
+                0 3px 6px transparentize(black, 0.23);
+    text-shadow: 0 1px 1px transparentize(black, 0.6);
+}
+
+/**********
+ * Notify *
+ *********/
+
+.notify {
+  /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/
+
+  border-radius: 5px;
+  border: 1px solid transparentize(black, 0.30);
+
+  background-color: transparentize($base_color, 0.95);
+
+  .low {}
+  .critical {}
+}
+
+
+/***************
+ * SwitchBoard *
+ ***************/
+
+.category-label {
+  font-weight: bold;
+  color: $fg_color;
+}
+
+
+/*************
+ * Slingshot *
+ ************/
+
+.button.app {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background-image: none;
+
+  .app {
+    &:hover{
+      border-radius: 8px;
+      border: none;
+      background-color: transparentize($selected_bg_color, 0.7);
+      color: white;
+    }
+    &:focus{
+      /*background-color: transparentize(black, 0.20);*/
+    }
+  }
+}
+
+.search-item {
+    border-radius: 0;
+    border: none;
+    color: $fg_color;
+    background: none;
+
+    &:hover,
+    &:focus {
+      border-radius: 0;
+      background-color: transparentize($selected_bg_color, 0.7);
+      color: $selected_fg_color;
+    }
+}
+
+
+.search-entry-large,
+.search-entry-large:focus {
+    border: none;
+    font-size: 18px;
+    font-weight: 300;
+    background-image: none;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+}
+
+.search-category-header {
+    font-weight: bold;
+    color: $fg_color;
+}
+
+
+
+/*********
+ * Panel *
+ ********/
+
+.panel {
+  background-color: transparent;
+  transition: all 100ms ease-in-out;
+
+  &.maximized {
+    background-color: $panel_bg_color;
+  }
+
+  &.translucent {
+    background-color:  transparentize($panel_bg_color, 0.5);;
+  }
+
+  &.color-light.translucent {
+    background-color: transparentize($panel_fg_color, 0.15);
+  }
+}
+
+menubar.panel,
+.panel menubar {
+    box-shadow: none;
+    border: none;
+}
+
+.composited-indicator {
+
+  > revealer,
+  > revealer image,
+  > revealer label,
+  > revealer spinner {
+    color: #fff;
+    font-weight: bold;
+    text-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
+    transition: all 200ms ease-in-out;
+    -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
+  }
+
+  > revealer image:first-child + label {
+    margin-left: 5px;
+  }
+}
+
+.panel.color-light .composited-indicator {
+
+  > revealer,
+  > revealer image,
+  > revealer label,
+  > revealer spinner {
+    color: transparentize(black, 0.4);
+    text-shadow: 0 1px transparentize(white, 0.9);
+    -gtk-icon-shadow: 0 1px transparentize(white, 0.9);
+  }
+}
+
+/**************
+ * Calculator *
+ **************/
+
+PantheonCalculatorMainWindow {
+  border-radius: 0 0 4px 4px;
+
+  .window-frame {
+    border-radius:3px;
+  }
+}
+
+/*********
+ * Cards *
+ *********/
+
+.deck {
+  background-color: darken($bg_color, 8%);
+}
+
+.card {
+  background-color: $base_color;
+  border: none;
+  box-shadow: 0 0 0 1px transparentize(black, 0.95),
+              0 3px 3px transparentize(black, 0.8);
+  transition: all 150ms ease-in-out;
+}
+
+.card.collapsed {
+  background-color: darken($base_color, 5%);
+  box-shadow: 0 0 0 1px transparentize(black, 0.95),
+              0 1px 2px transparentize(black, 0.8);
+}
+
+/*********
+ * Noise *
+ *********/
+
+NoiseLibraryWindow {
+  border-radius: 0 0 4px 4px;
+
+  .action-bar {
+    border-radius: 0 0 4px 4px;
+  }
+
+  .window-frame {
+    border-radius:3px;
+  }
+}
+
+/********
+ * Snap *
+ ********/
+
+SnapMainWindow,
+SnapSnapWindow {
+
+  .take-button {
+    border-radius: 0;
+  }
+}
+
+
+/*******************
+ * Photos/Shotwell *
+ *******************/
+
+DirectWindow,
+LibraryWindow {
+
+  .the-button-in-the-combobox {
+    background: none;
+  }
+}
+
+.checkerboard-layout {
+    background-color: $bg_color;
+    background-image: linear-gradient(45deg,
+                                transparentize(black, 0.9) 25%,
+                                transparent 25%,
+                                transparent 75%,
+                                transparentize(black, 0.9) 75%,
+                                transparentize(black, 0.9)),
+                      linear-gradient(45deg,
+                                transparentize(black, 0.9) 25%,
+                                transparent 25%,
+                                transparent 75%,
+                                transparentize(black, 0.9) 75%,
+                                transparentize(black, 0.9));
+    background-size: 24px 24px;
+    background-position: 0 0, 12px 12px
+}
+
+.checkboard-layout .item {
+    background-color: $fg_color;
+}
+
+/*********
+* Avatar *
+*********/
+
+.avatar {
+  border: 1px solid transparentize(#000, 0.77);
+  border-radius: 50%;
+  box-shadow:
+      inset 0 0 0 1px transparentize(#fff, 0.95),
+      inset 0 1px 0 0 transparentize(#fff, 0.55),
+      inset 0 -1px 0 0 transparentize(#fff, 0.85),
+      0 1px 3px transparentize(#000, 0.88),
+      0 1px 2px transparentize(#000, 0.77);
+}
+
+/************
+* Level bar *
+*************/
+
+.source-list.view {
+  &.level-bar {
+    &, &:selected, &:selected:focus {
+      background: linear-gradient(lighten($_sidebar_color, 15%), lighten($_sidebar_color, 15%));
+      border: 1px solid transparentize(black, 0.86);
+      box-shadow: 0 1px 0 transparentize(#000, 0.75);
+      border-radius: 2px;
+    }
+    &.fill-block {
+      border: none;
+      &, &:hover, &:selected, &:selected:focus {
+       @include scale-highlight(right);
+      }
+    }
+  }
+}
+
+
+/**************************
+ * Colors in context menu *
+**************************/
+
+checkbutton.color-button {
+  border: 1px solid $borders_color;
+  border-radius: 100px;
+  background-clip: border-box;
+  padding: 0;
+  margin: 2px 1px;
+
+  > check {
+    -gtk-icon-source: none;
+    background: none;
+    margin-right: 0;
+    padding: 2px;
+  }
+
+  &.none {
+    > check {
+      background-color: transparent;
+      border-radius: 100px;
+      -gtk-icon-source: -gtk-icontheme("close-symbolic");
+    }
+  }
+
+}
+
+radiobutton.color-button {
+  > radio {
+    -gtk-icon-source: none;
+    margin-right: 0;
+    border: 1px solid rgba(black, 0.15);
+    border-radius: 100px;
+    background-clip: border-box;
+  }
+
+  &:active > radio {
+    border: 1px solid rgba(black, 0.35);
+  }
+}
+
+.color-button {
+  check,
+  check:checked,
+  radio,
+  radio:checked, {
+      background-image: none;
+      border: 1px solid rgba(black, 0.2);
+      border-radius: 50%;
+      color: $base_color;
+      -gtk-icon-source: -gtk-icontheme("check-active-symbolic");
+  }
+
+  &.red check,
+  &.red radio,
+  &.strawberry check,
+  &.strawberry radio {
+      background-color: #{'@STRAWBERRY_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'};
+  }
+
+  &.orange check,
+  &.orange radio {
+      background-color: #{'@ORANGE_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'};
+  }
+
+  &.yellow check,
+  &.yellow radio,
+  &.banana check,
+  &.banana radio {
+      background-color: #{'@BANANA_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'};
+  }
+
+  &.green check,
+  &.green radio,
+  &.lime check,
+  &.lime radio {
+      background-color: #{'@LIME_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'};
+  }
+
+  &.blue check,
+  &.blue radio,
+  &.blueberry check,
+  &.blueberry radio {
+      background-color: #{'@BLUEBERRY_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'};
+  }
+
+  &.purple check,
+  &.purple radio,
+  &.grape check,
+  &.grape radio {
+      background-color: #{'@GRAPE_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'};
+  }
+
+  &.brown check,
+  &.brown radio,
+  &.cocoa check,
+  &.cocoa radio {
+      background-color: #{'@COCOA_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'};
+  }
+
+  &.mint check,
+  &.mint radio  {
+      background-color: #{'@MINT_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'};
+  }
+
+  &.pink check,
+  &.pink radio,
+  &.bubblegum check,
+  &.bubblegum radio  {
+      background-color: #{'@BUBBLEGUM_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'};
+  }
+
+  &.slate check,
+  &.slate radio  {
+      background-color: #{'@SLATE_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'};
+
+  }
+
+  &.auto radio {
+      background-image: url("assets/color-button-auto.png");
+      background-position: -1px -1px;
+      background-repeat: no-repeat;
+      background-size: calc(100% + 2px);
+  }
+}

gtk-4.0/apps/_unity.scss

@@ -0,0 +1,150 @@
+/********
+* Unity *
+*********/
+
+$unity_color: #eeeeee; /* Unity window border color */
+$unity_text_color: #31363D; /* Unity window text color */
+$backdrop_unity_text_color: darken($unity_text_color,10%); /* Backdrop Unity window text color */
+$unity_panel_color: darken($unity_color, 10%); /* Unity panel color #454D50 */
+
+UnityDecoration {
+
+  background-color: $unity_color;
+  color: $unity_text_color;
+
+  .top {
+    padding: 0 5px 0 5px;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: none;
+    border: 1px solid $unity_color;
+    border-bottom-width: 0;
+    background-color: $unity_color;
+    color: $unity_text_color;
+    border-top: 1px solid rgba(255,255,255,0.1);
+
+    &:backdrop {
+      border-bottom-width: 0;
+      color: $backdrop_unity_text_color;
+      border-top: 1px solid rgba(255,255,255,0.1);
+    }
+
+    .menuitem {
+      color: $unity_text_color;
+
+      &:backdrop {
+        color: $backdrop_unity_text_color;
+      }
+    }
+  }
+}
+
+
+UnityDecoration.left,
+UnityDecoration.right {
+  background-repeat: repeat-x;
+  background-color: darken($unity_color, 0.6);
+  background-size: 1px 120px;
+  background-clip: border-box;
+  background-image: linear-gradient(to bottom,
+                                    $unity_color,
+                                    darken($unity_color, 0.6)
+                                    );
+}
+
+UnityDecoration.bottom {
+  background-size: 1px;
+  background-repeat: repeat-x;
+  background-color: darken($unity_color, 0.6);
+}
+
+UnityDecoration.left:backdrop,
+UnityDecoration.right:backdrop,
+UnityDecoration.bottom:backdrop {
+  background-size: 1px;
+  background-repeat: repeat-x;
+}
+
+
+/**************
+* Unity Panel *
+***************/
+
+UnityPanelWidget,
+.unity-panel {
+background-color: $unity_panel_color;
+color: $unity_text_color;
+}
+
+
+UnityPanelWidget:backdrop,
+.unity-panel:backdrop {
+  color: $backdrop_unity_text_color;
+}
+
+.unity-panel.menuitem,
+.unity-panel .menuitem {
+  border-width: 0 1px;
+  color: $unity_text_color;
+}
+
+.unity-panel.menubar,
+.unity-panel .menubar {
+  color: $unity_text_color;
+}
+
+.unity-panel.menu.menubar,
+.unity-panel .menu .menubar {
+  background-color: $unity_panel_color;
+  color: $unity_text_color;
+}
+
+.unity-panel.menubar:backdrop,
+.unity-panel .menubar *:backdrop {
+  color: $backdrop_fg_color;
+}
+
+.unity-panel.menubar.menuitem,
+.unity-panel.menubar .menuitem {
+  padding: 3px 5px;
+  border-width: 1px;
+  border-style: solid;
+  border: none;
+  background: none;
+  color: $unity_text_color;
+  box-shadow: none;
+}
+
+.unity-panel.menubar.menuitem:hover,
+.unity-panel.menubar .menuitem:hover {
+  border-radius: 0;
+  background-color: darken($unity_color, 1.05);
+  color: $unity_text_color;
+  box-shadow: none;
+}
+
+.unity-panel.menubar .menuitem *:hover {
+  color: white;
+  box-shadow: none;
+}
+
+.unity-panel.menubar .menuitem.separator,
+.unity-panel.menubar.menuitem.separator {
+  border: none;
+  color: $borders_color;
+}
+
+/* Force Quit */
+SheetStyleDialog.unity-force-quit {
+   background-color: $base_color;
+}
+
+
+@keyframes playbackmenuitem_spinner {
+  to { -gtk-icon-transform: rotate(1turn); }
+}
+
+.menu IdoPlaybackMenuItem.menuitem:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: playbackmenuitem_spinner 1s infinite linear;
+  color: $selected_bg_color;
+}

gtk-4.0/apps/_xfce.scss

@@ -0,0 +1,107 @@
+// Xfce Panel
+.xfce4-panel.panel {
+    background-color: $panel_bg_color;
+  
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  
+    button.flat { @extend %panelbutton; }
+  }
+  
+  #tasklist-button {
+    color: transparentize($panel_fg_color, 0.2);
+    border-radius: 0;
+    border: none;
+    background-color: transparentize($panel_bg_color, 1);
+  
+    &:hover {
+      color: lighten($panel_fg_color, 10%);
+      background-color: transparentize(black, 0.83);
+    }
+  
+    &:checked {
+      color: white;
+      background-color: transparentize(black, 0.75);
+      box-shadow: inset 0 -2px $selected_bg_color;
+    }
+  }
+  
+  %panelbutton {
+    color: $panel_fg_color;
+    border-radius: 0;
+    border: none;
+    background-color: transparentize($panel_bg_color, 1);
+  
+    &:hover {
+      border: none;
+      background-color: lighten($panel_bg_color, 10%);
+    }
+    &:active, &:checked {
+      color: $selected_fg_color;
+      border-bottom: 2px solid $selected_bg_color;
+      background-color: lighten($panel_bg_color, 5%);
+  
+      label, image { color: inherit; }
+    }
+  }
+
+
+
+#whiskermenu-window button {
+    background-color:transparent;
+    border: none;
+    border-radius: 0;
+    font-weight: normal;
+    padding: 2px;
+    margin: 1px 0px;
+    &:hover, &:checked {
+        background-color: $selected_bg_color;
+    }
+}
+
+/* thunar */
+.thunar toolbar {
+  background-color: $headerbar_color; 
+}
+
+/* buttons in toolbar */
+.thunar toolbar.horizontal button image {
+  -gtk-icon-transform:scale(0.72);
+}
+
+scrolledwindow.sidebar treeview.view {
+  background: darken($_sidebar_color, 2%);
+  padding: 1.5px;
+}
+
+/* path-bar of thunar */
+window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button, .thunar toolbar .path-bar-button {
+  margin-top: 7px;
+  margin-bottom: 7px;
+  &:hover { color: $selected_bg_color; }
+  &:checked { @include button(active-header); }
+}
+
+window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button, .thunar toolbar .path-bar-button {
+  background: none;
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+/* thunar sidepane */
+window.thunar paned > scrolledwindow treeview.view {
+
+  &:hover {
+    background: darken($_sidebar_color, 3%);
+  }
+  &:selected {
+    @include button(active-header);
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+window.thunar toolbar#location-toolbar entry {
+  border-radius: 10px;
+}

gtk-4.0/gtk-dark.scss

@@ -0,0 +1,11 @@
+
+
+$variant: 'dark';
+
+@import '../gtk-3.0/colors';
+@import '../gtk-3.0/elementary-colors';
+@import '../gtk-3.0/colors-public';
+@import 'drawing';
+@import 'common';
+@import 'widgets';
+@import 'apps';

gtk-4.0/gtk.scss

@@ -0,0 +1,11 @@
+
+
+$variant: 'light';
+
+@import '../gtk-3.0/colors';
+@import '../gtk-3.0/elementary-colors';
+@import '../gtk-3.0/colors-public';
+@import 'drawing';
+@import 'common';
+@import 'widgets';
+@import 'apps';

gtk-4.0/widgets/_action-bars.scss

@@ -0,0 +1,26 @@
+/***************
+* Action bars *
+***************/
+
+.action-bar {
+  background-color: darken($bg_color, 10%);
+  border: solid $borders_color;
+  border-width: 1px 0 0 0;
+  color: $fg_color;
+  box-shadow: none;
+
+  &:backdrop {
+    background-color: darken($backdrop_bg_color, 10%);
+    box-shadow: none;
+  }
+
+  &:first-child {
+    border-radius: 6px 6px 0px 0px;
+    border-width: 1px 1px 0px 1px;
+  }
+
+  &:last-child {
+    border-radius: 0 0 6px 6px;
+    border-width: 0px 1px 1px 1px;
+  }
+}

gtk-4.0/widgets/_app-notifications.scss

@@ -0,0 +1,23 @@
+/*********************
+ * App Notifications *
+ *********************/
+.app-notification,
+.app-notification.frame {
+  @extend %osd;
+
+  padding: 10px;
+  border-radius: 0 0 5px 5px;
+  background-color: $osd_bg_color;
+  background-image: linear-gradient(to bottom, transparentize(black, 0.8),
+                                               transparent 2px);
+  background-clip: padding-box;
+
+  &:backdrop {
+    background-image: none;
+    transition: $backdrop_transition;
+  }
+
+  button { @extend %osd_button; }
+
+  border { border: none; }
+}

gtk-4.0/widgets/_base-states.scss

@@ -0,0 +1,176 @@
+/***************
+ * Base States *
+ ***************/
+.background {
+  color: $fg_color;
+  background-color: $bg_color;
+
+  &:backdrop {
+    color: $backdrop_fg_color;
+    background-color: $backdrop_bg_color;
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+}
+
+/*
+   These wildcard seems unavoidable, need to investigate.
+   Wildcards are bad and troublesome, use them with care,
+   or better, just don't.
+   Everytime a wildcard is used a kitten dies, painfully.
+*/
+
+.gtkstyle-fallback {
+  color: $fg_color;
+  background-color: $bg_color;
+
+  &:hover {
+    color: $fg_color;
+    background-color: lighten($bg_color, 10%);
+  }
+
+  &:active {
+    color: $fg_color;
+    background-color: darken($bg_color, 10%);
+  }
+
+  &:disabled {
+    color: $insensitive_fg_color;
+    background-color: $insensitive_bg_color;
+  }
+
+  &:selected {
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+  }
+}
+
+.view,
+%view {
+  color: $text_color;
+  background-color: $base_color;
+
+  &:backdrop {
+    color: $backdrop_text_color;
+    background-color: $backdrop_base_color;
+  }
+
+  &:selected {
+    &:focus, & {
+      @extend %selected_items;
+
+      border-radius: 3px;
+    }
+  }
+}
+
+.view,
+textview {
+  text {
+    @extend %view;
+
+    selection { &:focus, & { @extend %selected_items; }}
+  }
+}
+
+textview border { background-color: mix($bg_color, $base_color, 50%); }
+
+iconview { @extend .view; }
+
+.rubberband,
+rubberband {
+  border: 1px solid darken($selected_bg_color, 10%);
+  background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
+}
+
+flowbox {
+  rubberband { @extend rubberband; }
+
+  flowboxchild {
+    padding: 3px;
+    border-radius: 3px;
+
+    &:selected {
+      @extend %selected_items;
+
+      outline-offset: -2px;
+    }
+  }
+}
+
+label {
+  caret-color: currentColor; // this shouldn't be needed.
+
+  &.separator {
+    @extend .dim-label;
+
+    color: $fg_color;
+
+    &:backdrop { color: $backdrop_fg_color; }
+  }
+
+  row:selected &,
+  &:selected { @extend %nobg_selected_items; }
+
+  selection {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+  }
+
+  &:disabled {
+    color: $insensitive_fg_color;
+
+    selection { @extend %selected_items:disabled; }
+
+    &:backdrop { color: $backdrop_insensitive_color; }
+  }
+
+  &:backdrop {
+    color: $backdrop_fg_color;
+
+    selection { @extend %selected_items:backdrop; }
+  }
+}
+
+.dim-label {
+  opacity: 0.55;
+  text-shadow: none;
+}
+
+assistant {
+  .sidebar {
+    background-color: $base_color;
+    border-top: 1px solid $borders_color;
+
+    &:backdrop {
+      background-color: $backdrop_base_color;
+      border-color: $backdrop_borders_color;
+    }
+  }
+
+  &.csd .sidebar { border-top-style: none; }
+
+  .sidebar label { padding: 6px 12px; }
+
+  .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
+}
+
+%osd, .osd {
+  color: $osd_fg_color;
+  border: 1px solid #171e27;
+  background-color: $osd_bg_color;
+  background-clip: padding-box;
+  outline-color: transparentize($osd_fg_color, 0.7);
+  text-shadow: 0 1px black;
+  -gtk-icon-shadow: 0 1px black;
+
+  &:backdrop {
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  }
+}
+
+*:selected {
+  background: $selected_bg_color;
+  color: $selected_fg_color;
+}

gtk-4.0/widgets/_buttons.scss

@@ -0,0 +1,559 @@
+/***********
+ * Buttons *
+ ***********/
+// stuff for .needs-attention
+$_dot_color: if($variant=='light', $selected_bg_color,
+                                   lighten($selected_bg_color,15%));
+@keyframes needs_attention {
+  from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
+  to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
+}
+
+%button,
+button {
+  @at-root %button_basic, & {
+    min-height: 20px;
+    min-width: 16px;
+    padding: 2px 6px;
+    border: 1px solid $borders_color;
+    border-radius: 4px;
+    transition: $button_transition;
+
+    @include button(normal);
+
+    &.flat {
+      @include button(undecorated);
+      // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
+      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
+      // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
+      // in this case the duration is increased.
+      transition: none;
+
+      &:hover {
+        transition: $button_transition;
+        transition-duration: 500ms;
+        @include button(hover,$selected_bg_color,$selected_fg_color);
+
+        &:active { transition: $button_transition; }
+      }
+    }
+
+    &:hover {
+      @include button(hover,$selected_bg_color,$selected_fg_color);
+      -gtk-icon-filter: brightness(1.2);
+    }
+
+    &:active,
+    &:checked {
+      @include button(active,darken($selected_bg_color,5%),$selected_fg_color);
+
+      transition-duration: 50ms;
+    }
+
+    &:backdrop {
+      &.flat, & {
+        @include button(backdrop);
+
+        transition: $backdrop_transition;
+        -gtk-icon-filter: none;
+
+        &:active,
+        &:checked { @include button(backdrop-active); }
+
+        &:disabled {
+          @include button(backdrop-insensitive);
+
+          &:active,
+          &:checked { @include button(backdrop-insensitive-active); }
+        }
+      }
+    }
+
+    &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
+
+    &:disabled {
+      @include button(insensitive);
+
+      &:active,
+      &:checked { @include button(insensitive-active); }
+    }
+
+    &.image-button {
+      min-width: 24px;
+      padding-left: 4px;
+      padding-right: 4px;
+      &.circular,&.sidebar-button{
+        padding: 6px 4px;
+        border-radius: 50px;
+        box-shadow: none;
+       }
+      &.sidebar-button {
+        background-color: lighten($_sidebar_color, 7.77%); 
+        color: #fff;
+        &:hover{
+          background-color: $selected_bg_color;
+        }
+      }
+    }
+    
+
+    &.text-button {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    &.text-button.image-button {
+      padding-left: 8px;
+      padding-right: 8px;
+      border-radius: 2px;
+      label {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+
+    &:drop(active) {
+      color: $drop_target_color;
+      border-color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
+
+  @at-root %button_selected, & {
+    row:selected & {
+      @if $variant == 'light' { border-color: $selected_borders_color; }
+
+      &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
+        color: $selected_fg_color;
+        border-color: transparent;
+
+        &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
+      }
+    }
+  }
+
+
+  // big standalone buttons like in Documents pager
+  &.osd {
+    min-width: 24px;
+    min-height: 20px;
+
+    &.image-button { min-width: 32px; }
+
+    color: $osd_fg_color;
+    border-radius: 5px;
+    outline-color: transparentize($osd_fg_color, 0.7);  //FIXME: define a color var?
+
+    @include button(osd);
+
+    border: none;
+    box-shadow: none;
+
+    &:hover {
+      @include button(osd-hover);
+
+      border: none;
+      box-shadow: none;
+    }
+
+    &:active,
+    &:checked {
+      @include button(osd-active);
+
+      border: none;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      &:backdrop, & {
+        @include button(osd-insensitive);
+
+        border: none;
+      }
+    }
+
+    &:backdrop {
+      @include button(osd-backdrop);
+
+      border: none;
+    }
+  }
+
+  //overlay / OSD style
+  @at-root %osd_button,
+  .osd & {
+    @include button(osd);
+
+    &:hover { @include button(osd-hover); }
+
+    &:active,
+    &:checked { &:backdrop, & { @include button(osd-active); }}
+
+    &:disabled { &:backdrop, & { @include button(osd-insensitive); }}
+
+    &:backdrop { @include button(osd-backdrop); }
+
+    &.flat {
+      @include button(undecorated);
+
+      box-shadow: none; //FIXME respect no edge on the button mixin
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black;
+
+      &:hover { @include button(osd-hover); }
+
+      &:disabled {
+        @include button(osd-insensitive);
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none;
+      }
+
+      &:backdrop { @include button(undecorated); }
+
+      &:active,
+      &:checked { @include button(osd-active); }
+    }
+  }
+
+  // Suggested and Destructive Action buttons
+  @each $b_type, $b_color in (suggested-action, $cyan),
+                             (destructive-action, $destructive_color) {
+    &.#{$b_type} {
+      border: none;
+      
+      @if $b_type ==  suggested-action {
+        @include button(rounded, $b_color, white);
+      } @else {
+        @include button(rounded-red, $b_color, white); 
+      }
+
+      &.flat {
+       // @include button(undecorated);
+        @include button(rounded, $b_color, white);
+        //color: $b_color; //FIXME: does it work on the dark variant?
+      }
+
+      &:hover { @include button(hover, $b_color, white); }
+
+      &:active,
+      &:checked { @include button(active, $b_color, white); }
+
+      &:backdrop,
+      &.flat:backdrop {
+        @include button(backdrop, $b_color, white);
+        label { color: transparentize(white, 0.5);}
+        &:active,
+        &:checked { @include button(backdrop-active, $b_color, white); }
+
+        &:disabled {
+          @include button(backdrop-insensitive, $b_color, white);
+          label { color: transparentize(white, 0.5);}
+
+          &:active,
+          &:checked { @include button(backdrop-insensitive-active, $b_color, white); }
+        }
+      }
+
+      &.flat {
+        &:backdrop, &:disabled, &:backdrop:disabled {
+          @include button(undecorated);
+
+          color: transparentize($b_color, 0.2);
+        }
+      }
+
+      &:disabled {
+        @include button(insensitive, $b_color, white);
+
+        &:active,
+        &:checked { @include button(insensitive-active, $b_color, white); }
+      }
+
+      .osd & {
+        @include button(osd, $b_color);
+        
+        &:hover { @include button(osd-hover, $b_color); }
+
+        &:active,
+        &:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
+
+        &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
+
+        &:backdrop { @include button(osd-backdrop, $b_color); }
+      }
+    }
+  }
+
+  .stack-switcher > & {
+    // to position the needs attention dot, padding is added to the button
+    // child, a label needs just lateral padding while an icon needs vertical
+    // padding added too.
+
+    outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
+
+    > label {
+      padding-left: 6px;  // label padding
+      padding-right: 6px; //
+    }
+
+    > image {
+      padding-left: 6px;   // image padding
+      padding-right: 6px;  //
+      padding-top: 3px;    //
+      padding-bottom: 3px; //
+    }
+
+    &.text-button {
+      // compensate text-button paddings
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    &.image-button {
+      // we want image buttons to have a 1:1 aspect ratio, so compensation
+      // of the padding added to the GtkImage is needed
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+
+    &.needs-attention {
+      > label,
+      > image { @extend %needs_attention; }
+
+      &:active,
+      &:checked {
+        > label,
+        > image {
+          animation: none;
+          background-image: none;
+        }
+      }
+    }
+  }
+
+  //inline-toolbar buttons
+  .inline-toolbar &, .inline-toolbar &:backdrop {
+    border-radius: 2px;
+    border-width: 1px;
+    @extend %linked;
+  }
+
+  .primary-toolbar &, .primary-toolbar .raised & { // tango icons don't need shadows
+    -gtk-icon-shadow: none; 
+ 
+    &:hover,
+    &:focus {
+      @include button(hover,$selected_bg_color,$selected_fg_color);
+    }
+
+  } 
+
+  .linked > &,
+  .linked > &:hover,
+  .linked > &:active,
+  .linked > &:checked,
+  .linked > &:backdrop { @extend %linked; }
+
+  .linked.vertical > &,
+  .linked.vertical > &:hover,
+  .linked.vertical > &:active,
+  .linked.vertical > &:checked,
+  .linked.vertical > &:backdrop { @extend %linked_vertical; }
+}
+
+%needs_attention {
+  animation: needs_attention 150ms ease-in;
+  $_dot_shadow: _text_shadow_color();
+  $_dot_shadow_r: if($variant=='light',0.5,0.45);
+  background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+
+  @if $variant == 'light' { background-position: right 3px, right 4px; }
+
+  @else { background-position: right 3px, right 2px; }
+
+  &:backdrop { background-size: 6px 6px, 0 0;}
+
+  &:dir(rtl) {
+    @if $variant == 'light' { background-position: left 3px, left 4px; }
+
+    @else { background-position: left 3px, left 2px; }
+  }
+}
+
+toolbar {
+  button {
+    &:hover { @include button(normal,darken($bg_color,7%));}
+    &:active { @include button(normal,darken($bg_color,12%));}
+  }
+}
+// all the following is for the +|- buttons on inline toolbars, that way
+// should really be deprecated...
+.inline-toolbar toolbutton > button { // redefining the button look is
+                                      // needed since those are flat...
+  @include button(undecorated);
+
+  &:hover { color: $selected_fg_color; }
+
+  &:active,
+  &:checked{ color: darken($selected_bg_color, 5%); }
+
+  &:disabled {
+    color: $backdrop_text_color;
+
+    &:active,
+    &:checked { color: transparentize(darken($selected_bg_color, 5%),0.7); }
+  }
+
+  &:backdrop {
+    color: $backdrop_text_color;
+
+    &:active,
+    &:checked { color: darken($selected_bg_color, 5%); }
+
+    &:disabled {
+      color: $backdrop_text_color;
+
+      &:active,
+      &:checked { color: transparentize(darken($selected_bg_color, 5%),0.7); }
+    }
+  }
+}
+
+// More inline toolbar buttons
+toolbar.inline-toolbar toolbutton,
+toolbar.inline-toolbar toolbutton:backdrop {
+  > button.flat {
+    &:backdrop {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+}
+
+%linked_middle {
+  border: 1px solid $borders_color;
+  border-radius: 0;
+  border-right-style: none;
+  box-shadow: inset 0px 1px 0px 0px $top_highlight;
+}
+
+%linked {
+  @extend %linked_middle;
+
+  &:first-child {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  &:last-child {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-right-style: solid;
+  }
+
+  &:only-child {
+    border-radius: 3px;
+    border-style: solid;
+  }
+}
+
+%linked_vertical_middle {
+  border-style: solid solid none solid;
+  border-radius: 0;
+}
+
+%linked_vertical{
+  @extend %linked_vertical_middle;
+
+  &:first-child {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-style: solid;
+  }
+
+  &:only-child {
+    border-radius: 3px;
+    border-style: solid;
+  }
+}
+
+%undecorated_button {
+  background-color: transparent;
+  background-image: none;
+  border-color: transparent;
+  box-shadow: inset 0 1px transparentize(white,1),
+              0 1px transparentize(white, 1);
+  text-shadow: none;
+  -gtk-icon-shadow: none;
+}
+
+/* menu buttons */
+modelbutton.flat,
+.menuitem.button.flat {
+  min-height: 26px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 3px;
+  outline-offset: -2px;
+
+  @extend %undecorated_button;
+
+  &:hover { background-color: $popover_hover_color; }
+
+  &:selected { @extend %selected_items; }
+
+  &:backdrop,
+  &:backdrop:hover { @extend %undecorated_button; }
+
+  // FIXME: remove the following when the checks/radios rewrite lands
+  check:last-child,
+  radio:last-child { margin-left: 8px; }
+
+  check:first-child,
+  radio:first-child { margin-right: 8px; }
+}
+
+modelbutton.flat arrow {
+  background: none;
+
+  &:hover { background: none; }
+
+  &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+
+  &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
+}
+
+button.color {
+  padding: 4px;
+
+  colorswatch:only-child {
+    &, overlay { border-radius: 0; }
+
+    @if $variant == 'light' {
+      box-shadow: none;
+
+      &:disabled,
+      &:backdrop { box-shadow: none; }
+    }
+  }
+}
+
+notebook, list, .view, popover {
+  button {
+    box-shadow: none;
+    &:backdrop {
+      box-shadow: none;
+    }
+  }
+  .linked > button {
+    box-shadow: none;
+  }
+}

gtk-4.0/widgets/_calendar.scss

@@ -0,0 +1,59 @@
+/************
+ * Calendar *
+ ***********/
+calendar {
+  color: $text_color;
+  border: 1px solid $borders_color;
+
+  &:selected {
+    @extend %selected_items;
+
+    border-radius: 3px;
+  }
+
+  &.header {
+    border-bottom: 1px solid transparentize(black, 0.9);
+    border-radius: 0;
+
+    &:backdrop { border-color: transparentize(black, 0.9); }
+  }
+
+  &.button {
+    @extend %undecorated_button;
+
+    color: transparentize($fg_color, 0.55);
+
+    &:hover {
+      @extend %undecorated_button;
+
+      color: $fg_color;
+    }
+
+    &:backdrop {
+      @extend %undecorated_button;
+
+      color: transparentize($backdrop_fg_color,0.55);
+    }
+
+    &:disabled {
+      @extend %undecorated_button;
+
+      color:  transparentize($insensitive_fg_color,0.55);
+    }
+  }
+
+  &:indeterminate,
+  &:indeterminate:backdrop { color: gtkalpha(currentColor, 0.55); }
+
+  &.highlight,
+  &.highlight:backdrop {
+    font-size: smaller;
+    color: $fg_color;
+  }
+
+
+  &:backdrop {
+    color: $backdrop_text_color;
+    border-color: $backdrop_borders_color;
+  }
+}

gtk-4.0/widgets/_checks-radios.scss

@@ -0,0 +1,165 @@
+/*************************
+ * Check and Radio Items *
+ *************************/
+// draw regular check and radio items using our PNG assets
+// all assets are rendered from assets.svg. never add pngs directly
+
+
+// unchecked
+@each $s,$un in ('','-unchecked'),
+                  (':hover', '-unchecked-hover'),
+                  (':active', '-unchecked-active'),
+                  (':backdrop', '-unchecked-backdrop'),
+                  (':disabled', '-unchecked-insensitive'),
+                  (':disabled:backdrop', '-unchecked-insensitive') {
+  check#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+  radio#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$un}.png"),url("../assets/radio#{$un}@2.png")), -gtk-scaled(url("../assets/radio#{$un}-dark.png"),url("../assets/radio#{$un}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+}
+
+// checked
+@each $s,$ch in (':checked', '-checked'),
+                  (':checked:hover', '-checked-hover'),
+                  (':checked:active', '-checked-active'),
+                  (':checked:backdrop', '-checked-backdrop'),
+                  (':checked:disabled', '-checked-insensitive'),
+                  (':checked:disabled:backdrop', '-checked-insensitive') {
+  check#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+  radio#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$ch}.png"),url("../assets/radio#{$ch}@2.png")), -gtk-scaled(url("../assets/radio#{$ch}-dark.png"),url("../assets/radio#{$ch}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+}
+
+// mixed
+@each $s,$mx in (':indeterminate', '-mixed'),
+                  (':indeterminate:hover', '-mixed-hover'),
+                  (':indeterminate:active', '-mixed-active'),
+                  (':indeterminate:backdrop', '-mixed-backdrop'),
+                  (':indeterminate:disabled', '-mixed-insensitive'),
+                  (':indeterminate:disabled:backdrop', '-mixed-insensitive') {
+  check#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+  radio#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")), -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+}
+
+// unchecked:selected
+@each $s,$un in (':selected','-unchecked'),
+                  (':hover:selected', '-unchecked'),
+                  (':active:selected', '-unchecked'),
+                  (':backdrop:selected', '-unchecked'),
+                  (':disabled:selected', '-unchecked'),
+                  (':disabled:backdrop:selected', '-unchecked') {
+  check#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}-dark.png"),url("../assets/checkbox#{$un}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+  radio#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$un}.png"),url("../assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$un}-dark.png"),url("../assets/selected-radio#{$un}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+}
+
+// checked:selected
+@each $s,$ch in (':checked:selected', '-checked'),
+                  (':checked:hover:selected', '-checked'),
+                  (':checked:active:selected', '-checked'),
+                  (':checked:backdrop:selected', '-checked'),
+                  (':checked:disabled:selected', '-checked'),
+                  (':checked:disabled:backdrop:selected', '-checked') {
+  check#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}-dark.png"),url("../assets/checkbox#{$ch}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+  radio#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$ch}.png"),url("../assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$ch}-dark.png"),url("../assets/selected-radio#{$ch}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+}
+
+
+// mixed:selected
+@each $s,$mx in (':indeterminate:selected', '-mixed'),
+                  (':indeterminate:hover:selected', '-mixed'),
+                  (':indeterminate:active:selected', '-mixed'),
+                  (':indeterminate:backdrop:selected', '-mixed'),
+                  (':indeterminate:disabled:selected', '-mixed'),
+                  (':indeterminate:disabled:backdrop:selected', '-mixed') {
+  check#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+  radio#{$s}{
+    -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")));
+    -gtk-icon-shadow: none;
+  }
+}
+
+
+// selection-mode unchecked
+@each $s,$un in ('','-unchecked'),
+                  (':hover', '-unchecked-hover'),
+                  (':active', '-unchecked-active'),
+                  (':backdrop', '-unchecked-backdrop'),
+                  (':disabled', '-unchecked-insensitive'),
+                  (':disabled:backdrop', '-unchecked-backdrop-insensitive') {
+  .view.content-view check#{$s},
+  .view.content-view.check#{$s}{
+    -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png"));
+    -gtk-icon-shadow: none;
+  }
+  .view.content-view radio#{$s},
+  .view.content-view.radio#{$s}{
+    -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio#{$un}.png"),url("../assets/radio#{$un}@2.png"));
+    -gtk-icon-shadow: none;
+  }
+}
+
+checkbutton.text-button, radiobutton.text-button {
+  // this is for a nice focus on check and radios text
+  padding: 2px 0;
+  outline-offset: 0;
+
+  label:not(:only-child) {
+    &:first-child { margin-left: 4px; }
+    &:last-child { margin-right: 4px; }
+  }
+}
+
+check,
+radio {
+  margin: 0 4px;
+
+  min-height: 16px;
+  min-width: 16px;
+  border: none;
+
+  menu menuitem & {
+    margin: 0; // this is a workaround for a menu check/radio size allocation issue
+
+    &, &:hover, &:disabled { //FIXME use button reset mixin
+      min-height: 14px;
+      min-width: 14px;
+      background-image: none;
+      background-color: transparent;
+      box-shadow: none;
+      -gtk-icon-shadow: none;
+      color: inherit;
+      border-color: currentColor;
+      animation: none;
+    }
+  }
+}

gtk-4.0/widgets/_color-chooser.scss

@@ -0,0 +1,139 @@
+/*****************
+ * Color Chooser *
+ *****************/
+colorswatch {
+  // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+  // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+  // applied to the overlay box.
+
+  &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state
+
+  $_colorswatch_radius: 5px;
+  $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
+                                                        inset 0 3px 2px -2px transparentize(black, 0.5));
+
+  // base color corners rounding
+  // to avoid the artifacts caused by rounded corner anti-aliasing the base color
+  // sports a bigger radius.
+  // nth-child is needed by the custom color strip.
+
+  &.top {
+    border-top-left-radius: $_colorswatch_radius + 0.5px;
+    border-top-right-radius: $_colorswatch_radius + 0.5px;
+
+    overlay {
+      border-top-left-radius: $_colorswatch_radius;
+      border-top-right-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.bottom {
+    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+    overlay {
+      border-bottom-left-radius: $_colorswatch_radius;
+      border-bottom-right-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.left,
+  &:first-child:not(.top) {
+    border-top-left-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+
+    overlay {
+      border-top-left-radius: $_colorswatch_radius;
+      border-bottom-left-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.right,
+  &:last-child:not(.bottom) {
+    border-top-right-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+    overlay {
+      border-top-right-radius: $_colorswatch_radius;
+      border-bottom-right-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.dark overlay {
+    color: $selected_fg_color;
+
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+
+    &:backdrop { color: $backdrop_selected_fg_color; }
+  }
+
+  &.light overlay {
+    color: $text_color;
+
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+
+    &:backdrop { color: $backdrop_text_color; }
+  }
+
+  &:drop(active) {
+    box-shadow: none;
+
+    &.light overlay {
+      border-color: $drop_target_color;
+      box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
+                  inset 0 0 0 1px $drop_target_color;
+    }
+
+    &.dark overlay {
+      border-color: $drop_target_color;
+      box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
+                  inset 0 0 0 1px $drop_target_color;
+    }
+  }
+
+  overlay {
+    box-shadow: $_colorswatch_overlay_shadow;
+    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+
+    &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
+
+    &:backdrop, &:backdrop:hover {
+      border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
+      box-shadow: none;
+    }
+  }
+
+  &#add-color-button {
+    border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
+
+    &:only-child { border-radius: $_colorswatch_radius; }
+
+    overlay {
+      @include button(normal);
+
+      &:hover { @include button(hover); }
+
+      &:backdrop { @include button(backdrop); }
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+
+    overlay {
+      border-color: transparentize(black, 0.4);
+      box-shadow: none;
+    }
+  }
+
+  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
+
+  &#editor-color-sample {
+    border-radius: 4px;
+
+    overlay { border-radius: 4.5px; }
+  }
+}
+
+// colorscale popup
+colorchooser .popover.osd { border-radius: 5px; }

gtk-4.0/widgets/_comboboxes.scss

@@ -0,0 +1,41 @@
+/**************
+ * ComboBoxes *
+ **************/
+combobox {
+  arrow {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    min-height: 16px;
+    min-width: 16px;
+  }
+
+  &.linked {
+    button:nth-child(2) {
+      &:dir(ltr) { @extend %linked:last-child; }
+      &:dir(rtl) { @extend %linked:first-child; }
+    }
+  }
+
+  &:drop(active) { // FIXME: untested
+    box-shadow: none;
+
+    button.combo { @extend %button_basic:drop(active); }
+  }
+}
+
+.linked > combobox > box > button.combo {
+  // the combo is a composite widget so the way we do button linking doesn't
+  // work, special case needed. See
+  // https://bugzilla.gnome.org/show_bug.cgi?id=733979
+
+  &:dir(ltr),
+  &:dir(rtl) { @extend %linked_middle; } // specificity bump
+}
+
+.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
+.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
+.linked:not(.vertical) > combobox:only-child > box > button.combo {@extend %linked:only-child; }
+
+.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
+.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
+.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
+.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }

gtk-4.0/widgets/_dialogs.scss

@@ -0,0 +1,70 @@
+/***********
+ * Dialogs *
+ ***********/
+messagedialog { // Message Dialog styling
+  .titlebar:not(headerbar) {
+    background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05);
+  }
+  .titlebar {
+    min-height: 20px;
+    background-image: none;
+    background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05);
+    border-style: none;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  &.csd { // rounded bottom border styling for csd version
+    &.background {
+      background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05);
+      color: if($variant=='light', $headerbar_fg_color, $fg_color);
+
+      // bigger radius for better antialiasing
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+
+    .dialog-action-area button {
+      padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
+      border-radius: 0;
+      border-left-style: solid;
+      border-right-style: none;
+      border-bottom-style: none;
+      background-color: transparent;
+      color: if($variant=='light', $headerbar_fg_color, $fg_color);
+      box-shadow: none;
+
+      &:hover {
+        background-color: transparentize($selected_bg_color, 0.1);
+        color: white;
+      }
+
+      &:first-child{
+        border-left-style: none;
+        border-bottom-left-radius: 4px;
+      }
+
+      &:last-child {
+        border-bottom-right-radius: 4px;
+      }
+      &.destructive-action, &.suggested-action{
+        color:white;
+      }
+    }
+  }
+}
+
+filechooser {
+  .dialog-action-box {
+    border-top: 1px solid $borders_color;
+
+    &:backdrop { border-top-color: $backdrop_borders_color; }
+  }
+
+  #pathbarbox { border-bottom: 1px solid $bg_color; }
+}
+
+filechooserbutton:drop(active) {
+  box-shadow: none;
+  border-color: transparent;
+}

gtk-4.0/widgets/_entries.scss

@@ -0,0 +1,182 @@
+/****************
+ * Text Entries *
+ ****************/
+
+ %entry,
+ entry {
+   %entry_basic, & {
+     min-height: 28px;
+     padding-left: 8px;
+     padding-right: 8px;
+     border: 1px solid;
+     border-radius: 3px;
+     transition: all 200ms $ease-out-quad;
+ 
+     @include entry(normal);
+ 
+     image { // icons inside the entry
+       &.left { padding-left: 0; padding-right: 6px; }
+       &.right { padding-left: 6px; padding-right: 0; }
+     }
+ 
+     undershoot {
+       &.left { @include undershoot(left); }
+       &.right { @include undershoot(right); }
+     }
+ 
+     &.flat {
+       &:focus-within, & {
+         min-height: 0;
+         padding: 2px;
+         background-image: none;
+         border-color: transparent;
+         box-shadow: none;
+         border-radius: 0;
+       }
+     }
+ 
+     &:focus-within { @include entry(focus); }
+ 
+     &:disabled { @include entry(insensitive); }
+ 
+     &:backdrop {
+       @include entry(backdrop);
+ 
+       transition: $backdrop_transition;
+     }
+ 
+     &:backdrop:disabled { @include entry(backdrop-insensitive); }
+ 
+     selection { &:focus, & { @extend %selected_items; }}
+ 
+     // entry error and warning style
+     @each $e_type, $e_color in (error, $error_color),
+                                (warning, $warning_color) {
+       &.#{$e_type} {
+         @include entry(normal);
+         color: $e_color;
+         border-color: entry_focus_border($e_color);
+ 
+         &:focus-within { @include entry(focus, $e_color); }
+ 
+         &:selected { &:focus, & { background-color: $e_color; }}
+       }
+     }
+ 
+     & image { // entry icons colors
+       color: mix($fg_color, $base_color, 80%);
+ 
+       &:hover { color: $fg_color; }
+ 
+       &:active { color: $selected_bg_color; }
+ 
+       &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
+     }
+ 
+     &:drop(active) {
+       &:focus-within, & {
+         border-color: $drop_target_color;
+         box-shadow: inset 0 0 0 1px $drop_target_color;
+       }
+     }
+ 
+     .osd & {
+       @include entry(osd);
+ 
+       &:focus-within { @include entry(osd-focus); }
+ 
+       &:backdrop { @include entry(osd-backdrop); }
+ 
+       &:disabled { @include entry(osd-insensitive); }
+     }
+   }
+ 
+   progress {
+     margin: 2px -6px;
+     background-color: transparent;
+     background-image: none;
+     border-radius: 0;
+     border-width: 0 0 2px;
+     border-color: $selected_bg_color;
+     border-style: solid;
+     box-shadow: none;
+ 
+     &:backdrop { background-color: transparent; }
+   }
+ 
+    // linked entries
+   .linked:not(.vertical) > & { @extend %linked; }
+   .linked:not(.vertical) > &:focus-within + &,
+   .linked:not(.vertical) > &:focus-within + button,
+   .linked:not(.vertical) > &:focus-within + combobox > box > button.combo { border-left-color: entry_focus_border(); }
+ 
+   .linked:not(.vertical) > &:focus-within { border-color: entry_focus_border(); }
+ 
+   .linked:not(.vertical) > &:drop(active) + &,
+   .linked:not(.vertical) > &:drop(active) + button,
+   .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
+ 
+   // Vertically linked entries
+   // FIXME: take care of "colored" entries
+   .linked.vertical > & {
+     @extend %linked_vertical;
+ 
+     // brighter border between linked entries
+     &:not(:disabled) + entry:not(:disabled),
+     &:not(:disabled) + %entry:not(:disabled) {
+       border-top-color: mix($borders_color, $base_color, 30%);
+       background-image: linear-gradient(to bottom, $base_color, $base_color);
+ 
+       &:backdrop {
+         border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+         background-image: linear-gradient(to bottom, $backdrop_base_color, $backdrop_base_color);
+       }
+     }
+ 
+     // brighter border between linked insensitive entries
+     &:disabled + %entry:disabled,
+     &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
+ 
+     // color back the top border of a linked focused entry following another entry and add back the focus shadow.
+     // :not(:only-child) is a specificity bump hack.
+     + %entry:focus:not(:only-child),
+     + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
+ 
+     + %entry:drop(active):not(:only-child),
+     + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
+ 
+     // this takes care of coloring the top border of the focused entry subsequent widget.
+     // :not(:only-child) is a specificity bump hack.
+     &:focus:not(:only-child) {
+       + %entry,
+       + entry,
+       + button,
+       + combobox > box > button.combo { border-top-color: entry_focus_border(); }
+     }
+ 
+     &:drop(active):not(:only-child) {
+       + %entry,
+       + entry,
+       + button,
+       + combobox > box > button.combo { border-top-color: $drop_target_color; }
+     }
+   }
+ }
+ 
+ treeview entry {
+   &:focus-within {
+     &:dir(rtl), &:dir(ltr) { // specificity bump hack
+       background-color: $base_color;
+       transition-property: color, background;
+     }
+   }
+ 
+   &.flat, & {
+     border-radius: 0;
+     background-image: none;
+     background-color: $base_color;
+ 
+     &:focus-within { border-color: $selected_bg_color; }
+   }
+ }
+ 

gtk-4.0/widgets/_expanders.scss

@@ -0,0 +1,16 @@
+/*************
+ * Expanders *
+ *************/
+expander {
+  arrow {
+    min-width: 16px;
+    min-height: 16px;
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+    &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
+
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+  }
+}

gtk-4.0/widgets/_file-chooser.scss

@@ -0,0 +1,102 @@
+/****************
+ * File chooser *
+ ****************/
+$_placesidebar_icons_opacity: 0.7;
+
+placessidebar {
+  > viewport.frame { border-style: none; }
+
+  row {
+    // Needs overriding of the GtkListBoxRow padding
+    min-height: 36px;
+    padding: 0px;
+
+    // Using margins/padding directly in the SidebarRow
+    // will make the animation of the new bookmark row jump
+    > revealer { padding: 0 14px; }
+
+    &:selected { color: $selected_fg_color; }
+
+    &:disabled { color: $insensitive_fg_color; }
+
+    &:backdrop {
+      color: $backdrop_fg_color;
+
+      &:selected { color: $backdrop_selected_fg_color; }
+
+      &:disabled { color: $backdrop_insensitive_color; }
+    }
+
+    image.sidebar-icon {
+      opacity: $_placesidebar_icons_opacity; // dim the device icons
+
+      &:dir(ltr) { padding-right: 8px; }
+      &:dir(rtl) { padding-left: 8px; }
+    }
+
+    label.sidebar-label {
+      &:dir(ltr) { padding-right: 2px; }
+      &:dir(rtl) { padding-left: 2px; }
+    }
+
+    @at-root button.sidebar-button {
+      @extend %button_basic.flat;
+
+      @extend %button_selected.flat;
+
+      min-height: 26px;
+      min-width: 26px;
+      margin-top: 3px;
+      margin-bottom: 3px;
+      padding: 0;
+      border-radius: 100%;
+      -gtk-outline-radius: 100%;
+
+      &:not(:hover):not(:active),
+      &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
+    }
+
+    // in the sidebar case it makes no sense to click the selected row
+    &:selected:active { box-shadow: none; }
+
+    &.sidebar-placeholder-row {
+      padding: 0 8px;
+      min-height: 2px;
+      background-image: image($drop_target_color);
+      background-clip: content-box;
+    }
+
+    &.sidebar-new-bookmark-row { color: $selected_bg_color; }
+
+    &:drop(active):not(:disabled) {
+      color: $drop_target_color;
+      box-shadow: inset 0 1px $drop_target_color,
+                  inset 0 -1px $drop_target_color;
+
+      &:selected {
+        color: $selected_fg_color;
+        background-color: $drop_target_color;
+      }
+    }
+  }
+}
+
+placesview {
+  .server-list-button > image {
+    transition: 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  .server-list-button:checked > image {
+    transition: 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(-0.5turn);
+  }
+
+  row.activatable:hover { background-color: transparent; }
+
+  // this selects the "connect to server" label
+  > actionbar > revealer > box > label {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}

gtk-4.0/widgets/_floating-bar.scss

@@ -0,0 +1,33 @@
+/****************
+ * Floating Bar *
+ ****************/
+.floating-bar {
+  background-color: $bg_color;
+  border-width: 1px;
+  border-style: solid solid none;
+  border-color: $borders_color;
+  border-radius: 3px 3px 0 0;
+  box-shadow: inset 0 1px $top_highlight;
+
+  &.bottom {
+
+    &.left {
+      border-left-style: none;
+      border-top-left-radius: 0;
+    }
+
+    &.right {
+      border-right-style: none;
+      border-top-right-radius: 0;
+    }
+  }
+
+  > button {
+    padding:4px;
+  }
+
+  &:backdrop {
+    background-color: $backdrop_bg_color;
+    border-color: $backdrop_borders_color;
+  }
+}

gtk-4.0/widgets/_frames.scss

@@ -0,0 +1,87 @@
+/**********
+ * Frames *
+ **********/
+frame > border,
+.frame {
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border: 1px solid $borders_color;
+
+  &.flat { border-style: none; }
+
+  &:backdrop { border-color: $backdrop_borders_color; }
+}
+
+actionbar > revealer >  box {
+  padding: 6px;
+  border-top: 1px solid $borders_color;
+
+  &:backdrop { border-color: $backdrop_borders_color; }
+}
+
+scrolledwindow {
+  viewport.frame { // avoid double borders when viewport inside scrolled window
+    border-style: none;
+  }
+
+  // This is used when content is touch-dragged past boundaries.
+  // draws a box on top of the content, the size changes programmatically.
+  overshoot {
+    &.top {
+      @include overshoot(top);
+
+      &:backdrop { @include overshoot(top, backdrop); }
+    }
+
+    &.bottom {
+      @include overshoot(bottom);
+
+      &:backdrop { @include overshoot(bottom, backdrop); }
+    }
+
+    &.left {
+      @include overshoot(left);
+
+      &:backdrop { @include overshoot(left, backdrop); }
+    }
+
+    &.right {
+      @include overshoot(right);
+
+      &:backdrop { @include overshoot(right, backdrop); }
+    }
+  }
+
+  // Overflow indication, works similarly to the overshoot, the size if fixed tho.
+  undershoot {
+    &.top { @include undershoot(top); }
+
+    &.bottom { @include undershoot(bottom); }
+
+    &.left { @include undershoot(left); }
+
+    &.right { @include undershoot(right); }
+  }
+
+  junction { // the small square between two scrollbars
+    border-color: transparent;
+    // the border image is used to add the missing dot between the borders, details, details, details...
+    border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
+    background-color: $scrollbar_bg_color;
+
+    &:dir(rtl) { border-image-slice: 0 1 0 0; }
+
+    &:backdrop {
+      border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
+      background-color: $backdrop_scrollbar_bg_color;
+      transition: $backdrop_transition;
+    }
+  }
+}
+
+//vbox and hbox separators
+separator {
+  background: transparentize(black, 0.9);
+}

gtk-4.0/widgets/_granite.scss

@@ -0,0 +1,198 @@
+/************
+ * Popovers *
+ ************/
+
+GraniteWidgetsPopOver {
+  
+  border: 1px solid $base_color;
+  background: $base_color;
+  color: $fg_color;
+
+  .button {
+    background-image: none;
+    background: none;
+    border: none;
+
+    &:active,
+    &:active:hover, {
+      color: $selected_bg_color;
+    }
+  }
+
+  > .frame {
+    border:none;
+  }
+
+  .sidebar.view {
+    border: none;
+    background: none;
+  }
+}
+
+GraniteWidgetsStaticNotebook .frame {
+  border: none;
+}
+
+.popover_bg {
+  background-color: $base_color;
+  background-image: none;
+  border: 1px solid $base_color;
+  color: $fg_color;
+}
+
+
+/***********
+ * Welcome *
+ **********/
+
+GraniteWidgetsWelcome {
+  background-color: $base_color;
+
+  GtkLabel {
+    color: $fg_color;
+  }
+
+  .h1,.h3 {
+    color: transparentize($fg_color, 0.2);
+  }
+}
+
+/**************
+* Source List *
+***************/
+
+.source-list {
+
+  background-color: $bg_color;
+  border: solid $borders_color;
+  color: $fg_color;
+  border-right-width: 1px;
+
+  &:backdrop {}
+
+  .category-expander {
+    color: transparent;
+  }
+
+  .badge {
+    background-image: none;
+    background-color: transparentize(black, 0.6);
+    color: $bg_color;
+    border-radius: 10px;
+    padding: 0 6px;
+    margin: 0 3px;
+    border-width: 0;
+
+    &:selected:backdrop,
+    &:selected:hover:backdrop {
+      background-color: transparentize(black, 0.8);
+      color: darken($bg_color, 5%);
+    }
+  }
+
+  row,
+  .list-row {
+    border:none;
+    padding: 0;
+
+    > GtkLabel,
+    > label {
+      padding-left: 6px;
+      padding-right: 6px;
+    }
+  }
+}
+
+
+/**************
+* Text Styles *
+**************/
+
+.h1 {
+  font-size: 24px;
+}
+
+.h2 {
+  font-weight: 300;
+  font-size: 18px;
+}
+
+.h3 {
+  font-size: 11px;
+}
+
+.h4,
+.category-label {
+  font-size: 12px;
+  padding: 6px;
+  color: transparentize($fg_color, 0.7);
+  font-weight: bold;
+  text-shadow: 0 1px transparentize(white,0.8);
+}
+
+
+/**************
+* Storage Bar *
+**************/
+.storage-bar {
+
+  .trough {
+    border: none;
+    box-shadow:0 1px 0 0 $bottom_highlight;
+    background-image: none;
+    background-color: transparent;
+    padding: 8px 6px;
+  }
+
+  .fill-block {
+    background-color: $yellow;
+    border:none;
+    box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9);
+
+    transition: all 200ms ease-in-out;
+
+    padding: 8px 6px;
+  
+    &:first-child {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border-left-width: 1px;
+      box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
+                  inset 1px 0 0 transparentize(black, 0.9),
+                  inset 0 -1px 0 0 transparentize(black, 0.9);
+    }
+    
+    &:last-child {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
+                  inset -1px 0 0 transparentize(black, 0.9),
+                  inset 0 -1px 0 0 transparentize(black, 0.9);
+    }
+
+    &.empty-block {
+      background-color: $base_color;
+    }
+    
+    &.app {
+      background-color: $blue;
+    }
+
+    &.audio {
+      background-color: $orange;
+    }
+
+    &.photo {
+      background-color: $red;
+    }
+
+    &.video {
+      background-color: $purple;
+    }
+
+    .legend {
+      padding: 12px;
+      border-radius: 4px;
+    }
+  }
+}

gtk-4.0/widgets/_header-bars.scss

@@ -0,0 +1,283 @@
+/***************
+ * Header bars *
+ ***************/
+%titlebar,
+headerbar {
+  padding: 0px 13px;
+  min-height: 34px;
+  background: $headerbar_color;
+  color: $headerbar_fg_color;
+  border-radius: 0;
+  &:backdrop {
+    border-color: $backdrop_borders_color;
+   // background-image: none;
+
+    transition: $backdrop_transition;
+  }
+
+  .title {
+    font-weight: bold;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .subtitle {
+    font-size: smaller;
+    padding-left: 12px;
+    padding-right: 12px;
+
+    @extend .dim-label;
+  }
+ 
+  entry { min-height: 24px;}  
+  
+  button {
+    @include button(normal-header);
+    min-height: 14px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    box-shadow: none;
+    &.image-button{
+       padding: 3px 4px;
+    }
+    &.suggested-action{
+      box-shadow: none;
+      border: none;
+      background-image: $suggested_bg_color;
+        &:disabled, &:disabled:backdrop, &:backdrop {
+          border: none;
+          background-image: $suggested_bg_color;
+          &:hover,
+          &:active,
+          &:checked {
+            border: none;
+            background-image: $suggested_bg_color;
+          }
+        }
+        
+      }
+      
+      &.appmenu{
+      background: transparent;
+      &:backdrop{background: transparent;}
+    }
+    &:hover,
+    &:active,
+    &:checked {
+      background-color: transparent;
+      color: $selected_bg_color;
+      box-shadow: none;
+      border: none;
+      //@include button(hover-header);
+    }
+
+    &:backdrop,
+    &:disabled,
+    &:backdrop:disabled {
+      @include button(backdrop-header,red,transparentize($fg_color,0.8));
+      border: none;
+    }
+
+    &:backdrop {
+      &:hover,
+      &:active,
+      &:checked {
+      background-color: transparent;
+      color: $selected_bg_color; 
+      label {color: $selected_bg_color;}
+      box-shadow: none;
+      }
+    }
+
+    @each $b_type, $b_color in (suggested-action, $cyan),
+                               (destructive-action, $destructive_color) {
+      &.#{$b_type} {
+        font-weight: bold;
+        min-height: 24px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        border-radius: 4px;
+        @include button(normal, $b_color, white);
+        box-shadow: none;
+
+        &:hover { @include button(hover, $b_color, white); }
+
+        &:active { @include button(active, $b_color, white); }
+
+        &:disabled {
+          @include button(insensitive, $b_color, white);
+          label {color: transparentize(white,0.5);}
+        }
+
+        &:backdrop {
+          @include button(backdrop, $b_color, white);
+          border-radius: 3px;
+        }
+
+        &:backdrop:disabled { @include button(backdrop-insensitive, $b_color, white); }
+
+      }
+    }
+
+    //Reset style
+    &.titlebutton {
+      color: transparent;
+      box-shadow: none;
+      border: none;
+      background-color: transparent;
+      background-image: none;
+      background-repeat: no-repeat;
+      &:hover,
+      &:active,
+      &:checked,
+      &:backdrop,
+      &:backdrop:hover,* {
+        color: transparent;
+        box-shadow: none;
+        background-color: transparent;
+      }
+    }
+  }
+  %linked-header {
+    border-radius: 23px;
+    border-right-style: none;
+    border: none;
+    box-shadow: none;
+    margin: 10px 0px;
+    min-height: 20px;
+    &:first-child {
+    }
+
+    &:last-child {
+    }
+
+    &:only-child {
+      border-radius: 13px;
+      border-style: none;
+    }
+    transition: all .1s ease-in;
+  }
+  .linked > button {
+    @extend %linked-header;
+  }
+  .linked > button:active{
+    @extend %linked-header;
+    background: linear-gradient(to right, #c50ed2, #8500f7) ;
+    color: rgb(255, 250, 250);
+  }
+  .linked > button:checked{
+    @extend %linked-header;
+    border-radius: 23px;
+    background: linear-gradient(to right, #c50ed2, #8500f7);
+    box-shadow: 0px 0px 5px transparentize(#c50ed2, 0.02);
+    color: rgb(255, 250, 250);
+    &:backdrop{
+      color: darken(rgb(255, 250, 250), 4%);
+      label{
+        color: darken(rgb(255, 250, 250), 4%);;
+      }
+    }
+  }
+  .linked > button:hover,
+  .linked > button:backdrop { 
+    @extend %linked-header; 
+  }
+  // End reset style
+
+  &.selection-mode {
+    button {
+
+      &:backdrop {
+        &.flat, & {
+          &:active,
+          &:checked {
+            //@include button(backdrop-active, $selected_bg_color, $selected_fg_color);
+            label{
+              color:$backdrop_selected_bg_color;
+            }
+            border-color: $selected_borders_color;
+          }
+        }
+      }
+    }
+
+  }
+
+  .tiled &,
+  .maximized & {
+    &.titlebar {
+      @if $variant == 'light' { box-shadow: none; }
+      @else { box-shadow: inset 0 -1px $bottom_highlight; }
+    }
+    &:backdrop, & { border-radius: 0; }
+  } // squared corners when the window is maximized or tiled
+
+  &.default-decoration {
+    padding: 5px 4px; 
+    min-height: 20px;
+
+    button.titlebutton {
+      min-height: 20px;
+      min-width: 20px;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+headerbar {
+  // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
+  entry,
+  spinbutton,
+  separator {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+  switch {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  separator { background: transparent; }
+}
+
+.background:not(.tiled):not(.maximized) .titlebar {
+  @if $variant == 'light' { box-shadow: inset 0 1px $top_highlight; }
+  @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; }
+
+
+  &:backdrop, & {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+}
+
+headerbar {
+  window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
+  window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 4px; }}
+
+  window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }}
+}
+
+.titlebar:not(headerbar) {
+  window.csd > & {
+    // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
+    padding: 0;
+    background-color: transparent;
+    background-image: none;
+    border-style: none;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  > separator {
+    &, &:backdrop {
+      background: $headerbar_color;
+    }
+  }
+
+  @extend %titlebar;
+}
+
+.titlebar{
+  @extend %titlebar;
+}

gtk-4.0/widgets/_infobars.scss

@@ -0,0 +1,115 @@
+/**************
+ * GtkInfoBar *
+ **************/
+ %infobar,
+ infobar {
+   text-shadow: none;
+   color: $fg_color;
+   background-color: $bg_color;
+   border-bottom:1px solid darken($bg_color,10%);
+   box-shadow: none;
+ 
+ }
+ 
+ %color_infobar {
+ 
+   @extend %infobar;
+ 
+   text-shadow: none;
+   color: $selected_fg_color;
+   border:none;
+ 
+   .label {
+     color: $selected_fg_color;
+ 
+     &:backdrop {
+       color: $backdrop_selected_fg_color;
+     }
+   }
+ 
+   button {
+     border-radius: 2px;
+     border: none;
+     background: transparentize($base_color, 0.02);
+     color: $fg_color;
+     box-shadow: 0 1px 0 0 transparentize(black, 0.8);
+ 
+     .label {
+       color: $fg_color;
+     }
+ 
+     &:active {
+       background: $base_color;
+       color: $fg_color;
+ 
+       box-shadow: 0 1px 2px 0 transparentize(black, 0.6);
+ 
+       &:backdrop {
+         background: transparentize($base_color, 0.2);
+         color: transparentize($fg_color, 0.5);
+         box-shadow: none;
+       }
+     }
+ 
+     &:hover,
+     &:focus {
+       box-shadow: 0 1px 2px 0 transparentize(black, 0.6);
+     }
+ 
+     &:disabled {
+       background: transparentize($base_color, 0.4);
+       color: transparentize($fg_color, 0.5);
+       box-shadow: none;
+ 
+         &:backdrop {
+           background: transparentize($base_color, 0.5);
+           color: transparentize($fg_color, 0.5);
+           box-shadow: none;
+         }
+     }
+ 
+     &:backdrop {
+       background: transparentize($base_color, 0.2);
+       color: transparentize($fg_color, 0.5);
+       box-shadow: none;
+     }
+   }
+ }
+ 
+ .info {
+   @extend %color_infobar;
+   
+   &, &:backdrop {
+     color: $info_color;
+     background-color: transparent;
+   }
+ }
+ 
+ .warning {
+   @extend %color_infobar;
+ 
+   &, &:backdrop {
+     color: $warning_color;
+     background-color: transparent;
+   }
+ }
+ 
+ .question {
+   @extend %color_infobar;
+ 
+   &, &:backdrop {
+     color: $question_color;
+     background-color: transparent;
+   }
+ 
+ }
+ 
+ .error {
+   @extend %color_infobar;
+ 
+   &, &:backdrop {
+     color: $error_color;
+     background-color: transparent;
+   }
+ }
+ 

gtk-4.0/widgets/_level-bars.scss

@@ -0,0 +1,62 @@
+/*************
+ * Level Bar *
+ *************/
+levelbar {
+  block {
+    min-width: 32px;
+    min-height: 6px;
+  }
+
+  &.vertical block {
+    min-width: 6px;
+    min-height: 32px;
+  }
+
+  &:backdrop { transition: $backdrop_transition; }
+
+  trough {
+    padding: 3px;
+    border-radius: 3px;
+    background-color: if($variant == 'light' ,transparentize(white,0.2),transparentize(white,0.8));
+    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
+
+    &:backdrop {
+      background-color: if($variant == 'light' ,transparentize(white,0.4),transparentize(white,0.94));
+      box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
+    }
+  }
+
+  &.horizontal.discrete block { margin: 0 1px; }
+
+  &.vertical.discrete block { margin: 1px 0; }
+
+  block {
+    border-radius: 2px;
+
+    &:backdrop { box-shadow: none; }
+
+    &.low {
+      background-color: $warning_color;
+
+      &:backdrop { border-color: $warning_color; };
+    }
+
+    &.high,
+    &:not(.empty) {
+      background-color: $cyan;
+
+      &:backdrop { border-color: $cyan; }
+    }
+
+    &.full {
+      background-color: $success_color;
+
+      &:backdrop { border-color: $success_color; };
+    }
+
+    &.empty {
+      background-color:  if($variant == 'light' ,transparentize(black, 0.86),transparentize(black,0.65));
+      box-shadow: none;
+    }
+  }
+}

gtk-4.0/widgets/_links.scss

@@ -0,0 +1,49 @@
+/*********
+ * Links *
+ *********/
+*:link {
+  color: $link_color;
+
+  &:visited {
+    color: $link_visited_color;
+
+    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
+  }
+
+  &:hover {
+    color: lighten($link_color,10%);
+
+    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
+  }
+
+  &:active {
+    color: $link_color;
+
+    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+  }
+
+  &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }}
+
+  @at-root %link_selected,
+  &:selected,
+  *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
+}
+
+button:link,
+button:visited {
+  @extend %undecorated_button;
+
+  @extend *:link;
+
+  text-shadow: none;
+
+  &:hover,
+  &:active,
+  &:checked {
+    @extend %undecorated_button;
+
+    text-shadow: none;
+  }
+
+  > label { text-decoration-line: underline; }
+}

gtk-4.0/widgets/_lists.scss

@@ -0,0 +1,60 @@
+/*********
+ * Lists *
+ *********/
+list, listview {
+  color: $text_color;
+  background-color: $base_color;
+  border-color: $borders_color;
+
+  &:backdrop {
+    background-color: $backdrop_base_color;
+    border-color: $backdrop_borders_color;
+  }
+
+  &.horizontal row.separator,
+  &.separators.horizontal > row:not(.separator) {
+    border-left: 1px solid $borders_color;
+  }
+  &:not(.horizontal) row.separator,
+  &.separators:not(.horizontal) > row:not(.separator) {
+    border-bottom: 1px solid $borders_color;
+  }
+}
+
+row {
+  padding: 5px 11px;
+  transition: all 150ms $ease-out-quad;
+
+  label {
+    padding-left: 8px;
+  }
+
+  &:hover { transition: none; }
+
+  &:backdrop { transition: $backdrop_transition; }
+
+  &.activatable {
+    &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+
+    &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
+
+    &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
+
+    &:backdrop:hover { background-color: transparent; }
+
+    &:selected {
+      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+
+      &.has-open-popup,
+      &:hover { background-color: transparentize($selected_bg_color, 0.5); }
+
+      &:backdrop { background-color: $backdrop_selected_bg_color; }
+    }
+    
+    button.flat{
+      background-color: transparent;
+    }
+  }
+
+  &:selected { @extend %selected_items; }
+}

gtk-4.0/widgets/_menus.scss

@@ -0,0 +1,132 @@
+/*********
+ * Menus *
+ *********/
+menubar,
+.menubar {
+  background-color: $headerbar_color;
+  color: $headerbar_fg_color;
+  padding: 0px;
+  box-shadow: inset 0 -1px transparentize(black, 0.9);
+
+  > item {
+    min-height: 16px;
+    padding: 4px 8px;
+
+    &:hover { //Seems like it :hover even with keyboard focus
+      box-shadow: inset 0 -3px $selected_bg_color;
+    }
+
+    &:disabled {
+      color: $insensitive_fg_color;
+      box-shadow: none;
+    }
+  }
+}
+
+menu,
+.menu,
+.context-menu {
+  font: initial;
+  margin: 4px;
+  padding: 2px 0px;
+  background: if( $variant == 'light',  linear-gradient(to bottom, #fff 20%, #fff), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%)));
+  border: 1px solid $borders_color; // adds borders in a non composited env
+  border-radius: 5px;
+
+  .csd & { border: none; }  // axes borders in a composited env
+
+  &:backdrop { background-color: $backdrop_menu_color; }
+
+  menuitem {
+    min-height: 17px;
+    min-width: 40px;
+    padding: 4px 6px;
+    text-shadow: none;
+
+    &:hover {
+      color: $selected_fg_color;
+      background-color: $selected_bg_color;
+    }
+
+    &:disabled {
+      color: $insensitive_fg_color;
+      &:backdrop { color: $backdrop_insensitive_color; }
+    }
+
+    &:backdrop,
+    &:backdrop:hover {
+      color: $backdrop_fg_color;
+      background-color: transparent;
+    }
+
+    // submenu indicators
+    arrow {
+      min-height: 16px;
+      min-width: 16px;
+
+      &:dir(ltr) {
+        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+        margin-left: 10px;
+      }
+
+      &:dir(rtl) {
+        -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
+        margin-right: 10px;
+      }
+    }
+
+    // avoids labels color being overridden, see
+    // https://bugzilla.gnome.org/show_bug.cgi?id=767058
+    label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
+  }
+
+  // overflow arrows
+  > arrow {
+    @include button(undecorated);
+
+    min-height: 16px;
+    min-width: 16px;
+    padding: 4px;
+    background-color: $menu_color;
+    border-radius: 0;
+
+    &.top {
+      margin-top: -6px;
+      border-bottom: 1px solid mix($fg_color, $base_color, 10%);
+      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+
+    &.bottom {
+      margin-bottom: -6px;
+      border-top: 1px solid mix($fg_color, $base_color, 10%);
+      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+
+    &:hover { background-color: mix($fg_color, $base_color, 10%); }
+
+    &:backdrop { background-color: $backdrop_menu_color; }
+
+    &:disabled {
+      color: transparent;
+      background-color: transparent;
+      border-color: transparent ;
+    }
+  }
+}
+
+menuitem {
+  accelerator { color: gtkalpha(currentColor,0.55); }
+
+  check,
+  radio {
+    min-height: 16px;
+    min-width: 16px;
+
+    &:dir(ltr) { margin-right: 7px; }
+    &:dir(rtl) { margin-left: 7px; }
+  }
+}
+
+.csd.popup {
+  background: transparent;
+}

gtk-4.0/widgets/_misc.scss

@@ -0,0 +1,62 @@
+/********
+ * Misc *
+ ********/
+//content view (grid/list)
+.content-view {
+  background-color: darken($bg_color,7%);
+
+  &:hover { -gtk-icon-filter: brightness(1.2); }
+
+  &:backdrop { background-color: darken($bg_color,7%); }
+
+  rubberband { @extend rubberband; }
+}
+
+.scale-popup {
+  .osd & { @extend %osd; }
+
+  .osd & button.flat {  //FIXME: quick hack, redo properly
+    border-style: none;
+    border-radius: 5px;
+  }
+
+  button { // +/- buttons on GtkVolumeButton popup
+    &:hover {
+      @extend %undecorated_button;
+      background-color: transparentize($fg_color,0.9);
+      border-radius: 5px;
+    }
+
+    &:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }}
+  }
+}
+
+/************
+* Assistant *
+*************/
+
+assistant {
+
+  border-bottom-left-radius:4px;
+  border-bottom-right-radius:4px;
+
+  .sidebar {
+    background-color: $base_color;
+    border-top: 1px solid $borders_color;
+
+    border-bottom-left-radius:4px;
+
+    &:backdrop {
+      background-color: $backdrop_base_color;
+      border-color: $backdrop_borders_color;
+    }
+  }
+
+  &.csd .sidebar { border-top-style: none; }
+
+  .sidebar GtkLabel,
+  .sidebar label { padding: 6px 12px; }
+
+  .sidebar GtkLabel.highlight,
+  .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
+}

gtk-4.0/widgets/_notebooks.scss

@@ -0,0 +1,276 @@
+/*************
+ * Notebooks *
+ *************/
+notebook {
+  > header {
+    padding: 1px;
+    border-color: transparent;
+    border-width: 1px;
+    background-color: mix($base_color, $headerbar_color, 30%);
+
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      background-color: $backdrop_bg_color;
+    }
+
+    tabs { margin: 0px; }
+
+    &.top {
+      border-bottom-style: solid;
+      > tabs {
+        margin-bottom: -2px;
+        > tab {
+
+
+          &:backdrop { box-shadow: none; }
+
+          &:checked {
+            @include selected-tab(right);
+          }
+        }
+      }
+    }
+
+    &.bottom {
+      border-top-style: solid;
+      > tabs {
+        margin-top: -2px;
+        > tab {
+
+
+          &:backdrop { box-shadow: none; }
+
+          &:checked { 
+            @include selected-tab(right);
+          }
+        }
+      }
+    }
+
+    &.left {
+      border-right-style: solid;
+      > tabs {
+        margin-right: -2px;
+        > tab {
+
+
+          &:backdrop { box-shadow: none; }
+
+          &:checked { 
+            @include selected-tab(bottom);
+          }
+        }
+      }
+    }
+
+    &.right {
+      border-left-style: solid;
+      > tabs {
+        margin-left: -2px;
+        > tab {
+
+
+          &:backdrop { box-shadow: none; }
+
+          &:checked { 
+            @include selected-tab(bottom);
+          }
+        }
+      }
+    }
+
+    &.top > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-top-style: none;
+    }
+
+    &.bottom > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-bottom-style: none;
+    }
+
+    @at-root %notebook_vert_arrows {
+      margin-left: -5px;
+      margin-right: -5px;
+      padding-left: 4px;
+      padding-right: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+    }
+
+    &.left > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-left-style: none;
+    }
+
+    &.right > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-right-style: none;
+    }
+
+    @at-root %notebook_horz_arrows {
+      margin-top: -5px;
+      margin-bottom: -5px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+    }
+
+    > tabs > arrow {
+      @extend %button_basic;
+
+      @extend %button_basic.flat;
+
+      min-height: 14px;
+      min-width: 14px;
+      border-radius: 0;
+
+      &:hover:not(:active):not(:backdrop) {
+        background-clip: padding-box;
+        background-image: none;
+        background-color: transparentize(white, 0.7);
+        border-color: transparent;
+        box-shadow: none;
+      }
+
+      &:disabled { @include button(undecorated); }
+    }
+
+    tab {
+      min-height: 24px;
+      min-width: 24px;
+      padding: 1px 12px;
+
+      outline-offset: -5px;
+
+      color: $insensitive_fg_color;
+      font-weight: normal;
+
+      border-width: 1px;         // for reorderable tabs
+      border-color: transparent; //
+
+      &:hover {
+        color: mix($insensitive_fg_color, $fg_color, 50%);
+
+        &.reorderable-page {
+          border-color: transparentize($borders_color, 0.7);
+          background-color: transparentize($bg_color, 0.8);
+        }
+      }
+
+      &:backdrop {
+        color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
+
+        &.reorderable-page {
+          border-color: transparent;
+          background-color: transparent;
+        }
+      }
+
+      &:checked {
+        color: $fg_color;
+        &.reorderable-page {
+          border-color: transparentize($borders_color, 0.5);
+          background-color: transparentize($bg_color, 0.5);
+
+          &:hover { background-color: transparentize($bg_color, 0.3); }
+        }
+      }
+
+      &:backdrop:checked {
+        color: $backdrop_fg_color;
+        &.reorderable-page {
+          border-color: $backdrop_borders_color;
+          background-color: $backdrop_base_color;
+        }
+      }
+
+      // colors the button like the label, overridden otherwise
+      button.flat {
+        &:hover {  
+          background: transparent;
+          box-shadow: none;
+          color: $red; 
+        }
+
+        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+
+        padding: 0;
+        margin-top: 4px;
+        margin-bottom: 4px;
+        // FIXME: generalize .small-button?
+        min-width: 20px;
+        min-height: 20px;
+      }
+    }
+
+    &.top,
+    &.bottom {
+      tabs {
+        padding-left: 0px;
+        padding-right: 0px;
+
+        &:not(:only-child) {
+          margin-left: 0.5px;
+          margin-right: 0.5px;
+
+          &:first-child { margin-left: -1px; }
+          &:last-child { margin-right: -1px; }
+        }
+
+        tab {
+          margin-left: 0.5px;
+          margin-right: 0.5px;
+
+          &.reorderable-page { border-style: none solid; }
+        }
+      }
+    }
+
+    &.left,
+    &.right {
+      tabs {
+        padding-top: 4px;
+        padding-bottom: 4px;
+
+        &:not(:only-child) {
+          margin-top: 3px;
+          margin-bottom: 3px;
+
+          &:first-child { margin-top: -1px; }
+          &:last-child { margin-bottom: -1px; }
+        }
+
+        tab {
+          margin-top: 4px;
+          margin-bottom: 4px;
+
+          &.reorderable-page { border-style: solid none; }
+        }
+      }
+    }
+
+    &.top tab { padding-bottom: 3px; }
+    &.bottom tab { padding-top: 3px; }
+    button{
+      margin-top: 1px;
+      margin-bottom: 1px;
+      padding: 1px 1px;
+    }
+  }
+
+  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+    background-color: $base_color;
+
+    &:backdrop { background-color: $backdrop_base_color; }
+  }
+}

gtk-4.0/widgets/_paned.scss

@@ -0,0 +1,69 @@
+/*********
+ * Paned *
+ *********/
+paned {
+  > separator {
+    min-width: 1px;
+    min-height: 1px;
+    -gtk-icon-source: none; // defeats the ugly default handle decoration
+    border-style: none; // just to be sure
+    background-color: transparent;
+    // workaround, using background istead of a border since the border will get rendered twice (?)
+    background-image: image($borders_color);
+    background-size: 1px 1px;
+
+    &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+
+    &:backdrop { background-image: image($backdrop_borders_color); }
+
+    &.wide {
+      min-width: 5px;
+      min-height: 5px;
+      background-color: $bg_color;
+      background-image: image($borders_color), image($borders_color);
+      background-size: 1px 1px, 1px 1px;
+
+      &:backdrop {
+        background-color: $backdrop_bg_color;
+        background-image: image($backdrop_borders_color),
+                          image($backdrop_borders_color);
+      }
+    }
+  }
+
+  &.horizontal > separator {
+    background-repeat: repeat-y;
+
+    &:dir(ltr) {
+      margin: 0 -8px 0 0;
+      padding: 0 8px 0 0;
+      background-position: left;
+    }
+    &:dir(rtl) {
+      margin: 0 0 0 -8px;
+      padding: 0 0 0 8px;
+      background-position: right;
+    }
+
+    &.wide {
+      margin: 0;
+      padding: 0;
+      background-repeat: repeat-y, repeat-y;
+      background-position: left, right;
+    }
+  }
+
+  &.vertical > separator {
+    margin: 0 0 -8px 0;
+    padding: 0 0 8px 0;
+    background-repeat: repeat-x;
+    background-position: top;
+
+    &.wide {
+      margin: 0;
+      padding: 0;
+      background-repeat: repeat-x, repeat-x;
+      background-position: bottom, top;
+    }
+  }
+}

gtk-4.0/widgets/_pathbars.scss

@@ -0,0 +1,29 @@
+/************
+ * Pathbars *
+ ************/
+.path-bar button {
+  &.text-button, &.image-button, & {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  &.text-button.image-button label {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.text-button.image-button, & {
+    label:last-child { padding-right: 8px; }
+    label:first-child { padding-left: 8px; }
+  }
+
+  image {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  &.slider-button {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

gtk-4.0/widgets/_popovers.scss

@@ -0,0 +1,66 @@
+/***************
+ * Popovers   *
+ ***************/
+
+ popover.background {
+
+  background: transparent;
+  font: initial;
+
+  > arrow,
+  > contents {
+    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
+
+    background: if( $variant == 'light', linear-gradient(to bottom, #fff 20%, #fff), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%)));
+    background-clip: padding-box;
+    border: 1px solid $borders_color;
+    box-shadow: 0 4px 6px $menu_shadow_color;
+  }
+
+  &:backdrop {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  > contents {
+    padding: 8px;
+    border-radius: 5px;
+
+    > list,
+    > .view,
+    > toolbar {
+      border-style: none;
+      background-color: transparent;
+    }
+
+    separator {
+      background-color: mix($bg_color, $borders_color, 30%);
+      margin: 3px;
+    }
+
+    list separator { margin: 0; }
+  }
+
+  .osd &,
+  &.touch-selection,
+  &.magnifier {
+    background-color: transparent;
+
+    > arrow,
+    > contents {
+      @extend %osd;
+
+      border: 1px solid transparentize(white, 0.9);
+      box-shadow: none;
+    }
+  }
+
+  &.touch-selection,
+  &.magnifier {
+    button { @extend %osd_button; }
+  }
+}
+
+magnifier {
+  background-color: $base_color;
+}

gtk-4.0/widgets/_print-dialog.scss

@@ -0,0 +1,18 @@
+/****************
+ * Print dialog *
+*****************/
+printdialog {
+  paper {
+    color: $fg_color;
+    border: 1px solid $borders_color;
+    background: white;
+    padding: 0;
+
+    &:backdrop {
+      color: $backdrop_fg_color;
+      border-color: $backdrop_borders_color;
+    }
+  }
+
+  .dialog-action-box { margin: 12px; }
+}

gtk-4.0/widgets/_progress-bars.scss

@@ -0,0 +1,56 @@
+/*****************
+ * Progress bars *
+ *****************/
+progressbar {
+  // sizing
+  &.horizontal {
+    trough,
+    progress { min-height: 6px; }
+  }
+
+  &.vertical {
+    trough,
+    progress { min-width: 6px; }
+  }
+
+  &.horizontal progress { margin: 0;} // the progress node is positioned after the trough border
+  &.vertical progress { margin: 0; @include scale-highlight(bottom);}   // this moves it over it.
+
+
+  // FIXME: insensitive state missing and some other state should be set probably
+  font-size: smaller;
+  color: transparentize($fg_color, 0.6);
+
+  &:backdrop {
+    box-shadow: none;
+    transition: $backdrop_transition;
+  }
+
+  trough { @extend %scale_trough; }
+
+  &:backdrop trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here
+
+  progress {
+    @extend %scale_highlight;
+  }
+
+  &:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
+
+  &.osd { // progressbar.osd used for epiphany page loading progress
+    min-width: 3px;
+    min-height: 3px;
+    background-color: transparent;
+
+    trough {
+      border-style: none;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    progress {
+      border-style: none;
+      border-radius: 0;
+    }
+  }
+}

gtk-4.0/widgets/_scales.scss

@@ -0,0 +1,418 @@
+/************
+ * GtkScale *
+ ************/
+%scale_trough {
+  background-color: $scale_bg;
+  border: none;
+  border-radius: 3px;
+  margin: 0;
+
+  &:disabled { background-color: $scale_disabled_bg; }
+
+  &:backdrop {
+    background-color: $scale_disabled_bg; 
+    transition: $backdrop_transition;
+
+    &:disabled { background-color: $scale_disabled_bg;  }
+  }
+}
+
+%scale_highlight {
+  border: none;
+  @include scale-highlight(right);
+  border-radius: 3px;
+  margin: 0;
+
+  &:disabled {
+    border: none;
+    background-color: $scale_bg;
+  }
+
+  &:backdrop,
+  &:active:backdrop {
+    border-color: lighten($selected_bg_color, 5%);
+    background-color: lighten($selected_bg_color, 5%);
+    &:disabled {
+      background-color: $scale_disabled_bg;
+    }
+  }
+}
+
+scale {
+  // sizing
+  $_marks_lenght: 6px;
+  $_marks_distance: 6px;
+
+  min-height: 16px;
+  min-width: 16px;
+  padding: 8px;
+
+  &.horizontal {
+    trough,
+    progress { min-height: 6px; }
+  }
+
+  &.vertical {
+    trough,
+    progress { min-width: 6px;}
+    highlight { @include scale-highlight(bottom); }
+  }
+
+  // the slider is inside the trough, so to have make it bigger there's a negative margin
+
+  slider {
+    min-height: 15px;
+    min-width: 15px;
+    margin: -7px;
+
+    background-color: $base_color;
+    box-shadow: inset 0 1px $top_highlight;
+              //  0px 0px 1px 1px rgba(0,0,0,0.1);
+    border-radius: 12px;
+
+    transition: $button_transition;
+    transition-property: background, border, box-shadow;
+
+    &:active {
+      background-color: $selected_bg_color;
+
+      &:disabled {
+        background-color: $insensitive_bg_color;
+        box-shadow: inset 0 1px $top_highlight;
+                    //0px 0px 1px 1px rgba(0,0,0,0.05);
+      }
+    }
+  }
+
+  // click-and-hold the slider to activate
+  &.fine-tune {
+    &.horizontal {
+      padding-top: 9px;
+      padding-bottom: 9px;
+      min-height: 16px;
+    }
+
+    &.vertical {
+      padding-left: 9px;
+      padding-right: 9px;
+      min-width: 16px;
+    }
+
+    // to make the trough grow in fine-tune mode
+    slider { margin: -6px; }
+
+    fill,
+    highlight,
+    trough {
+      border-radius: 5px;
+    }
+  }
+
+  // the backing bit
+  trough {
+    @extend %scale_trough;
+
+    outline-offset: 2px;
+    outline-color: transparent;
+  }
+
+  // the colored part of the backing bit
+  highlight { @extend %scale_highlight; }
+
+  // this is another differently styled part of the backing bit, the most relevant use case is for example
+  // in media player to indicate how much video stream as been cached
+  fill {
+    @extend %scale_trough;
+
+    &:backdrop, & { background-color: $borders_color; }
+
+    &:disabled {
+      &:backdrop, & {
+        border-color: transparent;
+        background-color: transparent;
+      }
+    }
+
+    // OSD
+    .osd & {
+      background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
+      &:disabled {
+        &:backdrop, & {
+          border-color: transparent;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  $_scale_bg: if($variant == 'light', #fff, lighten($bg_color, 10%));
+  $_scale_disabled_bg: darken($_scale_bg, 15%);
+  slider {
+    border-color: $base_color;
+    border: 2px solid #00f17d;
+    border-radius: 12px;
+
+    background-color: $_scale_bg;
+    // box-shadow: inset 0 1px $top_highlight,
+    //             0px 0px 1px 1px rgba(0,0,0,0.1);
+
+    &:hover { @include button(hover-alt, $edge: $shadow_color); }
+
+    &:active { border-color: $selected_borders_color; }
+
+    &:disabled {
+      background-color: $_scale_disabled_bg;
+      box-shadow: inset 0 1px $top_highlight,
+                  0px 0px 1px 1px rgba(0,0,0,0.1);
+      }
+
+    &:backdrop,
+    &:backdrop:disabled {
+      transition: $backdrop_transition;
+
+      background-color: $_scale_disabled_bg;
+      box-shadow: inset 0 1px $top_highlight,
+                  0px 0px 1px 1px rgba(0,0,0,0.1);
+    }
+
+    // ...on selected list rows
+    row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
+
+    // OSD
+    .osd & {
+      @include button(osd);
+      border-color: darken($osd_borders_color, 3%);
+      background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+      &:hover {
+        @include button(osd-hover);
+        background-color: opacify($osd_bg_color, 1); // solid background needed here
+      }
+
+      &:active {
+        @include button(osd-active);
+        background-color: opacify($osd_bg_color, 1); // solid background needed here
+      }
+
+      &:disabled {
+        @include button(osd-insensitive);
+        background-color: opacify($osd_bg_color, 1); // solid background needed here
+      }
+
+      &:backdrop {
+        @include button(osd-backdrop);
+        background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+        &:disabled {
+          @include button(osd-backdrop-insensitive);
+          background-color: opacify($osd_bg_color, 1); // solid background needed here
+        }
+      }
+    }
+  }
+
+  value { color: gtkalpha(currentColor, 0.4); }
+
+  marks {
+    color: gtkalpha(currentColor, 0.4);
+
+    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
+                                                     (bottom, bottom, top),
+                                                     (top, left, right),
+                                                     (bottom, right, left) {
+      &.#{$marks_class} {
+        margin-#{$marks_margin}: $_marks_distance;
+        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
+      }
+    }
+  }
+
+  &.fine-tune marks {
+    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
+                                                     (bottom, bottom, top),
+                                                     (top, left, right),
+                                                     (bottom, right, left) {
+      &.#{$marks_class} {
+        margin-#{$marks_margin}: $_marks_distance;
+        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
+      }
+    }
+  }
+
+  &.horizontal {
+    indicator {
+      min-height: $_marks_lenght;
+      min-width: 1px;
+    }
+
+    &.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
+  }
+
+  &.vertical {
+    indicator {
+      min-height: 1px;
+      min-width: $_marks_lenght;
+    }
+
+    &.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
+  }
+
+  // *WARNING* scale with marks madness following
+
+  // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
+  $suffix: if($variant == 'light', '', '-dark');
+
+  @each $dir_class, $dir_infix in ('horizontal', 'horz'),
+                                  ('vertical', 'vert') {
+    @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
+                                        ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
+      @each $state, $state_infix in ('', ''),
+                                    (':hover', '-hover'),
+                                    (':active', '-active'),
+                                    (':disabled', '-insensitive'),
+                                    (':backdrop', '-backdrop'),
+                                    (':backdrop:disabled', '-backdrop-insensitive') {
+        &.#{$dir_class}.#{$marks_class} {
+
+          slider {
+            &#{$state} {
+              // an asymmetric slider asset is used here, so the margins are uneven, the smaller
+              // margin is set on the point side.
+              min-height: 15px;
+              min-width: 15px;
+              margin: -7px;
+              border: 2px solid #00f17d;
+              border-radius: 50%;
+
+              background-color: $_scale_bg;
+              box-shadow: inset 0 1px $top_highlight;
+                      
+              }
+          }
+
+          &.fine-tune slider {
+            // bigger negative margins to make the trough grow here as well
+            margin: -7px;
+          }
+        }
+      }
+    }
+  }
+
+  &.color {
+    min-height: 0;
+    min-width: 0;
+
+    trough {
+      background-image: image($borders_color);
+      background-repeat: no-repeat;
+    }
+
+    &.horizontal {
+      padding: 0 0 15px 0;
+
+      trough {
+        padding-bottom: 4px;
+        background-position: 0 -3px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      slider {
+        &:dir(ltr), &:dir(rtl) { // specificity bumb
+          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+            margin-bottom: -15px;
+            margin-top: 6px;
+          }
+        }
+      }
+    }
+
+    &.vertical {
+      &:dir(ltr) {
+        padding: 0 0 0 15px;
+
+        trough {
+          padding-left: 4px;
+          background-position: 3px 0;
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        slider {
+          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+            margin-left: -15px;
+            margin-right: 6px;
+          }
+        }
+      }
+
+      &:dir(rtl) {
+        padding: 0 15px 0 0;
+
+        trough {
+          padding-right: 4px;
+          background-position: -3px 0;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
+
+        slider {
+          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+            margin-right: -15px;
+            margin-left: 6px;
+          }
+        }
+      }
+    }
+
+    &.fine-tune {
+      &.horizontal {
+        &:dir(ltr), &:dir(rtl) { // specificity bump
+          padding: 0 0 12px 0;
+
+          trough {
+            padding-bottom: 7px;
+            background-position: 0 -6px;
+          }
+
+          slider {
+            margin-bottom: -15px;
+            margin-top: 6px;
+          }
+        }
+      }
+
+      &.vertical {
+        &:dir(ltr) {
+          padding: 0 0 0 12px;
+
+          trough {
+            padding-left: 7px;
+            background-position: 6px 0;
+          }
+
+          slider {
+            margin-left: -15px;
+            margin-right: 6px;
+          }
+        }
+
+        &:dir(rtl) {
+          padding: 0 12px 0 0;
+
+          trough {
+            padding-right: 7px;
+            background-position: -6px 0;
+          }
+
+          slider {
+            margin-right: -15px;
+            margin-left: 6px;
+          }
+        }
+      }
+    }
+  }
+}

gtk-4.0/widgets/_scrollbars.scss

@@ -0,0 +1,170 @@
+/**************
+ * Scrollbars *
+ **************/
+scrollbar {
+  $_slider_min_length: 40px;
+
+  background-color: $scrollbar_bg_color;
+  transition: 300ms $ease-out-quad;
+
+  // scrollbar border
+  &.top { border-bottom: 1px solid $borders_color; }
+  &.bottom { border-top: 1px solid $borders_color; }
+  &.left { border-right: 1px solid $borders_color; }
+  &.right { border-left: 1px solid $borders_color; }
+
+  &:backdrop {
+    background-color: $backdrop_scrollbar_bg_color;
+    border-color: $backdrop_borders_color;
+    transition: $backdrop_transition;
+  }
+
+  // slider
+  slider {
+    min-width: 6px;
+    min-height: 6px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+    background-color: $scrollbar_slider_color;
+
+    &:hover { background-color: $scrollbar_slider_hover_color; }
+
+    &:hover:active { background-color: $scrollbar_slider_active_color; }
+
+    &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
+
+    &:disabled { background-color: transparent; }
+  }
+
+  &.fine-tune {
+    slider {
+      min-width: 4px;
+      min-height: 4px;
+    }
+
+    &.horizontal slider { border-width: 5px 4px; }
+    &.vertical slider { border-width: 4px 5px; }
+  }
+
+  &.overlay-indicator {
+    &:not(.dragging):not(.hovering) {
+      border-color: transparent;
+      opacity: 0.4;
+      background-color: transparent;
+
+      slider {
+        margin: 0;
+        min-width: 3px;
+        min-height: 3px;
+        background-color: $fg_color;
+        border: 1px solid if($variant == 'light', white, black);
+      }
+
+      button {
+        min-width: 5px;
+        min-height: 5px;
+        background-color: $fg_color;
+        background-clip: padding-box;
+        border-radius: 100%;
+        border: 1px solid if($variant == 'light', white, black);
+        -gtk-icon-source: none;
+      }
+
+      &.horizontal {
+        slider {
+          margin: 0 2px;
+          min-width: $_slider_min_length;
+        }
+
+        button {
+          margin: 1px 2px;
+          min-width: 5px;
+        }
+      }
+
+      &.vertical {
+        slider {
+          margin: 2px 0;
+          min-height: $_slider_min_length;
+        }
+
+        button {
+          margin: 2px 1px;
+          min-height: 5px;
+        }
+      }
+    }
+
+    &.dragging,
+    &.hovering { opacity: 0.8; }
+  }
+
+  &.horizontal slider { min-width: $_slider_min_length; }
+
+  &.vertical slider { min-height: $_slider_min_length; }
+
+  // button styling
+  button {
+    padding: 0;
+    min-width: 12px;
+    min-height: 12px;
+    border-style: none;
+    border-radius: 0;
+    transition-property: min-height, min-width, color;
+
+    @include button(undecorated);
+
+    color: $scrollbar_slider_color;
+
+    &:hover {
+      @include button(undecorated);
+
+      color: $scrollbar_slider_hover_color;
+    }
+    &:active, &:checked {
+      @include button(undecorated);
+
+      color: $scrollbar_slider_active_color;
+    }
+    &:disabled {
+      @include button(undecorated);
+
+      color: transparentize($scrollbar_slider_color, 0.8);
+    }
+    &:backdrop {
+      @include button(undecorated);
+
+      color: $backdrop_scrollbar_slider_color;
+
+      &:disabled {
+        @include button(undecorated);
+
+        color: transparentize($backdrop_scrollbar_slider_color, 0.8);
+      }
+    }
+  }
+
+  // button icons
+  &.vertical {
+    button {
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+    }
+  }
+
+  &.horizontal {
+    button {
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
+    }
+  }
+}
+
+treeview ~ scrollbar.vertical {
+  border-top: 1px solid $borders_color;
+  margin-top: -1px;
+}

gtk-4.0/widgets/_sidebar.scss

@@ -0,0 +1,209 @@
+/***********
+ * Sidebar *
+ ***********/
+.sidebar {
+  border-style: none;
+  border-width: 0;
+  background-color: mix($bg_color, $base_color, 50%);
+
+  .frame{
+    border: none;
+  }
+
+  @at-root %sidebar_left,
+  &:dir(ltr),
+  &.left,
+  &.left:dir(rtl) {
+    border-right: none;
+    border-left-style: none;
+  }
+
+  @at-root %sidebar_right
+  &:dir(rtl),
+  &.right {
+    border-left: 1px solid $borders_color;
+    border-right-style: none;
+  }
+
+  &:backdrop {
+    background-color: $backdrop_sidebar_bg_color;
+    border-color: $backdrop_borders_color;
+  }
+
+  row{
+    padding: 8px 12px;
+    transition: all .12s ease-in;
+    label{
+      color: #98abb2;
+    }
+    &:selected{
+      color: $selected_fg_color;
+      // border-left: 4px solid $selected_bg_color;
+      &:backdrop{
+        color: $backdrop_selected_fg_color;
+        background: $backdrop_selected_bg_color;
+        label{
+          color: $selected_fg_color;
+        }  
+      }
+      &:hover{
+        // background-color: transparentize($selected_bg_color, 0.8);
+      }
+      label{
+        color: $selected_fg_color;
+      }
+    }
+  }
+
+    //elementary os file manager
+    &.source-list{
+      background: $_sidebar_color;
+      padding: 4px 0px;
+      &.view{
+        transition: all .12s ease-in;
+        &:selected {
+          background-color: $selected_bg_color;
+          color: $selected_fg_color;
+          &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+    
+          &.has-open-popup,
+          &:hover { background-color: transparentize($selected_bg_color, 0.1); }
+    
+          &:backdrop { background-color: $backdrop_selected_bg_color; }
+        }
+        &:hover, iconview.source-list:hover { 
+            background-color: transparentize(black, 0.87); 
+        }
+      }
+    }
+    
+
+  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & {
+    border-style: none;
+    border-color: $borders_color;
+  }
+}
+}
+
+stacksidebar {
+  &.sidebar {
+    &:dir(ltr),
+    &.left,
+    &.left:dir(rtl) { list { @extend %sidebar_left; }}
+
+    &:dir(rtl),
+    &.right { list { @extend %sidebar_right; }}
+  }
+
+  row {
+    padding: 10px 4px;
+
+    > label {
+      padding-left: 6px;
+      padding-right: 6px;
+    }
+
+    &.needs-attention > label {
+      @extend %needs_attention;
+
+      background-size: 6px 6px, 0 0;
+    }
+  }
+}
+
+/*******************************************************************/
+/*                  PLACESSIDEBAR                                  */
+/*******************************************************************/
+
+/*--*/
+
+placessidebar{
+	&.sidebar{
+		background-color: transparent;
+		background-image:linear-gradient(to right, #171e27 40px,
+												$_sidebar_color 35px,$_sidebar_color 36px,
+												$_sidebar_color 36px,$_sidebar_color 99%, 
+												$_sidebar_color 100%);
+		row{
+			&.sidebar-row {
+				&.sidebar-row{
+					.sidebar-icon {
+						margin-left:-14px;
+						margin-right: 12px;
+						padding-left: 14px;
+						padding-right: 12px;
+						color: #9ecfa2;
+					}
+				}
+				&:hover{
+					transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+					color: rgba(0,0,0,0.76);
+					background-color: transparent; /*rgba(65,67,75,0.4); */
+					background-image:linear-gradient(to right, rgba(65,67,75,0) 40px, rgba(0,0,0,0.12) 40px,rgba(0,0,0,0.12) 97%);
+				}
+
+				&:active{
+					&:hover{
+						color: rgba(0,0,0,0.76);
+						background-color: rgba(0,0,0,0.23);
+					}
+				}
+
+				&:selected{
+					color: rgba(255, 255, 255, 0.938);
+					background-color: transparent;
+					background-image:linear-gradient(to right, $selected_bg_color 40px,
+																rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
+					&:hover{
+						color: #ffffff;
+						background-color: rgba(0,0,0,0.24);
+						.sidebar-icon {
+							color: #ffffff;
+						}
+          }
+          &:backdrop{
+            color: rgba(0,0,0,0.54);;
+            background-color: transparent;
+            background-image:linear-gradient(to right, $selected_bg_color 40px,
+                                  rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
+
+            .sidebar-icon {
+              color: $backdrop_selected_fg_color;
+              -gtk-icon-shadow: 0 1px transparentize($backdrop_selected_fg_color, 0.2);
+            }
+          }
+
+					.sidebar-icon {
+						-gtk-icon-shadow: 0 1px transparentize(#fff, 0.2);
+						color: inherit; 
+					}
+				}
+
+        &.sidebar-new-bookmark-row { 
+          &, label, .sidebar-icon {
+            color: $yellow; 
+          }
+        }
+
+        &:drop(active):not(:disabled) {
+          &, label, image { color: $drop_target_color; }
+    
+          box-shadow: inset 0 1px $drop_target_color,
+                      inset 0 -1px $drop_target_color;
+    
+          &:selected {
+            &, label, image { color: $selected_fg_color; }
+            background: $drop_target_color;
+          }
+        }
+
+			}
+		}
+	}
+	list{ 
+		background-color: transparent; 
+		&:backdrop { background-color: transparent; }
+	}
+  
+  
+}

gtk-4.0/widgets/_spinbuttons.scss

@@ -0,0 +1,192 @@
+/*****************
+ * GtkSpinButton *
+ *****************/
+spinbutton {
+  &:not(.vertical) {
+    // in this horizontal configuration, the whole spinbutton
+    // behaves as the entry, so we extend the entry styling
+    // and nuke the style on the internal entry
+    @extend %entry;
+
+    padding: 0;
+
+    entry {
+      min-width: 28px;
+      // reset all the other props since the spinbutton node is styled here
+      margin: 0;
+      background: none;
+      background-color: transparent;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    button {
+      min-height: 16px;
+      margin: 0;
+      padding-bottom: 0;
+      padding-top: 0;
+      color: mix($fg_color, $base_color, 90%);
+      background-image: none;
+      border-style: none none none solid;
+      border-color: transparentize($borders_color, 0.7);
+      border-radius: 0;
+      box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07);
+
+      &:dir(rtl) { border-style: none solid none none; }
+
+      &:hover {
+        color: $fg_color;
+        background-color: $base_hover_color;
+      }
+
+      &:disabled { color: transparentize($insensitive_fg_color, 0.7); }
+
+      &:active {
+        background-color: transparentize(black, 0.9);
+        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+      }
+
+      &:backdrop {
+        color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
+        background-color: transparent;
+        border-color: transparentize($backdrop_borders_color, 0.7);
+        transition: $backdrop_transition;
+      }
+
+      &:backdrop:disabled {
+        color: transparentize($backdrop_insensitive_color,0.7);
+        background-image: none;
+        border-style: none none none solid; // It is needed or it gets overridden
+        box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07);
+
+        &:dir(rtl) { border-style: none solid none none; }
+      }
+
+      &:last-child {
+        border-top-right-radius: 2px;
+        border-bottom-right-radius: 2px;
+      }
+    }
+  }
+
+  // OSD horizontal
+  .osd &:not(.vertical) {
+    button {
+      @include button(undecorated);
+
+      color: $osd_fg_color;
+      border-style: none none none solid;
+      border-color: transparentize($osd_borders_color, 0.3);
+      border-radius: 0;
+      box-shadow: none;
+      -gtk-icon-shadow: 0 1px black;
+
+      &:dir(rtl) { border-style: none solid none none; }
+
+      &:hover {
+        @include button(undecorated);
+
+        color: $osd_fg_color;
+        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+        background-color: transparentize($osd_fg_color, 0.9);
+        -gtk-icon-shadow: 0 1px black;
+        box-shadow: none;
+      }
+
+      &:backdrop {
+        @include button(undecorated);
+
+        color: $osd_fg_color;
+        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+        -gtk-icon-shadow: none;
+        box-shadow: none;
+      }
+
+      &:disabled {
+        @include button(undecorated);
+
+        color: $osd_insensitive_fg_color;
+        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+        -gtk-icon-shadow: none;
+        box-shadow: none;
+      }
+
+      &:last-child { border-radius: 0 3px 3px 0; }
+
+      &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
+    }
+  }
+
+  // Vertical
+  &.vertical {
+    // in the vertical configuration, we treat the spinbutton
+    // as a box, and tweak the style of the entry in the middle
+    // so that it's linked
+
+    // FIXME: this should not be set at all, but otherwise it gets the wrong
+    // color
+    &:disabled { color: $insensitive_fg_color; }
+    &:backdrop:disabled { color: $backdrop_insensitive_color; }
+
+    &:drop(active) {
+      border-color: transparent;
+      box-shadow: none;
+    }
+
+    entry {
+      min-height: 32px;
+      min-width: 32px;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    button {
+      min-height: 32px;
+      min-width: 32px;
+      padding: 0;
+      border-width: 1px;
+      border-color: $borders_color;
+      box-shadow: 0 1px $top_highlight;
+
+      &.up { @extend %top_button; }
+
+      &.down { @extend %bottom_button; }
+    }
+
+    %top_button {
+      border-radius: 3px 3px 0 0;
+      border-style: solid solid none solid;
+    }
+
+    %bottom_button {
+      border-radius: 0 0 3px 3px;
+      border-style: none solid solid solid;
+    }
+  }
+
+  // OSD vertical
+  .osd &.vertical button:first-child {
+    @include button(osd);
+
+    &:hover { @include button(osd-hover);}
+
+    &:active { @include button(osd-active); }
+
+    &:disabled { @include button(osd-insensitive); }
+
+    &:backdrop { @include button(osd-backdrop); }
+  }
+
+  // Misc
+  treeview &:not(.vertical) {
+    min-height: 0;
+    border-style: none;
+    border-radius: 0;
+
+    entry {
+      min-height: 0;
+      padding: 1px 2px;
+    }
+  }
+}

gtk-4.0/widgets/_spinner.scss

@@ -0,0 +1,27 @@
+/***********
+ * Spinner *
+ ***********/
+
+menu spinner {
+    color: $selected_bg_color;
+}
+
+/*********************
+ * Spinner Animation *
+ *********************/
+@keyframes spin {
+  to { -gtk-icon-transform: rotate(1turn); }
+}
+
+spinner {
+  background: none;
+  opacity: 0; // non spinning spinner makes no sense
+  -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+
+  &:checked {
+    opacity: 1;
+    animation: spin 1s linear infinite;
+
+    &:disabled { opacity: 0.5; }
+  }
+}

gtk-4.0/widgets/_switches.scss

@@ -0,0 +1,99 @@
+/**********
+ * Switch *
+ **********/
+ switch {
+  font-size: 1px;
+  font-weight: bold;
+  outline-offset: -4px;
+  transition: all 200ms ease-in;
+
+  border: none;
+  border-radius: 14px;
+  color: transparent;
+  padding: 2.3px 0px;
+
+  background:  linear-gradient(to right, #859398, #859398);
+ // border: 1px solid rgba(170, 170, 170, 0.4);
+  box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753);
+  &:disabled {
+    background-color: $insensitive_bg_color;
+  }
+
+  &:backdrop {
+    background-color: $backdrop_bg_color;
+    transition: $backdrop_transition;
+
+    &:disabled { background-color: $insensitive_bg_color; }
+  }
+
+
+  &:active,
+  &:checked {
+   // border: 1px solid $teal;
+   background:  linear-gradient(to right, #ff9200, #fadd00);
+    slider{
+      background: #fff;
+    }
+    &:backdrop {
+      //border: 1px solid $teal;
+      background:  linear-gradient(to right, darken(#ff9200, 5%), darken(#fadd00, 5%));
+      slider {
+        &:backdrop {
+          box-shadow:none;
+          background-color:transparentize($base_color, 0.1);
+          border:none;
+        }
+      }
+    }
+  }
+
+  // Handle
+  slider {
+    padding:2px;
+    margin: 0 2.3px;
+    min-width: 12px;
+    min-height: 12px;
+
+    border-radius: 100%;
+    transition: $button_transition;
+    background-color: lighten(#859398, 20%);
+
+    &:backdrop {
+      padding:2px;
+      box-shadow:none;
+      background-color:$base_color;
+    }
+  }
+
+  &:checked slider { }
+
+  &:backdrop {
+  }
+
+  row:selected & {
+    @if $variant == 'light' {
+      box-shadow: none;
+      border-color: $selected_borders_color;
+
+      &:backdrop { border-color: $selected_borders_color; }
+
+      &.slider:dir(rtl) { border-left-color: $borders_color; }
+      &.slider:dir(ltr) { border-right-color: $borders_color; }
+
+      &.slider { &:checked, & { border-color: $selected_borders_color; } }
+    }
+  }
+
+  // Trough
+  trough {
+
+    &:active,
+    &:checked {
+      background-color: $selected_bg_color;
+
+      &:backdrop {
+        background-color: $backdrop_selected_bg_color;
+      }
+    }
+  }
+}

gtk-4.0/widgets/_toolbars.scss

@@ -0,0 +1,83 @@
+/************
+ * Toolbars *
+ ************/
+%toolbar {
+  padding: 4px;
+  background-color: $bg_color;
+}
+
+toolbar {
+  @extend %toolbar;
+
+  padding: 4px 3px 3px 4px;
+
+  // on OSD
+  .osd & { background-color: transparent; }
+
+  // stand-alone OSD toolbars
+  &.osd {
+    padding: 13px;
+    border: none;
+    border-radius: 5px;
+    background-color: $osd_bg_color;
+
+    &.left,
+    &.right,
+    &.top,
+    &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
+  }
+
+  // toolbar separators
+  &.horizontal separator { margin: 0 7px 1px 6px; }
+  &.vertical separator { margin: 6px 1px 7px 0; }
+
+  &:not(.inline-toolbar):not(.osd) {
+    switch,
+    scale,
+    entry,
+    spinbutton,
+    button {
+      margin-right: 1px;
+      margin-bottom: 1px;
+    }
+  }
+}
+
+//searchbar, location-bar & inline-toolbar
+.inline-toolbar {
+  @extend %toolbar;
+
+  @extend %darkbar;
+
+  padding: 3px;
+  border-width: 0 1px 1px;
+  border-radius: 0  0 5px 5px;
+}
+
+searchbar,
+.location-bar {
+  @extend %toolbar;
+
+  @extend %darkbar;
+
+  border-width: 0 0 1px;
+  padding: 3px;
+}
+
+%darkbar {
+  border-style: solid;
+  border-color: $borders_color;
+  $_bg: mix($bg_color, $borders_color, 70%);
+  background-color: $_bg;
+
+  &:backdrop {
+    border-color: $backdrop_borders_color;
+    background-color: $backdrop_dark_fill;
+    box-shadow: none;
+    transition: $backdrop_transition;
+  }
+}
+
+searchbar{
+  background: $base_color;
+}

gtk-4.0/widgets/_tooltips.scss

@@ -0,0 +1,28 @@
+/************
+ * Tooltips *
+ ************/
+tooltip {
+  &.background {
+    // background-color needs to be set this way otherwise it gets drawn twice
+    // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
+    background-color: darken($_sidebar_color, 5%);
+    background-clip: padding-box;
+    border: 1px solid $tooltip_borders_color; // this suble border is meant to
+                                              // not make the tooltip melt with
+                                              // very dark backgrounds
+  }
+
+  padding: 4px; /* not working */
+  border-radius: 4px;
+  box-shadow: none; // otherwise it gets inherited by windowframe.csd
+  text-shadow: 0 1px black;
+
+  // FIXME: we need a border or tooltips vanish on black background.
+  decoration { background-color: transparent; }
+
+  * { // Yeah this is ugly
+    padding: 4px;
+    background-color: transparent;
+    color: white;
+  }
+}

gtk-4.0/widgets/_touch-copy-paste.scss

@@ -0,0 +1,82 @@
+/**********************
+ * Touch Copy & Paste *
+ *********************/
+//touch selection handlebars for the Popover.osd above
+cursor-handle {
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  border-style: none;
+
+  @each $s,$as in ('',''),
+                  (':hover','-hover'),
+                  (':active','-active') { //no need for insensitive and backdrop
+    &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
+      $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
+      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+                                    url('#{$_url}@2.png'));
+      padding-left: 10px;
+    }
+
+    &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
+      $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
+      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+                                    url('#{$_url}@2.png'));
+      padding-right: 10px;
+    }
+
+    &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
+      $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
+      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+                                    url('#{$_url}@2.png'));
+    }
+  }
+}
+
+.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
+
+button.circular { // FIXME: aggregate to buttons
+  border-radius: 20px;
+  -gtk-outline-radius: 20px;
+
+  label { padding: 0; }
+}
+
+// shortcut window keys
+.keycap {
+  min-width: 20px;
+  min-height: 25px;
+  margin-top: 2px;
+  padding-bottom: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+
+  color: $fg_color;
+  background-color: $base_color;
+  border: 1px solid;
+  border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
+  border-radius: 5px;
+  box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
+  font-size: smaller;
+
+  &:backdrop {
+    background-color: $backdrop_base_color;
+    color: $backdrop_fg_color;
+    transition: $backdrop_transition;
+  }
+}
+
+*:drop(active):focus,
+*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
+  border-color: $drop_target_color;
+  box-shadow: inset 0 0 0 1px $drop_target_color;
+}
+
+stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
+
+stackswitcher button.circular,
+stackswitcher button.text-button.circular { // FIXME aggregate with buttons
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+}

gtk-4.0/widgets/_treeviews.scss

@@ -0,0 +1,225 @@
+/**************
+ * Tree Views *
+ **************/
+treeview.view {
+
+  border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
+  border-top-color: $bg_color;                         // while this is the grid lines color, better then nothing
+
+  rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
+
+  &:selected {
+    &:focus, & {
+      border-radius: 0;
+
+      @extend %selected_items;
+    }
+
+    &:backdrop, & {
+      border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
+      border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
+    }
+  }
+
+  &:disabled {
+    color: $insensitive_fg_color;
+
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 40%);
+      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
+    }
+
+    &:backdrop { color: $backdrop_insensitive_color; }
+  }
+
+  &.separator {
+    min-height: 2px;
+    color: $bg_color;
+
+    &:backdrop { color: transparentize($bg_color, 0.9); }
+  }
+
+  &:backdrop {
+    border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+    border-top: $backdrop_bg_color;
+  }
+  &:drop(active) {
+    border-style: solid none;
+    border-width: 1px;
+    border-color: $selected_borders_color;
+
+    &.after { border-top-style: none; }
+
+    &.before { border-bottom-style: none; }
+  }
+
+  &.expander {
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+    color: mix($fg_color, $base_color, 70%);
+
+    &:hover { color: $fg_color; }
+
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 70%);
+
+      &:hover { color: $selected_fg_color; }
+
+      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
+    }
+
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+    &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
+  }
+
+  &.progressbar { // progress bar in treeviews
+    @if $variant == light { color: $base_color; }
+
+    border: 1px solid $selected_borders_color;
+    border-radius: 4px;
+    background-color: $selected_bg_color;
+    background-image: linear-gradient(to bottom,
+                                      $selected_bg_color,
+                                      darken($selected_bg_color,10%));
+    box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7),
+                                                  transparentize(white,0.85)),
+                      0 1px if($variant=='light', transparentize(black, 0.8),
+                                                  transparentize(black,0.9));
+
+    &:selected {
+      &:focus, & {
+        border-radius: 4px;
+
+        @if $variant == 'light' {
+          color: $selected_bg_color;
+          box-shadow: none;
+        }
+
+        @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
+
+        background-image: linear-gradient(to bottom,
+                                          $base_color,
+                                          darken($base_color,10%));
+
+        &:backdrop {
+          @if $variant == 'light' {
+            color: $selected_bg_color;
+            border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
+          }
+
+          @else { border-color: $backdrop_base_color; }
+
+          background-color: $backdrop_base_color;
+        }
+      }
+    }
+
+    &:backdrop {
+      @if $variant == 'light' { color: $backdrop_base_color; }
+
+      @else { border-color: $backdrop_base_color; }
+
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+
+  &.trough { // progress bar trough in treeviews
+    background-color: transparentize($fg_color,0.9);
+    border-radius: 4px;
+
+    &:selected {
+      &:focus, & {
+        background-color: if($variant == 'light',
+                             transparentize($selected_fg_color, 0.7),
+                             darken($selected_bg_color, 10%));
+        border-radius: 4px;
+
+        @if $variant == 'light' {
+          border-width: 1px 0;
+          border-style: solid;
+          border-color: $selected_bg_color;
+        }
+      }
+    }
+  }
+
+  header {
+    button {
+      $_column_header_color: mix($fg_color, $base_color, 50%);
+
+      @extend %column_header_button;
+
+      color: $_column_header_color;
+      background-color: $base_color;
+      font-weight: bold;
+      text-shadow: none;
+      box-shadow: none;
+
+      &:hover {
+        @extend %column_header_button;
+
+        color: mix($_column_header_color, $fg_color, 50%);
+        box-shadow: none;
+        transition: none; //I shouldn't need this
+      }
+
+      &:active {
+        @extend %column_header_button;
+
+        color: $fg_color;
+        transition: none; //I shouldn't need this
+      }
+    }
+
+    button:last-child { &:backdrop, & { border-right-style: none; }}
+  }
+
+  button.dnd,
+  header.button.dnd { // for treeview-like derive widgets
+    &:active, &:selected, &:hover, & {
+      padding: 0 6px;
+      transition: none;
+      background-image: none;
+      background-color: $selected_bg_color;
+      color: $base_color;
+      border-radius: 0;
+      border-style: none;
+      box-shadow: inset 0 0 0 1px $base_color;
+      text-shadow: none;
+    }
+  }
+
+  acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
+}
+
+%column_header_button {
+  padding: 0 6px;
+  border-radius: 0;
+  background-image: none;
+  text-shadow: none;
+  border-width: 1px;
+  border-style: none solid solid none;
+  border-color: $bg_color;
+
+  &:disabled {
+    border-color: $bg_color;
+    background-image: none;
+  }
+
+  &:backdrop {
+    border-color: $backdrop_bg_color;
+    border-style: none solid solid none;
+    color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+    background-image: none;
+    background-color: $backdrop_base_color;
+
+    &:disabled {
+      border-color: $backdrop_bg_color;
+      background-image: none;
+    }
+  }
+}

gtk-4.0/widgets/_windows.scss

@@ -0,0 +1,151 @@
+/**********************
+ * Window Decorations *
+ *********************/
+decoration, window {
+  border-radius: 4px 4px 0 0;
+
+  // lamefun trick to get rounded borders regardless of CSD use
+  border-width: 0px;
+
+  // this needs to be transparent
+  // see bug #722563
+  $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
+
+    // lamefun trick to get rounded borders regardless of CSD use
+  border-width: 0px;
+
+  box-shadow: 0 4px 10px 2px transparentize(#211A1E, 0.6);
+  // FIXME rationalize shadows
+
+  // this is used for the resize cursor area
+  margin: 10px;
+
+  &:backdrop {
+    // the transparent shadow here is to enforce that the shadow extents don't
+    // change when we go to backdrop, to prevent jumping windows.
+    // The biggest shadow should be in the same order then in the active state
+    // or the jumping will happen during the transition.
+    box-shadow: 0 4px 10px 2px transparentize($borders_color, 0.4);
+    transition: $backdrop_transition;
+  }
+
+  .maximized &,
+  .fullscreen &,
+  .tiled & { border-radius: 0; }
+
+  .popup & { box-shadow: none; }
+
+  // server-side decorations as used by mutter
+  .ssd & { box-shadow: none; } //just doing borders, wm draws actual shadows
+
+  .csd.popup & {
+    border-radius: 7px;
+    box-shadow: 0 4px 8px $menu_shadow_color;
+    border: 1px solid $borders_color;
+  }
+
+  tooltip.csd & {
+    border-radius: 5px;
+    box-shadow: none;
+  }
+
+  messagedialog.csd & {
+    border-radius: 7px;
+    box-shadow: 0 1px 2px transparentize(black, 0.8),
+                  0 0 0 1px transparentize($_wm_border,0.1);
+  }
+
+  .solid-csd & {
+    border-radius: 0;
+    margin: 0px;
+    background-color: $backdrop_bg_color;
+    border: solid 1px $backdrop_borders_color;
+    box-shadow: none;
+  }
+}
+
+// Window Close button
+windowcontrols {
+  button {
+    &.close, &.maximize, &.minimize {
+      min-width: 20px;
+      min-height: 20px;
+      margin: 0;
+      padding: 0 1px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 16px 16px;
+  
+      &, &:hover, &:focus, &:active, &:backdrop, &:backdrop:hover {
+       background-color: transparent;
+       border: none;
+       box-shadow: none;
+        color: transparent;
+      }
+  
+    }
+    
+    &.close {
+      background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png"));
+      &:hover,&:active {
+        background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png"));
+      }
+    }
+    &.maximize {
+      background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png"));
+      &:hover,&:active {
+        background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png"));
+      }
+    }
+    &.minimize {
+      background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png"));
+      &:hover,&:active {
+        background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png"));
+      }
+    }
+  
+    .selection-mode & {
+      @extend %button.flat.suggested-action;
+  
+      @extend %nobg_selected_items;
+    }
+  
+    &:backdrop { 
+      -gtk-icon-shadow: none; 
+      background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png"));
+    }
+  }
+}
+
+
+headerbar.selection-mode button.titlebutton,
+.titlebar.selection-mode button.titlebutton {
+  @include _button_text_shadow(white, $selected_bg_color);
+
+  &:backdrop { -gtk-icon-shadow: none; }
+}
+
+
+// catch all extend :)
+
+%selected_items {
+  background-color: $selected_bg_color;
+
+  @at-root %nobg_selected_items, & {
+    color: $selected_fg_color;
+    font-weight: normal;
+    //&:hover{background-color: transparent;}
+    @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }
+
+    &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+
+    &:backdrop {
+      color: $backdrop_selected_fg_color;
+
+      &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
+    }
+  }
+}
+
+.monospace { font-family: Monospace; }

src/render-gtk3-assets-hidpi.py

@@ -1,7 +1,5 @@
 #!/usr/bin/python3
 
-# Thanks to the GNOME theme nerds for the original source of this script
-
 import os
 import sys
 import xml.sax
@@ -32,9 +30,9 @@ def wait_for_prompt(process, command=None):
         return
 
     output += process.stdout.read(1)
-    while output != b'\n>':
-        output += process.stdout.read(1)
-        output = output[1:]
+    # while output != b'\n>':
+    #     output += process.stdout.read(1)
+    #     output = output[1:]
 
 
 def start_inkscape():
@@ -51,9 +49,8 @@ def inkscape_render_rect(icon_file, rect, output_file):
     if inkscape_process is None:
         inkscape_process = start_inkscape()
     wait_for_prompt(inkscape_process,
-                    '--export-dpi=180 %s -i %s -e %s'
-                    % (icon_file, rect, output_file)
-                    )
+                    'file-open:%s; export-id:%s; export-filename:%s; export-dpi:180; export-do' %
+                    (icon_file, rect, output_file))
     optimize_png(output_file)
 
 

src/render-gtk3-assets.py

@@ -1,7 +1,5 @@
 #!/usr/bin/python3
 
-# Thanks to the GNOME theme nerds for the original source of this script
-
 import os
 import sys
 import xml.sax
@@ -32,9 +30,9 @@ def wait_for_prompt(process, command=None):
         return
 
     output += process.stdout.read(1)
-    while output != b'\n>':
-        output += process.stdout.read(1)
-        output = output[1:]
+    # while output != b'\n>':
+    #     output += process.stdout.read(1)
+    #     output = output[1:]
 
 
 def start_inkscape():
@@ -51,7 +49,7 @@ def inkscape_render_rect(icon_file, rect, output_file):
     if inkscape_process is None:
         inkscape_process = start_inkscape()
     wait_for_prompt(inkscape_process,
-                    '%s -i %s -e %s' %
+                    'file-open:%s; export-id:%s; export-filename:%s; export-do' %
                     (icon_file, rect, output_file))
     optimize_png(output_file)