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>

20 files changed, 297 insertions, 274 deletions

diff --git a/_colors.scss b/_colors.scss
index b83b1ed..8ce34ff 100644
--- a/_colors.scss
+++ b/_colors.scss
@@ -3,20 +3,20 @@
 
 @import '_palette.scss';
 
-$is_highcontrast: "false";
+$is_highcontrast:false;
 
-$_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
+$_dark_base_color: desaturate($dark_4, 100%);
 
-$base_color: if($variant == 'light', #fff, $_dark_base_color);
-$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
+$base_color: if($variant == 'light', $light_1, $_dark_base_color);
+$bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%));
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
-$selected_fg_color: #fff;
-$selected_bg_color: #3584e4;
+$selected_fg_color: $light_1;
+$selected_bg_color: $blue_3;
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
 
 $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
-$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
+$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
 
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
@@ -26,24 +26,20 @@ $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: white;
+$osd_fg_color: $light_1;
 $osd_bg_color: $_dark_base_color; //hardcoded for both light & dark
 $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: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.9);
 
 $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%));
-$card_outer_borders_color: transparentize($fg_color, 0.98);
+$button_mix_factor: 9%;
 
 // notifications
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%));
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 
 // overview background color
 $system_bg_color: $base_color;
@@ -61,7 +57,6 @@ $backdrop_insensitive_color: if($variant =='light', darken($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 checked colors
 $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%));
 $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%));
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 {
diff --git a/_drawing.scss b/_drawing.scss
index 7c8959e..2ec84f2 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -2,7 +2,7 @@
 
 // generic drawing of more complex things
 
-@function draw_widget_edge($c:$borders_edge) {
+@function draw_widget_edge($c:$outer_borders_color) {
 // outer highlight "used" on most widgets
   @return 0 1px $c;
 }
@@ -35,29 +35,31 @@
 // possible $t values:
 // normal, focus, insensitive
 //
+  transition-duration: 100ms;
 
   @if $t==normal {
-    background-color: lighten($bg_color, 5%);
+    background-color: transparentize($fg_color, 0.9);
     color: transparentize($fg_color,0.3);
-    border: 2px solid lighten($bg_color, 5%);
+
+    @if $is_highcontrast {
+      box-shadow: inset 0 0 0 1px $hc_inset_color;
+    }
   }
 
   @if $t==focus {
-    background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
-    border-color: $fc;
+    background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%);
+    box-shadow: inset 0 0 0 2px $fc;
     color: $fg_color;
     &:hover {}
   }
 
   @if $t==hover {
-    background-color:lighten($hover_bg_color, 5%);
-    border-color:lighten($hover_bg_color, 5%);
-    color: transparentize($fg_color,0.3);
+    background-color:transparentize($fg_color, 0.8);
+    color: inherit;
   }
 
   @if $t==insensitive {
-    background-color:lighten($insensitive_bg_color, 5%);
-    border-color: lighten($insensitive_bg_color, 5%);
+    background-color:transparentize($insensitive_fg_color, 0.8);
     color: $insensitive_fg_color;
   }
 }
@@ -155,23 +157,8 @@
     @if $flat {
       background-color: transparent;
     }
-    @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) !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) !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) !important;
+    @if $is_highcontrast {
+      box-shadow: inset 0 0 0 1px $hc_inset_color;
     }
   }
 
@@ -179,53 +166,55 @@
   @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%);
+    @if $is_highcontrast {
+      box-shadow: inset 0 0 0 1px $hc_inset_color !important;
     }
   }
 
   // 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%);
-    }
+    background-color:  lighten($button_bg_color, 9%);
   }
 
   // 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%);}
   }
 
+  // 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) !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) !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) !important;
+    }
+  }
+
   // insensitive button
   @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%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
     }
