From 1ceb582bb9eb7c3b5bf8ffa564b4151a0d79f956 Mon Sep 17 00:00:00 2001
From: Albina Starykova <albina.starikova@gmail.com>
Date: Thu, 6 Jul 2023 12:46:45 +0300
Subject: [PATCH] Update styles for critical buttons in dark mode

---
 client/scss/components/_button.scss      | 10 +++++-----
 client/src/tokens/colorThemes.js         | 24 ++++++++++++++++++++++++
 client/src/tokens/colorVariables.test.js |  4 ++++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
index 1febf8bb1fb7..752a5b4b26ed 100644
--- 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
index 4a14e1a6c047..a9f18ccd5a1a 100644
--- 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
index e35e02d05274..ba8533ab603a 100644
--- 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)",