From 6bb7e129b6bb3450f2b3f952804c28929669f9d3 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Thu, 25 May 2023 07:57:52 +0100
Subject: [PATCH] Fix color contrast of red error messages in dark mode

---
 client/scss/components/_messages.status.scss     |  2 +-
 client/scss/components/_workflow-timeline.scss   |  2 +-
 client/scss/components/forms/_error-message.scss |  2 +-
 client/scss/components/forms/_field.scss         |  4 ++--
 client/scss/components/forms/_required-mark.scss |  2 +-
 client/src/components/Minimap/MinimapItem.scss   |  4 ++--
 client/src/tokens/colorThemes.js                 | 12 ++++++++++++
 7 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/client/scss/components/_messages.status.scss b/client/scss/components/_messages.status.scss
index c34cd4d0c4..c6c3320f65 100644
--- a/client/scss/components/_messages.status.scss
+++ b/client/scss/components/_messages.status.scss
@@ -4,7 +4,7 @@
   }
 
   &.failure {
-    color: theme('colors.critical.200');
+    color: theme('colors.text-error');
   }
 
   &.warning {
diff --git a/client/scss/components/_workflow-timeline.scss b/client/scss/components/_workflow-timeline.scss
index 1f97056694..43b99b9d8d 100644
--- a/client/scss/components/_workflow-timeline.scss
+++ b/client/scss/components/_workflow-timeline.scss
@@ -17,7 +17,7 @@
     padding-bottom: theme('spacing.5');
 
     &--rejected {
-      color: theme('colors.critical.200');
+      color: theme('colors.text-error');
     }
 
     &--approved {
diff --git a/client/scss/components/forms/_error-message.scss b/client/scss/components/forms/_error-message.scss
index 63a0596d21..b0a12a826d 100644
--- a/client/scss/components/forms/_error-message.scss
+++ b/client/scss/components/forms/_error-message.scss
@@ -5,7 +5,7 @@
   margin: 0.5em 0 0;
   font-size: 1em;
   font-weight: bold;
-  color: theme('colors.critical.200');
+  color: theme('colors.text-error');
 
   @media (forced-colors: active) {
     forced-color-adjust: none;
diff --git a/client/scss/components/forms/_field.scss b/client/scss/components/forms/_field.scss
index 31f455d792..1a7372a596 100644
--- a/client/scss/components/forms/_field.scss
+++ b/client/scss/components/forms/_field.scss
@@ -15,7 +15,7 @@
 .w-field__errors {
   .error-message {
     @apply w-label-2;
-    color: theme('colors.critical.200');
+    color: theme('colors.text-error');
     display: inline-block;
     margin: 0;
     margin-top: theme('spacing.[0.5]');
@@ -29,7 +29,7 @@
   width: 1em;
   height: 1em;
   margin-inline-end: 0.625rem;
-  color: theme('colors.critical.200');
+  color: theme('colors.text-error');
 
   // Avoid displaying the error message icon if we already have an icon.
   + .error-message::before {
diff --git a/client/scss/components/forms/_required-mark.scss b/client/scss/components/forms/_required-mark.scss
index 74ca180046..4f0ab0e0da 100644
--- a/client/scss/components/forms/_required-mark.scss
+++ b/client/scss/components/forms/_required-mark.scss
@@ -1,5 +1,5 @@
 .w-required-mark {
-  color: theme('colors.critical.200');
+  color: theme('colors.text-error');
   margin-inline-start: 0.25ch;
 
   @include media-breakpoint-up(sm) {
diff --git a/client/src/components/Minimap/MinimapItem.scss b/client/src/components/Minimap/MinimapItem.scss
index 7d7d4256ff..72cd4e6a11 100644
--- a/client/src/components/Minimap/MinimapItem.scss
+++ b/client/src/components/Minimap/MinimapItem.scss
@@ -44,7 +44,7 @@
   }
 
   &--error {
-    color: theme('colors.critical.200');
+    color: theme('colors.text-error');
   }
 
   &--h2 {
@@ -82,7 +82,7 @@
   border-radius: theme('borderRadius.full');
   background-color: theme('colors.critical.200');
   border: $border-width solid theme('colors.surface-page');
-  color: theme('colors.surface-page');
+  color: theme('colors.white.DEFAULT');
 
   :where(.w-minimap--expanded) & {
     margin-inline-start: calc(-1 * (theme('spacing.8') + $badge-size / 2));
diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
index a7133b9c35..a3f0ab2795 100644
--- a/client/src/tokens/colorThemes.js
+++ b/client/src/tokens/colorThemes.js
@@ -224,6 +224,12 @@ const light = [
         textUtility: 'w-text-text-highlight',
         cssVariable: '--w-color-text-highlight',
       },
+      'text-error': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-text-error',
+        textUtility: 'w-text-text-error',
+        cssVariable: '--w-color-text-error',
+      },
     },
   },
   {
@@ -553,6 +559,12 @@ const dark = [
         textUtility: 'w-text-text-highlight',
         cssVariable: '--w-color-text-highlight',
       },
+      'text-error': {
+        value: 'var(--w-color-critical-100)',
+        bgUtility: 'w-bg-text-error',
+        textUtility: 'w-text-text-error',
+        cssVariable: '--w-color-text-error',
+      },
     },
   },
   {