Refactor GTK3 theme to depend on upstream scss code

Fixes #36

src/themes/Kali/sass/gtk-dark.scss

@@ -1,7 +1,14 @@
+// General guidelines:
+// - very unlikely you want to edit something else than _common.scss
+// - keep the number of defined colors to a minimum, use the color blending functions if
+//   you need a subtle shade
+// - if you need to inverse a color function use the @if directive to match for dark $variant
+
 $variant: 'dark';
 
 @import 'gtk-sass/_colors';
-@import 'gtk-sass/_drawing';
+@import 'gtk-sass/upstream/_drawing';
-@import 'gtk-sass/_common';
+@import 'gtk-sass/upstream/_common';
+@import 'gtk-sass/_common-tweaks';
 @import 'gtk-sass/_applications';
-@import 'gtk-sass/_colors-public';
+@import 'gtk-sass/upstream/_colors-public';

src/themes/Kali/sass/gtk-sass/_common-tweaks.scss

@@ -0,0 +1,198 @@
+* {
+  outline-color: gtkalpha(currentColor, 0.07);
+  outline-style: solid;
+  outline-offset: -2px;
+  outline-width: 2px;
+  -gtk-outline-radius: 6px;
+}
+
+%button_active,
+button:active,
+button:checked, {
+  background: if($variant == 'light', image(darken($bg_color, 7%)), image(darken($bg_color, 14%)));
+  box-shadow: inset 0 3px 3px -2px transparentize($shadow_color, 0.03);
+}
+
+%slider_active {
+  background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
+}
+
+/**********
+ * Switch *
+ **********/
+switch {
+  $_slider_border_color: darken($alt_borders_color, 3%);
+
+  slider {
+      @include button(normal-alt, $edge: $shadow_color);
+
+      border: 1px solid $_slider_border_color;
+      border-radius: 50%;
+      transition-property: background, border, box-shadow;
+  }
+
+  &:hover slider {
+    @extend %slider_active;
+    border-color: $suggested_bg_color;
+  }
+
+  &:checked slider {
+    border-color: if($variant=='light', $suggested_border_color, $_slider_border_color);
+  }
+
+  &:backdrop {
+    slider { border-color: $backdrop_borders_color; }
+
+    &:checked slider {
+      border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color);
+    }
+  }
+}
+
+/************
+ * GtkScale *
+ ************/
+scale slider:active {
+  @extend %slider_active;
+
+  border-color: $suggested_bg_color;
+}
+
+/***************
+ * Header bars *
+ ***************/
+.titlebar,
+headerbar {
+  border-color: $selected_bg_color;
+
+  $_scale_asset: 'assets/kali-headerbar-logo#{$asset_suffix}';
+  @include headerbar_fill(darken($bg_color, if($variant == 'light', 2%, 10%)),
+                          $ov: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')));
+  background-repeat: no-repeat;
+  background-position: left;
+
+  &:backdrop {
+    background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
+    background-repeat: no-repeat;
+    background-position: left;
+  }
+
+  stackswitcher button:checked,
+  button.toggle {
+    &:active, &:checked { @extend %button_active; }
+  }
+}
+
+/**************
+ * GtkInfoBar *
+ **************/
+infobar {
+  @mixin _infobar_button($bg) {
+    button {
+      // FIXME: extend selection mode buttons
+      @include button(normal, $bg, $selected_fg_color, none);
+
+      &:hover { @include button(hover, $bg, $selected_fg_color, none); }
+
+      &:active,
+      &:checked { @include button(active, $bg, $selected_fg_color, none); }
+
+      &:disabled { @include button(insensitive,$bg,$selected_fg_color,none); }
+
+      &:backdrop {
+        @include button(backdrop, $bg, $selected_fg_color, none);
+        border-color: _border_color($bg);
+
+        &:disabled {
+          @include button(backdrop-insensitive, $bg,
+                          $selected_fg_color, none);
+          border-color: _border_color($bg);
+        }
+      }
+      &:backdrop, & {
+        label, & { color: $selected_fg_color; }
+      }
+    }
+  }
+
+  &,
+  &.info,
+  &.question,
+  &.warning,
+  &.error {
+
+  border-style: none;
+  text-shadow: none;
+
+    &:backdrop > revealer > box, & > revealer > box {
+      label, & { color: $selected_fg_color; }
+    }
+
+    &:backdrop { text-shadow: none; }
+
+    selection { background-color: darken($bg_color, 10%); }
+
+    *:link { color: $link_color; }
+  }
+
+  &.info {
+    &:backdrop > revealer > box, & > revealer > box {
+      background-color: $selected_bg_color;
+    }
+
+    @include _infobar_button($selected_bg_color);
+  }
+
+  &.question, &.warning {
+    &:backdrop > revealer > box, & > revealer > box {
+      background-color: $warning_color;
+    }
+
+    @include _infobar_button($warning_color);
+  }
+
+  &.error {
+    &:backdrop > revealer > box, & > revealer > box {
+      background-color: $error_color;
+
+      @include _infobar_button($error_color);
+    }
+  }
+}
+
+/*********************
+ * App Notifications *
+ *********************/
+.app-notification,
+.app-notification.frame {
+  padding: 5px;
+  margin: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 8px 0 transparentize(black, .6);
+  background-image: none;
+
+  &:backdrop { box-shadow: none; }
+}
+
+/***********
+ * Dialogs *
+ ***********/
+messagedialog .titlebar:backdrop { background-image: none; }
+
+/**********************
+ * Window Decorations *
+ *********************/
+decoration {
+  box-shadow: 0 2px 8px 0 transparentize(black, 0.6);
+
+  &:backdrop {
+    box-shadow: 0 2px 8px 0 transparent,
+                0 0 0 3px if($variant == 'light', transparentize(black, .85), transparentize(black, .75));
+  }
+
+  .ssd & { box-shadow: none; }
+
+  .csd.popup & { box-shadow: 0 1px 4px transparentize(black, 0.8); }
+
+  messagedialog.csd & { box-shadow: 0 1px 4px transparentize(black, 0.8); }
+}

src/themes/Kali/sass/gtk-sass/upstream/_colors.scss

@@ -0,0 +1,77 @@
+// When color definition differs for dark and light variant
+// it gets @if ed depending on $variant
+
+
+$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 100%), 2%));
+$text_color: if($variant == 'light', black, white);
+$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
+$fg_color: if($variant == 'light', #2e3436, #eeeeec);
+
+$selected_fg_color: #ffffff;
+$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));
+$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
+$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
+$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
+$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
+$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
+$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
+$top_hilight: $borders_edge;
+$dark_fill: mix($borders_color, $bg_color, 50%);
+$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
+$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%));
+$popover_bg_color: $bg_color;
+$popover_hover_color: lighten($bg_color, 5%);
+
+$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), 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: #f57900;
+$error_color: #cc0000;
+$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
+$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
+
+$osd_fg_color: #eeeeec;
+$osd_text_color: white;
+$osd_bg_color: if($variant == 'light', transparentize(darken(desaturate(#3d3846, 100%), 4%),0.1), transparentize(darken(desaturate(#3d3846, 100%), 10%),0.1));
+$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: #4e9a06;
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;
+
+//colors for the backdrop state, derived from the main 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_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_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
+$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
+$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%));
+
+//special cased widget colors
+$suggested_bg_color: $selected_bg_color;
+$suggested_border_color: $selected_borders_color;
+$progress_bg_color: $selected_bg_color;
+$progress_border_color: $selected_borders_color;
+$checkradio_bg_color: $selected_bg_color;
+$checkradio_fg_color: $selected_fg_color;

src/themes/Kali/sass/gtk-sass/upstream/_common.scss

@@ -46,11 +46,11 @@ $_switch_margin: if($_sizevariant=='default', 10px, 7px);
   // to the adwaita engine: using real CSS properties is faster,
   // and we don't use any outlines for now.
 
-  outline-color: gtkalpha(currentColor, 0.07);
+  outline-color: gtkalpha(currentColor, 0.3);
-  outline-style: solid;
+  outline-style: dashed;
-  outline-offset: -2px;
+  outline-offset: -3px;
-  outline-width: 2px;
+  outline-width: 1px;
-  -gtk-outline-radius: 6px;
+  -gtk-outline-radius: $button-radius - 2;
 
   -gtk-secondary-caret-color: $selected_bg_color
 }
@@ -168,7 +168,7 @@ flowbox {
   background-color: if($variant=='light', transparent, black);
   border-radius: 0;
   padding: 0;
-
+  
   &:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); }
   &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
   &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
