From 018c1ed6e6d5c26be69fac04ce36c3c1cbaafe32 Mon Sep 17 00:00:00 2001
From: Albina Starykova <albina.starikova@gmail.com>
Date: Mon, 23 Sep 2024 16:01:40 +0200
Subject: [PATCH] Update dashboard panels' bg in dark theme

---
 client/scss/components/_panel.scss       |  1 +
 client/src/tokens/colorThemes.js         | 12 ++++++++++++
 client/src/tokens/colorVariables.test.js |  2 ++
 3 files changed, 15 insertions(+)

diff --git a/client/scss/components/_panel.scss b/client/scss/components/_panel.scss
index 1974339cc7db..b33a56b5719a 100644
--- a/client/scss/components/_panel.scss
+++ b/client/scss/components/_panel.scss
@@ -162,6 +162,7 @@ $header-button-size: theme('spacing.6');
 }
 
 .w-panel--dashboard {
+  background-color: theme('colors.surface-dashboard-panel');
   border: 1px solid theme('colors.border-furniture');
   border-radius: 5px;
   margin-bottom: calc(
diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
index 203b609dd86f..3ff576dda5e4 100644
--- a/client/src/tokens/colorThemes.js
+++ b/client/src/tokens/colorThemes.js
@@ -112,6 +112,12 @@ const light = [
         textUtility: 'w-text-surface-info-panel',
         cssVariable: '--w-color-surface-info-panel',
       },
+      'surface-dashboard-panel': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-surface-dashboard-panel',
+        textUtility: 'w-text-surface-dashboard-panel',
+        cssVariable: '--w-color-surface-dashboard-panel',
+      },
     },
   },
   {
@@ -394,6 +400,12 @@ const dark = [
         textUtility: 'w-text-surface-info-panel',
         cssVariable: '--w-color-surface-info-panel',
       },
+      'surface-dashboard-panel': {
+        value: 'var(--w-color-grey-800)',
+        bgUtility: 'w-bg-surface-dashboard-panel',
+        textUtility: 'w-text-surface-dashboard-panel',
+        cssVariable: '--w-color-surface-dashboard-panel',
+      },
     },
   },
   {
diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js
index 31cea65931e7..327712572daf 100644
--- a/client/src/tokens/colorVariables.test.js
+++ b/client/src/tokens/colorVariables.test.js
@@ -211,6 +211,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-button-hover": "var(--w-color-secondary-400)",
         "--w-color-surface-button-inactive": "var(--w-color-grey-400)",
         "--w-color-surface-button-outline-hover": "var(--w-color-secondary-50)",
+        "--w-color-surface-dashboard-panel": "var(--w-color-white)",
         "--w-color-surface-field": "var(--w-color-white)",
         "--w-color-surface-field-inactive": "var(--w-color-grey-50)",
         "--w-color-surface-header": "var(--w-color-grey-50)",
@@ -262,6 +263,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-button-hover": "var(--w-color-secondary-400)",
         "--w-color-surface-button-inactive": "var(--w-color-grey-400)",
         "--w-color-surface-button-outline-hover": "var(--w-color-grey-700)",
+        "--w-color-surface-dashboard-panel": "var(--w-color-grey-800)",
         "--w-color-surface-field": "var(--w-color-grey-600)",
         "--w-color-surface-field-inactive": "var(--w-color-grey-500)",
         "--w-color-surface-header": "var(--w-color-grey-700)",