Fix color contrast of red error messages in dark mode

client/scss/components/_messages.status.scss

@@ -4,7 +4,7 @@
   }
 
   &.failure {
-    color: theme('colors.critical.200');
+    color: theme('colors.text-error');
   }
 
   &.warning {

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 {

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;

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 {

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) {

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));

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',
+      },
     },
   },
   {