style: High-contrast fixes and color adjustments

- pull in the palette changes to the HC css
- adjust the color definitions for HC
- address some of the problems with hover states in HC
- reworked drawing functions for HC

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

8 files changed, 114 insertions, 85 deletions

diff --git a/_colors.scss b/_colors.scss
index 7e7aaab..0ca123b 100644
--- a/_colors.scss
+++ b/_colors.scss
@@ -1,52 +1,7 @@
 // When color definition differs for dark and light variant,
 // it gets @if-ed depending on $variant
 
-//GNOME Color Palette
-$blue_1: #99c1f1;
-$blue_2: #62a0ea;
-$blue_3: #3584e4;
-$blue_4: #1c71d8;
-$blue_5: #1a5fb4;
-$green_1: #8ff0a4;
-$green_2: #57e389;
-$green_3: #33d17a;
-$green_4: #2ec27e;
-$green_5: #26a269;
-$yellow_1: #f9f06b;
-$yellow_2: #f8e45c;
-$yellow_3: #f6d32d;
-$yellow_4: #f5c211;
-$yellow_5: #e5a50a;
-$orange_1: #ffbe6f;
-$orange_2: #ffa348;
-$orange_3: #ff7800;
-$orange_4: #e66100;
-$orange_5: #c64600;
-$red_1: #f66151;
-$red_2: #ed333b;
-$red_3: #e01b24;
-$red_4: #c01c28;
-$red_5: #a51d2d;
-$purple_1: #dc8add;
-$purple_2: #c061cb;
-$purple_3: #9141ac;
-$purple_4: #813d9c;
-$purple_5: #613583;
-$brown_1: #cdab8f;
-$brown_2: #b5835a;
-$brown_3: #986a44;
-$brown_4: #865e3c;
-$brown_5: #63452c;
-$light_1: #ffffff;
-$light_2: #f6f5f4;
-$light_3: #deddda;
-$light_4: #c0bfbc;
-$light_5: #9a9996;
-$dark_1: #77767b;
-$dark_2: #5e5c64;
-$dark_3: #3d3846;
-$dark_4: #241f31;
-$dark_5: #000000;
+@import '_palette.scss';
 
 $_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
 
@@ -78,6 +33,12 @@ $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));
 
+// cards
+$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
+
+// notifications
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%));
+
 // overview background color
 $system_bg_color: $base_color;
 
@@ -93,3 +54,16 @@ $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
 $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%));
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
 $backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
+
+
+// derived hover colors
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 10%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%));
+
+// derived active colors
+$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%));
+$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%));
+
+// derived checked colors
+$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 15%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 15%));
\ No newline at end of file
diff --git a/_common.scss b/_common.scss
index dbbf79e..f15c86c 100644
--- a/_common.scss
+++ b/_common.scss
@@ -35,18 +35,6 @@ $base_border_radius: 8px;
 // radii of things that display over other things, e.g. popovers
 $modal_radius: $base_border_radius*2; // 24px
 
-// derived hover colors
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
-
-// derived active colors
-$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
-$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
-
-// derived checked colors
-$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
-$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
-
 // fonts
 $base_font_size: 11;
 $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
@@ -118,7 +106,6 @@ stage {
 // lighter in color and have a greater radius
 
 $bubble_button_radius:$base_border_radius*1.25;
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
 
 %bubble_button {
   padding: $base_padding * 2;
diff --git a/_drawing.scss b/_drawing.scss
index 10c1c3f..910eeb5 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -129,7 +129,6 @@
   }
 }
 
-
 // buttons
 // since buttons are all flat an borderless now the mixin is simpler
 
@@ -289,24 +288,24 @@ $button_bg_color: mix($tc, $c, 5%);
 @mixin card($flat: false) {
   border-radius: $base_border_radius;
   margin: $base_margin;
-  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+  box-shadow: 0 1px 1px 0 $shadow_color;
 
   @if $flat {
     @include button(undecorated);
     box-shadow: none !important;
   } @else {
-    @include button(normal);
+    @include button(normal, $c:$card_bg_color);
   }
 
   &:focus {
-    @include button(focus);
+    @include button(focus, $c:$card_bg_color);
   }
 
   &:hover {
-    @include button(hover);
+    @include button(hover, $c:$card_bg_color);
   }
 
   &:active {
-    @include button(active);
+    @include button(active, $c:$card_bg_color);
   }
 }
diff --git a/_high-contrast-colors.scss b/_high-contrast-colors.scss
index 54f6853..d418e47 100644
--- a/_high-contrast-colors.scss
+++ b/_high-contrast-colors.scss
@@ -1,32 +1,43 @@
 // When color definition differs for dark and light variant,
 // it gets @if ed depending on $variant
 
