From 1a4cb9525eab9d742d39e6e873444136cc086d43 Mon Sep 17 00:00:00 2001
From: Siddharth <sidgroks@gmail.com>
Date: Sun, 16 Aug 2015 18:58:10 +0530
Subject: [PATCH] Fade-out Improvement

---
 gtk-3.0/scss/_functions.scss          |  8 -----
 gtk-3.0/scss/apps/_gedit.scss         | 16 ++++-----
 gtk-3.0/scss/apps/_lightdm.scss       | 28 ++++++++--------
 gtk-3.0/scss/apps/_unity-greeter.scss | 30 ++++++++---------
 gtk-3.0/scss/widgets/_base.scss       |  4 +--
 gtk-3.0/scss/widgets/_button.scss     | 48 +++++++++++++--------------
 gtk-3.0/scss/widgets/_choosers.scss   | 22 ++++++------
 gtk-3.0/scss/widgets/_entry.scss      |  4 +--
 gtk-3.0/scss/widgets/_grid.scss       |  2 +-
 gtk-3.0/scss/widgets/_menu.scss       | 12 +++----
 gtk-3.0/scss/widgets/_misc.scss       | 16 ++++-----
 gtk-3.0/scss/widgets/_notebook.scss   |  4 +--
 gtk-3.0/scss/widgets/_osd.scss        |  2 +-
 gtk-3.0/scss/widgets/_overshoot.scss  | 12 +++----
 gtk-3.0/scss/widgets/_progress.scss   | 12 +++----
 gtk-3.0/scss/widgets/_scrollbar.scss  |  2 +-
 gtk-3.0/scss/widgets/_toggle.scss     | 10 +++---
 gtk-3.0/scss/widgets/_view.scss       |  8 ++---
 18 files changed, 116 insertions(+), 124 deletions(-)

diff --git a/gtk-3.0/scss/_functions.scss b/gtk-3.0/scss/_functions.scss
index 0de71b6..d693099 100755
--- a/gtk-3.0/scss/_functions.scss
+++ b/gtk-3.0/scss/_functions.scss
@@ -8,14 +8,6 @@ $modules: () !default;
     }
 }
 
