style: Refactor the button and entry drawing css

- use a single button mixin for all buttons with a saner 'style' parameter
- rework the entry mixins to be similar to the buttons'
- clear out all unused or deprecated mixins
- create some drawing functions for focus ring and high contrast inset
- replace instances of old mixins with the new

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

data/theme/gnome-shell-sass/_colors.scss

@@ -38,9 +38,6 @@ $card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91),
 $borders_color: transparentize($fg_color, $border_opacity);
 $outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 
-// buttons in notifications
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
-
 // osd colors
 $osd_borders_color: transparentize($osd_fg_color, 0.9);
 $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
@@ -67,3 +64,6 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
 // active state
 $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
 $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
+
+// selection colors
+$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));

data/theme/gnome-shell-sass/_common.scss

@@ -25,7 +25,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
 
 /* Global Values */
 
-// Base values of elemetns of the shell in their smallest "unit".
+// Base values of elements of the shell in their smallest "unit".
 // These are used in calculations elsewhere to have elements in proportion
 $base_font_size: 11pt;      // font size
 $base_padding: 6px;         // internal padding of elements
@@ -58,6 +58,8 @@ $scalable_icon_size: to_em(16px);
 $medium_scalable_icon_size: $scalable_icon_size * 1.5;
 $large_scalable_icon_size: $scalable_icon_size * 2;
 
