[gnome-shell/wip/snwh/button-hc-fixes] style: High contrast fixes for buttons

[Sam Hewitt <snwh src gnome org>]

commit e0dbaad1952379d871919fab99f8e9e1bbdd7462
Author: Sam Hewitt <sam snwh org>
Date:   Mon Aug 22 13:41:27 2022 -0230

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

 data/theme/gnome-shell-sass/_colors.scss           |  5 ++++
 data/theme/gnome-shell-sass/_drawing.scss          | 29 +++++++++++++++++++---
 .../gnome-shell-sass/_high-contrast-colors.scss    |  6 +++++
 3 files changed, 36 insertions(+), 4 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index c22bfea823..c42a95543b 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -3,6 +3,8 @@
 
 @import '_palette.scss';
 
+$is_highcontrast: "false";
+
 $_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
 
 $base_color: if($variant == 'light', #fff, $_dark_base_color);
@@ -33,6 +35,9 @@ $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
 
 $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
 
+// button
+$button_mix_factor: 5%;
+
 // cards
 $card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
 
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index bdb2fb261c..8d9a33071b 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_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;
diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss 
b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index 35e2d851a7..0d48644a1e 100644
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -3,6 +3,8 @@
 
 @import '_palette.scss';
 
+$is_highcontrast: 'true';
+
 $base_color: if($variant == 'light', #fff, #000);
 $bg_color: $base_color;
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
@@ -30,6 +32,10 @@ $osd_outer_borders_color: $osd_bg_color;
 
 $shadow_color: transparent;
 
+// button
+$button_inset_color: transparentize($fg_color, 0.8);
+$button_mix_factor: 10%;
+
 // cards
 $card_bg_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 12%));