style: High contrast fixes for buttons

- improves hover style; fixes #5765
- adds missing high contrast borders
- bumps colors for visibility

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2441>

1 files changed, 25 insertions, 4 deletions

diff --git a/_drawing.scss b/_drawing.scss
index bdb2fb2..8d9a330 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -145,27 +145,30 @@
 
 @mixin button($t, $tc:$fg_color, $c:$bg_color) {
 
-  $button_bg_color: mix($tc, $c, 5%);
+  $button_bg_color: mix($tc, $c, $button_mix_factor);
   transition-duration: 100ms;
 
   // normal button
   @if $t==normal {
     color: $tc;
     background-color: $button_bg_color;
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px $button_inset_color;
+    }
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
     background-color: mix($button_bg_color, $selected_bg_color, 90%);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
     &:hover {
       background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
     }
     &:active {
       background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
     }
   }
 
@@ -173,18 +176,31 @@
   @else if $t==hover {
     color: $tc;
     background-color: lighten($button_bg_color, 3%);
+
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
+      background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
+    }
   }
 
   // active button
   @else if $t==active {
     color: $tc;
     background-color:  lighten($button_bg_color, 6%);
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
+      background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
+    }
   }
 
   // checked button
   @else if $t==checked {
     color: $tc;
     background-color: lighten($button_bg_color, 9%);
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
+      background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
+    }
     &:hover { background-color: lighten($button_bg_color, 12%);}
     &:active { background-color: lighten($button_bg_color, 15%);}
   }
@@ -193,12 +209,16 @@
   @else if $t==insensitive {
     color: transparentize($tc, 0.5);
     background-color: transparentize($tc, .95);
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5);
+    }
   }
 
   // default/suggested button
   @else if $t==default {
     background-color: $selected_bg_color;
     color: $selected_fg_color;
+    box-shadow: none;
     &:focus {
       box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
     }
@@ -221,6 +241,7 @@
   @else if $t==undecorated {
     background-color: transparent;
     background-color: none;
+    box-shadow: none;
     &:insensitive {
       @include button(insensitive);
       background-color: transparent;