-@function alpha($color, $amount) {
-    @if type-of($color) == "color" {
-        @return fade-out($color, (1 - $amount));
-    } @else {
-        @return unquote("alpha(#{$color},#{$amount})");
-    }
-}
-
 @function shade($color, $amount) {
     @if type-of($color) == "color" {
         @if ($amount > 1) {
diff --git a/gtk-3.0/scss/apps/_gedit.scss b/gtk-3.0/scss/apps/_gedit.scss
index f1614a6..1fde818 100644
--- a/gtk-3.0/scss/apps/_gedit.scss
+++ b/gtk-3.0/scss/apps/_gedit.scss
@@ -34,19 +34,19 @@
         }
 
         .prelight-row .button {
-            border-color: alpha($black, .1);
-            color: alpha($white, .8);
+            border-color: fade-out($black, .9);
+            color: fade-out($white, .2);
 
             &:active {
-                border-color: alpha($black, .2);
-                background-color: alpha($black, .08);
+                border-color: fade-out($black, .8);
+                background-color: fade-out($black, .02);
                 color: $white;
             }
         }
 
         list-row, .prelight-row {
             .button:hover {
-                border-color: alpha($black, .1);
+                border-color: fade-out($black, .9);
                 color: $white;
             }
         }
@@ -68,14 +68,14 @@
     }
 
     .gedit-document-panel-dragged-row {
-        border: 1px solid alpha($black, .1);
-        background-color: alpha($black, .5);
+        border: 1px solid fade-out($black, .9);
+        background-color: fade-out($black, .5);
         color: $white;
     }
 
     .gedit-document-panel-placeholder-row {
         border: 0;
-        background-color: alpha($black, .08);
+        background-color: fade-out($black, .02);
         transition: all 200ms ease-in;
     }
 
diff --git a/gtk-3.0/scss/apps/_lightdm.scss b/gtk-3.0/scss/apps/_lightdm.scss
index 52eda61..26912e2 100644
--- a/gtk-3.0/scss/apps/_lightdm.scss
+++ b/gtk-3.0/scss/apps/_lightdm.scss
@@ -8,8 +8,8 @@
         background-image: none;
         color: $white;
         font: bold;
-        text-shadow: 0 1px alpha($black, .5);
-        icon-shadow: 0 1px alpha($black, .5);
+        text-shadow: 0 1px fade-out($black, .5);
+        icon-shadow: 0 1px fade-out($black, .5);
 
         .menubar {
             &, > .menuitem {
@@ -17,19 +17,19 @@
                 background-image: none;
                 color: $white;
                 font: bold;
-                text-shadow: 0 1px alpha($black, .5);
-                icon-shadow: 0 1px alpha($black, .5);
+                text-shadow: 0 1px fade-out($black, .5);
+                icon-shadow: 0 1px fade-out($black, .5);
 
                 *:hover { color: $white; }
 
                 &:hover {
                     border-style: none;
-                    background-color: alpha($white, .2);
+                    background-color: fade-out($white, .8);
                     background-image: none;
                     color: $white;
                 }
 
-                &:insensitive { color: alpha($white, .7); }
+                &:insensitive { color: fade-out($white, .3); }
 
                 .menu {
                     border-radius: 1px;
@@ -111,10 +111,10 @@
             &:focus, &:hover {
                 border-color: shade($lightdm_bg_color, .7);
 
-                box-shadow: inset 1px 0 alpha($dark_shadow, .1),
-                            inset 0 1px alpha($dark_shadow, .12),
-                            inset -1px 0 alpha($dark_shadow, .1),
-                            inset 0 -1px alpha($dark_shadow, .05);
+                box-shadow: inset 1px 0 fade-out($dark_shadow, .9),
+                            inset 0 1px fade-out($dark_shadow, .98),
+                            inset -1px 0 fade-out($dark_shadow, .9),
+                            inset 0 -1px fade-out($dark_shadow, .05);
             }
         }
     }
@@ -143,10 +143,10 @@
         border-radius: $roundness;
         background-color: shade($lightdm_bg_color, .9);
         background-image: none;
-        box-shadow: inset 1px 0 alpha($dark_shadow, .07),
-                    inset 0 1px alpha($dark_shadow, .08),
-                    inset -1px 0 alpha($dark_shadow, .07),
-                    inset 0 -1px alpha($dark_shadow, .05);
+        box-shadow: inset 1px 0 fade-out($dark_shadow, .03),
+                    inset 0 1px fade-out($dark_shadow, .02),
+                    inset -1px 0 fade-out($dark_shadow, .03),
+                    inset 0 -1px fade-out($dark_shadow, .05);
     }
 
     #buttonbox_frame {
diff --git a/gtk-3.0/scss/apps/_unity-greeter.scss b/gtk-3.0/scss/apps/_unity-greeter.scss
index eb60d2a..9e4f583 100644
--- a/gtk-3.0/scss/apps/_unity-greeter.scss
+++ b/gtk-3.0/scss/apps/_unity-greeter.scss
@@ -7,8 +7,8 @@
 
 .lightdm.menu {
     background-image: none;
-    background-color: alpha($black, 0.6);
-    border-color: alpha($white, 0.2);
+    background-color: fade-out($black, 0.4);
+    border-color: fade-out($white, 0.8);
     border-radius: 4px;
     padding: 1px;
 
@@ -31,7 +31,7 @@
 
 .lightdm.menubar {
     background-image: none;
-    background-color: alpha(#00ff00, 0.5);
+    background-color: fade-out(#00ff00, 0.5);
 }
 
 
@@ -42,16 +42,16 @@
     
     .lightdm.button{
         background-image: none;
-        background-color: alpha($black, 0.3);
-        border-color: alpha($white, 0.9);
+        background-color: fade-out($black, 0.7);
+        border-color: fade-out($white, 0.1);
         border-radius: 5px;
         padding: 5px;
         color: $white;
         }
     .lightdm.button:hover {
         background-image: none;
-        background-color: alpha($white, 0.3);
-        border-color: alpha($white, 0.6);
+        background-color: fade-out($white, 0.7);
+        border-color: fade-out($white, 0.4);
         border-radius: 5px;
         padding: 5px;
         color: $white;
@@ -63,8 +63,8 @@
 
     .lightdm.entry {
         background-image: none;
-        background-color: alpha($black, 0.3);
-        border-color: alpha($white, 0.6);
+        background-color: fade-out($black, 0.7);
+        border-color: fade-out($white, 0.4);
         border-radius: 5px;
         padding: 7px;
         color: $white;
@@ -77,13 +77,13 @@
         border-image: none;
     }
     .lightdm.entry:focused {
-        border-color: alpha($white, 0.6);
+        border-color: fade-out($white, 0.4);
         border-width: 1px;
         border-style: solid;
         color: $white;
     }
     .lightdm.entry:selected {
-        background-color: alpha($white, 0.2);
+        background-color: fade-out($white, 0.8);
     }
 
     @keyframes dashentry_spinner {
@@ -106,13 +106,13 @@
         border-width: 0;
     }
     .lightdm.toggle-button.selected:hover {
-        background-color: alpha($white, 0.3);
-        border-color: alpha($white, 0.3);
+        background-color: fade-out($white, 0.7);
+        border-color: fade-out($white, 0.7);
         border-width: 1px;
     }
     .lightdm.toggle-button.selected {
-        background-color: alpha($black, 0.3);
-        border-color: alpha($white, 0.3);
+        background-color: fade-out($black, 0.7);
+        border-color: fade-out($white, 0.7);
         border-width: 1px;
     }
 }
diff --git a/gtk-3.0/scss/widgets/_base.scss b/gtk-3.0/scss/widgets/_base.scss
index eddb5be..edaee1f 100755
--- a/gtk-3.0/scss/widgets/_base.scss
+++ b/gtk-3.0/scss/widgets/_base.scss
@@ -11,7 +11,7 @@
     -GtkWindow-resize-grip-width: 0;
     -WnckTasklist-fade-overlay-rect: 0;
 
-    outline-color: alpha($selected_bg_color, .5);
+    outline-color: fade-out($selected_bg_color, .5);
     outline-style: dashed;
     outline-width: 1px;
     outline-offset: -1px;
@@ -62,7 +62,7 @@
 }
 
 .gtkstyle-fallback {
-    background-color: alpha($bg_color, .5);
+    background-color: fade-out($bg_color, .5);
     color: $fg_color;
 
     &:prelight {
diff --git a/gtk-3.0/scss/widgets/_button.scss b/gtk-3.0/scss/widgets/_button.scss
index c1b92aa..5a86b68 100755
--- a/gtk-3.0/scss/widgets/_button.scss
+++ b/gtk-3.0/scss/widgets/_button.scss
@@ -79,11 +79,11 @@
     @extend %linked_button;
 
     box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)),
-                0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
+                0 1px 2px -1px fade-out($dark_shadow, .98 + $shadow_strength);
 
     &:focus, &:hover {
         box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)),
-                    0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
+                    0 1px 2px -1px fade-out($dark_shadow, .78 + $shadow_strength);
     }
 
     &:active, &:active:hover,
@@ -91,15 +91,15 @@
     &:checked, &:checked:hover,
     &:checked:focus, &:checked:hover:focus {
         box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)),
