[gtk/wip/jimmac/drop-text-shadow: 9/9] Adwaita: drop text shadows for buttons



commit b6353a6369511b9359fe1c5ea88712b1aea8df23
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Apr 15 15:27:17 2020 +0200

    Adwaita: drop text shadows for buttons
    
    - People seem to misunderstand the unsharp-mask-like increase
      of visual contrast for "fuziness". That is not the reason for
      the change. The stylistic change of just going with flat
      text label allows to simplify the code and drop complexity.
    
    Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/2280

 gtk/theme/Adwaita/_common.scss  |  7 ++-----
 gtk/theme/Adwaita/_drawing.scss | 34 ----------------------------------
 2 files changed, 2 insertions(+), 39 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index bdb4877bd2..e7c727cd40 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -903,10 +903,8 @@ button {
   // the dot is drawn by using two radial gradient, the first one is the actuall dot, the other
   // simulates the shadow labels and icons normally have in buttons.
   animation: needs_attention 150ms ease-in;
-  $_dot_shadow: _text_shadow_color(); // shadow color
 
-  background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )),
-                    radial-gradient(farthest-side, $_dot_shadow 95%, transparentize($_dot_shadow, 1));
+  background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
 
@@ -1017,7 +1015,7 @@ button.color {
     &, > overlay { border-radius: 0; }
 
     @if $variant == 'light' {
-      box-shadow: 0 1px _text_shadow_color();
+      box-shadow: 0 1px $shadow_color;
 
       .osd & { box-shadow: none; }
     }
@@ -4165,7 +4163,6 @@ button.titlebutton {
 
   @extend %button_basic_flat;
 
-  @include _button_text_shadow;
 
   &:not(.menu) {
     border-radius: 9999px;
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 7020c4044f..1e601a63af 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -123,17 +123,6 @@
   @else { @return darken($c, 10%); }
 }
 
-@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); }
-}
 
 @function _button_hilight_color($c) {
 //
@@ -149,26 +138,7 @@
   @else { @return transparentize(white, 0.98); }
 }
 
-@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
-//
-// helper function for the text emboss effect
-//
-// $tc is the optional text color, not the shadow color
-//
-// TODO: this functions needs a way to deal with special cases
-//
-
-  $_shadow: _text_shadow_color($tc, $bg);
 
-  @if lightness($tc)<50% {
-    text-shadow: 0 1px $_shadow;
-    -gtk-icon-shadow: 0 1px $_shadow;
-  }
-  @else {
-    text-shadow: 0 -1px $_shadow;
-    -gtk-icon-shadow: 0 -1px $_shadow;
-  }
-}
 
 @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: none) {
 //
@@ -202,7 +172,6 @@
     $button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
                                           linear-gradient(to top, darken($c,1%) 2px, $c)) !global;
     background-image: $button_fill;
-    @include _button_text_shadow($tc, $c);
     @include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);
   }
 
@@ -215,12 +184,10 @@
     border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
       $button_fill: linear-gradient(to top, $c, lighten($c, 1%) 1px) !global;
-      @include _button_text_shadow($tc, lighten($c, 6%));
       @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow);
     }
     @else {
       $button_fill: linear-gradient(to top, darken($c,1%), lighten($c, 1%) 1px) !global;
-      @include _button_text_shadow($tc,lighten($c, 6%));
       @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow);
     }
     background-image: $button_fill;
@@ -232,7 +199,6 @@
   //
     color: $tc;
     border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
-    @include _button_text_shadow($tc, $c);
     @if $variant == 'light' {
       background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
       @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]