[gnome-shell/wip/snwh/sass-cleanup] theme: refine the button drawing functions; update notifications & keyboard buttons

[Sam Hewitt <snwh src gnome org>]

commit 47a078512fa27292ab8b496711c6b05dfd775c30
Author: Sam Hewitt <sam snwh org>
Date:   Thu Dec 5 14:38:37 2019 -0500

    theme: refine the button drawing functions; update notifications & keyboard buttons

 data/theme/gnome-shell-sass/_colors.scss               |  4 ++--
 data/theme/gnome-shell-sass/_common.scss               |  6 +++---
 data/theme/gnome-shell-sass/_drawing.scss              | 17 +++++++++--------
 data/theme/gnome-shell-sass/widgets/_keyboard.scss     | 15 ++++++++-------
 data/theme/gnome-shell-sass/widgets/_message-list.scss | 18 +++++++++---------
 5 files changed, 31 insertions(+), 29 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 38481a22bc..57d130c0c4 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -25,9 +25,9 @@ $osd_bg_color: if($variant == 'light', rgba(255,255,255,0.9), transparentize(dar
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
 $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
 $osd_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-$osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(255,255,255,0.1));
+$osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), lighten($osd_bg_color, 7%));
 
-$shadow_color: rgba(0,0,0,0.4);
+$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 5d52f68938..842dec703f 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -225,13 +225,13 @@ stage {
 
        &:focus,
        &:hover {
-               margin-top: $base_margin - 1px;
-               margin-bottom: $base_margin + 1px;
+               // margin-top: $base_margin - 1px;
+               // margin-bottom: $base_margin + 1px;
                @include button(hover);
        }
 
        &:active {
                @include button(active);
-               margin: $base_margin;
+               // margin: $base_margin;
        }
 }
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 95f3af8d7e..0565474b30 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -61,7 +61,8 @@
        //
        // colored buttons want the border form the base color
        //
-       @return if($variant == 'light', darken($c, 18%), darken($c, 8%));
+       // @return if($variant == 'light', darken($c, 18%), darken($c, 8%));
+       @return if($variant == 'light', darken($c, 13%), lighten($c, 7%));
 }
 
 @function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
@@ -133,11 +134,11 @@
        // normal button
        @if $t==normal {
                color: $tc;
-               background-color: lighten($c, 3%);
+               background-color: lighten($c, 3%) !important;
                border-width: 1px;
                border-style: solid;
                border-color: draw_border_color($c);
-               @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
+               @include draw_shadows(0 1px 1px 0 $shadow_color);
                // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
                text-shadow: 0 1px $text_shadow_color;
                icon-shadow: 0 1px $text_shadow_color;
@@ -155,11 +156,11 @@
        // hover osd button
        @else if $t==hover {
                color: $tc;
-               background-color: lighten($c,5%);
+               background-color: lighten($c,5%) !important;
                border-width: 1px;
                border-style: solid;
                border-color: draw_border_color(lighten($c,5%));
-               @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
+               @include draw_shadows(0 1px 1px 0 $shadow_color);
                text-shadow: 0 1px $text_shadow_color;
                icon-shadow: 0 1px $text_shadow_color;
        }
@@ -167,10 +168,10 @@
        // active osd button
        @else if $t==active {
                color: $tc;
-               background-color: darken($c,3%);
+               background-color: darken($c,3%) !important;
                border-width: 1px;
                border-style: solid;
-               border-color: draw_border_color($c);
+               border-color: draw_border_color(if($variant == 'light', $c, darken($c,12%)));
                text-shadow: none;
                icon-shadow: none;
                box-shadow: none;
@@ -182,7 +183,7 @@
                border-width: 1px;
                border-style: solid;
                border-color: $insensitive_borders_color;
-               background-color: $insensitive_bg_color;
+               background-color: $insensitive_bg_color !important;
                box-shadow: none;
                text-shadow: none;
                icon-shadow: none;
diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss 
b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 84400d53ef..5cd9caf250 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -2,15 +2,14 @@
 
 $key_size: 1.2em;
 $key_border_radius: $base_border_radius + 3px;
-$key_bg_color: lighten($bg_color, if($variant=='light', 0%, 2%));
+$key_bg_color:  $bg_color;
 // $default_key_bg_color: darken($key_bg_color, 4%);
 $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
 
 
 // draw keys using button function
 %keyboard_key {
-
-       @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
+       @include button(normal, $c:$key_bg_color);
 
        &:focus { @include button(focus);}
        &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
@@ -26,14 +25,16 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 
                .page-indicator-icon {
                        width: 6px;
-                       height: 6px
+                       height: 6px;
+                       &:checked {
+                               background-color:red;
+                       }
                }
        }
 }
 
 // the container for individual keys
 .key-container {
-       background-color: transparent;
        padding: $base_margin;
        spacing: $base_margin;
 }
@@ -47,8 +48,8 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 
        border-radius: $key_border_radius;
 
-       &:grayed { //FIXME
-               background-color: $bg_color;
+       &:grayed { //FIXMEy
+               background-color: darken($bg_color, 3%);
                color: $osd_fg_color;
                border-color: $osd_borders_color;
        }
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 4c5e072910..fbcec05adf 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -111,16 +111,16 @@
        // border: 0 solid $borders_color;
        // border-left-width:1px;
 
-       &:hover { 
+       &:last-child:ltr {
+               border-radius: 0 calc(#{$base_border_radius} + 2px) calc(#{$base_border_radius} + 2px) 0;
+       }
+       &:last-child:rtl {
+               border-radius: calc(#{$base_border_radius} + 2px) 0 0 calc(#{$base_border_radius} + 2px);
+       }
+
+       &:hover {
                background-color: lighten($hover_bg_color, 5%);
                color: $fg_color;
-
-               &:last-child:ltr {
-                       border-radius: 0 $base_border_radius $base_border_radius 0;
-               }
-               &:last-child:rtl {
-                       border-radius: $base_border_radius 0 0 $base_border_radius;
-               }
        }
 
        &:active { 
@@ -138,7 +138,7 @@
 
        // when there is no artwork
        &.fallback {
-               color: darken($fg_color, 10%);
+               color: darken($fg_color, 17%);
                background-color: $bg_color;
                border: 1px solid transparent;
                border-radius: $base_border_radius;