@@ -196,7 +196,7 @@ label {
   &:disabled {
     color: $insensitive_fg_color;
 
-    selection { @extend %selected_items:disabled; }
+    selection { @extend %selected_items_disabled; }
 
     &:backdrop { color: $backdrop_insensitive_color; }
   }
@@ -204,7 +204,7 @@ label {
   &:backdrop {
     color: $backdrop_fg_color;
 
-    selection { @extend %selected_items:backdrop; }
+    selection { @extend %selected_items_backdrop; }
   }
 }
 
@@ -543,6 +543,7 @@ button {
 
     @include button(normal);
 
+    @at-root %button_basic_flat,
     &.flat {
       @include button(undecorated);
       // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
@@ -620,6 +621,7 @@ button {
       }
     }
 
+    @at-root %button_basic_drop_active,
     &:drop(active) {
       color: $drop_target_color;
       border-color: $drop_target_color;
@@ -961,11 +963,11 @@ toolbar.inline-toolbar toolbutton,
 toolbar.inline-toolbar toolbutton:backdrop {
   > button.flat { @extend %linked_middle; }
 
-  &:first-child > button.flat { @extend %linked:first-child; }
+  &:first-child > button.flat { @extend %linked_left; }
 
-  &:last-child > button.flat { @extend %linked:last-child; }
+  &:last-child > button.flat { @extend %linked_right; }
 
-  &:only-child > button.flat { @extend %linked:only-child; }
+  &:only-child > button.flat { @extend %linked_only_child; }
 }
 
 %linked_middle {
@@ -989,6 +991,11 @@ toolbar.inline-toolbar toolbutton:backdrop {
     border-right-style: solid;
 }
 
+%linked_only_child {
+    border-radius: $button_radius;
+    border-style: solid;
+}
+
 // .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
 %linked {
   @extend %linked_middle;
@@ -996,10 +1003,7 @@ toolbar.inline-toolbar toolbutton:backdrop {
   &:first-child { @extend %linked_left; }
   &:last-child { @extend %linked_right; }
 
-  &:only-child {
+  &:only-child { @extend %linked_only_child; }
-    border-radius: $button_radius;
-    border-style: solid;
-  }
 }
 
 // Other widgets use widget child order, so 1st/last child are at text start/end
@@ -1016,10 +1020,7 @@ toolbar.inline-toolbar toolbutton:backdrop {
     &:last-child { @extend %linked_left; }
   }
 
-  &:only-child {
+  &:only-child { @extend %linked_only_child; }
-    border-radius: $button_radius;
-    border-style: solid;
-  }
 }
 
 %linked_vertical_middle {
@@ -1027,24 +1028,30 @@ toolbar.inline-toolbar toolbutton:backdrop {
   border-radius: 0;
 }
 
+%linked_vertical_top {
+  border-top-left-radius: $button_radius;
+  border-top-right-radius: $button_radius;
+}
+
+%linked_vertical_bottom {
+  border-bottom-left-radius: $button_radius;
+  border-bottom-right-radius: $button_radius;
+  border-style: solid;
+}
+
+%linked_vertical_only_child {
+  border-radius: $button_radius;
+  border-style: solid;
+}
+
 %linked_vertical{
   @extend %linked_vertical_middle;
 
-  &:first-child {
+  &:first-child { @extend %linked_vertical_top; }
-    border-top-left-radius: $button_radius;
-    border-top-right-radius: $button_radius;
-  }
 
-  &:last-child {
+  &:last-child { @extend %linked_vertical_bottom; }
-    border-bottom-left-radius: $button_radius;
-    border-bottom-right-radius: $button_radius;
-    border-style: solid;
-  }
 
-  &:only-child {
+  &:only-child { @extend %linked_vertical_only_child; }
-    border-radius: $button_radius;
-    border-style: solid;
-  }
 }
 
 %undecorated_button {
@@ -1158,7 +1165,7 @@ button:link,
 button:visited {
   @extend %undecorated_button;
 
-  @extend *:link;
+  @extend %link;
 
   text-shadow: none;
 
@@ -1395,15 +1402,15 @@ combobox {
 
   &.linked {
     button:nth-child(2) {
-      &:dir(ltr) { @extend %linked:last-child; }
+      &:dir(ltr) { @extend %linked_right; }
-      &:dir(rtl) { @extend %linked:first-child; }
+      &:dir(rtl) { @extend %linked_left; }
     }
   }
 
   &:drop(active) { // FIXME: untested
     box-shadow: none;
 
-    button.combo { @extend %button_basic:drop(active); }
+    button.combo { @extend %button_basic_drop_active; }
   }
 }
 
@@ -1416,14 +1423,14 @@ combobox {
   &:dir(rtl) { @extend %linked_middle; } // specificity bump
 }
 
-.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
+.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked_left; }
-.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
+.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked_right; }
-.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-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:first-child > box > button.combo { @extend %linked_vertical_top;}
-.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
+.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical_bottom; }
-.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
+.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical_only_child; }
 
 
 /************
@@ -1522,21 +1529,15 @@ headerbar {
   min-height: $_headerbar_height;
   border-width: 0 0 1px;
   border-style: solid;
-  border-color: $selected_bg_color;
+  border-color: $alt_borders_color;
   border-radius: 0;
 
-  $_scale_asset: 'assets/kali-headerbar-logo#{$asset_suffix}';
+  @include headerbar_fill(darken($bg_color, 10%));
-  @include headerbar_fill(darken($bg_color, if($variant == 'light', 2%, 10%)),
-                          $ov: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')));
-  background-repeat: no-repeat;
-  background-position: left;
 
   &:backdrop {
     border-color: $backdrop_borders_color;
     background-color: $bg_color;
-    background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
+    background-image: none;
-    background-repeat: no-repeat;
-    background-position: left;
     box-shadow: inset 0 1px $top_hilight;
 
     transition: $backdrop_transition;
@@ -1560,7 +1561,7 @@ headerbar {
   stackswitcher button:checked,
   button.toggle:checked {
 
-    background: if($variant == 'light', image(darken($bg_color, 7%)), image(darken($bg_color, 14%)));
+    background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
     border-color: darken($borders_color, 3%);
     border-top-color: darken($borders_color, 8%);
     &:backdrop {
@@ -1582,14 +1583,14 @@ headerbar {
       background-color: $suggested_bg_color;
       background-image: none;
       box-shadow: inset 0 1px mix($top_hilight, $suggested_bg_color, 60%);
-
+      
-      label {
+      label { 
         text-shadow: none;
-        color: $selected_fg_color;
+        color: $selected_fg_color; 
       }
     }
 
-    .subtitle:link { @extend *:link:selected;  }
+    .subtitle:link { @extend %link_selected; }
 
     button {
       @include button(normal, $suggested_bg_color, $selected_fg_color);
@@ -1721,9 +1722,9 @@ headerbar {
       padding: 0;
     }
   }
+  
 
-
+  
-
   separator.titlebutton { opacity: 0; } /* hide the close button separator */
 
   .solid-csd & {
@@ -2133,7 +2134,7 @@ menubar,
 
     // remove padding and rounding from menubar submenus
     menu {
-      .csd &, & {
+      &:dir(rtl), &:dir(ltr) { // specificity bump
         border-radius: 0;
         padding: 0;
       }
@@ -2435,7 +2436,7 @@ notebook {
     > tabs > arrow {
       @extend %button_basic;
 
-      @extend %button_basic.flat;
+      @extend %button_basic_flat;
 
       min-height: 16px;
       min-width: 16px;
@@ -2810,30 +2811,35 @@ switch {
     }
   }
 
-  $_slider_border_color: darken($alt_borders_color, 3%);
   slider {
     margin: -1px;
     min-width: 24px;
     min-height: 24px;
-    @include button(normal-alt, $edge: $shadow_color);
+    border: 1px solid;
-
+    border-radius: 50%;
-    border: 1px solid $_slider_border_color;
-    border-radius: 100%;
     transition: $button_transition;
-    transition-property: background, border, box-shadow;
     -gtk-outline-radius: 20px;
-  }
 
+    @if $variant == 'light' {
+      @include button(normal-alt, $edge: $shadow_color);
+    } 
+    @else {
+      @include button(normal-alt, $c: lighten($bg_color,6%), $edge: $shadow_color);
+    }
+  }
+  
   image { color: transparent; } /* only show i / o for the accessible theme */
 
   &:hover slider {
-    @include button(active-alt, $edge: $shadow_color);
+    @if $variant == 'light' {
-    border-color: $suggested_bg_color;
+      @include button(hover-alt, $edge: $shadow_color);
+    }
+    @else {
+      @include button(hover-alt, $c: lighten($bg_color,6%), $edge: $shadow_color);
+    }
   }
 
-  &:checked slider {
+  &:checked slider { border: 1px solid $suggested_border_color; }
-    border-color: if($variant=='light', $suggested_border_color, $_slider_border_color);
-  }
 
   &:disabled slider { @include button(insensitive); }
 
@@ -2842,12 +2848,9 @@ switch {
       transition: $backdrop_transition;
 
       @include button(backdrop);
-      border-color: $backdrop_borders_color;
     }
 
-    &:checked slider {
+    &:checked slider { border-color: if($variant == 'light', $suggested_bg_color, $suggested_border_color); }
-      border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color);
-    }
 
     &:disabled slider { @include button(backdrop-insensitive); }
   }
@@ -2936,20 +2939,42 @@ radio {
   border: 1px solid;
   -gtk-icon-source: none;
 
-  @include button(normal-alt, $edge: $shadow_color);
+  & {
-  &:hover { @include button(hover-alt, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $edge: $shadow_color); }
+    // for unchecked
-  &:hover:not(:checked) { @include button(hover-alt, $edge: $shadow_color); }
+    $_c: if($variant=='light', white, $bg_color);
-  &:active { @include button(active, $c:$checkradio_bg_color, $tc:$checkradio_fg_color); }
-  &:checked { @include button(normal-alt, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $edge: $shadow_color); }
-  &:disabled { @include button(insensitive); }
-  &:backdrop {
-    @include button(backdrop);
 
-    transition: $backdrop_transition;
+    @each $state, $t in ("", "normal"),
-
+                        (":hover", "hover"),
-    &:disabled { @include button(backdrop-insensitive); }
+                        (":active", "active"),
+                        (":disabled", "insensitive"),
+                        (":backdrop", "backdrop"),
+                        (":backdrop:disabled", 'backdrop-insensitive') {
+      &#{$state} {
+        @include check($t, $_c);
+      }
+    }
   }
 
+  & {
+    // for checked
+    @each $t in (':checked'), (':indeterminate') {
+      &#{$t} {
+        @each $state, $t in ("", "normal"),
+                            (":hover", "hover"),
+                            (":active", "active"),
+                            (":disabled", "insensitive"),
+                            (":backdrop", "backdrop"),
+                            (":backdrop:disabled", 'backdrop-insensitive') {
+          &#{$state} {
+            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
+          }
+        }
+      }
+    }
+  }
+
+  &:backdrop { transition: $backdrop_transition; }
+  
   @if $variant == 'light' {
     // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
     // color, hence we need special casing.
@@ -2968,15 +2993,17 @@ radio {
   menu menuitem & {
     margin: 0; // this is a workaround for a menu check/radio size allocation issue
 
-    &, &:hover, &:disabled { //FIXME use button reset mixin
+    &, &:checked, &:indeterminate {
-      min-height: 14px;
+      &, &:hover, &:disabled { //FIXME use button reset mixin
-      min-width: 14px;
+        min-height: 14px;
-      background-image: none;
+        min-width: 14px;
-      background-color: transparent;
+        background-image: none;
-      box-shadow: none;
+        background-color: transparent;
-      -gtk-icon-shadow: none;
+        box-shadow: none;
-      color: inherit;
+        -gtk-icon-shadow: none;
-      border-color: currentColor;
+        color: inherit;
+        border-color: currentColor;
+      }
     }
   }
 }
@@ -3035,15 +3062,7 @@ treeview.view radio {
 
       @if $variant == 'light' { border-color: $selected_borders_color; }
     }
-
-    &:disabled {
-      color: $insensitive_fg_color;
-
-      &:backdrop { color: $backdrop_insensitive_color; }
-    }
   }
-
-  &:backdrop { &:selected, & { color: $backdrop_fg_color; }}
 }
 
 treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
@@ -3203,11 +3222,7 @@ scale {
 
     &:hover { @include button(hover-alt, $edge: $shadow_color); }
 
-    &:active {
+    &:active { border-color: $progress_border_color; }
-      @include button(active-alt, $edge: $shadow_color);
-
-      border-color: $suggested_bg_color;
-    }
 
     &:disabled { @include button(insensitive); }
 
@@ -3807,14 +3822,15 @@ row {
 .app-notification.frame {
   @extend %osd;
 
-  padding: 5px;
+  padding: 10px;
-  margin: 20px;
+  border-radius: 0 0 5px 5px;
-  border-radius: 5px;
   background-color: $osd_bg_color;
-  box-shadow: 0 2px 8px 0 transparentize(black, .6);
+  background-image: linear-gradient(to bottom, transparentize(black, 0.8),
+                                               transparent 2px);
+  background-clip: padding-box;
 
   &:backdrop {
-    box-shadow: none;
+    background-image: none;
     transition: $backdrop_transition;
   }
 
@@ -3900,8 +3916,6 @@ messagedialog { // Message Dialog styling
     border-style: none;
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
-    
-    &:backdrop { background-image: none; }
   }
 
   &.csd { // rounded bottom border styling for csd version
@@ -4029,7 +4043,7 @@ separator.sidebar {
 $_placesidebar_icons_opacity: 0.7;
 
 row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
-                                                                  // see bug #786613 for details
+                                                                  // see bug #786613 for details 
                                                                   // on this oddity
 
 placessidebar {
@@ -4067,7 +4081,7 @@ placessidebar {
     }
 
     @at-root button.sidebar-button {
-      @extend %button_basic.flat;
+      @extend %button_basic_flat;
 
       @extend %button_selected.flat;
 
@@ -4204,33 +4218,6 @@ paned {
  * GtkInfoBar *
  **************/
 infobar {
-  @mixin _infobar_button($bg) {
-    button {
-      // FIXME: extend selection mode buttons
-      @include button(normal, $bg, $selected_fg_color, none);
-
-      &:hover { @include button(hover, $bg, $selected_fg_color, none); }
-
-      &:active,
-      &:checked { @include button(active, $bg, $selected_fg_color, none); }
-
-      &:disabled { @include button(insensitive,$bg,$selected_fg_color,none); }
-
-      &:backdrop {
-        @include button(backdrop, $bg, $selected_fg_color, none);
-        border-color: _border_color($bg);
-
-        &:disabled {
-          @include button(backdrop-insensitive, $bg,
-                          $selected_fg_color, none);
-          border-color: _border_color($bg);
-        }
-      }
-      &:backdrop, & {
-        label, & { color: $selected_fg_color; }
-      }
-    }
-  }
   border-style: none;
 
   &.info,
@@ -4238,40 +4225,46 @@ infobar {
   &.warning,
   &.error {
     &:backdrop > revealer > box, & > revealer > box {
-      label, & { color: $selected_fg_color; }
+      label, & { color: $fg_color; }
+      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%), 
+                        desaturate(darken(invert($selected_bg_color),40%), 70%));
+      border-bottom: 1px solid lighten($borders_color, 5%);
     }
+
     text-shadow: none;
 
     &:backdrop { text-shadow: none; }
 
+    button {
+      // FIXME: extend selection mode buttons
+      @include button(normal, $bg_color, $fg_color, none);
+
+      &:hover { @include button(hover, $bg_color, $fg_color, none); }
+
+      &:active,
+      &:checked { @include button(active, $bg_color, $fg_color, none); }
+
+      &:disabled { @include button(insensitive,$bg_color,$fg_color,none); }
+
+      &:backdrop {
+        @include button(backdrop, $bg_color, $fg_color, none);
+        border-color: _border_color($bg_color);
+
+        &:disabled {
+          @include button(backdrop-insensitive, $bg_color,
+                          $fg_color, none);
+          border-color: _border_color($bg_color);
+        }
+      }
+      &:backdrop, & {
+        label, & { color: $fg_color; }
+      }
+    }
+
     selection { background-color: darken($bg_color, 10%); }
 
     *:link { color: $link_color; }
   }
-
-  &.info {
-    &:backdrop > revealer > box, & > revealer > box {
-      background-color: $selected_bg_color;
-    }
-
-    @include _infobar_button($selected_bg_color);
-  }
-
-  &.question, &.warning {
-    &:backdrop > revealer > box, & > revealer > box {
-      background-color: $warning_color;
-    }
-
-    @include _infobar_button($warning_color);
-  }
-
-  &.error {
-    &:backdrop > revealer > box, & > revealer > box {
-      background-color: $error_color;
-
-      @include _infobar_button($error_color);
-    }
-  }
 }
 
 
@@ -4495,9 +4488,13 @@ decoration {
   // 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));
 
-  box-shadow: 0 2px 8px 0 transparentize(black, 0.6);
+  box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
+              0 0 0 1px $_wm_border; //doing borders with box-shadow
 
   // FIXME rationalize shadows
 
@@ -4509,8 +4506,9 @@ decoration {
     // 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 2px 8px 0 transparent,
+    box-shadow: 0 3px 9px 1px transparent,
-                0 0 0 3px if($variant == 'light', transparentize(black, .85), transparentize(black, .75));
+                0 2px 6px 2px transparentize(black, 0.8),
+                0 0 0 1px $_wm_border_backdrop;
     transition: $backdrop_transition;
   }
 
@@ -4525,11 +4523,12 @@ decoration {
   .popup & { box-shadow: none; }
 
   // server-side decorations as used by mutter
-  .ssd & { box-shadow: none; } //just doing borders, wm draws actual shadows
+  .ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
 
   .csd.popup & {
     border-radius: $menu_radius;
-    box-shadow: 0 1px 4px transparentize(black, 0.8);
+    box-shadow: 0 1px 2px transparentize(black, 0.8),
+                0 0 0 1px transparentize($_wm_border, 0.1);
   }
 
   tooltip.csd & {
@@ -4539,7 +4538,8 @@ decoration {
 
   messagedialog.csd & {
     border-radius: $window_radius;
-    box-shadow: 0 1px 4px transparentize(black, 0.8);
+    box-shadow: 0 1px 2px transparentize(black, 0.8),
+                0 0 0 1px transparentize($_wm_border, 0.1);
   }
 
   .solid-csd & {
@@ -4558,7 +4558,7 @@ decoration {
 button.titlebutton {
   @extend %button_basic;
 
-  @extend %button_basic.flat;
+  @extend %button_basic_flat;
 
   @include _button_text_shadow;
 
@@ -4588,7 +4588,6 @@ headerbar.selection-mode button.titlebutton,
   &:backdrop { -gtk-icon-shadow: none; }
 }
 
-
 // catch all extend :)
 
 %selected_items {
@@ -4597,8 +4596,10 @@ headerbar.selection-mode button.titlebutton,
   @at-root %nobg_selected_items, & {
     color: $selected_fg_color;
 
+    @at-root %selected_items_disabled,
     &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
 
+    @at-root %selected_items_backdrop,
     &:backdrop {
       color: $backdrop_selected_fg_color;
 
@@ -4711,7 +4712,12 @@ stackswitcher button.text-button.circular { // FIXME aggregate with buttons
  * Emoji *
  ********/
 
-popover.emoji-picker { padding-left: 0; padding-right: 0; }
+popover.emoji-picker { 
+  padding-left: 0;
+  padding-right: 0;
+
+  entry.search { margin: 3px 5px 5px 5px; }
+}
 
 button.emoji-section {
   border-color: transparent;
@@ -4731,8 +4737,11 @@ button.emoji-section {
 
   outline-offset: -5px;
 
+  &:first-child { margin-left: 7px; }
+  &:last-child { margin-right: 7px; }
+
   &:backdrop:not(:checked) { border-color: transparent; }
-  &:hover { border-color: $borders_color; }
+  &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
   &:checked { border-color: $selected_bg_color; }
 
   label {
@@ -4748,10 +4757,10 @@ button.emoji-section {
 popover.emoji-picker .emoji {
   font-size: x-large;
   padding: 6px;
-  border-radius: 6px;
 
   :hover {
     background: $selected_bg_color;
+    border-radius: 6px;
   }
 }
 

src/themes/Kali/sass/gtk-sass/upstream/_common.scss.patch

@@ -0,0 +1,4 @@
+15c15
+< $_sizevariant: 'default'; //compact otherwise
+---
+> $_sizevariant: 'compact'; //compact otherwise

src/themes/Kali/sass/gtk-sass/upstream/_drawing.scss

@@ -224,21 +224,6 @@
     background-image: $button_fill;
   }
 
-  @else if $t==active {
-  //
-  // pushed button
-  //
-    color: $tc;
-    outline-color: transparentize($tc, 0.7);
-    border-color: if($c != $bg_color, _border_color($c), $borders_color);
-    $button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global;
-    background-image: $button_fill;
-    @include _shadows(inset 0 3px 3px -2px transparentize($shadow_color, 0.03), $_button_edge);
-
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-  }
-
   @if $t==normal-alt {
   //
   // normal button alternative look
@@ -279,24 +264,19 @@
     background-image: $button_fill;
   }
 
-  @else if $t==active-alt {
+  @else if $t==active {
   //
   // pushed button
   //
     color: $tc;
     outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
-    $button_fill: if($variant == 'light', image(lighten($c, 14%)), image(darken($c, 9%))) !global;
+    $button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global;
     background-image: $button_fill;
     @include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
-    @if $variant == 'light' {
+
-      @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
+    text-shadow: none;
-                        $_button_edge, $_button_shadow);
+    -gtk-icon-shadow: none;
-    }
-    @else {
-      @include _shadows(inset 0 1px $_hilight_color,
-                        $_button_edge, $_button_shadow);
-    }
   }
 
   @else if $t==insensitive {
@@ -601,4 +581,54 @@
   box-shadow: none;              //
 }
 
+/***************************
+ * Check and Radio buttons *
+ ***************************/
+
+ @mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false) {
+  // Check/Radio drawing function
+  //
+  // $t:        check/radio type,
+  // $c:        base button color for colored* types
+  // $tc:       optional text color for colored* types
+  // $checked:  bool to chose between checked/unchecked
+  //
+  // possible $t values:
+  // normal, hover, active, insensitive, backdrop, backdrop-insensitive
+
+  $_border_color: if($c==$checkradio_bg_color, $c, $alt_borders_color);
+  $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7));
+
+  @if $t==normal  {
+    background-clip: if($checked, border-box, padding-box);
+    background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
+    border-color: $_border_color;
+    box-shadow: 0 1px transparentize(black, 0.95);
+    color: $tc;
+  }
+
+  @if $t==hover {
+    background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%));
+  }
+
+  @if $t==active {
+    box-shadow: inset 0 1px 1px 0px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
+  }
+
+  @if $t==insensitive {
+    box-shadow: none;
+    color: transparentize($tc, 0.3);
+  }
+
+  @if $t==backdrop {
+    background-image: image($c);
+    box-shadow: none;
+    color: $tc;
+  }
+
+  @if $t==backdrop-insensitive {
+    box-shadow: none;
+    color: transparentize($tc, 0.3);
+  }
+}
 

src/themes/Kali/sass/gtk-sass/upstream/sync.sh

@@ -0,0 +1,28 @@
+#!/bin/sh
+
+VERSION=3.24.13
+
+echo "[+] Pulling version $VERSION"
+echo
+
+while read file;
+do
+	echo
+	echo "[*] Downloading file $file"
+	echo
+	wget https://gitlab.gnome.org/GNOME/gtk/raw/$VERSION/gtk/theme/Adwaita/$file --timestamping
+
+	if [ -f $file.patch ]
+	then
+		echo "[+] Apply patch"
+		echo
+		patch $file $file.patch
+		echo
+	fi
+done <<- EOF
+	_colors.scss
+	_common.scss
+	_drawing.scss
+	_colors-public.scss
+EOF
+

src/themes/Kali/sass/gtk.scss

@@ -7,7 +7,8 @@
 $variant: 'light';
 
 @import 'gtk-sass/_colors';
-@import 'gtk-sass/_drawing';
+@import 'gtk-sass/upstream/_drawing';
-@import 'gtk-sass/_common';
+@import 'gtk-sass/upstream/_common';
+@import 'gtk-sass/_common-tweaks';
 @import 'gtk-sass/_applications';
-@import 'gtk-sass/_colors-public';
+@import 'gtk-sass/upstream/_colors-public';