[libadwaita/wip/exalm/list-shadow: 1/2] stylesheet: List/card style tweaks

[Alexander Mikhaylenko <alexm src gnome org>]

commit bc9e3ebae52439f7114d006e74c9ee1c7e2c3c75
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
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/319

 src/stylesheet/_colors.scss                   | 4 ++--
 src/stylesheet/_defaults.scss                 | 4 ++--
 src/stylesheet/widgets/_buttons.scss          | 1 -
 src/stylesheet/widgets/_lists.scss            | 5 +++--
 src/stylesheet/widgets/_misc.scss             | 5 +++--
 src/stylesheet/widgets/_shortcuts-window.scss | 9 ++++-----
 6 files changed, 14 insertions(+), 14 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index bd0d9b22..27f1cf88 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -1,6 +1,6 @@
 $border_opacity: if($contrast == 'high', .5, .15);
 $thin_border_opacity: if($contrast == 'high', .25, .05);
-$card_border_opacity: if($contrast == 'high', .5, .18);
+$card_border_opacity: if($contrast == 'high', 1, .5);
 $focus_border_opacity: if($contrast == 'high', 0.8, 0.5);
 $window_outline_opacity: if($contrast == 'high', .3, .1);
 
@@ -32,7 +32,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..87923666 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -167,7 +167,7 @@ row.expander {
   }
 
   list.nested {
-    background-color: gtkalpha(currentColor, .03);
+    background-color: gtkalpha($card_shade_color, .5);
     color: inherit;
   }
 
@@ -216,8 +216,9 @@ list.content,
 list.boxed-list {
   background-color: $card_bg_color;
   color: $card_fg_color;
-  border: 1px solid $card_border_color;
   border-radius: $card_radius;
+  box-shadow: 0 0 0 1px if($contrast == 'high', $border_color, transparentize(black, .9)),
+              0 2px 2px 0 transparentize(black, .9);
 
   > row {
     // Regular rows and expander header rows background
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index 51f10bb0..3d70bec8 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -150,10 +150,11 @@ statuspage {
   background-color: $card_bg_color;
   background-clip: padding-box;
   color: $card_fg_color;
-  border: 1px solid $card_border_color;
   border-radius: $card_radius;
+  box-shadow: 0 0 0 1px if($contrast == 'high', $border_color, transparentize(black, .9)),
+              0 2px 2px 0 transparentize(black, .9);
 
-  @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..01a0e3e6 100644
--- a/src/stylesheet/widgets/_shortcuts-window.scss
+++ b/src/stylesheet/widgets/_shortcuts-window.scss
@@ -14,18 +14,17 @@ shortcut {
   > .keycap {
     min-width: 20px;
     min-height: 25px;
-    margin-top: 2px;
-    padding-bottom: 3px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     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;
     border-radius: $button_radius;
-    box-shadow: inset 0 -3px gtkalpha($card_border_color, .5);
+    box-shadow: 0 0 0 1px if($contrast == 'high', $border_color, transparentize(black, .9)),
+                0 2px 2px 0 transparentize(black, .9);
     font-size: smaller;
   }
 }