[libadwaita/wip/exalm/list-shadow: 5/6] stylesheet: List/card style tweaks

[Alexander Mikhaylenko <alexm src gnome org>]

commit 9ddfee3621e8ab174061fb69da35bd427b012d7c
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Nov 8 19:08:43 2021 +0500

    stylesheet: List/card style tweaks
    
    - Shadow instead of border
    - Consistently darker nested lists for AdwExpanderRow
    - Kill card_border_color because it's not needed anymore
    - Refactor the style so it's defined in one place - in .card
    - Use the same style minus border-radius for shortcuts
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/319

 src/stylesheet/_colors.scss                   |  3 +--
 src/stylesheet/_defaults.scss                 |  4 ++--
 src/stylesheet/widgets/_buttons.scss          |  1 -
 src/stylesheet/widgets/_lists.scss            |  9 +++------
 src/stylesheet/widgets/_misc.scss             | 15 +++++++++------
 src/stylesheet/widgets/_shortcuts-window.scss | 15 ++++-----------
 6 files changed, 19 insertions(+), 28 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index bd0d9b22..6ff2eb86 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -1,6 +1,5 @@
 $border_opacity: if($contrast == 'high', .5, .15);
 $thin_border_opacity: if($contrast == 'high', .25, .05);
-$card_border_opacity: if($contrast == 'high', .5, .18);
 $focus_border_opacity: if($contrast == 'high', 0.8, 0.5);
 $window_outline_opacity: if($contrast == 'high', .3, .1);
 
@@ -32,7 +31,7 @@ $headerbar_shade_color: gtkcolor(headerbar_shade_color);
 
 $card_bg_color: gtkcolor(card_bg_color);
 $card_fg_color: gtkcolor(card_fg_color);
-$card_border_color: gtkalpha(gtkcolor(card_border_color), $card_border_opacity);
+$card_shade_color: gtkcolor(card_shade_color);
 
 $popover_bg_color: gtkcolor(popover_bg_color);
 $popover_fg_color: gtkcolor(popover_fg_color);
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
index bf3c9f89..5256ffe3 100644
--- a/src/stylesheet/_defaults.scss
+++ b/src/stylesheet/_defaults.scss
@@ -39,9 +39,9 @@
 @define-color headerbar_shade_color #{if($variant == 'light', transparentize(black, .93), 
transparentize(black, .64))};
 
 // Cards, boxed lists
-@define-color card_bg_color #{if($variant == 'light', #ffffff, transparentize(white, .945))};
+@define-color card_bg_color #{if($variant == 'light', #ffffff, transparentize(white, .92))};
 @define-color card_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
-@define-color card_border_color #{currentColor};
+@define-color card_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, 
.64))};
 
 // Popovers
 @define-color popover_bg_color #{if($variant == 'light', #ffffff, #383838)};
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index d3ae7b13..8792d5de 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -300,7 +300,6 @@ button {
     background-color: $card_bg_color;
     background-clip: padding-box;
     font-weight: inherit;
-    box-shadow: none;
     padding: 0;
 
     transition: $button_transition;
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index f40974ef..435dc04d 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -135,7 +135,7 @@ row.combo {
 }
 
 %boxed_list_row {
-  @include focus-ring($offset: -1px);
+  @include focus-ring($offset: -2px);
 
   transition: 200ms $ease-out-quad;
   border-bottom: 1px solid $border_color;
@@ -167,7 +167,7 @@ row.expander {
   }
 
   list.nested {
-    background-color: gtkalpha(currentColor, .03);
+    background-color: gtkalpha($card_shade_color, .5);
     color: inherit;
   }
 
@@ -214,10 +214,7 @@ row.expander {
 // Deprecated: use .boxed-list instead
 list.content,
 list.boxed-list {
-  background-color: $card_bg_color;
-  color: $card_fg_color;
-  border: 1px solid $card_border_color;
-  border-radius: $card_radius;
+  @extend %card;
 
   > row {
     // Regular rows and expander header rows background
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index 51f10bb0..745b8a84 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -147,13 +147,16 @@ statuspage {
 /* Cards */
 
 .card {
-  background-color: $card_bg_color;
-  background-clip: padding-box;
-  color: $card_fg_color;
-  border: 1px solid $card_border_color;
-  border-radius: $card_radius;
+  @at-root %card, & {
+    background-color: $card_bg_color;
+    color: $card_fg_color;
+    border-radius: $card_radius;
+    box-shadow: 0 0 0 1px if($contrast == 'high', $border_color, transparentize(black, 0.925)),
+                0 1px 3px 1px transparentize(black, .93),
+                0 2px 6px 2px transparentize(black, .97);
+  }
 
-  @include focus-ring($offset: -2px);
+  @include focus-ring($offset: -1px);
 
   &.activatable {
     transition: $button_transition;
diff --git a/src/stylesheet/widgets/_shortcuts-window.scss b/src/stylesheet/widgets/_shortcuts-window.scss
index e073f42f..62aba995 100644
--- a/src/stylesheet/widgets/_shortcuts-window.scss
+++ b/src/stylesheet/widgets/_shortcuts-window.scss
@@ -14,18 +14,11 @@ shortcut {
   > .keycap {
     min-width: 20px;
     min-height: 25px;
-    margin-top: 2px;
-    padding-bottom: 3px;
-    padding-left: 6px;
-    padding-right: 6px;
-
-    color: $card_fg_color;
-    background-color: $card_bg_color;
-    background-clip: padding-box;
-    border: 1px solid;
-    border-color: $card_border_color;
+    padding: 2px 6px;
+
+    @extend %card;
+
     border-radius: $button_radius;
-    box-shadow: inset 0 -3px gtkalpha($card_border_color, .5);
     font-size: smaller;
   }
 }