Update styles for block picker in dark mode

albinazs · Jul 7, 2023 · 0672689 · 0672689
1 parent cfb0a4b
commit 0672689
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/colorVariables.test.js b/client/src/tokens/colorVariables.test.js
@@ -183,6 +183,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-border-field-hover": "var(--w-color-grey-200)",
         "--w-color-border-field-inactive": "var(--w-color-grey-150)",
         "--w-color-border-furniture": "var(--w-color-grey-100)",
+        "--w-color-box-shadow-md": "var(--w-color-black-25)",
         "--w-color-focus": "#00A885",
         "--w-color-icon-primary": "var(--w-color-primary)",
         "--w-color-icon-primary-hover": "var(--w-color-primary-200)",
@@ -225,6 +226,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-border-field-hover": "var(--w-color-grey-200)",
         "--w-color-border-field-inactive": "var(--w-color-grey-500)",
         "--w-color-border-furniture": "var(--w-color-grey-500)",
+        "--w-color-box-shadow-md": "var(--w-color-black-50)",
         "--w-color-focus": "#00A885",
         "--w-color-icon-primary": "var(--w-color-grey-150)",
         "--w-color-icon-primary-hover": "var(--w-color-grey-50)",

diff --git 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 = {