-                    inset 0 1px alpha($dark_shadow, .07),
-                    inset 0 -1px alpha($dark_shadow, .05);
+                    inset 0 1px fade-out($dark_shadow, .13),
+                    inset 0 -1px fade-out($dark_shadow, .15);
     }
 
     &:insensitive { box-shadow: inset -1px 0 shade($bg, .8); }
 
-    &:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); }
+    &:last-child, &:only-child { box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .98 + $shadow_strength); }
 
-    &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); }
+    &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .78 + $shadow_strength); }
 
     &:insensitive:last-child, &:insensitive:only-child,
     &:active:insensitive:last-child, &:active:insensitive:only-child,
@@ -107,15 +107,15 @@
 
     &:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus,
     &:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus, {
-        box-shadow: inset 0 1px alpha($dark_shadow, .07),
-                    inset -1px 0 alpha($dark_shadow, .06);
+        box-shadow: inset 0 1px fade-out($dark_shadow, .13),
+                    inset -1px 0 fade-out($dark_shadow, .14);
     }
 
     &:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus,
     &:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus {
-        box-shadow: inset 1px 0 alpha($dark_shadow, .06),
-                    inset 0 1px alpha($dark_shadow, .07),
-                    inset -1px 0 alpha($dark_shadow, .06);
+        box-shadow: inset 1px 0 fade-out($dark_shadow, .14),
+                    inset 0 1px fade-out($dark_shadow, .13),
+                    inset -1px 0 fade-out($dark_shadow, .14);
     }
 }
 
