[gnome-shell/wip/snwh/sass-cleanup] theme: buttonize notification bubbles

[Sam Hewitt <snwh src gnome org>]

commit ba5667e1b7265ee3efa855e0f72a7cfa0a0e2275
Author: Sam Hewitt <sam snwh org>
Date:   Tue Dec 3 12:43:08 2019 -0500

    theme: buttonize notification bubbles

 data/theme/gnome-shell-sass/_colors.scss           |  1 +
 data/theme/gnome-shell-sass/_common.scss           | 29 +++++++++++++---------
 data/theme/gnome-shell-sass/_drawing.scss          | 12 ++++-----
 data/theme/gnome-shell-sass/widgets/_calendar.scss |  4 +--
 data/theme/gnome-shell.scss                        |  2 +-
 5 files changed, 27 insertions(+), 21 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 2a0b6739dd..ad69b1589f 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -28,6 +28,7 @@ $osd_borders_color:  if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0
 $osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(255,255,255,0.1));
 
 $shadow_color: rgba(0,0,0,0.4);
+$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), 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 1fbdc586bf..61abf8b287 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -39,13 +39,17 @@ $modal_radius:$base_border_radius * 2;
 $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
 // $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
 
-$active_bg_color: if($variant == 'light', darken($bg_color, 14%), darken($bg_color, 9%));
 
 // hover
-$hover_bg_color: lighten($bg_color,if($variant=='light', 5%, 5%));
-$hover_fg_color: lighten($fg_color,if($variant=='light', 5%, 3%));
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
 $hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
 
+// active
+$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%));
+$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
+$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
+
 // fonts
 $base_font_size: 11pt;
 
@@ -201,7 +205,8 @@ stage {
        border-width: 1px;
        min-height: 22px;
        padding: calc($base_padding * 0.25) calc($base_padding * 2);
-       @include button(normal);
+
+       @include button(normal, $c:$bg_color, $tc:$fg_color);
        &:focus { @include button(focus, $c:$hover_bg_color, $tc:$fg_color); }
        &:hover { @include button(hover, $c:$hover_bg_color, $tc:$fg_color); }
        &:insensitive { @include button(insensitive); }
@@ -211,22 +216,22 @@ stage {
 
 // notification styling
 %notification_bubble {
-       border: 1px solid $bubble_borders_color;
        border-radius:$base_border_radius + 2px;
-       background-color: lighten($bg_color, 5%);
-       box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
        padding: 0;
+       border: 1px solid;
        margin: $base_margin;
 
-       &:hover,
-       &:focus {
-               background-color: $hover_bg_color;
-               box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
+       @include button(normal, $c:lighten($bg_color, 5%), $tc:$fg_color);
+
+       &:focus,
+       &:hover {
                margin-top: $base_margin - 1px;
                margin-bottom: $base_margin + 1px;
+               @include button(hover, $c:lighten($hover_bg_color, 5%), $tc:$fg_color);
        }
+
        &:active { 
-               background-color: transparentize($fg_color, 0.84);
+               @include button(active, $c:lighten($active_bg_color, 5%), $tc:$fg_color);
                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 e6c17468e5..295405b868 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -137,15 +137,15 @@
                border-color: draw_border_color($c);
                @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
                // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-               text-shadow: 0 1px rgba(0,0,0,0.4);
-               icon-shadow: 0 1px rgba(0,0,0,0.4);
+               text-shadow: 0 1px $text_shadow_color;
+               icon-shadow: 0 1px $text_shadow_color;
        }
 
        // focused button
        @if $t==focus {
                color: $tc;
-               text-shadow: 0 1px rgba(0,0,0,0.4);
-               icon-shadow: 0 1px rgba(0,0,0,0.4);
+               text-shadow: 0 1px $text_shadow_color;
+               icon-shadow: 0 1px $text_shadow_color;
                box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.7);
                //border-color: $selected_bg_color;
        }
@@ -156,8 +156,8 @@
                background-color: lighten($c,3%);
                border-color: draw_border_color(lighten($c,5%));
                @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
-               text-shadow: 0 1px rgba(0,0,0,0.4);
-               icon-shadow: 0 1px rgba(0,0,0,0.4);
+               text-shadow: 0 1px $text_shadow_color;
+               icon-shadow: 0 1px $text_shadow_color;
        }
 
        // active osd button
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 00a54b9803..8af47a2aea 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -104,8 +104,8 @@
                height: 32px;
                width: 32px;
                border-radius: $base_border_radius;
-               &:hover, &:focus { background-color: $hover_bg_color; }
-               &:active { background-color: transparentize($fg_color, 0.84); }
+               &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
+               &:active { background-color: $active_bg_color; }
        }
 
 
diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss
index 3def5896cf..62237fd5d3 100644
--- a/data/theme/gnome-shell.scss
+++ b/data/theme/gnome-shell.scss
@@ -1,4 +1,4 @@
-$variant: 'dark';
+$variant: 'light';
 
 @import "gnome-shell-sass/_colors"; //use gtk colors
 @import "gnome-shell-sass/_drawing";