-$base_color: #222;
-$bg_color: #000;
-$fg_color: #fff;
+@import '_palette.scss';
+
+$base_color: if($variant == 'light', #fff, #000);
+$bg_color: $base_color;
+$fg_color: if($variant == 'light', transparentize(black, .2), white);
 
 $selected_fg_color: #ffffff;
-$selected_bg_color: darken(#4a90d9,20%);
+$selected_bg_color: $blue_3;
+
 $selected_borders_color: darken($selected_bg_color, 20%);
-$borders_color: darken($bg_color,12%);
-$borders_edge: transparentize($fg_color, 0.9);
+$borders_color: lighten($bg_color,17%);
+$borders_edge: $borders_color;
 $link_color: lighten($selected_bg_color,20%);
 $link_visited_color: lighten($selected_bg_color,10%);
 
-$warning_color: #f57900;
-$error_color: #cc0000;
-$success_color: darken(#73d216,10%);
-$destructive_color: darken(#ef2929,10%);
+$warning_color: if($variant == 'light', $yellow_5, #cd9309);
+$error_color: if($variant == 'light', $red_3, $red_4);
+$success_color: if($variant == 'light', $green_4, $green_5);
+$destructive_color: $error_color;
 
-$osd_fg_color: #eeeeec;
-$osd_bg_color: #2e3436;
-$osd_borders_color: rgba(0,0,0, 0.7);
-$osd_outer_borders_color: rgba(255,255,255, 0.1);
-$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%);
+$osd_fg_color: white;
+$osd_bg_color: $base_color;
+$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
 $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  mix($osd_fg_color, $osd_bg_color, 70%));
+$osd_borders_color: $osd_bg_color;
+$osd_outer_borders_color: $osd_bg_color;
+
+$shadow_color: transparent;
+
+// cards
+$card_bg_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 12%));
 
-$shadow_color: rgba(0,0,0, 0.1);
-$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
+// notifications
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 22%), lighten($bg_color, 31%));
+
+// overview background color
+$system_bg_color: lighten($base_color, 17%);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
@@ -40,3 +51,15 @@ $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
 $backdrop_insensitive_color: lighten($backdrop_bg_color,15%);
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
 $backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
+
+// derived hover colors
+$hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%));
+
+// derived active colors
+$active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%));
+$active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
+
+// derived checked colors
+$checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 25%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 25%));
\ No newline at end of file
diff --git a/_palette.scss b/_palette.scss
new file mode 100644
index 0000000..78847d9
--- /dev/null
+++ b/_palette.scss
@@ -0,0 +1,46 @@
+//GNOME Color Palette
+$blue_1: #99c1f1;
+$blue_2: #62a0ea;
+$blue_3: #3584e4;
+$blue_4: #1c71d8;
+$blue_5: #1a5fb4;
+$green_1: #8ff0a4;
+$green_2: #57e389;
+$green_3: #33d17a;
+$green_4: #2ec27e;
+$green_5: #26a269;
+$yellow_1: #f9f06b;
+$yellow_2: #f8e45c;
+$yellow_3: #f6d32d;
+$yellow_4: #f5c211;
+$yellow_5: #e5a50a;
+$orange_1: #ffbe6f;
+$orange_2: #ffa348;
+$orange_3: #ff7800;
+$orange_4: #e66100;
+$orange_5: #c64600;
+$red_1: #f66151;
+$red_2: #ed333b;
+$red_3: #e01b24;
+$red_4: #c01c28;
+$red_5: #a51d2d;
+$purple_1: #dc8add;
+$purple_2: #c061cb;
+$purple_3: #9141ac;
+$purple_4: #813d9c;
+$purple_5: #613583;
+$brown_1: #cdab8f;
+$brown_2: #b5835a;
+$brown_3: #986a44;
+$brown_4: #865e3c;
+$brown_5: #63452c;
+$light_1: #ffffff;
+$light_2: #f6f5f4;
+$light_3: #deddda;
+$light_4: #c0bfbc;
+$light_5: #9a9996;
+$dark_1: #77767b;
+$dark_2: #5e5c64;
+$dark_3: #3d3846;
+$dark_4: #241f31;
+$dark_5: #000000;
\ No newline at end of file
diff --git a/widgets/_looking-glass.scss b/widgets/_looking-glass.scss
index 146cc29..00630c3 100644
--- a/widgets/_looking-glass.scss
+++ b/widgets/_looking-glass.scss
@@ -9,7 +9,7 @@
   color: $osd_fg_color;
   padding: $base_padding;
   spacing: $base_padding;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px 0 $shadow_color;
 
   & > #Toolbar {
     border: none;
diff --git a/widgets/_notifications.scss b/widgets/_notifications.scss
index 7866767..86480a8 100644
--- a/widgets/_notifications.scss
+++ b/widgets/_notifications.scss
@@ -8,7 +8,7 @@ $notification_banner_radius: $base_border_radius*1.5;
 .notification-banner {
   min-height: $notification_banner_height;
   width: $notification_banner_width;
-  box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px 2px $shadow_color;
   border-radius: $notification_banner_radius;
   margin: $base_margin;
 
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index 08ad324..3a470ef 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -21,7 +21,7 @@
   padding: $base_padding;
   border-radius: $modal_radius - 2px;
   border: 1px solid $borders_edge;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px 0 $shadow_color;
   background-color: $bg_color;
 }