@@ -130,11 +130,11 @@
     @include border(rgba(0, 0, 0, .12 + $border_strength));
 
     color: $fg;
-    box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
+    box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .12 + $shadow_strength);
 
     &.flat {
-        border-color: alpha($button_bg, 0);
-        background-color: alpha($button_bg, 0);
+        border-color: fade-out($button_bg, 1);
+        background-color: fade-out($button_bg, 1);
         background-image: none;
         box-shadow: none;
     }
@@ -144,17 +144,17 @@
             @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);
+            box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .78 + $shadow_strength);
         }
 
         &:active, &:checked {
             @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);
+            box-shadow: inset 1px 0 fade-out($dark_shadow, .14),
+                        inset 0 1px fade-out($dark_shadow, .13),
+                        inset -1px 0 fade-out($dark_shadow, .14),
+                        inset 0 -1px fade-out($dark_shadow, .15);
 
             &:focus, &:hover {
                 @include linear-gradient(shade($button_bg, .65), to top);
@@ -176,7 +176,7 @@
             @if (lightness($button_bg) > 50) {
                 @include linear-gradient(shade($button_bg, .95));
             } @else {
-                @include linear-gradient(alpha($button_bg, .3));
+                @include linear-gradient(fade-out($button_bg, .7));
             }
 
             color: mix($bg, $fg, .5);
@@ -212,15 +212,15 @@
         box-shadow: none;
 
         &:focus, &:hover {
-            border: 1px solid alpha($black, .3);
-            background-color: alpha($white, .2);
+            border: 1px solid fade-out($black, .7);
+            background-color: fade-out($white, .8);
             background-image: none;
             box-shadow: none;
         }
 
         &:active, &:checked, &:active:hover, &:checked:hover {
-            border: 1px solid alpha($black, .3);
-            background-color: alpha($black, .1);
+            border: 1px solid fade-out($black, .4);
+            background-color: fade-out($black, .9);
             background-image: none;
             box-shadow: none;
         }
diff --git a/gtk-3.0/scss/widgets/_choosers.scss b/gtk-3.0/scss/widgets/_choosers.scss
index b650c47..07f27a2 100644
--- a/gtk-3.0/scss/widgets/_choosers.scss
+++ b/gtk-3.0/scss/widgets/_choosers.scss
@@ -5,12 +5,12 @@
 @include exports("colorchooser") {
     GtkColorSwatch {
         &, &:selected {
-            border: 1px solid alpha($black, .1);
+            border: 1px solid fade-out($black, .9);
             border-radius: $roundness - 1px;
             background-color: transparent;
             background-clip: border-box;
 
-            &:hover { border-color: alpha($black, .3); }
+            &:hover { border-color: fade-out($black, .7); }
         }
 
         &.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
@@ -42,19 +42,19 @@
 
             &.color-dark:hover, &.color-light:hover {
                 background-image: none;
-                border-color: alpha($black, .3);
+                border-color: fade-out($black, .7);
             }
         }
     }
 
     GtkColorChooserWidget #add-color-button {
         background-clip: padding-box;
-        border-color: alpha($black, .1);
+        border-color: fade-out($black, .9);
         background-color: shade($bg_color, .95);
         color: $fg_color;
 
         &:hover {
-            border-color: alpha($black, .3);
+            border-color: fade-out($black, .7);
             background-color: shade($bg_color, .9);
             color: $fg_color;
         }
@@ -69,15 +69,15 @@
 
         &.color-light {
             &, &:hover {
-                border-color: alpha($black, .3);
-                color: alpha($black, .3);
+                border-color: fade-out($black, .7);
+                color: fade-out($black, .7);
             }
         }
 
         &.color-dark {
             &, &:hover {
-                border-color: alpha($white, .3);
-                color: alpha($white, .3);
+                border-color: fade-out($white, .7);
+                color: fade-out($white, .7);
             }
         }
     }
@@ -99,9 +99,9 @@
             -GtkWidget-vertical-separator: 0;
         }
 
-        GtkLabel:last-child { color: alpha(currentColor, .7); }
+        GtkLabel:last-child { color: fade-out(currentColor, .3); }
 