-    &:hover, &:focus { 
+    &:hover, &:focus {
       background-color: lighten($selected_bg_color, 5%);
       color: lighten($selected_fg_color, 5%);
     }
@@ -260,6 +249,9 @@
     background-color: transparent;
   } @else {
     background-color: transparentize($color, .84);
+    @if $is_highcontrast {
+      box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack
+    }
   }
   &:hover { background-color: transparentize($color, .9);}
   &:selected, &:focus {
@@ -282,11 +274,15 @@
 // overview icon, dash, app grid
 @mixin overview_icon($color, $flat: true) {
   transition-duration: 400ms;
-  .overview-icon { @extend %tile; }
+  .overview-icon { 
+    @extend %tile;
+  }
   @if $flat {
     .overview-icon { background-color: transparent;}
   } @else {
-    .overview-icon { background-color: transparentize($color, .81);}
+    .overview-icon { 
+      background-color: transparentize($color, .93);
+    }
   }
   &:hover .overview-icon { background-color: transparentize($color, .9);}
 
@@ -311,26 +307,44 @@
 
 // styling for elements within popovers that look like notifications
 @mixin card($flat: false) {
-  border-radius: $base_border_radius;
+  border-radius: $base_border_radius*1.5;
   margin: $base_margin;
-  box-shadow: inset 0 0 0 1px $card_outer_borders_color;
 
   @if $flat {
     @include button(undecorated);
     box-shadow: none !important;
   } @else {
-    @include button(normal, $c:$card_bg_color);
+    @include button(normal);
   }
+  &:hover {@include button(hover);}
+  &:active {@include button(active);}
+  &:focus {@include button(focus);}
+}
 
-  &:focus {
-    @include button(focus, $c:$card_bg_color);
-  }
+// styling for elements within popovers that look like notifications
+@mixin menuitem($bg, $flat: true) {
 
-  &:hover {
-    @include button(hover, $c:$card_bg_color);
-  }
+  // lighten the background color always
+  $bg: lighten($bg,5%);
+
+  font-weight: normal;
+  spacing: $base_padding;
+  transition-duration: 100ms;
+  padding: $base_padding*1.5 $base_padding*2;
 
-  &:active {
-    @include button(active, $c:$card_bg_color);
+  &:ltr {padding-left: $base_padding;}
+  &:rtl {padding-right: $base_padding;}
+
+  @if $flat {
+    @include button(undecorated);
+    box-shadow: none !important;
+  } @else {
+    @include button(normal, $c:$bg);
+  }
+  &:focus,
+  &:hover {
+    @include button(hover, $c:$bg);
   }
+  &:active {@include button(active, $c:$bg);}
+  &:checked {@include button(checked, $c:$bg);}
 }
diff --git a/_high-contrast-colors.scss b/_high-contrast-colors.scss
index 15fdec3..4d9aafd 100644
--- a/_high-contrast-colors.scss
+++ b/_high-contrast-colors.scss
@@ -3,18 +3,18 @@
 
 @import '_palette.scss';
 
-$is_highcontrast: 'true';
+$is_highcontrast:true;
 
-$base_color: if($variant == 'light', #fff, #000);
-$bg_color: $base_color;
+$base_color: if($variant == 'light', white, black);
+$bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
-$selected_fg_color: #ffffff;
+$selected_fg_color: white;
 $selected_bg_color: $blue_3;
 
 $selected_borders_color: darken($selected_bg_color, 20%);
-$borders_color: lighten($bg_color,17%);
-$borders_edge: $borders_color;
+$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7));
+$outer_borders_color: $borders_color;
 $link_color: lighten($selected_bg_color,20%);
 $link_visited_color: lighten($selected_bg_color,10%);
 
@@ -27,24 +27,22 @@ $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;
+$osd_borders_color: transparentize($osd_fg_color, 0.8);
+$osd_outer_borders_color: $osd_borders_color;
 
-$shadow_color: transparent;
+$shadow_color: rgba(0,0,0,0);
 
-// button
-$button_inset_color: transparentize($fg_color, 0.8);
-$button_mix_factor: 10%;
+// hc
+$hc_inset_color: transparentize($fg_color, 0.7);
 
-// cards
-$card_bg_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 12%));
-$card_outer_borders_color: $card_bg_color;
+// button
+$button_mix_factor: 20%;
 
 // notifications
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 22%), lighten($bg_color, 31%));
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 
 // overview background color
