SFD-143: Make dark mode error text easier to read (#113)

* Move invalid input border style to styles.css

* Add orange error colour for dark mode

* Change to white text on red background

* Revert light mode error changes to original styling

* Move dark mode styles to package-styles.css

* Move input, select styles to dark mode media block

src/app/carbon-estimator-form/carbon-estimator-form.component.html

@@ -14,7 +14,7 @@
           required
           [attr.aria-describedby]="(headCount | invalidated) ? 'headCountError' : null" />
         @if (headCount | invalidated) {
-          <div class="tce-text-error-red tce-flex tce-gap-1" aria-live="polite" id="headCountError">
+          <div class="tce-error-box tce-flex tce-gap-1" aria-live="polite" id="headCountError">
             <span class="material-icons-outlined">error</span>
             <p>The number of employees must be greater than 0.</p>
           </div>
@@ -81,7 +81,7 @@
           required
           [attr.aria-describedby]="(numberOfServers | invalidated) ? 'numberOfServersError' : null" />
         @if (numberOfServers | invalidated) {
-          <div class="tce-text-error-red tce-flex tce-gap-1" aria-live="polite" id="numberOfServersError">
+          <div class="tce-error-box tce-flex tce-gap-1" aria-live="polite" id="numberOfServersError">
             <span class="material-icons-outlined">error</span>
             <p>The number of servers must be greater than or equal to 0.</p>
           </div>
@@ -210,7 +210,7 @@
             required
             [attr.aria-describedby]="(monthlyActiveUsers | invalidated) ? 'monthlyActiveUsersError' : null" />
           @if (monthlyActiveUsers | invalidated) {
-            <div class="tce-text-error-red tce-flex tce-gap-1" aria-live="polite" id="monthlyActiveUsersError">
+            <div class="tce-error-box tce-flex tce-gap-1" aria-live="polite" id="monthlyActiveUsersError">
               <span class="material-icons-outlined">error</span>
               <p>
                 Monthly active users must be greater than 0. To specify no external users, use the
@@ -269,7 +269,7 @@
     </div>
     @if (estimatorForm | invalidated) {
       <div
-        class="tce-text-error-red tce-flex tce-gap-1 tce-justify-end tce-mt-2"
+        class="tce-error-box tce-flex tce-gap-1 tce-justify-end tce-mt-2"
         aria-live="polite"
         id="calculateDisabledMessage">
         <span class="material-icons-outlined">error</span>

src/app/carbon-estimator-form/carbon-estimator-form.component.ts

@@ -24,7 +24,6 @@ const locationDescriptions: Record<WorldLocation, string> = {
   selector: 'carbon-estimator-form',
   standalone: true,
   templateUrl: './carbon-estimator-form.component.html',
-  styles: ['input.ng-touched.ng-invalid { border-color: theme("colors.error-red"); }'],
   imports: [
     ReactiveFormsModule,
     FormsModule,

src/package-styles.css

@@ -1,9 +1,17 @@
-input, select {
-  @apply dark:tce-text-slate-600
-}
-
 @media (prefers-color-scheme: dark) {
   .apexcharts-legend-text {
     @apply !tce-text-slate-50
   }
-}
+
+  input, select {
+    @apply tce-text-slate-600
+  }
+
+  input.ng-invalid.ng-touched {
+    @apply tce-border-red-700
+  }
+
+  .tce-error-box {
+    @apply tce-text-white tce-bg-red-700 tce-p-1 tce-rounded tce-border tce-border-white
+  }
+}

src/styles.css

@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+input.ng-invalid.ng-touched {
+  @apply tce-border-red-600 tce-border-2 tce-m-[-1px]
+}
+
+.tce-error-box {
+  @apply tce-text-red-600
+}
+
 .tce-note {
   @apply tce-bg-sky-200 tce-border-sky-400 tce-text-slate-800
 }

tailwind.config.js

@@ -1,6 +1,5 @@
 import { isolateInsideOfContainer, scopedPreflightStyles } from 'tailwindcss-scoped-preflight';
 import form from '@tailwindcss/forms';
-import { red } from 'tailwindcss/colors';
 
 export default {
   content: ['./src/**/*.{html,ts}'],
@@ -9,9 +8,6 @@ export default {
       fontFamily: {
         sans: ['objektiv-mk1', 'sans-serif'],
       },
-      colors: {
-        'error-red': red['600'],
-      },
     },
   },
   plugins: [