-        GtkImage:last-child { color: alpha(currentColor, .7); }
+        GtkImage:last-child { color: fade-out(currentColor, .3); }
     }
 
     GtkFileChooser {
diff --git a/gtk-3.0/scss/widgets/_entry.scss b/gtk-3.0/scss/widgets/_entry.scss
index e8d7562..f752aa8 100755
--- a/gtk-3.0/scss/widgets/_entry.scss
+++ b/gtk-3.0/scss/widgets/_entry.scss
@@ -36,8 +36,8 @@
     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);
+    box-shadow: inset 1px 1px fade-out($dark_shadow, .14),
+                inset -1px 0 fade-out($dark_shadow, .14);
 
     &:focus, &:hover, &:active { transition: none; }
 
diff --git a/gtk-3.0/scss/widgets/_grid.scss b/gtk-3.0/scss/widgets/_grid.scss
index e4b9e8f..0ed0d87 100644
--- a/gtk-3.0/scss/widgets/_grid.scss
+++ b/gtk-3.0/scss/widgets/_grid.scss
@@ -13,7 +13,7 @@
                 border-radius: 0;
                 padding: $spacing;
                 background-image: none;
-                background-color: alpha($bg_color, 0);
+                background-color: fade-out($bg_color, 1);
                 box-shadow: none;
 
                 &:hover {
diff --git a/gtk-3.0/scss/widgets/_menu.scss b/gtk-3.0/scss/widgets/_menu.scss
index 1973351..0bca5f5 100755
--- a/gtk-3.0/scss/widgets/_menu.scss
+++ b/gtk-3.0/scss/widgets/_menu.scss
@@ -144,11 +144,11 @@
         }
 
         .accelerator {
-            color: alpha($menu_fg_color, .6);
+            color: fade-out($menu_fg_color, .4);
 
-            &:hover { color: alpha($selected_fg_color, .8); }
+            &:hover { color: fade-out($selected_fg_color, .2); }
 
-            &:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
+            &:insensitive { color: fade-out(mix($menu_fg_color, $menu_bg_color, .5), .6); }
         }
 
         .entry { @include entry($menu_bg_color, $menu_fg_color); }
@@ -175,7 +175,7 @@
         background-color: $menu_bg_color;
         background-image: none;
         color: $menu_fg_color;
-        box-shadow: 0 3px 6px alpha($black, .16);
+        box-shadow: 0 3px 6px fade-out($black, .04);
 
         &.background {
             background-image: none;
@@ -186,7 +186,7 @@
         &:backdrop { box-shadow: none; }
 
         &.osd {
-            box-shadow: 0 2px 7px 3px alpha($black, .5);
+            box-shadow: 0 2px 7px 3px fade-out($black, .5);
 
             > .toolbar .button {
                 border-radius: 0;
@@ -230,7 +230,7 @@
         .separator {
             border: 0;
             background-color: transparent;
-            color: alpha($menu_bg_color, .5);
+            color: fade-out($menu_bg_color, .5);
             font-size: 80%;
             font-weight: bold;
         }
diff --git a/gtk-3.0/scss/widgets/_misc.scss b/gtk-3.0/scss/widgets/_misc.scss
index b5a6cc9..cdf3ca7 100644
--- a/gtk-3.0/scss/widgets/_misc.scss
+++ b/gtk-3.0/scss/widgets/_misc.scss
@@ -81,17 +81,17 @@
     }
 
     .expander {
-        color: alpha(currentColor, .7);
-        border: alpha(currentColor, .7);
+        color: fade-out(currentColor, .3);
+        border: fade-out(currentColor, .3);
 
         &:hover {
-            color: alpha(currentColor, .8);
-            border-color: alpha(currentColor, .8);
+            color: fade-out(currentColor, .2);
+            border-color: fade-out(currentColor, .2);
         }
 
         &:active {
-            color: alpha(currentColor, .9);
-            border-color: alpha(currentColor, .9);
+            color: fade-out(currentColor, .1);
+            border-color: fade-out(currentColor, .1);
         }
     }
 }
@@ -103,9 +103,9 @@
 
 @include exports("symbolicimage") {
     .image {
-        color: alpha(currentColor, .5);
+        color: fade-out(currentColor, .5);
 
-        &:hover { color: alpha(currentColor, .9); }
+        &:hover { color: fade-out(currentColor, .1); }
 
         &:selected, &:selected:hover { color: $selected_fg_color; }
     }
diff --git a/gtk-3.0/scss/widgets/_notebook.scss b/gtk-3.0/scss/widgets/_notebook.scss
index 9447d30..125d790 100644
--- a/gtk-3.0/scss/widgets/_notebook.scss
+++ b/gtk-3.0/scss/widgets/_notebook.scss
@@ -110,7 +110,7 @@
                 border-left: 0;
                 border-right: 0;
                 /* using box shadows instead of borders due to slanted edges */
-                box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
+                box-shadow: inset 0 3px fade-out($black, .17), inset 0 2px fade-out($black, .17), inset 0 1px fade-out($black, .17),
                             inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
             }
 
@@ -118,7 +118,7 @@
                 background-color: shade($base_color, .9);
                 border-left: 0;
                 border-right: 0;
-                box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
+                box-shadow: inset 0 3px fade-out($black, .17), inset 0 2px fade-out($black, .17), inset 0 1px fade-out($black, .17),
                             inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
             }
         }