-$system_bg_color: lighten($base_color, 17%);
+$system_bg_color: black;
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index 9da650c..31d4382 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -20,7 +20,10 @@ $app_icon_size: 96px;
 .app-well-app {
   @include overview_icon($osd_fg_color);
 
-  .overview-icon { padding: $base_padding*2;}
+  .overview-icon {
+    padding: $base_padding*2;
+    border-radius: $base_border_radius*3;
+  }
   .overview-icon.overview-icon-with-label {
     > StBoxLayout {
       spacing: $base_padding;
@@ -30,13 +33,19 @@ $app_icon_size: 96px;
 
 // app folders
 .app-well-app.app-folder {
-  @include overview_icon($osd_fg_color, $flat: false);
+  @include overview_icon($fg_color, $flat: false);
 }
 
 // expanded folder
 .app-folder-dialog {
-  border-radius: $modal_radius*2;
-  background-color: $dash_background_color;
+  border-radius: $modal_radius*4;
+  background-color: $bg_color;
+  padding: $base_padding*2;
+  box-shadow:inset 0 0 0 1px $outer_borders_color;
+
+  @if $is_highcontrast {
+    box-shadow:inset 0 0 0 2px $hc_inset_color;
+  }
 
   & .folder-name-container {
     padding: 24px 36px 0;
@@ -47,7 +56,10 @@ $app_icon_size: 96px;
       @extend %title_1;
     }
 
-    & .folder-name-entry { width: 300px }
+    & .folder-name-entry {
+      width: 12em;
+      border-radius: $base_border_radius*2;
+    }
 
     /* FIXME: this is to keep the label in sync with the entry */
     & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
@@ -119,9 +131,12 @@ $app_icon_size: 96px;
 // shutdown and other actions in the grid
 .system-action-icon {
   background-color: rgba(0,0,0,0.8);
-  color: #fff;
+  color: white;
   border-radius: 99px;
   icon-size: $app_icon_size * 0.5;
+  @if $is_highcontrast {
+    box-shadow: inset 0 0 0 2px $hc_inset_color;
+  }
 }
 
 .page-navigation-hint {
@@ -147,15 +162,16 @@ $app_icon_size: 96px;
 }
 
 .page-navigation-arrow {
-  &  > StIcon {
-    margin: 6px;
-    padding: 18px;
-    width: 24px;
-    height: 24px;
-    border-radius: 99px;
+  margin: 6px;
+  padding: 18px;
+  width: 24px;
+  height: 24px;
+  border-radius: 99px;
+  @if $is_highcontrast {
+    @include button(normal, $osd_fg_color, transparentize($osd_bg_color, 0.5));
   }
 
-  &:insensitive > StIcon { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
-  &:hover > StIcon { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
-  &:active > StIcon { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
+  &:insensitive { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
+  &:hover { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
+  &:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
 }
diff --git a/widgets/_calendar.scss b/widgets/_calendar.scss
index fa7080b..df91dce 100644
--- a/widgets/_calendar.scss
+++ b/widgets/_calendar.scss
@@ -45,7 +45,6 @@
 
     // month label
     .calendar-month-label {
-      color: lighten($fg_color,5%);
       @extend %heading;
       padding: 8px 0;
     }
@@ -54,9 +53,12 @@
       height: 32px;
       width: 32px;
       margin: 2px;
-      border-radius: $base_border_radius - 2px;
+      border-radius: $base_border_radius;
       &:hover, &:focus {background-color: $hover_bg_color;}
       &:active {background-color: $active_bg_color;}
+      @if $is_highcontrast {
+        border:1px solid $hc_inset_color;
+      }
     }
   }
 
@@ -72,7 +74,7 @@
     transition-duration: 100ms;
     @extend %numeric;
     @extend %smaller;
-    
+
     &:hover {background-color: $hover_bg_color;}
     &:focus {
       background-color: mix($bg_color, $selected_bg_color, 80%);
@@ -93,12 +95,18 @@
       color: $insensitive_fg_color;
       padding-top: $base_padding;
       height: 16px !important; // force heading to be smaller height
-      font-weight: bold;
+      font-weight: 600;
       @extend %smaller;
     }
   }
 
-  .calendar-day {}
+  .calendar-day {
+    font-weight: 600;
+    @if $is_highcontrast {
+      border:1px solid $hc_inset_color;
+      border-radius: 9px;
+    }
+  }
   .calendar-work-day {}
   .calendar-nonwork-day {color: $insensitive_fg_color;}
   .calendar-other-month-day {
@@ -142,7 +150,7 @@
     margin: 6px;
     padding: 0 $base_padding;
     border-radius: 3px;
-    background-color: darken($bg_color, 2%);
+    background-color: transparentize($fg_color, 0.9);
     color: $insensitive_fg_color
   }
 }
diff --git a/widgets/_dash.scss b/widgets/_dash.scss
index 8f5d5f9..350e412 100644
--- a/widgets/_dash.scss
+++ b/widgets/_dash.scss
@@ -35,17 +35,24 @@ $dash_border_radius: $modal_radius + $dash_padding;
   padding: $dash_padding;
   spacing: $base_padding;
   margin-bottom: $dash_padding;
+  box-shadow: inset 0 0 0 1px $outer_borders_color;
+
+  @if $is_highcontrast {
+    border: 2px solid $hc_inset_color;
+    box-shadow:none;
+  }
 }
 
 // items on the dash
 .dash-item-container {
   > * {margin: 0 2px;}
-  &:ltr:first-child {margin-left: 0;}
-  &:rtl:first-child {margin-right: 0;}
+  &:ltr{&:first-child {margin-left: 0;}}
+  &:rtl{&:first-child {margin-right: 0;}}
 
   // each app item on the dash
   .app-well-app .overview-icon {
     padding: $base_padding;
+    border-radius: $base_border_radius*2;
   }
 
   // show apps button
@@ -62,14 +69,13 @@ $dash_border_radius: $modal_radius + $dash_padding;
   margin: 0 $base_margin;
   background-color: $borders_color;
   margin-bottom: $dash_padding;
+  @if $is_highcontrast {
+    width: 2px;
+  }
 }
 
 // OSD Tooltip
 .dash-label {
-  color: $osd_fg_color;
-  background-color: $osd_bg_color;
-  border-radius: 99px;
-  padding: $base_padding $base_padding * 2;
-  text-align: center;
+  @extend %tooltip;
   -y-offset: $base_margin * 2; // distance from the dash edge
 }
diff --git a/widgets/_dialogs.scss b/widgets/_dialogs.scss
index defa20b..98b3b8c 100644
--- a/widgets/_dialogs.scss
+++ b/widgets/_dialogs.scss
@@ -5,7 +5,9 @@
 }
 
 .modal-dialog {
-  @extend %bubble_panel;
+  background-color: $bg_color;
+  border-radius: $modal_radius;
+  box-shadow: inset 0 0 0 1px $outer_borders_color;
 
   .modal-dialog-content-box {
     margin: 32px 40px;
diff --git a/widgets/_entries.scss b/widgets/_entries.scss
index 6be6760..ed65b78 100644
--- a/widgets/_entries.scss
+++ b/widgets/_entries.scss
@@ -1,20 +1,10 @@
 /* Entries */
 
 StEntry {
-  border-radius: $base_border_radius;
-  padding: 8px;
-  color: $fg_color;
-
-  @include entry(normal);
-  &:hover { @include entry(hover);}
-  &:focus { @include entry(focus);}
-  &:insensitive { @include entry(insensitive);}
-
-  selection-background-color: $selected_bg_color;
-  selected-color: $selected_fg_color;
+  @extend %entry;
 
   StIcon.capslock-warning {
-    icon-size: 16px;
+    icon-size: $base_icon_size;
     warning-color: $warning_color;
     padding: 0 4px;
   }
diff --git a/widgets/_looking-glass.scss b/widgets/_looking-glass.scss
index 00630c3..adcc372 100644
--- a/widgets/_looking-glass.scss
+++ b/widgets/_looking-glass.scss
@@ -2,15 +2,22 @@
 
 // Dialog
 #LookingGlassDialog {
-  background-color: $osd_bg_color;
+  background-color: transparentize($bg_color,0.05);
   border-radius: 0 0 $modal_radius $modal_radius;
+  border: 1px solid $outer_borders_color;
   border-top-width: 0;
-  border: 1px solid $osd_outer_borders_color;
-  color: $osd_fg_color;
+  color: $fg_color;
   padding: $base_padding;
   spacing: $base_padding;
   box-shadow: 0 2px 4px 0 $shadow_color;
 
+  @if $is_highcontrast {
+    border: 2px solid $hc_inset_color;
+    background-color: $bg_color;
+    border-top-width: 0;
+    box-shadow:none;
+  }
+
   & > #Toolbar {
     border: none;
     padding: $base_padding;
@@ -33,25 +40,8 @@
   .notebook-tab {
     -natural-hpadding: $base_padding*2;
     -minimum-hpadding: $base_padding*2;
-
-    font-weight: bold;
+    @extend %button;
     padding: $base_padding $base_padding*2;
-    color: darken($osd_fg_color, 15%);
-    transition-duration: 100ms;
-    box-shadow:none;
-    border:none;
-    border-radius: $base_border_radius - 2px;
-    background-color: transparent;
-
-    &:hover {
-      color: $osd_fg_color;
-      background-color: transparentize($osd_fg_color, 0.95);
-    }
-
-    &:selected {
-      color: $osd_fg_color;
-      background-color: transparentize($osd_fg_color, 0.9);
-    }
   }
 
   StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
@@ -61,12 +51,8 @@
 .lg-dialog {
 
   StEntry {
-    background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
-    color: $osd_fg_color;
-    border-color: transparentize($osd_fg_color, 0.8);
     min-height: 22px;
-    selection-background-color: $selected_bg_color;
-    selected-color: $selected_fg_color;
+    @extend %entry;
   }
 
   .shell-link {
@@ -94,10 +80,10 @@
 }
 
 .lg-obj-inspector-button {
-  border: 1px solid $osd_borders_color;
+  border: 1px solid $borders_color;
   padding: 4px;
   border-radius: $base_border_radius;
-  &:hover { border: 1px solid #ffffff; }
+  &:hover { border: 1px solid $fg_color; }
 }
 
 // Extensions
@@ -123,8 +109,8 @@
 
 // Inspector
 #LookingGlassPropertyInspector {
-  background: $osd_bg_color;
-  border: 1px solid $osd_borders_color;
+  background: $bg_color;
+  border: 1px solid $borders_color;
   border-radius: $base_border_radius;
   padding: $base_padding;
 }
diff --git a/widgets/_message-list.scss b/widgets/_message-list.scss
index 5196661..d0e5d85 100644
--- a/widgets/_message-list.scss
+++ b/widgets/_message-list.scss
@@ -143,6 +143,11 @@
   border-radius: $base_border_radius;
   color: $fg_color;
 
+  @if $is_highcontrast {
+    border: 1px solid $hc_inset_color;
+    margin: $base_padding*2 2px;
+  }
+
   // colors are lightened since the media controls are in a card
   &:hover {
     background-color: lighten($hover_bg_color, 5%);
@@ -154,7 +159,12 @@
     color: $fg_color;
   }
 
-  &:insensitive { color: lighten($insensitive_fg_color, 5%); }
+  &:insensitive {
+    color: lighten($insensitive_fg_color, 5%);
+     @if $is_highcontrast {
+      border-color: transparent;
+    }
+  }
   
   // fix margin for last button
   &:last-child:ltr { margin-right: $base_margin*3; }
diff --git a/widgets/_panel.scss b/widgets/_panel.scss
index fd3e7d2..487eb0f 100644
--- a/widgets/_panel.scss
+++ b/widgets/_panel.scss
@@ -41,6 +41,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     &.screen-recording-indicator {
       box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
     }
+
     &.screen-sharing-indicator {
       box-shadow: inset 0 0 0 100px $warning_color;
       StBoxLayout { margin: 0 $base_padding; }
@@ -94,7 +95,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
         box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
       }
     }
-    
+
     &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
       box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
       &.clock-display {
@@ -174,7 +175,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
           box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
         }
       }
-      
+
       &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
         box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
         &.clock-display {
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index 138a4fc..6ab20c2 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -1,5 +1,11 @@
 /* Popovers/Menus */
 
+$menu_bg_color: $bg_color;
+$menuitem_bg_color: lighten($menu_bg_color, 4%);
+$menuitem_border_radius: $base_border_radius*1.5;
+
+$submenu_bg_color: lighten($menu_bg_color, 7%);
+
 // the popover itself
 .popup-menu-boxpointer {
   -arrow-rise: $base_margin+2px; // distance from the panel & screen edge
@@ -19,45 +25,27 @@
 // popover content
 .popup-menu-content {
   padding: $base_padding;
+  background-color: $bg_color;
   border-radius: $modal_radius*1.25;
-  border: 1px solid $borders_edge;
+  border: 1px solid $outer_borders_color;
   box-shadow: 0 2px 4px 0 $shadow_color;
-  background-color: $bg_color;
 }
 
 // menu items
 .popup-menu-item {
-  padding: $base_padding*1.5 $base_padding*2;
-  border-radius: $base_border_radius*1.5;
-  spacing: $base_padding;
-  transition-duration: 100ms;
-  background-color: transparent;
-
-  &:ltr {padding-left: $base_padding;}
-  &:rtl {padding-right: $base_padding;}
-
-  &:focus, &:hover {
-    background-color: $hover_bg_color !important;
-    &:active { background-color: $active_bg_color !important;}
-  }
+  @include menuitem($bg:$menu_bg_color);
 
-  &:checked {background-color: $checked_bg_color !important;}
+  border-radius: $menuitem_border_radius;
 
   &:checked {
-    margin-bottom: 0;
-    box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
-    border-radius: $base_border_radius $base_border_radius 0 0;
-    &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
-    &:active { background-color: lighten($checked_bg_color, 5%) !important;}
-  }
+    border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important;
 
-  &:active {
-    background-color: lighten($active_bg_color, 5%);
-    color: $active_fg_color;
+    @if $is_highcontrast {
+      border: 1px solid $hc_inset_color;
+      border-bottom-width:0;
+    }
   }
 
-  &:insensitive {color: transparentize($fg_color,0.5);}
-
   // add margin to switches in menu items
   .toggle-switch {
     &:ltr { margin-left: $base_margin;}
@@ -78,14 +66,14 @@
   icon-size: 16px !important; // for some reason the variable doesn't work here
 }
 
-.popup-menu-arrow {
-}
-
-
 // popover submenus
 .popup-sub-menu {
-  background-color: $checked_bg_color;
-  border-radius: 0 0 $base_border_radius $base_border_radius;
+  border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
+  margin-bottom: $base_padding;
+
+  @if $is_highcontrast {
+    border: 1px solid $hc_inset_color;
+  }
 
   .popup-menu-ornament {
     min-width: $base_icon_size !important;
@@ -94,18 +82,13 @@
   // submenu specific styles
   .popup-menu-item {
     border-radius: 0;
-    margin: 0;
+    @include menuitem($bg:$submenu_bg_color, $flat:false);
+    border-top-width:0;
 
     &:last-child {
-      border-radius: 0 0 $base_border_radius $base_border_radius;
-    }
-
-    &:focus,&:hover { background-color: $hover_bg_color !important;}
-    &:checked {
-      background-color: $checked_bg_color !important;
-      &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
+      border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
+      border-bottom-width:0;
     }
-    &:active { background-color: $active_bg_color !important;}
   }
 
   .popup-menu-section {
@@ -113,7 +96,7 @@
       &:hover,&:focus { border-radius: 0;}
     }
     &:last-child .popup-menu-item:last-child {
-      border-radius: 0 0 $base_border_radius $base_border_radius;
+      border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
     }
   }
 }
@@ -130,10 +113,7 @@
 
 // separator
 .popup-separator-menu-item {
-  margin: 6px 0;
-  padding:0 !important;
-  &:ltr { margin-right: $base_margin;}
-  &:rtl { margin-left: $base_margin;}
+  border:none !important;
 
   .popup-separator-menu-item-separator {
     height: 1px; //not really the whole box
@@ -153,7 +133,7 @@
     &:rtl { margin-left: 2.5em;}
 
     .popup-separator-menu-item-separator {
-      background-color: lighten($borders_color, 7%);
+      background-color: $borders_color;
     }
   }
 }
diff --git a/widgets/_quick-settings.scss b/widgets/_quick-settings.scss
index b429a2d..00bd69a 100644
--- a/widgets/_quick-settings.scss
+++ b/widgets/_quick-settings.scss
@@ -19,7 +19,7 @@
   min-height: 40px;
   border:none;
 
-  &:checked { @include button(default); }
+  &:checked { @include button(default, $c:$selected_bg_color); }
 
   & > StBoxLayout { spacing: $base_padding; }
 
@@ -65,7 +65,7 @@
 }
 
 .quick-toggle-menu {
-  background-color: $card_bg_color;
+  @include card;
   border-radius: $base_border_radius*3;
   padding: $base_padding*2;
   margin: $base_padding*2 $base_padding*3 0;
@@ -81,9 +81,9 @@
       icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
       border-radius: 999px;
       padding: 1.5 * $base_padding;
-      background-color: lighten($bg_color, 10%);
+      background-color: transparentize($fg_color, 0.8);
 
-      &.active { background-color: $selected_bg_color; }
+      &.active { background-color: $selected_bg_color;}
     }
 
     & .title {
diff --git a/widgets/_screenshot.scss b/widgets/_screenshot.scss
index 150f273..a5d0b6a 100644
--- a/widgets/_screenshot.scss
+++ b/widgets/_screenshot.scss
@@ -135,7 +135,7 @@ $screenshot_ui_button_red: $error_color;
 }
 
 .screenshot-ui-window-selector {
-  background-color: $system_bg_color;
+  @extend %osd_panel;
 
   .screenshot-ui-window-selector-window-container {
     margin: 100px;
diff --git a/widgets/_search-entry.scss b/widgets/_search-entry.scss
index faca50e..4ae8618 100644
--- a/widgets/_search-entry.scss
+++ b/widgets/_search-entry.scss
@@ -1,24 +1,11 @@
 // Search entry
-
-$search_entry_width: 320px;
-$search_entry_height: 36px;
-
-%search_entry,
 .search-entry {
-  border-radius: $search_entry_height * 0.5; // half the height
-
-  margin-top: $base_padding * 2;
+  border-radius: 99px;
+  margin-top: $base_padding*2;
   margin-bottom: $base_padding;
-  padding: $base_padding+1 $base_padding+3;
-  width: $search_entry_width;
-
-  @include entry(normal);
-  &:hover { @include entry(hover);}
-  &:focus { @include entry(focus);}
-  &:insensitive { @include entry(insensitive);}
+  width: 24em;
 
   .search-entry-icon {
-    color: inherit;
     icon-size: $base_icon_size;
     margin-top: 2px; // center vertically
     padding: 0 4px;
diff --git a/widgets/_search-results.scss b/widgets/_search-results.scss
index 644c53d..b7d72c9 100644
--- a/widgets/_search-results.scss
+++ b/widgets/_search-results.scss
@@ -15,7 +15,7 @@
   spacing: $base_padding*3;
 
   // separator (unstyled)
-  .search-section-separator { 
+  .search-section-separator {
     height: $base_margin*2; // use it as a spacer
     background-color: transparent;
   }
@@ -25,7 +25,7 @@
 .search-section-content {
   background-color: lighten($system_bg_color, 5%);
   border-radius: $modal_radius*1.5;
-  border: 1px solid $osd_outer_borders_color;
+  box-shadow:inset 0 0 0 1px solid $outer_borders_color;
   color: $osd_fg_color;
   padding: $base_padding*2;
   margin:0 $base_margin*3;
diff --git a/widgets/_switcher-popup.scss b/widgets/_switcher-popup.scss
index cec6c9a..5136c3c 100644
--- a/widgets/_switcher-popup.scss
+++ b/widgets/_switcher-popup.scss
@@ -1,8 +1,7 @@
 /* App Switcher */
 
 // same as dash
-$switcher_padding: $base_padding + 4px; // 10px
-$switcher_border_radius: $modal_radius + 8px;
+$switcher_padding: $base_padding*2;
 
 
 // the full screen container of the switcher
@@ -15,8 +14,8 @@ $switcher_border_radius: $modal_radius + 8px;
 .switcher-list {
   @extend %osd_panel;
   padding: $switcher_padding;
-  border-radius: $switcher_border_radius;
-  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
+  border-radius: $modal_radius+$switcher_padding;
+  box-shadow: 0 8px 8px 0 $shadow_color;
 
   // container for items in list
   .switcher-list-item-container {
@@ -28,6 +27,9 @@ $switcher_border_radius: $modal_radius + 8px;
     @include tile_button($osd_fg_color);
     // override over style so mouse doesn't steal focus
     &:hover {background: none;}
+    @if $is_highcontrast {
+      box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2);
+    }
   }
 
   .separator {
diff --git a/widgets/_window-picker.scss b/widgets/_window-picker.scss
index 9067a6d..1847250 100644
--- a/widgets/_window-picker.scss
+++ b/widgets/_window-picker.scss
@@ -17,10 +17,7 @@ $window_close_button_padding: 3px;
 
 // Window titles
 .window-caption {
-  color: $osd_fg_color;
-  background-color: lighten($osd_bg_color, 5%);
-  border-radius: 99px;
-  padding: $base_padding $base_padding * 2;
+  @extend %tooltip;
 }
 
 // Close button
@@ -43,6 +40,10 @@ $window_close_button_padding: 3px;
   &:active {
     background-color: lighten($window_close_button_color, 13%);
   }
+
+  @if $is_highcontrast {
+    border:2px solid $outer_borders_color;
+  }
 }
 
 .workspace-background {
diff --git a/widgets/_workspace-thumbnails.scss b/widgets/_workspace-thumbnails.scss
index 0a1867c..ecbbc41 100644
--- a/widgets/_workspace-thumbnails.scss
+++ b/widgets/_workspace-thumbnails.scss
@@ -7,8 +7,14 @@
   padding: $base_padding;
 
   .workspace-thumbnail {
-    @extend %overview_panel;
-    border-radius: 3px;
+    color: $osd_fg_color;
+    background-color: lighten($system_bg_color, 10%);
+    border-radius: $base_border_radius*0.5;
+    border: 1px solid transparent;
+
+    @if $is_highcontrast {
+      border-color: $hc_inset_color;
+    }
   }
 
   // drag and drop indicator
@@ -22,7 +28,5 @@
 // selected indicator
 .workspace-thumbnail-indicator {
   border: 3px solid $selected_bg_color;
-  border-radius: 3px;
-  padding: 0px;
-  // background-color: transparentize($selected_bg_color, 0.9);
+  border-radius: $base_border_radius;
 }