Update styles for critical buttons in dark mode

albinazs · Jul 6, 2023 · 1ceb582 · 1ceb582
1 parent c7039ed
commit 1ceb582
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
@@ -77,13 +77,13 @@
   &.no,
   &.serious {
     background-color: theme('colors.surface-page');
-    border: 1px solid theme('colors.critical.200');
-    color: theme('colors.critical.200');
+    border: 1px solid theme('colors.text-error');
+    color: theme('colors.text-error');
 
     &:hover {
-      color: theme('colors.critical.200');
-      border-color: theme('colors.critical.200');
-      background-color: theme('colors.critical.50');
+      color: theme('colors.text-button-critical-outline-hover');
+      border-color: theme('colors.text-button-critical-outline-hover');
+      background-color: theme('colors.surface-button-critical-hover');
     }
   }
 

diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
@@ -94,6 +94,12 @@ const light = [
         textUtility: 'w-text-surface-button-outline-hover',
         cssVariable: '--w-color-surface-button-outline-hover',
       },
+      'surface-button-critical-hover': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-surface-button-critical-hover',
+        textUtility: 'w-text-surface-button-critical-hover',
+        cssVariable: '--w-color-surface-button-critical-hover',
+      },
     },
   },
   {
@@ -171,6 +177,12 @@ const light = [
         textUtility: 'w-text-text-error',
         cssVariable: '--w-color-text-error',
       },
+      'text-button-critical-outline-hover': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-text-button-critical-outline-hover',
+        textUtility: 'w-text-text-button-critical-outline-hover',
+        cssVariable: '--w-color-text-button-critical-outline-hover',
+      },
     },
   },
   {
@@ -322,6 +334,12 @@ const dark = [
         textUtility: 'w-text-surface-button-outline-hover',
         cssVariable: '--w-color-surface-button-outline-hover',
       },
+      'surface-button-critical-hover': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-button-critical-hover',
+        textUtility: 'w-text-surface-button-critical-hover',
+        cssVariable: '--w-color-surface-button-critical-hover',
+      },
     },
   },
   {
@@ -399,6 +417,12 @@ const dark = [
         textUtility: 'w-text-text-error',
         cssVariable: '--w-color-text-error',
       },
+      'text-button-critical-outline-hover': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-text-button-critical-outline-hover',
+        textUtility: 'w-text-text-button-critical-outline-hover',
+        cssVariable: '--w-color-text-button-critical-outline-hover',
+      },
     },
   },
   {

diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js
@@ -188,6 +188,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-icon-primary-hover": "var(--w-color-primary-200)",
         "--w-color-icon-secondary": "var(--w-color-grey-400)",
         "--w-color-icon-secondary-hover": "var(--w-color-primary-200)",
+        "--w-color-surface-button-critical-hover": "var(--w-color-critical-50)",
         "--w-color-surface-button-default": "var(--w-color-secondary)",
         "--w-color-surface-button-hover": "var(--w-color-secondary-400)",
         "--w-color-surface-button-inactive": "var(--w-color-grey-400)",
@@ -200,6 +201,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-page": "var(--w-color-white)",
         "--w-color-surface-tooltip": "var(--w-color-primary-200)",
         "--w-color-text-button": "var(--w-color-white)",
+        "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-200)",
         "--w-color-text-button-outline-default": "var(--w-color-secondary)",
         "--w-color-text-context": "var(--w-color-grey-600)",
         "--w-color-text-error": "var(--w-color-critical-200)",
@@ -230,6 +232,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-icon-primary-hover": "var(--w-color-grey-50)",
         "--w-color-icon-secondary": "var(--w-color-grey-150)",
         "--w-color-icon-secondary-hover": "var(--w-color-grey-50)",
+        "--w-color-surface-button-critical-hover": "var(--w-color-grey-600)",
         "--w-color-surface-button-default": "var(--w-color-secondary)",
         "--w-color-surface-button-hover": "var(--w-color-secondary-400)",
         "--w-color-surface-button-inactive": "var(--w-color-grey-400)",
@@ -242,6 +245,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-page": "var(--w-color-grey-600)",
         "--w-color-surface-tooltip": "var(--w-color-grey-500)",
         "--w-color-text-button": "var(--w-color-white)",
+        "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-50)",
         "--w-color-text-button-outline-default": "var(--w-color-secondary-100)",
         "--w-color-text-context": "var(--w-color-grey-50)",
         "--w-color-text-error": "var(--w-color-critical-100)",