diff --git a/gtk-3.0/scss/widgets/_osd.scss b/gtk-3.0/scss/widgets/_osd.scss
index dbf1d16..b8c06fa 100644
--- a/gtk-3.0/scss/widgets/_osd.scss
+++ b/gtk-3.0/scss/widgets/_osd.scss
@@ -10,7 +10,7 @@
 
     .osd {
         &.background {
-            background-color: alpha($osd_bg, .8);
+            background-color: fade-out($osd_bg, .2);
             color: $osd_fg;
         }
 
diff --git a/gtk-3.0/scss/widgets/_overshoot.scss b/gtk-3.0/scss/widgets/_overshoot.scss
index bc3d1fd..ea99d65 100644
--- a/gtk-3.0/scss/widgets/_overshoot.scss
+++ b/gtk-3.0/scss/widgets/_overshoot.scss
@@ -25,14 +25,14 @@
     $_small_gradient: -gtk-gradient(radial,
                                     $_position, 0,
                                     $_position, .5,
-                                    to(alpha($_small_gradient_color, .35)),
-                                    to(alpha($_small_gradient_color, .25)));
+                                    to(fade-out($_small_gradient_color, .75)),
+                                    to(fade-out($_small_gradient_color, .85)));
 
     $_big_gradient: -gtk-gradient(radial,
                                   $_position, 0,
                                   $_position, .6,
-                                  from(alpha($_big_gradient_color, .2)),
-                                  to(alpha($_big_gradient_color, 0)));
+                                  from(fade-out($_big_gradient_color, .8)),
+                                  to(fade-out($_big_gradient_color, 1)));
 
     @if $type == normal {
         background-image: $_small_gradient, $_big_gradient;
@@ -51,8 +51,8 @@
 }
 
 @mixin undershoot($position) {
-    $_undershoot_color_dark: alpha($black, .2);
-    $_undershoot_color_light: alpha($white, .2);
+    $_undershoot_color_dark: fade-out($black, .8);
+    $_undershoot_color_light: fade-out($white, .8);
 
     $_gradient_dir: left;
     $_dash_bg_size: 10px 1px;
diff --git a/gtk-3.0/scss/widgets/_progress.scss b/gtk-3.0/scss/widgets/_progress.scss
index 28df150..3789029 100644
--- a/gtk-3.0/scss/widgets/_progress.scss
+++ b/gtk-3.0/scss/widgets/_progress.scss
@@ -7,7 +7,7 @@
         padding: 0;
         border-radius: $roundness;
         font-size: smaller;
-        color: alpha($fg_color, .6);
+        color: fade-out($fg_color, .4);
 
         -GtkProgressBar-min-horizontal-bar-height: 6;
         -GtkProgressBar-min-vertical-bar-width: 6;
@@ -19,7 +19,7 @@
         }
 
         &.trough {
-            border: 1px solid alpha(border_normal($bg_color), .5);
+            border: 1px solid fade-out(border_normal($bg_color), .5);
             background-color: shade($bg_color, 1.08);
             background-image: none;
         }
@@ -72,7 +72,7 @@
         &.trough {
             @include linear-gradient(shade($bg_color, 1.08), to top);
 
-            border: 1px solid alpha(border_normal($bg_color), .5);
+            border: 1px solid fade-out(border_normal($bg_color), .5);
             border-radius: $roundness;
         }
 
