Adwaita: .needs-attention dark variant style

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,
+                                      center center, $_dot_shadow_r,
-                                      to(white),
+                                      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,

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%;
+  $_shadow: _text_shadow_color($tc, $bg);
 
-  $_dark: transparentize(black,$_lbg*0.8);
+  @if lightness($tc)<50% {
-  $_bright: transparentize(white,1-$_lbg/($_lbg*1.3));
+    text-shadow: 0 1px $_shadow;
-
+    icon-shadow: 0 1px $_shadow;
-  @if lightness($tc) < 50% {
-    text-shadow: 0 1px $_bright;
-    icon-shadow: 0 1px $_bright;
   }
   @else {
-    text-shadow: 0 -1px $_dark;
+    text-shadow: 0 -1px $_shadow;
-    icon-shadow: 0 -1px $_dark;
+    icon-shadow: 0 -1px $_shadow;
   }
 }
 

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 {

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; }