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>

1 files changed, 40 insertions, 17 deletions

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