style: Card style rework for light scheme

- clean up button mixin
- add new card-specific styles and colors
- fixes #7153

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

@@ -44,6 +44,11 @@ $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.
 // buttons
 $button_mix_factor: if($variant == 'light', 12%, 9%);
 
+// color definitions for "card" elements
+$card_bg_color: if($variant == 'light', $light_1, lighten($bg_color, 7%));
+$card_shadow_color: if($variant == 'light', transparentize($dark_5, .97), transparent);
+$card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91), transparent);
+
 // notifications
 $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 

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

@@ -84,13 +84,14 @@ stage {
   }
 }
 
-// normal button styling
+// 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;
 }
 
 %button {
@@ -116,6 +117,16 @@ stage {
   }
 }
 
+// common style for card elements
+%card {
+  border-radius: $base_border_radius * 1.5;
+  padding: $scaled_padding * 2;
+  margin: $base_margin;
+  background-color: $card_bg_color;
+  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;
+}
 
 // normal entry style
 %entry_common {

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

@@ -82,9 +82,7 @@
 // $tc:   optional text color for colored* types
 //
 // possible $t values:
-// normal, hover, active, insensitive, insensitive-active,
-// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
-// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
+// normal, hover, active, checked, insensitive, undecorated
 //
 
   // normal key
@@ -142,26 +140,34 @@
 //
 // Button drawing function
 //
-// $t:    button type,
-// $c:    base button colors, derived from fg_color
-// $tc:    base button colors, derived from fg_color
+// $t:    button type
 //
 // possible $t values:
-// normal, hover, active, insensitive, insensitive-active,
-// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
-// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
+// normal, focus, hover, active, checked, insensitive, default, undecorated,
+//
+// $c:    button bg color, derived from bg_color
+// $tc:   button text color, derived from fg_color
+//
+// $flat:   button has no styling
+// $osd:    button uses OSD styling
+// $card:   button uses card styling
 //
-// since buttons are all flat an borderless now the mixin is simpler
 
-@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false) {
+@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false, $card: false){
 
+  // background color
   $button_bg_color: mix($tc, $c, $button_mix_factor);
-  transition-duration: 100ms;
 
+  // background color override for OSD elements
   @if $osd {
     $button_bg_color: transparentize($tc, 0.9);
   }
 
+  // background color override for card elements
+  @if $card {
+    $button_bg_color: $card_bg_color;
+  }
+
   // normal button
   @if $t==normal {
     color: $tc;
@@ -172,6 +178,13 @@
     @if $is_highcontrast {
       box-shadow: inset 0 0 0 1px $hc_inset_color;
     }
+
+    // card style
+    @if $card {
+      @if $is_highcontrast {
+        background-color: mix($button_bg_color, $hc_inset_color, 50%);
+      }
+    }
   }
 
   // focused button
@@ -180,14 +193,20 @@
     color: $tc;
     background-color: $focus_bg_color;
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
+
     &:hover {
-      background-color: lighten($focus_bg_color, 3%);
+      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: lighten($focus_bg_color, 6%);
+      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
@@ -199,6 +218,16 @@
     @if $is_highcontrast {
       background-color: mix($hover_bg_color, $hc_mix_color, 90%);
     }
+
+    // card style
+    @if $card {
+      $card_hover_bg_color:  mix($tc, $card_bg_color, 4%);
+      background-color: $card_hover_bg_color;
+
+      @if $is_highcontrast {
+        background-color: mix($card_hover_bg_color, $hc_inset_color, 40%);
+      }
+    }
   }
 
   // active button
@@ -210,6 +239,12 @@
     @if $is_highcontrast {
       background-color: mix($active_bg_color, $hc_mix_color, 90%);
     }
+
+    // card style
+    @if $card {
+      $card_active_bg_color:  mix($tc, $card_bg_color, 7%);
+      background-color: $card_active_bg_color;
+    }
   }
 
   // checked button
@@ -262,13 +297,15 @@
     }
   }
 
-  // reset
+  // reset (unstyled button)
   @else if $t==undecorated {
     background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
     &:insensitive {
       @include button(insensitive);
-      background-color: transparent;
-      box-shadow: none;
+      background-color: transparent !important;
     }
   }
 }
@@ -345,24 +382,20 @@
 
 // styling for elements within popovers that look like notifications
 @mixin card($flat: false) {
-  border-radius: $base_border_radius * 1.5;
-  padding: $scaled_padding * 2;
-  margin: $base_margin;
+  @extend %card;
 
   @if $flat {
-    @include button(undecorated);
+    @include button(undecorated, $card: false);
+    &:hover {@include button(hover, $card: false);}
+    &:active {@include button(active, $card: false);}
   } @else {
-    @include button(normal);
+    @include button(normal, $card: true);
+    &:hover {@include button(hover, $card: true);}
+    &:active {@include button(active, $card: true);}
   }
-
-  &:hover {@include button(hover);}
-  &:active {@include button(active);}
-  &:focus {@include button(focus);}
+  &:focus {@include button(focus, $card: true);}
   &:insensitive {
-    @include button(insensitive);
-    @if $flat {
-      background-color: transparent;
-    }
+    @include button(insensitive, $card: true);
   }
 }
 
@@ -379,7 +412,6 @@
 
   @if $flat {
     @include button(undecorated);
-    box-shadow: none !important;
   } @else {
     @include button(normal, $c:$bg);
   }

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

@@ -44,6 +44,11 @@ $button_mix_factor: 20%;
 // notifications
 $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 
+// color definitions for card elements
+$card_bg_color: if($variant == 'light', $light_1, $bg_color);
+$card_shadow_color: transparent;
+$card_shadow_border_color: $card_bg_color;
+
 // color definitions for system elements
 $system_base_color: $dark_5;
 $system_fg_color: $light_1;

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

@@ -15,7 +15,7 @@
 
 /* today button (the date) */
 .datemenu-today-button {
-  @include card(flat);
+  @include card($flat: true);
   padding: $base_padding * 1.5;
 
   // weekday label
@@ -31,7 +31,7 @@
 
 /* Calendar */
 .calendar {
-  @include card(flat);
+  @include card($flat: true);
   margin-top: 0;
   padding: 0;