[Gtk-3.22][Button-Redesign] Spinbutton: Fixing color and entry border

Author: khurshid-alam

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

@@ -273,12 +273,12 @@
     $border_strength: if(lightness($bg) > 50, 0, .1);
     $shadow_strength: if(lightness($bg) > 50, 0, .1);
 
-    $button_bg: if(lightness($bg) > 50, shade($bg, 1.08), shade($bg, 1.2));
+    $button_bg: if(lightness($bg) > 50, $bg, shade($bg, 1.2));
 
     @extend %button;
     @if (lightness($button_bg) > 50) {
         border-color: border_normal($button_bg);
-        @include linear-gradient($button_bg, 1.08);
+        @include linear-gradient(shade($button_bg, 1.08));
     } @else {
         @include linear-gradient($button_bg);
         @include border(rgba(0, 0, 0, .12 + $border_strength));  
@@ -298,7 +298,7 @@
         &:focus, &:hover {
             @if (lightness($button_bg) > 50) {
                 border-color: border_active($button_bg);
-                @include linear-gradient(shade($button_bg, 1.10));
+                @include linear-gradient(shade($button_bg, 1.11));
             } @else {
                 @include linear-gradient(shade($button_bg, 1.2));
                 @include border(rgba(0, 0, 0, .2 + $border_strength));
@@ -417,9 +417,16 @@
         }
 
         &:not(.vertical) {
-            @extend %entry;
-            @include linear-gradient($base_color, to top);
-            border-color: border_normal($base_color);
+            @if (lightness($bg_color) > 50) {
+                border: 1px solid border_normal($bg_color);
+                background-color: transparent;
+                background-image: none;
+                box-shadow: inset 1px 0 shade($base_color, .9);
+            } @else {
+                @extend %entry;
+                @include linear-gradient($base_color, to top);
+                @include border($base_color);
+            }
 
             padding: 0;
 
@@ -444,11 +451,18 @@
                 border-radius: 0;
                 border-color: alpha($borders_color, .8);
                 border-style: none none none solid;
-                background-color: shade($bg_color, 1.08);
                 background-image: none;
                 box-shadow: none;
 
-                &:hover { background-color: shade($bg_color, 1.2); }
+                @if (lightness($bg_color) > 50) {
+                    background-color: shade($bg_color, 1.08);
+                }
+
+                &:hover { 
+                    @if (lightness($bg_color) > 50) {
+                        background-color: shade($bg_color, 1.11);
+                    } 
+                }
 
                 &:dir(rtl) { border-style: none solid none none; }
 

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

@@ -90,11 +90,16 @@
     border-width: 1px;
     border-style: solid;
     border-radius: $roundness;
-    transition: border 150ms ease;
-    box-shadow: inset 1px 1px alpha($dark_shadow, .06),
-                inset -1px 0 alpha($dark_shadow, .06);
+    border-color: border_normal($bg_color);
+    transition: border 100ms ease-out;
+    &:focus, &:hover, &:active { transition: border 100ms ease-in; }
+
+    box-shadow: inset 1px 0 alpha($dark_shadow, 0.10),
+                inset 0 1px alpha($dark_shadow, 0.12),
+                inset -1px 0 alpha($dark_shadow, 0.10),
+                inset 0 -1px alpha($dark_shadow, 0.05);
+
 
-    &:focus, &:hover, &:active { transition: none; }
 
     &:selected {
         &, &:selected:focus {
@@ -149,7 +154,7 @@
 @mixin entry($bg, $fg, $border: $borders_color) {
     @extend %entry;
     @include linear-gradient($bg, to top);
-    @include border($bg);
+    border-color: border_normal($bg);
 
     padding: $spacing;