[gnome-shell/wip/snwh/style-updates] theme: rework button drawing

[Sam Hewitt <snwh src gnome org>]

commit d5cf2ea5d768e4677a152b4fc98cb83f0bced3cc
Author: Sam Hewitt <sam snwh org>
Date:   Mon Jan 3 15:20:02 2022 -0330

    theme: rework button drawing

 data/theme/gnome-shell-sass/_common.scss           | 31 ++++++++++------------
 data/theme/gnome-shell-sass/_drawing.scss          | 15 ++++++-----
 .../gnome-shell-sass/widgets/_notifications.scss   | 25 +----------------
 3 files changed, 23 insertions(+), 48 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index fe3876b1be..4801d15571 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -120,32 +120,29 @@ stage {
   &:active, &:checked { @include button(active);}
 }
 
-// buttons in dialogs
+// buttons in dialogs/notifications
+// styled to have no shadow and be lighter in color
+$bubble_button_radius:$base_border_radius*1.25;
+
 %bubble_button {
-  @include button(normal, $shadow: none);
   padding: $base_padding * 2;
-  border-style: solid;
-  border-width: 1px;
-  border-left-width: 0;
-  border-bottom-width: 0;
+  border: 0 solid $bg_color !important; 
+  border-radius: 0;
+  border-right-width: 1px !important; 
 
+  @include button(normal, lighten($bg_color, 5%), $shadow: none);
   &:insensitive { @include button(insensitive, $shadow: none); }
   &:focus { @include button(focus, $shadow: none); }
-  &:hover { @include button(hover, $shadow: none); }
-  &:active { @include button(active, $shadow: none); }
-
-  // radius is 7 pixel less to fit in bubble
+  &:hover { @include button(hover, lighten($hover_bg_color, 5%), $shadow: none); }
+  &:active { @include button(active, lighten($active_bg_color, 5%), $shadow: none); }
+  
   &:first-child {
-    border-radius: 0 0 0 $modal_radius - 5px;
+    border-radius: 0 0 0 $bubble_button_radius; 
   }
 
   &:last-child {
-    border-right-width: 0;
-    border-radius: 0 0 $modal_radius - 5px 0;
-  }
-
-  &:first-child:last-child {
-    border-radius: 0 0 $modal_radius - 5px $modal_radius - 5px;
+    border-radius: 0 0 $bubble_button_radius 0;
+    border-right-width: 0 !important;
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 7ec71cc7bc..634fd4d98b 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -141,17 +141,18 @@
     border-color: lighten($c, 3%);
     @include draw_shadows($button_shadow);
     // 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;
+    text-shadow: none;
+    icon-shadow: none;
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
+    background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
+    // border-color: lighten($c, 3%);
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
-    //border-color: $selected_bg_color;
+    text-shadow: none;
+    icon-shadow: none;
   }
 
   // hover button
@@ -160,8 +161,8 @@
     background-color: lighten($c, if($variant == 'light', 8%, 5%));
     border-color: lighten($c, if($variant == 'light', 8%, 5%));
     @include draw_shadows($button_shadow);
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
+    text-shadow: none;
+    icon-shadow: none;
   }
 
   // active button
diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss 
b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index 959d5bd2e2..194a5a4e5e 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -20,30 +20,7 @@ $notification_button_radius: ($notification_banner_radius - 2px);
   }
 
   .notification-button {
-    @include button(normal, lighten($bg_color, 5%), $shadow: none);
-    padding: $base_padding * 2;
-    border:1px solid;
-    border-left-width: 0;
-    border-bottom-width: 0;
-
-    &:insensitive { @include button(insensitive, $shadow: none); }
-    &:focus { @include button(focus, $shadow: none); }
-    &:hover { @include button(hover, lighten($hover_bg_color, 5%), $shadow: none); }
-    &:active { @include button(active, lighten($active_bg_color, 5%), $shadow: none); }
-
-    
-    &:first-child {
-      border-radius: 0 0 0 $notification_button_radius;
-    }
-
-    &:last-child {
-      border-right-width: 0;
-      border-radius: 0 0 $notification_button_radius 0;
-    }
-
-    &:first-child:last-child {
-      border-radius: 0 0 $notification_button_radius $notification_button_radius;
-    }
+    @extend %bubble_button;
   }
 }