From 0ce23d73158b7580d2ad1f61311959094d0bbb00 Mon Sep 17 00:00:00 2001
From: Istvan Soos <istvan.soos@gmail.com>
Date: Fri, 17 Jan 2025 18:29:17 +0100
Subject: [PATCH] Alternative box-shadow for dark theme.

---
 pkg/web_css/lib/src/_home.scss      |  4 ++--
 pkg/web_css/lib/src/_variables.scss | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss
index 3585ec3313..64767ada4b 100644
--- a/pkg/web_css/lib/src/_home.scss
+++ b/pkg/web_css/lib/src/_home.scss
@@ -108,14 +108,14 @@
   .mini-list-item {
     background: var(--pub-neutral-bgColor);
     border-radius: 4px;
-    box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color);
+    box-shadow: var(--pub-box-shadow);
     padding: 28px 30px 30px; // title's top gap is about 2px (30-2 => 28)
     margin-bottom: 10px;
     min-height: 100px;
 
     &:hover {
       background: var(--pub-neutral-hover-bgColor);
-      box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
+      box-shadow: var(--pub-box-hover-shadow);
 
       @media (min-width: variables.$device-desktop-min-width) {
         .mini-list-item-body {
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 0fb36f4801..6aa298964e 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -80,12 +80,23 @@
   --mdc-theme-secondary: #0066d9;
   --mdc-typography-font-family: var(--pub-default-text-font_family);
 
+  // Download chart colors
   --pub-downloads-chart-color-0: var(--pub-markdown-alert-note);
   --pub-downloads-chart-color-1: var(--pub-markdown-alert-caution);
   --pub-downloads-chart-color-2: var(--pub-markdown-alert-tip);
   --pub-downloads-chart-color-3: var(--pub-markdown-alert-important);
   --pub-downloads-chart-color-4: var(--pub-markdown-alert-warning);
   --pub-downloads-chart-color-5: #12a4af;
+
+  --pub-box-shadow:
+      0 0 4px 2px hsla(0, 0%, 100%, 0.08) inset, /* inner "bevel" surface */
+      0 0 2px 1px hsla(0, 0%, 0%, 0.05),         /* contrast border around the box */
+      0.5px 1px 4px 2px hsla(0, 0%, 0%, 0.02);   /* additional shadow */
+
+  --pub-box-hover-shadow:
+      0 0 6px 3px hsla(0, 0%, 100%, 0.08) inset, /* inner "bevel" surface */
+      0 0 2px 1px hsla(0, 0%, 0%, 0.05),         /* contrast border around the box */
+      0.5px 1px 4px 3px hsla(0, 0%, 0%, 0.04);   /* additional shadow */
 }
 
 /// Variables that are specific to the light theme.
@@ -122,9 +133,7 @@
   --pub-weekly-chart-tooltip-text-color: var(--pub-color-white);
   --pub-detail_tab-admin-color: #990000;
   --pub-home_title-text-color: #254a76;
-  --pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3);
   --pub-home_card_title-text-color: #1967d2;
-  --pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4);
   --pub-pagination-active-color: var(--pub-link-text-color);
   --pub-pagination-inactive-color: #aaaaaa;
   --pub-score_label-text-color: #6d7278;
@@ -179,9 +188,7 @@
   --pub-home_title-text-color: #31b0fc;
   --pub-weekly-chart-main-color: var(--pub-link-text-color);
   --pub-weekly-chart-tooltip-text-color: var(--pub-color-anchorBlack);
-  --pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2);
   --pub-home_card_title-text-color: var(--pub-home_title-text-color);
-  --pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3);
   --pub-pagination-active-color: var(--pub-link-text-color);
   --pub-pagination-inactive-color: #aaaaaa;
   --pub-score_label-text-color: #a0b0b8;