From 084c35a94d6ec3833d9edc253f45c7f115e239dc Mon Sep 17 00:00:00 2001
From: Albina Starykova <albina.starikova@gmail.com>
Date: Fri, 7 Jul 2023 17:21:36 +0300
Subject: [PATCH] Update box-shadow for menus in dark mode

---
 client/scss/components/_dialog.scss          |  3 ---
 client/scss/layouts/_login.scss              |  3 ---
 client/src/components/ComboBox/ComboBox.scss |  3 ---
 client/src/tokens/colorThemes.js             | 16 ++++++++++++++--
 client/src/tokens/objectStyles.js            |  3 +--
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/client/scss/components/_dialog.scss b/client/scss/components/_dialog.scss
index a26d6d164bca..64583de4e5ca 100644
--- a/client/scss/components/_dialog.scss
+++ b/client/scss/components/_dialog.scss
@@ -158,9 +158,6 @@
 
   .w-dialog__box {
     pointer-events: auto;
-    @include dark-theme() {
-      box-shadow: theme('boxShadow.lg');
-    }
     box-shadow: theme('boxShadow.md');
   }
 
diff --git a/client/scss/layouts/_login.scss b/client/scss/layouts/_login.scss
index 7d7f2e89b967..ce0088814ab0 100644
--- a/client/scss/layouts/_login.scss
+++ b/client/scss/layouts/_login.scss
@@ -57,9 +57,6 @@
     float: none;
     padding: theme('spacing.10') theme('spacing.12');
     background: theme('colors.surface-page');
-    @include dark-theme() {
-      box-shadow: theme('boxShadow.lg');
-    }
     box-shadow: theme('boxShadow.md');
     border-radius: theme('borderRadius.md');
     margin-bottom: 15vh; // should appear slightly above centre
diff --git a/client/src/components/ComboBox/ComboBox.scss b/client/src/components/ComboBox/ComboBox.scss
index b90ef737d434..0447050ffdba 100644
--- a/client/src/components/ComboBox/ComboBox.scss
+++ b/client/src/components/ComboBox/ComboBox.scss
@@ -12,9 +12,6 @@ $spacing-sm: theme('spacing.5');
   color: theme('colors.text-context');
   border-radius: theme('borderRadius.DEFAULT');
   font-size: theme('fontSize.18');
-  @include dark-theme() {
-    box-shadow: theme('boxShadow.lg');
-  }
   box-shadow: theme('boxShadow.md');
   outline: 10px solid transparent;
 }
diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
index 4a14e1a6c047..c9e9cdb3d3e2 100644
--- a/client/src/tokens/colorThemes.js
+++ b/client/src/tokens/colorThemes.js
@@ -246,7 +246,13 @@ const light = [
   {
     label: 'Misc',
     tokens: {
-      focus: focusToken,
+      'focus': focusToken,
+      'box-shadow-md': {
+        value: 'var(--w-color-black-25)',
+        bgUtility: 'w-bg-box-shadow-md',
+        textUtility: 'w-text-box-shadow-md',
+        cssVariable: '--w-color-box-shadow-md',
+      },
     },
   },
 ];
@@ -474,7 +480,13 @@ const dark = [
   {
     label: 'Misc',
     tokens: {
-      focus: focusToken,
+      'focus': focusToken,
+      'box-shadow-md': {
+        value: 'var(--w-color-black-50)',
+        bgUtility: 'w-bg-box-shadow-md',
+        textUtility: 'w-text-box-shadow-md',
+        cssVariable: '--w-color-box-shadow-md',
+      },
     },
   },
 ];
diff --git a/client/src/tokens/objectStyles.js b/client/src/tokens/objectStyles.js
index cf26f3d4f641..795eb1e5ccbe 100644
--- a/client/src/tokens/objectStyles.js
+++ b/client/src/tokens/objectStyles.js
@@ -17,8 +17,7 @@ const borderWidth = {
 // If adding new values, use T-shirt sizing naming.
 const boxShadow = {
   DEFAULT: '5px 5px 20px rgba(0, 0, 0, 0.05)',
-  md: '5px 5px 30px rgba(0, 0, 0, 0.25)',
-  lg: '5px 5px 30px rgba(0, 0, 0, 0.5)',
+  md: '5px 5px 30px var(--w-color-box-shadow-md)',
 };
 
 module.exports = {