[gtk+] Adwaita: .needs-attention dark variant style

[Lapo Calamandrei <lapo src gnome org>]

commit 80a109706033c6b07664b14850801a79bc7c0d69
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Tue Jul 22 19:50:15 2014 +0200

    Adwaita: .needs-attention dark variant style

 gtk/resources/theme/Adwaita/_common.scss           |   17 +++++++++---
 gtk/resources/theme/Adwaita/_drawing.scss          |   27 +++++++++++++------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |    6 ++--
 gtk/resources/theme/Adwaita/gtk-contained.css      |    2 +-
 4 files changed, 34 insertions(+), 18 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index e639f01..df40179 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -248,13 +248,16 @@ GtkLabel {
  * Buttons *
  ***********/
 
+// stuff for .needs-attention
+$_dot_color: if($variant=='light', $selected_bg_color,
+                                   lighten($selected_bg_color,15%));
 @keyframes needs_attention {
   from {
     //background-size: 0 0, 0 0;
     background-image: -gtk-gradient(radial,
                                     center center, 0,
                                     center center, 0.01,
-                                    to($selected_bg_color),
+                                    to($_dot_color),
                                     to(transparent));
   }
   to {
@@ -267,6 +270,7 @@ GtkLabel {
   }
 }
 
+
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -394,19 +398,22 @@ GtkLabel {
     &.needs-attention > GtkLabel,
     &.needs-attention > GtkImage {
       animation: needs_attention 150ms ease-in;
+      $_dot_shadow: _text_shadow_color();
+      $_dot_shadow_r: if($variant=='light',0.5,0.45);
       background-image: -gtk-gradient(radial,
                                       center center, 0,
                                       center center, 0.5,
-                                      to($selected_bg_color),
+                                      to($_dot_color),
                                       to(transparent)),
                         -gtk-gradient(radial,
                                       center center, 0,
-                                      center center, 0.5,
-                                      to(white),
+                                      center center, $_dot_shadow_r,
+                                      to($_dot_shadow),
                                       to(transparent));
       background-size: 6px 6px, 6px 6px;
       background-repeat: no-repeat;
-      background-position: right 3px, right 4px;
+      @if $variant == 'light' { background-position: right 3px, right 4px; }
+      @else { background-position: right 3px, right 2px; }
       &:backdrop { background-size: 6px 6px, 0 0;}
     }
     &.needs-attention:active > GtkLabel,
diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index 3710b4c..d06bf7e 100644
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -93,6 +93,18 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 
 @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); }
+}
+
 @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
 //
 // helper function for the text emboss effect
@@ -102,18 +114,15 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 // TODO: this functions needs a way to deal with special cases
 //
 
-  $_lbg: lightness($bg)/100%;
-
-  $_dark: transparentize(black,$_lbg*0.8);
-  $_bright: transparentize(white,1-$_lbg/($_lbg*1.3));
+  $_shadow: _text_shadow_color($tc, $bg);
 
-  @if lightness($tc) < 50% {
-    text-shadow: 0 1px $_bright;
-    icon-shadow: 0 1px $_bright;
+  @if lightness($tc)<50% {
+    text-shadow: 0 1px $_shadow;
+    icon-shadow: 0 1px $_shadow;
   }
   @else {
-    text-shadow: 0 -1px $_dark;
-    icon-shadow: 0 -1px $_dark;
+    text-shadow: 0 -1px $_shadow;
+    icon-shadow: 0 -1px $_shadow;
   }
 }
 
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 48821db..dfe59d2 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -258,7 +258,7 @@
  ***********/
 @keyframes needs_attention {
   from {
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#215d9c), 
to(transparent)); }
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#3583d5), 
to(transparent)); }
 
   to {
     background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), 
to(transparent)); } }
@@ -505,10 +505,10 @@
       padding: 3px 6px; }
     .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > 
GtkImage {
       animation: needs_attention 150ms ease-in;
-      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
+      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), 
to(transparent));
       background-size: 6px 6px, 6px 6px;
       background-repeat: no-repeat;
-      background-position: right 3px, right 4px; }
+      background-position: right 3px, right 2px; }
       .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > 
.button.needs-attention > GtkImage:backdrop {
         background-size: 6px 6px, 0 0; }
     .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > 
.button.needs-attention:active > GtkImage {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 8037156..e28d940 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -497,7 +497,7 @@
       padding: 3px 6px; }
     .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > 
GtkImage {
       animation: needs_attention 150ms ease-in;
-      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
+      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 
0.76923)), to(transparent));
       background-size: 6px 6px, 6px 6px;
       background-repeat: no-repeat;
       background-position: right 3px, right 4px; }