style: High Contrast improvments

- rework the entry style to work in both hc and normal
- rework drawing functions to accommodate hc
- buttons all get borders under hc now
- window picker titles are more legible
- alt+tab switcher tiles are visible
- dash is made more visible under hc
- popover menus are all more visible under hc
- search results borders are improved
- calendar days have a different look under hc
- overview bg is completely black in hc

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

1 files changed, 47 insertions, 24 deletions

diff --git a/_common.scss b/_common.scss
index 9ca89d1..0587b15 100644
--- a/_common.scss
+++ b/_common.scss
@@ -64,13 +64,9 @@ stage {
   border: 1px solid $osd_outer_borders_color;
   border-radius: 999px;
   padding: $base_padding*2;
-}
-
-// Overview panels
-// for the dash and workspace switcher
-%overview_panel {
-  color: $osd_fg_color;
-  background-color: transparentize($osd_fg_color, 0.9);
+  @if $is_highcontrast {
+    border: 2px solid $hc_inset_color;
+  }
 }
 
 // icon tiles
@@ -81,19 +77,14 @@ stage {
   border: 2px solid transparent;
   transition-duration: 200ms;
   text-align: center;
-}
-
-// dialogs
-%bubble_panel {
-  color: $fg_color;
-  background-color: $bg_color;
-  border-radius: $base_border_radius*1.25 + 1px;
-  border: 1px solid $borders_edge;
+  @if $is_highcontrast {
+    border-color: $hc_inset_color;
+  }
 }
 
 // normal button styling
 %button {
-  border-radius: $base_border_radius - 2px; // 6px
+  border-radius: $base_border_radius;
   border-style: solid;
   border-width: 1px;
   font-weight: bold;
@@ -103,6 +94,7 @@ stage {
   &:focus { @include button(focus);}
   &:hover { @include button(hover);}
   &:insensitive { @include button(insensitive);}
+  &:selected,
   &:active { @include button(active);}
   &:checked { @include button(checked);}
 
@@ -111,16 +103,30 @@ stage {
     &:focus { @include button(focus, $flat:true);}
     &:hover { @include button(hover, $flat:true);}
     &:insensitive { @include button(insensitive, $flat:true);}
+    &:selected,
     &:active { @include button(active, $flat:true);}
     &:checked { @include button(checked, $flat:true);}
   }
 }
 
-// buttons in dialogs/notifications
-// lighter in color and have a greater radius
 
-$bubble_button_radius:$base_border_radius*1.25;
+// normal entry style
+%entry {
+  border-radius: $base_border_radius;
+  padding: $base_padding*1.5 $base_padding*1.5;
+  color: $fg_color;
+  selection-background-color: $selected_bg_color;
+  selected-color: $selected_fg_color;
+
+  @include entry(normal);
+  &:hover { @include entry(hover);}
+  &:focus { @include entry(focus);}
+  &:insensitive { @include entry(insensitive);}
+}
+
 
+// buttons in dialogs/notifications
+// lighter in color and have a greater radius
 %bubble_button {
   padding: $base_padding * 2;
   font-weight: bold !important;
@@ -136,25 +142,25 @@ $bubble_button_radius:$base_border_radius*1.25;
   &:checked { @include button(checked, $c:$bubble_buttons_color);}
 
   &:first-child:ltr {
-    border-radius: 0 0 0 $bubble_button_radius;
+    border-radius: 0 0 0 $modal_radius;
   }
 
   &:last-child:ltr {
-    border-radius: 0 0 $bubble_button_radius 0;
+    border-radius: 0 0 $modal_radius;
     margin-right: 0 !important;
   }
 
   &:first-child:rtl {
-    border-radius: 0 0 $bubble_button_radius 0;
+    border-radius: 0 0 $modal_radius;
   }
 
   &:last-child:rtl {
-    border-radius: 0 0 0 $bubble_button_radius;
+    border-radius: 0 0 0 $modal_radius;
     margin-left: 0 !important;
   }
 
   &:first-child:last-child {
-    border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
+    border-radius: 0 0 $modal_radius;
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
@@ -171,6 +177,23 @@ $bubble_button_radius:$base_border_radius*1.25;
   &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
 }
 
+
+// tooltip
+%tooltip {
+  background-color: $osd_bg_color;
+  color: $osd_fg_color;
+  border:1px solid $osd_outer_borders_color;
+  border-radius: 99px;
+  padding: $base_padding $base_padding * 2;
+  text-align: center;
+
+  @if $is_highcontrast {
+    background-color: $osd_bg_color;
+    color: $osd_fg_color;
+    border: 1px solid $hc_inset_color;
+  }
+}
+
 /* General Typography */
 
 %large_title {