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>

16 files changed, 151 insertions, 158 deletions

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;
 }