+// animation definition
+$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
 // Stage
 stage {
@@ -72,26 +74,17 @@ stage {
   border-radius: $base_border_radius * 2;
   padding: $base_padding;
   spacing: $base_padding;
-  border-width: 2px;
-  border-style: solid;
-  border-color:transparent;
-  transition-duration: 200ms;
   text-align: center;
-  color: inherit;
+  transition-duration: 100ms;
-
-  @if $contrast == 'high' {
-    border-color: $hc_inset_color;
-  }
 }
 
 // common button styling
 %button_common {
   border-radius: $base_border_radius;
-  border-style: solid;
-  border-width: 1px;
-  font-weight: bold;
   padding: $base_padding * .5 $base_padding * 4;
-  transition-duration: 100ms;
+  font-weight: bold;
+  transition: border-width 300ms $ease_out_quad,
+              box-shadow 300ms $ease_out_quad;
 }
 
 %button {
@@ -103,22 +96,36 @@ stage {
   &:selected,
   &:active { @include button(active);}
   &:checked { @include button(checked);}
-  &.default { @include button(default);}
-
-  &.flat {
-    @include button(normal, $flat:true);
-    &: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);}
-    &.default { @include button(default, $flat:false);}
 }
+
+%flat_button {
+  @include button(normal, $style: flat);
+  &:focus { @include button(focus, $style: flat);}
+  &:hover { @include button(hover, $style: flat);}
+  &:insensitive { @include button(insensitive, $style: flat);}
+  &:selected,
+  &:active { @include button(active, $style: flat);}
+  &:checked { @include button(checked, $style: flat);}
+}
+
+%default_button {
+  @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
+  &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+  &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+  &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+  &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+}
+
+// items in popover menus
+%menuitem {
+  font-weight: normal;
+  spacing: $base_padding;
+  transition-duration: 100ms;
+  padding: $base_padding * 1.5 $base_padding * 2;
 }
 
 // common style for card elements
-%card {
+%card_common {
   border-radius: $base_border_radius * 1.5;
   padding: $scaled_padding * 2;
   margin: $base_margin;
@@ -126,6 +133,29 @@ stage {
   box-shadow: 0 1px 2px 0 $card_shadow_color;
   // bit of a hack here with border since we can't have double box-shadow
   border: 1px solid $card_shadow_border_color;
+
+  @if $contrast == 'high' {
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
+%card {
+  @extend %card_common;
+  @include button(normal, $style: card);
+  &:hover { @include button(hover, $style: card);}
+  &:active { @include button(active, $style: card);}
+  &:focus { @include button(focus, $style: card);}
+  &:insensitive { @include button(insensitive, $style: card);}
+}
+
+%card_flat {
+  @extend %card_common;
+  @include button(undecorated, $style: flat);
+  &:hover { @include button(hover, $style: flat);}
+  &:active { @include button(active, $style: flat);}
+  &:focus { @include button(focus, $style: card);}
+  &:insensitive { @include button(insensitive, $style: card);}
 }
 
 
@@ -139,10 +169,10 @@ stage {
 
 %entry {
   @extend %entry_common;
-  @include entry(normal, $c:$fg_color);
+  @include entry(normal);
-  &:hover { @include entry(hover, $c:$fg_color);}
+  &:hover { @include entry(hover);}
-  &:focus { @include entry(focus, $c:$fg_color);}
+  &:focus { @include entry(focus);}
-  &:insensitive { @include entry(insensitive, $c:$fg_color);}
+  &:insensitive { @include entry(insensitive);}
 
   StLabel.hint-text {
     color: transparentize($fg_color, 0.3);
@@ -155,36 +185,36 @@ stage {
   padding: $base_padding * 2;
   font-weight: bold !important;
 
-  &:ltr {margin-right: 1px;}
+  // needs a 1px adjustment to fit exactly into the outer radius
-  &:rtl {margin-left: 1px;}
+  $bubble_button_radius: $modal_radius - 1px;
 
-  @include button(normal, $c:$bubble_buttons_color);
+  @include button(normal, $style: bubble);
-  &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
+  &:focus { @include button(focus, $style: bubble);}
-  &:focus { @include button(focus, $c:$bubble_buttons_color);}
+  &:hover { @include button(hover, $style: bubble);}
-  &:hover { @include button(hover, $c:$bubble_buttons_color);}
+  &:active { @include button(active, $style: bubble);}
-  &:active { @include button(active, $c:$bubble_buttons_color);}
+  &:checked { @include button(checked, $style: bubble);}
-  &:checked { @include button(checked, $c:$bubble_buttons_color);}
+  &:insensitive { @include button(insensitive, $style: bubble);}
 
   &:first-child:ltr {
-    border-radius: 0 0 0 $modal_radius;
+    border-radius: 0 0 0 $bubble_button_radius;
   }
 
   &:last-child:ltr {
-    border-radius: 0 0 $modal_radius;
+    border-radius: 0 0 $bubble_button_radius;
     margin-right: 0 !important;
   }
 
   &:first-child:rtl {
-    border-radius: 0 0 $modal_radius;
+    border-radius: 0 0 $bubble_button_radius;
   }
 
   &:last-child:rtl {
-    border-radius: 0 0 0 $modal_radius;
+    border-radius: 0 0 0 $bubble_button_radius;
     margin-left: 0 !important;
   }
 
   &:first-child:last-child {
-    border-radius: 0 0 $modal_radius $modal_radius;
+    border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
@@ -263,20 +293,18 @@ stage {
   border: 1px solid $osd_outer_borders_color;
   border-radius: $forced_circular_radius;
   padding: $base_padding * 2;
-  border: 2px solid transparent;
-
   @if $contrast == 'high' {
-    border-color: $hc_inset_color;
+    @include draw_hc_inset($width: 2px,$border: true);
   }
 }
 
 // entries
 %osd_entry {
   @extend %entry_common;
-  @include entry(normal, $c:$osd_fg_color,);
+  @include entry(normal, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);
-  &:hover { @include entry(hover, $c:$osd_fg_color);}
+  &:hover { @include entry(hover, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
-  &:focus { @include entry(focus, $c:$osd_fg_color);}
+  &:focus { @include entry(focus, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
-  &:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
+  &:insensitive { @include entry(insensitive, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
 
   StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
 }
@@ -284,18 +312,22 @@ stage {
 // buttons on OSD elements
 %osd_button {
   @extend %button_common;
-  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
+  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
-  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
 }
 
 %osd_button_flat {
-  @extend %osd_button;
+  @extend %button_common;
-  @include button(undecorated, $osd:true);
+  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);
-  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+  &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
 }
 
 /* System Elements */
@@ -303,15 +335,14 @@ stage {
 // entries
 %system_entry {
   @extend %entry_common;
-  @include entry(normal, $c:$system_fg_color,);
+  @include entry(normal, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);
-  &:hover { @include entry(hover, $c:$system_fg_color);}
+  &:hover { @include entry(hover, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
-  &:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
+  &:focus { @include entry(focus, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
-  &:insensitive { @include entry(insensitive, $c:$system_fg_color);}
+  &:insensitive { @include entry(insensitive, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
 
   StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
 }
 
-
 // buttons
 %system_button {
   @include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
@@ -319,5 +350,5 @@ stage {
   &:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
   &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
   &:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
-  &:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
+  &:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
 }

data/theme/gnome-shell-sass/_default-colors.scss

@@ -23,29 +23,32 @@ $error_fg_color: $light_1;
 $error_color: $error_bg_color;
 
 // colors for selected or default elements
-$selected_bg_color: if($variant == 'light', $blue_3, $blue_4);
+$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
 $selected_fg_color: $light_1;
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
 
 // link colors
-$link_color: if($variant == 'light', $blue_3, $blue_4);
+$link_color: if($variant == 'light', $blue_4, $blue_2);
 $link_visited_color: transparentize($link_color, .6);
 
 // special cased widget definitions
-$button_mix_factor: if($variant == 'light', 12%, 9%);
+$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
-$border_opacity: if($variant == 'light', .85, .9);
+$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants
 
 // shadows
 $shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
 $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
 
+// focus colors
+$focus_color: $selected_bg_color;
+$focus_border_color: transparentize($focus_color, 0.5);
+
 // High Contrast overrides
 @if $contrast == 'high' {
     // increase border opacity
     $border_opacity: .5;
-    // increase the button mix factor
-    $button_mix_factor: 20%;
     // remove shadows
     $shadow_color: transparent;
     $text_shadow_color: transparent;
+    // less transparent focus color
+    $focus_border_color: transparentize($focus_color, 0.2);
 }

data/theme/gnome-shell-sass/_drawing.scss

@@ -1,4 +1,6 @@
-// Drawing mixins
+//
+// Drawing functions
+//
 
 // Function to convert px values to em
 @function to_em($input, $base: 16px) {
@@ -17,6 +19,33 @@
   @return mix($c, $mc, $mf);
 }
 
+// Function to mix the color and make the focus background
+@function focus_bg_color($bg, $fc:$focus_color) {
+  @return mix($fc, $bg, 5%);
+}
+
+//
+// Drawing mixins
+//
+
+// Draw the inset for High Contrast elements
+@mixin draw_hc_inset($width: 1px, $fc: $hc_inset_color, $border: false) {
+  box-shadow: inset 0 0 0 $width $fc;
+  @if $border {
+    border: $width solid $fc;
+    box-shadow: none;
+  }
+}
+
+// Draw the focus ring
+@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
+  box-shadow: inset 0 0 0 $width $fc !important;
+  @if $border {
+    border:$width solid $fc !important;
+    box-shadow: none;
+  }
+}
+
 // Mixin to convert provided font size in pt to em units
 @mixin fontsize($size, $base: 16px, $unit: pt) {
   // if pt, convert into unitless value with the assumption: 1pt = 1.091px
@@ -26,384 +55,274 @@
   // font-size: round($size) + pt;
 }
 
-// Text entries
+// Text entries drawing function
-@mixin entry($t, $c, $fc:$selected_bg_color) {
+@mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) {
   //
-// Entries drawing function
+  // $type:         entry type, possible values: normal, focus, hover, insensitive
+  // $c:            text color
+  // $bc:           background color
+  // $always_dark:  override the light theme check to use dark colors, true or false
   //
-// $t: entry type
-// $c: text color, used to derive background color of entries
-//
-// possible $t values: normal, focus, insensitive
-//
-  transition-duration: 100ms;
 
-  @if $t==normal {
+  // background color
-    background-color: transparentize($c, 0.85);
+  $entry_bg_color: mix($c, $bc, $background_mix_factor);
-    color: transparentize($c,0.3);
+
+  // background color adjustment factors
+  // the % a color is lightened or darkened for button states
+  $hover_factor: 4%;
+  $insensitive_factor: 3%;
+
+  // entry state background colors
+  $hover_entry_bg_color: if($variant == 'light', darken($entry_bg_color, $hover_factor), lighten($entry_bg_color, $hover_factor));
+  $insensitive_entry_bg_color: if($variant == 'light', lighten($entry_bg_color, $insensitive_factor), darken($entry_bg_color, $insensitive_factor));
+
+  // override entry background colours if element is always dark
+  @if $always_dark {
+    $hover_entry_bg_color: lighten($entry_bg_color, $hover_factor);
+    $insensitive_entry_bg_color: darken($entry_bg_color, $insensitive_factor);
+  }
 
   @if $contrast == 'high' {
-      box-shadow: inset 0 0 0 1px $hc_inset_color;
+    @include draw_hc_inset();
-    }
   }
 
-  @if $t==focus {
+  // normal
-    background-color: mix(transparentize($c, 0.75), $fc, 95%);
+  @if $type == 'normal' {
-    box-shadow: inset 0 0 0 2px transparentize($fc, 0.3);
+    background-color: $entry_bg_color;
+    color: transparentize($c,0.3);
+  }
+
+  // focus styles
+  @if $type == 'focus' {
+    @include focus_ring();
+    background-color: focus_bg_color($entry_bg_color);
     color: $c;
-    &:hover {}
   }
 
-  @if $t==hover {
+  // hover styles
-    background-color: transparentize($c, 0.75);
+  @if $type == 'hover' {
+    background-color: $hover_entry_bg_color;
+    color: $c;
   }
 
-  @if $t==insensitive {
+  // insensitive styles
-    background-color:transparentize($c, 0.75);
+  @if $type == 'insensitive' {
+    background-color: $insensitive_entry_bg_color;
     color: transparentize($c, 0.5);
   }
 }
 
-// On-screen Keyboard
-@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
-//
-// Keyboard key drawing function
-//
-// $t:    key type,
-// $c:    base key color for colored* types
-// $tc:   optional text color for colored* types
-//
-// possible $t values:
-// normal, hover, active, checked, insensitive, undecorated
-//
 
-  // normal key
-  @if $t==normal {
-    color: $tc;
-    background-color: lighten($c, 3%);
-  }
-
-  // focused key
-  @if $t==focus {
-    color: $tc;
-    background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
-    &:hover {
-      background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
-    }
-    &:active {
-      background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
-    }
-  }
-
-  // hover key
-  @else if $t==hover {
-    color: $tc;
-    background-color: lighten($c, 7%);
-  }
-
-  // active key
-  @else if $t==active {
-    color: $tc;
-    background-color: lighten($c, 10%);
-  }
-
-  // checked key
-  @else if $t==checked {
-    color: $tc;
-    background-color: lighten($c, 15%);
-  }
-
-  // insensitive key
-  @else if $t==insensitive {
-    color: $insensitive_fg_color;
-    background-color: $insensitive_bg_color;
-  }
-
-  // reset
-  @else if $t==undecorated {
-    background-color: transparent;
-    background-image: none;
-  }
-}
-
-//
 // Button drawing function
+@mixin button($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) {
   //
-// $t:    button type
+  // $type:         button type, possible values:
-//
+  //                  - normal, focus, hover, active, checked, insensitive, default, undecorated
-// possible $t values:
-// normal, focus, hover, active, checked, insensitive, default, undecorated,
-//
   // $c:            button bg color, derived from bg_color
   // $tc:           button text color, derived from fg_color
-//
+  // $style:        button style, possible values: card, bubble, flat, default
-// $flat:   button has no styling
+  // $always_dark:  override the light theme check to use dark colors, true or false
-// $osd:    button uses OSD styling
-// $card:   button uses card styling
   //
 
-@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false, $card: false){
+  // mix input colors to get button background color
-
+  $button_bg_color: mix($tc, $c, $background_mix_factor);
-  // background color
-  $button_bg_color: mix($tc, $c, $button_mix_factor);
-
-  // background color override for OSD elements
-  @if $osd {
-    $button_bg_color: transparentize($tc, 0.9);
-  }
 
   // background color override for card elements
-  @if $card {
+  @if $style == 'card' { $button_bg_color: $card_bg_color;}
-    $button_bg_color: $card_bg_color;
+  // background color override for buttons in notifications
+  @if $style == 'bubble' { $button_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 10%));}
+  // background color mix override for flat style; the button bg color is the background color input
+  @if $style == 'flat' { $button_bg_color: $c;}
+  // background color mix override for default button style
+  @if $style == 'default' { $button_bg_color: $c;}
 
+  // background color adjustment factors
+  // the % a color is lightened or darkened for button states
+  $hover_factor: 4%;
+  $active_factor: 9%;
+  $checked_factor: 8%;
+  $insensitive_factor: 3%;
+
+  // flat style overrides
+  @if $style == 'flat' {
+    $hover_factor: 7%; // stronger factor in flat style
+  }
+
+  // button state background colors
+  $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
+  $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
+  $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
+  $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
+
+  // override button background colours if element is always dark
+  @if $always_dark {
+    $hover_button_bg_color: lighten($button_bg_color, $hover_factor);
+    $active_button_bg_color: lighten($button_bg_color, $active_factor);
+    $checked_button_bg_color: lighten($button_bg_color, $checked_factor);
+    $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
+  }
+
+  // flat style overrides
+  @if $style == 'flat' {
+    $insensitive_button_bg_color: $button_bg_color;
+  }
+
+  // high contrast overrides
   @if $contrast == 'high' {
-      $button_bg_color: hc_color_mix($card_bg_color);
+    // override button background colors for high contrast
+    $button_bg_color: hc_color_mix($button_bg_color);
+    $hover_button_bg_color: hc_color_mix($hover_button_bg_color);
+    $active_button_bg_color: hc_color_mix($active_button_bg_color);
+    $checked_button_bg_color: hc_color_mix($checked_button_bg_color);
+
+    // also draw the inset border
+    @include draw_hc_inset();
+
+    // duplicate flat bg color for High Contrast
+    @if $style == 'flat' {
+      $button_bg_color: $c;
+    }
+
+    @if $style == 'default' {
+      @include draw_hc_inset($width:0px);
     }
   }
 
-  // normal button
+  // normal style
-  @if $t==normal {
+  @if $type == 'normal' {
     color: $tc;
     background-color: $button_bg_color;
-    @if $flat {
-      background-color: transparent;
-    }
-    @if $contrast == 'high' {
-      box-shadow: inset 0 0 0 1px $hc_inset_color;
-    }
-  }
-
-  // focused button
-  @if $t==focus {
-    $focus_bg_color: mix($button_bg_color, $selected_bg_color, 90%);
-    color: $tc;
-    background-color: $focus_bg_color;
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
-
-    &:hover {
-      background-color: if($variant == 'light', darken($focus_bg_color, 3%), lighten($focus_bg_color, 3%));
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
-    }
-    &:active {
-      background-color: if($variant == 'light', darken($focus_bg_color, 6%), lighten($focus_bg_color, 6%));
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
-    }
-
-    // card style
-    @if $card {
-      border-color: transparent;
-    }
   }
 
   // hover button
-  @else if $t==hover {
+  @else if $type == 'hover' {
-    $hover_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
     color: $tc;
-    background-color: $hover_bg_color;
+    background-color: $hover_button_bg_color;
-
-    @if $contrast == 'high' {
-      background-color: hc_color_mix($hover_bg_color);
-    }
-
-    // card style
-    @if $card {
-      $card_hover_bg_color:  mix($tc, $card_bg_color, 4%);
-      background-color: $card_hover_bg_color;
-
-      @if $contrast == 'high' {
-        background-color: hc_color_mix($card_hover_bg_color);
-      }
-    }
   }
 
   // active button
-  @else if $t==active {
+  @else if $type == 'active' {
-    $active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
     color: $tc;
-    background-color: $active_bg_color;
+    background-color: $active_button_bg_color;
-
+    &:hover { background-color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
-    @if $contrast == 'high' {
+    &:focus {
-      background-color: hc_color_mix($active_bg_color);
+      // otherwise use focus bg color mixin
-    }
+      $bg: focus_bg_color($active_button_bg_color);
-
+      background-color: $bg;
-    // card style
-    @if $card {
-      $card_active_bg_color:  mix($tc, $card_bg_color, 7%);
-      background-color: $card_active_bg_color;
-
-      @if $contrast == 'high' {
-        background-color: hc_color_mix($card_active_bg_color);
-      }
     }
   }
 
   // checked button
-  @else if $t==checked {
+  @else if $type == 'checked' {
-    $checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
     color: $tc;
-    background-color: $checked_bg_color;
+    background-color: $checked_button_bg_color;
-
+    &:hover { background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
-    &:hover { background-color: lighten($checked_bg_color, 12%);}
+    &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_factor));}
-    &:active { background-color: lighten($checked_bg_color, 15%);}
-
-    @if $contrast == 'high' {
-      background-color: hc_color_mix($checked_bg_color);
-      &:hover { background-color: hc_color_mix(lighten($checked_bg_color, 12%));}
-      &:active { background-color: hc_color_mix(lighten($checked_bg_color, 15%));}
-    }
   }
 
   // insensitive button
-  @else if $t==insensitive {
+  @else if $type == 'insensitive' {
-    color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
+    $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
-    background-color: if($variant == 'light', transparentize($button_bg_color, .9), transparentize($button_bg_color, .95));
+    color: $insensitive_button_fg_color;
+    background-color: $insensitive_button_bg_color;
+    &:hover { background-color: if($variant == 'light', darken($insensitive_button_bg_color, $hover_factor), lighten($insensitive_button_bg_color, $hover_factor));}
 
+    // no outline in High Contrast for insensitive buttons
     @if $contrast == 'high' {
-      // no border since it isn't sensitive
+      @include draw_hc_inset($fc:transparent);
-      box-shadow: none;
     }
   }
 
-  // default/suggested button
+  // focused button
-  @else if $t==default {
+  @else if $type == 'focus' {
-    background-color: $selected_bg_color;
+    color: $tc;
-    color: $selected_fg_color;
+    @include focus_ring();
 
-    &:focus {
+    // use a different focus ring color for default style
-      box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
+    @if $style == 'default' {
+      @include focus_ring($fc:$selected_borders_color);
     }
-    &:hover, &:focus {
+    // change background color if style is flat
-      background-color: lighten($selected_bg_color, 5%);
+    @if $style == 'flat' {
-      color: lighten($selected_fg_color, 5%);
+      $button_bg_color: transparentize($button_bg_color, 0.75);
     }
-    &:active {
+
-      background-color: darken($selected_bg_color, 7%);
+    background-color: focus_bg_color($button_bg_color);
-      color: darken($selected_fg_color, 7%);
+
-    }
+    &:hover {
-    &:insensitive {
+      background-color: focus_bg_color($hover_button_bg_color);
-      @include button(insensitive);
-      background-color: transparentize($selected_bg_color, .5);
-      color: transparentize($selected_fg_color, .5);
     }
   }
 
   // reset (unstyled button)
-  @else if $t==undecorated {
+  @else if $type == 'undecorated' {
     background-color: transparent;
     border-color: transparent;
     box-shadow: none;
 
     &:insensitive {
-      @include button(insensitive);
       background-color: transparent !important;
     }
   }
 }
 
 // Helper mixin for button-like elements with an icon
-@mixin tile_button($color, $flat: true) {
+@mixin tile_button($fg:$system_fg_color, $bg:$system_bg_color, $raised: false, $system: true) {
+  //
+  // $fg: foreground color
+  // $bg: background color
+  //
+  // $raised: uses raised style, true or false
+  // $system: uses system styles, true or false
+  //
+
+
   @extend %tile;
-  color: $color;
-
-  // focus-color
-  $fc: mix($selected_bg_color, $color, 90%);
-
-  @if $flat {
-    background-color: transparent;
-    &:hover { background-color: transparentize($color, .88);}
-    &:highlighted, &:focus {
-      background-color: transparentize($fc, .84);
-      &:hover {
-        background-color: transparentize($fc, .68);
-      }
-    }
-  } @else {
-    background-color: transparentize($color, .84);
-    &:hover { background-color: transparentize($color, .72);}
-    &:highlighted, &:focus {
-      background-color: transparentize(mix($fc, $color, 20%), .84);
-      &:hover {
-        background-color: transparentize(mix($fc, $color, 20%), .68);
-      }
-    }
-  }
-
-  // bit of a hack to have nice high contrast
-  @if $contrast == 'high' {
-    @if $flat {
-      &:hover {
-        box-shadow: inset 999px 0 0 0 transparentize($color, .92);
-      }
-      &:highlighted, &:focus {
-        box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
-      }
-    } @else {
-      box-shadow: inset 999px 0 0 0 transparentize($color, .92);
-      border-color: transparentize($color, .44);
-      &:highlighted, &:focus {
-        box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
-      }
-    }
-  }
-
-  &:highlighted, &:focus {
-    border-color: transparentize($fc, .3);
-  }
-
-  &:active {
-    background-color: transparentize($color, .76);
-    &:focus {
-      background-color: transparentize($fc, .68);
-    }
-  }
 
+  @if $raised {
+    @include button(normal, $tc:$fg, $c:$bg, $always_dark: $system);
+    &:focus { @include button(focus, $tc:$fg, $c:$bg, $always_dark: $system);}
+    &:hover { @include button(hover, $tc:$fg, $c:$bg, $always_dark: $system);}
+    &:active { @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);}
     &:selected,
-  &:checked {
+    &:checked { @include button(checked, $tc:$fg, $c:$bg, $always_dark: $system);}
-    background-color: transparentize($color, .81);
+    &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
-    &:active { background-color: transparentize($color, .78);}
+  } @else {
-    &:hover { background-color: transparentize($color, .75);}
+    @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
+    &:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+    &:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+    &:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+    &:selected,
+    &:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+    &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+  }
+
+  @if $contrast == 'high' {
+    @include draw_hc_inset();
+  }
+
+  &:highlighted {
+    // brighter background color than other states
+    $bg: transparentize($fg, 0.8);
+    @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);
   }
 
   &:drop {
-    border-color: transparentize($selected_bg_color, .2);
     background-color: transparentize($selected_bg_color, .8);
-  }
+    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
-}
-
-// styling for elements within popovers that look like notifications
-@mixin card($flat: false) {
-  @extend %card;
-
-  @if $flat {
-    @include button(undecorated, $card: false);
-    &:hover {@include button(hover, $card: false);}
-    &:active {@include button(active, $card: false);}
-  } @else {
-    @include button(normal, $card: true);
-    &:hover {@include button(hover, $card: true);}
-    &:active {@include button(active, $card: true);}
-  }
-  &:focus {@include button(focus, $card: true);}
-  &:insensitive {
-    @include button(insensitive, $card: true);
   }
 }
 
 // styling for all menuitems in popovers
-@mixin menuitem($bg, $flat: true) {
+@mixin menuitem($bg, $style: flat) {
+
+  // extend common styles
+  @extend %menuitem;
 
   // lighten the background color always
   $bg: lighten($bg,5%);
 
-  font-weight: normal;
+  @if $style == 'flat' {
-  spacing: $base_padding;
-  transition-duration: 100ms;
-  padding: $base_padding * 1.5 $base_padding * 2;
-
-  @if $flat {
     @include button(undecorated);
   } @else {
     @include button(normal, $c:$bg);
@@ -416,8 +335,8 @@
   &:checked {@include button(checked, $c:$bg);}
 }
 
-//
 // Panel menu/button drawing function
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: flat, $highlighted_child: false, $child_class:"") {
   //
   // $bg: background color, derived from $panel_fg_color
   // $fg: foreground color, also derived from $panel_fg_color
@@ -428,8 +347,7 @@
   // $child_class:        class name of the child element
   //
 
-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
+  // common styles
-
   transition-duration: 150ms;
   margin: 3px;
   border: 1px solid transparent;
@@ -437,9 +355,10 @@
 
   font-weight: bold;
   background-color: transparent;
+
   color: $fg;
 
-  @if $flat {
+  @if $style == 'flat' {
     box-shadow: none;
 
     &:active, &:focus, &:checked {
@@ -489,7 +408,7 @@
 
       // use box-shadow instead of border
        @if $contrast == 'high' {
-        box-shadow: inset 0 0 0 1px $hc_inset_color;
+        @include draw_hc_inset();
       }
     }
 

data/theme/gnome-shell-sass/_high-contrast-colors.scss

@@ -37,9 +37,6 @@ $card_shadow_border_color: $card_bg_color;
 $borders_color: transparentize($fg_color, $border_opacity);
 $outer_borders_color: $borders_color;
 
-// buttons in notifications
-$bubble_buttons_color: lighten($bg_color, 5%);
-
 // osd colors
 $osd_borders_color: transparentize($osd_fg_color, 0.8);
 $osd_outer_borders_color: $osd_borders_color;
@@ -67,6 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%);
 $active_bg_color: lighten($bg_color, 22%);
 $active_fg_color: lighten($fg_color, 22%);
 
+// selection colors
+$selected_borders_color: lighten($selected_bg_color, 30%);
 
 //
 // High Contrast specific definitions

data/theme/gnome-shell-sass/widgets/_app-grid.scss

@@ -19,7 +19,7 @@ $app_folder_size: 720px;
 
 // items in the app grid and dash
 .overview-tile {
-  @include tile_button($system_fg_color);
+  @include tile_button($bg:$system_base_color);
 
   // override the %tile style
   border-radius: $base_border_radius*3;
@@ -38,7 +38,7 @@ $app_folder_size: 720px;
 
 // app folders
 .app-folder {
-  @include tile_button($system_fg_color, $flat: false);
+  @include tile_button($bg:$system_base_color, $raised: true);
 }
 
 // Running app indicator (also shown in dash)
@@ -47,10 +47,11 @@ $app_folder_size: 720px;
   width: 5px;
   border-radius:5px;
   background-color: $system_fg_color;
-  margin-bottom: 2px;
 
   @if $contrast == 'high' {
     margin-bottom: 4px;
+  } @else {
+    margin-bottom: 2px;
   }
 }
 
@@ -66,12 +67,14 @@ $app_folder_size: 720px;
 
   border-radius: $modal_radius * 4;
   background-color: $system_overlay_bg_color;
-  box-shadow: inset 0 0 0 1px $system_borders_color;
+  color: $system_fg_color;
-  padding: 0 1px;
 
   @if $contrast == 'high' {
     padding: 0 2px;
     box-shadow: inset 0 0 0 2px $hc_inset_color;
+  } @else {
+    padding: 0 1px;
+    box-shadow: inset 0 0 0 1px $system_borders_color;
   }
 
   & .folder-name-container {
@@ -84,6 +87,7 @@ $app_folder_size: 720px;
     }
 
     & .folder-name-entry {
+      @extend %system_entry;
       width: 12em;
     }
   }
@@ -91,9 +95,11 @@ $app_folder_size: 720px;
   & .page-indicators {
     margin-bottom: $base_padding * 4;
   }
+
+  & .overview-tile {
+    @include tile_button($bg:$system_overlay_bg_color);
+  }
 }
-
-
 
 // Rename popup for app folders
 .rename-folder-popup {
@@ -166,11 +172,7 @@ $page_indicator_size: 10px;
 
   > StIcon { color: $system_fg_color;}
 
-  @if $contrast == 'high' {
+  @include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat);
-    @include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5));
+  &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
-  }
+  &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
-
-  &:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
-  &:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
-  &:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
 }

data/theme/gnome-shell-sass/widgets/_buttons.scss

@@ -4,6 +4,15 @@
   @extend %button;
   // uses scalable value since it's a text element
   min-height: to_em(22px);
+
+  // default style
+  &.default {
+    @extend %default_button;
+  }
+  // flat style
+  &.flat {
+    @extend %flat_button;
+  }
 }
 
 .icon-button {
@@ -17,4 +26,14 @@
     icon-size: $scalable_icon_size;
     -st-icon-style: symbolic;
   }
+
+  // default style
+  &.default {
+    @extend %default_button;
+  }
+
+  // flat style
+  &.flat {
+    @extend %flat_button;
+  }
 }

data/theme/gnome-shell-sass/widgets/_calendar.scss

@@ -15,7 +15,7 @@
 
 /* today button (the date) */
 .datemenu-today-button {
-  @include card($flat: true);
+  @extend %card_flat;
   padding: $base_padding * 1.5;
 
   // weekday label
@@ -31,7 +31,7 @@
 
 /* Calendar */
 .calendar {
-  @include card($flat: true);
+  @extend %card_flat;
   margin-top: 0;
   padding: 0;
 
@@ -47,7 +47,7 @@
     // month label
     .calendar-month-label {
       @extend %heading;
-      @extend .button, .flat;
+      @extend %flat_button;
       color: $fg_color !important;
       padding: 8px 0;
       width: 10em;
@@ -67,7 +67,7 @@
   .calendar-day {
     @extend %numeric;
     @extend %smaller;
-    @extend .button, .flat;
+    @extend %flat_button;
     border-radius: $forced_circular_radius;
     height: 3em;
     width: 3em;
@@ -92,7 +92,7 @@
     }
 
     &.calendar-today {
-      @extend .default;
+      @extend %default_button;
       border: none;
       &.calendar-day-with-events {
         background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
@@ -109,7 +109,7 @@
   .calendar-day-heading {
     @extend %numeric;
     @extend %smaller;
-    @extend .button, .flat;
+    @extend %flat_button;
     font-weight: bold;
     text-align: center;
     margin: $base_margin;
@@ -128,17 +128,16 @@
     border-radius: $base_border_radius * 0.5;
     background-color: transparentize($insensitive_fg_color, .8);
     color: $insensitive_fg_color;
-    border: 1px solid transparent;
 
     @if $contrast == 'high' {
-      border-color: $hc_inset_color;
+      @include draw_hc_inset();
     }
   }
 }
 
 /* Events */
 .events-button {
-  @include card;
+  @extend %card;
 
   .events-box {
     spacing: $base_padding;
@@ -163,7 +162,7 @@
 
 /* World clocks */
 .world-clocks-button {
-  @include card;
+  @extend %card;
 
   .world-clocks-grid {
     spacing-rows: $base_padding;
@@ -201,7 +200,7 @@
 
 /* Weather */
 .weather-button {
-  @include card;
+  @extend %card;
 
   .weather-box {
     spacing: $base_padding + $base_margin;

data/theme/gnome-shell-sass/widgets/_dash.scss

@@ -16,11 +16,13 @@ $dash_border_radius: $modal_radius + $dash_padding;
   .dash-background {
     background-color: $dash_background_color;
     border-radius: $dash_border_radius;
-    border: 2px solid transparent;
+    padding-top: $dash_padding * 2;
-    padding: $dash_padding * 2 $dash_padding; // padding is uneven
+    padding-bottom: $dash_padding * 2;
+    padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values
+    padding-right: $dash_padding + 2px;
 
     @if $contrast == 'high' {
-      border-color: $hc_inset_color;
+      @include draw_hc_inset($width: 2px);
     }
   }
 
@@ -39,17 +41,9 @@ $dash_border_radius: $modal_radius + $dash_padding;
       height: $dash_placeholder_size;
     }
 
-    // app icons
+    .show-apps,
     .overview-tile {
-      // inherits styles from _app-grid.css
+      @include tile_button($bg:$dash_background_color);
-    }
-
-    // button to show app grid
-    .show-apps {
-      @include tile_button($system_fg_color);
-    }
-
-    .show-apps, .overview-tile {
       margin: $base_margin * 0.5;
       padding: $base_padding;
       border-radius: $base_border_radius * 2;}

data/theme/gnome-shell-sass/widgets/_keyboard.scss

@@ -40,12 +40,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   border-radius: $key_border_radius;
   box-shadow: 0 1px 0 0 $shadow_color;
 
-  @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
+  @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
-  &:focus { @include keyboard_key(focus);}
+  &:focus { @include button(focus);}
-  &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+  &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
-  &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+  &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
-  &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
+  &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
 
   &:grayed { //FIXMEy
     background-color: darken($bg_color, 3%);
@@ -55,10 +55,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
   // non-character keys
   &.default-key {
-    @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
+    @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
-    &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
+    &:hover { @include button(hover, $c:$default_key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
+    &:active { @include button(active, $c:$default_key_bg_color, $tc:$osd_fg_color);}
-    &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
+    &:checked { @include button(checked, $c:$default_key_bg_color, $tc:$osd_fg_color);}
     border-radius: $key_border_radius;
 
     // keys that may be latched: ctrl/alt/shift
@@ -70,10 +70,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
   // enter key is suggested-action
   &.enter-key {
-    @include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
+    @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
+    &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
-    &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
+    &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
-    &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
+    &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
     border-radius: $key_border_radius;
     color: $osd_fg_color;
   }
@@ -106,12 +106,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
   padding: $base_padding;
 
   .keyboard-key {
-    @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
+    @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
-    &:focus { @include keyboard_key(focus);}
+    &:focus { @include button(focus);}
-    &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+    &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+    &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
-    &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
+    &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
 
     border-radius:$key_border_radius;
   }
@@ -148,11 +148,11 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
     border-radius: 4px;
     padding: 0px $base_padding * 3;
 
-    @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
+    @include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
 
-    &:focus { @include keyboard_key(focus);}
+    &:focus { @include button(focus);}
-    &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+    &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+    &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
-    &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
+    &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
   }
 }

data/theme/gnome-shell-sass/widgets/_login-lock.scss

@@ -157,7 +157,7 @@ $_gdm_dialog_width: 23em;
 
   // %system_entry style override to have neutral focus color with wallpaper background
   .login-dialog-prompt-entry {
-    &:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));}
+    &:focus { @include entry(focus, $c:$system_fg_color);}
   }
 }
 

data/theme/gnome-shell-sass/widgets/_looking-glass.scss

@@ -97,7 +97,7 @@
 }
 
 .lg-extension {
-  @include card;
+  @extend %card;
 }
 
 .lg-extension-name {

data/theme/gnome-shell-sass/widgets/_message-list.scss

@@ -62,7 +62,7 @@
 
 // message bubbles
 .message {
-  @include card;
+  @extend %card;
   padding: 0 !important;
 
   // icon container

data/theme/gnome-shell-sass/widgets/_misc.scss

@@ -22,7 +22,7 @@
     box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
 
     @if $contrast == 'high' {
-      box-shadow:inset 0 0 0 1px $hc_inset_color;
+      @include draw_hc_inset();
     }
   }
 }

data/theme/gnome-shell-sass/widgets/_notifications.scss

@@ -12,7 +12,7 @@ $notification_banner_width: 34em;
   margin: $base_margin;
 
   @if $contrast == 'high' {
-    border: 1px solid $hc_inset_color;
+    @include draw_hc_inset();
   }
 
   .notification-actions {

data/theme/gnome-shell-sass/widgets/_panel.scss

@@ -72,11 +72,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     }
 
     &.screen-recording-indicator {
-      @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false);
+      @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
     }
 
     &.screen-sharing-indicator {
-      @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false);
+      @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
     }
 
     // clock
@@ -106,11 +106,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     // unfortunate duplication to keep indicator style in these states
     .panel-button {
       &.screen-recording-indicator {
-        @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false);
+        @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
       }
 
       &.screen-sharing-indicator {
-        @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false);
+        @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
       }
     }
   }

data/theme/gnome-shell-sass/widgets/_popovers.scss

@@ -83,7 +83,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
   // submenu specific styles
   .popup-menu-item {
     border-radius: 0;
-    @include menuitem($bg:$submenu_bg_color, $flat:false);
+    @include menuitem($bg:$submenu_bg_color);
     border-top-width:0;
 
     &:last-child {

data/theme/gnome-shell-sass/widgets/_quick-settings.scss

@@ -21,7 +21,8 @@
 }
 
 .quick-toggle {
-  &:checked { @include button(default, $c:$selected_bg_color); }
+  background-color: none;
+  &:checked { @extend %default_button;}
 
   & > StBoxLayout { spacing: $base_padding * 1.5; }
 
@@ -62,7 +63,7 @@
     border-color: transparentize($fg_color, .75);
 
     &:checked {
-      @include button(default, $c:$selected_bg_color);
+      @extend %default_button;
       border-color: $selected_borders_color;
     }
 
@@ -90,7 +91,7 @@
 }
 
 .quick-toggle-menu {
-  @include card;
+  @extend %card;
 
   &:insensitive {
     // override insensitive style on submenu
@@ -170,7 +171,7 @@
 .keyboard-brightness-level {
   spacing: $base_padding;
 
-  .button:checked { @include button(default, $c:$selected_bg_color); }
+  .button:checked { @extend %default_button; }
 }
 
 // background apps

data/theme/gnome-shell-sass/widgets/_screenshot.scss

@@ -87,7 +87,7 @@ $screenshot_ui_button_red: $red_4;
   spacing: $base_padding * 0.5;
 
   @if $contrast == 'high' {
-    box-shadow: inset 0 0 0 1px $hc_inset_color;
+    @include draw_hc_inset();
   }
 }
 
@@ -98,7 +98,7 @@ $screenshot_ui_button_red: $red_4;
   border-radius: $forced_circular_radius;
 
   @if $contrast == 'high' {
-    box-shadow: inset 0 0 0 1px $hc_inset_color;
+    @include draw_hc_inset();
   }
 
   > StIcon { icon-size: $base_icon_size;}

data/theme/gnome-shell-sass/widgets/_search-results.scss

@@ -36,7 +36,7 @@
 }
 
 %search_section_content_item {
-  @include tile_button($system_fg_color);
+  @include tile_button($bg:$system_overlay_bg_color);
   border-radius: $base_border_radius * 1.65;
 }
 

data/theme/gnome-shell-sass/widgets/_switcher-popup.scss

@@ -24,7 +24,7 @@ $switcher_radius: $modal_radius + $switcher_padding;
 
   // each item in the list
   .item-box {
-    @include tile_button($osd_fg_color);
+    @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
     // override %tile style so mouse doesn't steal focus
     &:hover {background: none;}
   }