Update dashboard panels' bg in dark theme

albinazs · Sep 23, 2024 · 018c1ed · 018c1ed
1 parent 004bb61
commit 018c1ed
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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)",