[Gtk-3.22] Redesign-Buttons (Phase1)

Darker  color, lighter button color for hover & focus state. Disabled shadows.

Author: khurshid-alam

src/gtk-3.20/scss/_global.scss

@@ -3,7 +3,7 @@
 @import "functions";
 
 // default color scheme
-$bg_color: if($variant == "dark", #444, #eee);
+$bg_color: if($variant == "dark", #444, #dedede);
 $fg_color: if($variant == "dark", #ddd, #555);
 $base_color: if($variant == "dark", #333, #fff);
 $text_color: if($variant == "dark", #eee, #333);

src/gtk-3.20/scss/widgets/_button.scss

@@ -273,14 +273,19 @@
     $border_strength: if(lightness($bg) > 50, 0, .1);
     $shadow_strength: if(lightness($bg) > 50, 0, .1);
 
-    $button_bg: if(hue($bg) == 0deg, shade($bg, 1.08), $bg);
+    $button_bg: if(lightness($bg) > 50, shade($bg, 1.08), shade($bg, 1.2));
 
     @extend %button;
-    @include linear-gradient($button_bg);
-    border-color: border_normal($button_bg);
-
+    @if (lightness($button_bg) > 50) {
+        border-color: border_normal($button_bg);
+        @include linear-gradient($button_bg, 1.08);
+    } @else {
+        @include linear-gradient($button_bg);
+        @include border(rgba(0, 0, 0, .12 + $border_strength));  
+    }
+    
     color: $fg;
-    //box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); //making it flatter
+
 
     &.flat {
         border-color: alpha($button_bg, 0);
@@ -291,24 +296,24 @@
 
     &, &.flat {
         &:focus, &:hover {
-            @include linear-gradient(shade($button_bg, 1.2));
-            @include border(rgba(0, 0, 0, .25 + $border_strength));
+            @if (lightness($button_bg) > 50) {
+                border-color: border_active($button_bg);
+                @include linear-gradient(shade($button_bg, 1.10));
+            } @else {
+                @include linear-gradient(shade($button_bg, 1.2));
+                @include border(rgba(0, 0, 0, .2 + $border_strength));
+            }
 
-            box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
+            
         }
+            
 
         &:checked, &:active {
             @include linear-gradient(shade($button_bg, .7), to top);
-
             color: $white;
-            box-shadow: inset 1px 0 alpha($dark_shadow, .06),
-            inset 0 1px alpha($dark_shadow, .07),
-            inset -1px 0 alpha($dark_shadow, .06),
-            inset 0 -1px alpha($dark_shadow, .05);
 
             &:focus, &:hover {
                 @include linear-gradient(shade($button_bg, .65), to top);
-
                 color: $white;
             }
         }

src/gtk-3.20/scss/widgets/_toolbar.scss

@@ -50,11 +50,12 @@
 }
 
 @mixin inline-toolbar($bg, $fg) {
-    background-image: none;
+    padding: 1px;
     border-width: 0 1px 1px;
     border-style: solid;
     border-color: $borders_color;
-    background-color: mix($borders_color, $bg_color, .7);
+    background-color: shade($bg, 1.08);
+    background-image: none;
 
     &:backdrop {
         border-color: $backdrop_borders_color;