@@ -126,7 +126,7 @@
             border-radius: 8px;
             border-width: 1px;
             border-style: solid;
-            box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3);
+            box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .7);
 
             &:insensitive { @include linear-gradient(shade($bg_color, .9)); }
         }
@@ -141,14 +141,14 @@
             }
         }
 
-        &.mark { border-color: alpha(border_normal($bg_color), .5); }
+        &.mark { border-color: fade-out(border_normal($bg_color), .5); }
 
 
         &.trough {
             @include linear-gradient(shade($bg_color, 1.08));
 
             margin: 7px 0;
-            border: 1px solid alpha(border_normal($bg_color), .5);
+            border: 1px solid fade-out(border_normal($bg_color), .5);
             border-radius: $roundness;
 
             &:insensitive { @include linear-gradient(shade($bg_color, .9)); }
diff --git a/gtk-3.0/scss/widgets/_scrollbar.scss b/gtk-3.0/scss/widgets/_scrollbar.scss
index 56156d4..3774366 100644
--- a/gtk-3.0/scss/widgets/_scrollbar.scss
+++ b/gtk-3.0/scss/widgets/_scrollbar.scss
@@ -25,7 +25,7 @@
                 border-radius: 0;
                 background-color: transparent;
                 background-image: none;
-                color: alpha($fg_color, .5);
+                color: fade-out($fg_color, .5);
             }
         }
 
diff --git a/gtk-3.0/scss/widgets/_toggle.scss b/gtk-3.0/scss/widgets/_toggle.scss
index 52bdee3..4bdb2ff 100755
--- a/gtk-3.0/scss/widgets/_toggle.scss
+++ b/gtk-3.0/scss/widgets/_toggle.scss
@@ -79,7 +79,7 @@ $suffix: if($variant == "dark", "-dark", "");
             @include linear-gradient(shade($bg_color, 1.2));
 
             border: 1px solid rgba(0, 0, 0, .2);
-            box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12);
+            box-shadow: 0 1px 2px -1px fade-out($dark_shadow, .08);
 
             &:insensitive {
                 border-color: rgba(0, 0, 0, .1);
@@ -93,10 +93,10 @@ $suffix: if($variant == "dark", "-dark", "");
 
             border: 1px solid border_normal($bg_color);
             color: $fg_color;
-            box-shadow: inset 1px 0 alpha($dark_shadow, .07),
-                        inset 0 1px alpha($dark_shadow, .08),
-                        inset -1px 0 alpha($dark_shadow, .07),
-                        inset 0 -1px alpha($dark_shadow, .05);
+            box-shadow: inset 1px 0 fade-out($dark_shadow, .13),
+                        inset 0 1px fade-out($dark_shadow, .12),
+                        inset -1px 0 fade-out($dark_shadow, .13),
+                        inset 0 -1px fade-out($dark_shadow, .15);
 
             &:active {
                 @include linear-gradient($selected_bg_color, to top);
diff --git a/gtk-3.0/scss/widgets/_view.scss b/gtk-3.0/scss/widgets/_view.scss
index d868914..f873114 100644
--- a/gtk-3.0/scss/widgets/_view.scss
+++ b/gtk-3.0/scss/widgets/_view.scss
@@ -45,7 +45,7 @@
         &.view {
             background-color: $base_color;
 
-            &:prelight { background-color: alpha($selected_bg_color, .6); }
+            &:prelight { background-color: fade-out($selected_bg_color, .4); }
 
             &:selected, &:active { background-color: $selected_bg_color; }
 
@@ -77,20 +77,20 @@
     }
 
     .dim-label {
-        &, &.view { color: alpha(currentColor, .5); }
+        &, &.view { color: fade-out(currentColor, .5); }
     }
 
     .dnd { border: 1px solid $selected_bg_color; }
 
     .grip { background-color: transparent; }
 
-    .arrow { color: alpha(currentColor, .7); }
+    .arrow { color: fade-out(currentColor, .3); }
 
     .rubberband {
         &, &.view, &.content-view.view {
             border: 1px solid $selected_bg_color;
             border-radius: 0;
-            background-color: alpha($selected_bg_color, .3);
+            background-color: fade-out($selected_bg_color, .7);
         }
     }