From f0e4a4b3015f915648ff0d3d323f18bb0da679b9 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Mon, 17 Feb 2025 10:38:11 +0100
Subject: [PATCH] refactored styling for input states (#4724)

* refactored styles for valid, invalid, and disabled; adjusted colors for each theme
---
 apps/tailwind-components/assets/css/main.css  | 23 +++++------
 .../assets/css/theme/dark.css                 |  7 ++++
 .../components/Message.vue                    | 10 ++---
 .../components/form/Fields.vue                | 22 ++++++-----
 .../components/input/Listbox.vue              |  1 -
 .../components/input/listbox/Toggle.vue       |  7 +++-
 .../pages/Message.story.vue                   |  6 +--
 .../pages/input/Listbox.story.vue             | 11 ++++--
 apps/tailwind-components/tailwind.config.js   | 39 ++++++++++++-------
 9 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index 6374a97ec7..9abc6ed896 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -37,12 +37,20 @@
     --color-green-800: #349D63;
     --color-green-900: #075F32;
     --color-orange-500: #E1B53E;
-    --color-red-200: #FCECEF;
+    --color-red-200: #FCEDEF;
     --color-red-500: #E14F62;
     --color-red-700: #AE2A3F;
     --color-gradient1: #0062C6;
     --color-gradient2: #0072E4;
 
+    --color-valid-foreground: var(--color-green-900);
+    --color-valid-background: var(--color-green-200);
+    --color-invalid-foreground: var(--color-red-700);
+    --color-invalid-background: var(--color-red-200);
+    --color-neutral-background: var(--color-yellow-200);
+    --color-disabled-foreground: var(--color-gray-400);
+    --color-disabled-background: var(--color-gray-100);
+    
 
     --box-shadow-primary: 0px 10px 20px rgba(0, 0, 0, 0.1);
     --box-shadow-search-input: none;
@@ -77,9 +85,7 @@
     --background-color-tab: var(--color-blue-50);
     --background-color-tab-hover: var(--color-blue-500);
     --background-color-tab-active: var(--color-blue-500);
-    --background-color-disabled: var(--color-gray-200);
-    --background-color-invalid: var(--color-red-200);
-    --background-color-valid: var(--color-green-200);
+    
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-blue-500);
     --background-color-listbox: var(--color-white);
@@ -144,11 +150,6 @@
     --text-color-input-description: var(--color-blue-800);
     --text-color-legend-error-count: var(--color-white);
     
-    --text-color-invalid: var(--color-red-700);
-    --text-color-valid: var(--color-green-900);
-    --text-color-disabled: var(--color-gray-600);
-    --text-color-required: var(--color-red-500);
-    
     --text-code-output: var(--color-gray-800);
     --text-content-required: "*";
 
@@ -180,10 +181,6 @@
     --border-radius-search-button: 9999px;
     --border-radius-pagination: 9999px;
     --border-radius-landing: 50px;
-    
-    --border-color-invalid: var(--color-red-700);
-    --border-color-valid: var(--color-green-900);
-    --border-color-disabled: var(--color-gray-400);
 
     --outline-color-select: var(--color-gray-200);
   }
diff --git a/apps/tailwind-components/assets/css/theme/dark.css b/apps/tailwind-components/assets/css/theme/dark.css
index e2f8102d73..913398f36a 100644
--- a/apps/tailwind-components/assets/css/theme/dark.css
+++ b/apps/tailwind-components/assets/css/theme/dark.css
@@ -3,6 +3,13 @@
     --background-image-sidebar-gradient: linear-gradient(180deg, var(--color-gray-600) -24.76%, var(--color-gray-600) 86.02%);
     --background-image-base-gradient: linear-gradient(180deg, var(--color-gray-800), var(--color-gray-800) 133.81%);
 
+    --color-valid-foreground: var(--color-green-200);
+    --color-valid-background: var(--color-green-900);
+    --color-invalid-foreground: var(--color-red-200);
+    --color-invalid-background: var(--color-red-700);
+    --color-neutral-background: var(--color-gray-600);
+    --color-neutral-foreground: var(--color-white);
+    
     --opacity-background-gradient: 0;
 
     --background-color-button-primary: var(--color-green-500);
diff --git a/apps/tailwind-components/components/Message.vue b/apps/tailwind-components/components/Message.vue
index 0396dcd217..3accd868c8 100644
--- a/apps/tailwind-components/components/Message.vue
+++ b/apps/tailwind-components/components/Message.vue
@@ -2,11 +2,11 @@
   <div
     role="alertdialog"
     :aria-labelledby="`${id}-state-context`"
-    class="p-3 font-bold flex items-center rounded-input bg-default"
+    class="p-3 font-bold flex items-center rounded-input"
     :class="{
       'bg-invalid text-invalid fill-invalid': invalid,
       'bg-valid text-valid fill-valid': valid,
-      'bg-': !valid && !invalid,
+      'bg-neutral text-neutral': !valid && !invalid,
     }"
   >
     <template v-if="invalid">
@@ -18,7 +18,7 @@
       <BaseIcon name="check" />
     </template>
     <template v-else>
-      <BaseIcon name="info" />
+      <span :id="`${id}-state-context`" class="sr-only">information</span>
     </template>
     <slot></slot>
   </div>
@@ -28,12 +28,12 @@
 withDefaults(
   defineProps<{
     id: string;
-    invalid?: boolean;
     valid?: boolean;
+    invalid?: boolean;
   }>(),
   {
-    invalid: false,
     valid: false,
+    invalid: false,
   }
 );
 </script>
diff --git a/apps/tailwind-components/components/form/Fields.vue b/apps/tailwind-components/components/form/Fields.vue
index 905abf132d..83c64d396e 100644
--- a/apps/tailwind-components/components/form/Fields.vue
+++ b/apps/tailwind-components/components/form/Fields.vue
@@ -228,15 +228,19 @@ function goToSection(headerId: string) {
           />
         </template>
       </div>
-      <div class="bg-red-500 p-3 font-bold">
-        {{ numberOfFieldsWithErrors }} fields require your attention before you
-        can save this {{ recordLabel }} ( temporary section for dev)
-      </div>
-      <div class="bg-gray-200 p-3">
-        {{ numberOfRequiredFields - numberOfRequiredFieldsWithData }} /
-        {{ numberOfRequiredFields }} required fields left ( temporary section
-        for dev)
-      </div>
+      <Message :id="id" :invalid="true">
+        <span
+          >{{ numberOfFieldsWithErrors }} fields require your attention before
+          you can save this {{ recordLabel }} ( temporary section for dev)</span
+        >
+      </Message>
+      <Message :id="id">
+        <span
+          >{{ numberOfRequiredFields - numberOfRequiredFieldsWithData }} /
+          {{ numberOfRequiredFields }} required fields left ( temporary section
+          for dev)</span
+        >
+      </Message>
       <div
         id="spacer-so-we-can-scroll-each-chapter-to-top-if-requested"
         class="h-screen"
diff --git a/apps/tailwind-components/components/input/Listbox.vue b/apps/tailwind-components/components/input/Listbox.vue
index 55288b31ac..ba466c4a1c 100644
--- a/apps/tailwind-components/components/input/Listbox.vue
+++ b/apps/tailwind-components/components/input/Listbox.vue
@@ -37,7 +37,6 @@
 <script lang="ts" setup>
 import { ref, useTemplateRef, nextTick, watch, onMounted } from "vue";
 import type {
-  columnValue,
   IFieldError,
   IInputValue,
   IInputValueLabel,
diff --git a/apps/tailwind-components/components/input/listbox/Toggle.vue b/apps/tailwind-components/components/input/listbox/Toggle.vue
index 864814b915..407f301833 100644
--- a/apps/tailwind-components/components/input/listbox/Toggle.vue
+++ b/apps/tailwind-components/components/input/listbox/Toggle.vue
@@ -6,10 +6,12 @@
     :aria-required="required"
     :aria-expanded="isExpanded"
     :aria-activedescendant="selectedElementId"
-    class="flex justify-start items-center h-10 w-full text-left pl-11 border bg-input rounded-search-input text-button-input-toggle focus:ring-blue-300"
+    class="flex justify-start items-center h-10 w-full text-left pl-11 border text-button-input-toggle focus:ring-blue-300"
     :class="{
-      'border-disabled text-disabled bg-disabled': disabled,
+      'bg-input': !disabled && !invalid && !valid,
+      'bg-disabled border-disabled text-disabled': disabled,
       'border-invalid text-invalid': invalid,
+      'border-valid text-valid': valid,
     }"
     @click="onClick()"
   >
@@ -24,6 +26,7 @@
 <script lang="ts" setup>
 defineProps<{
   required?: boolean;
+  valid?: boolean;
   invalid?: boolean;
   disabled?: boolean;
   selectedElementId?: string;
diff --git a/apps/tailwind-components/pages/Message.story.vue b/apps/tailwind-components/pages/Message.story.vue
index 77f6dc9b28..ed37751d50 100644
--- a/apps/tailwind-components/pages/Message.story.vue
+++ b/apps/tailwind-components/pages/Message.story.vue
@@ -1,6 +1,6 @@
 <template>
-  <Message id="invalid-msg" :invalid="true">Some invalid</Message>
-  <Message id="valid-msg" :valid="true">Some success</Message>
-  <Message id="valid-msg">Generic message</Message>
+  <Message id="notification-msg-1" :invalid="true">Some invalid</Message>
+  <Message id="notification-msg-2" :valid="true">Some success</Message>
+  <Message id="notification-msg-3">Generic message</Message>
 </template>
 <script setup lang="ts"></script>
diff --git a/apps/tailwind-components/pages/input/Listbox.story.vue b/apps/tailwind-components/pages/input/Listbox.story.vue
index 6791b7410c..18923ae177 100644
--- a/apps/tailwind-components/pages/input/Listbox.story.vue
+++ b/apps/tailwind-components/pages/input/Listbox.story.vue
@@ -28,11 +28,15 @@
           :options="[
             {
               value: 'disabled',
-              label: 'Disabled: disable interactivity with the component',
+              label: 'Disabled',
             },
             {
               value: 'error',
-              label: 'Error: simulate an instance where an error occurred',
+              label: 'Error',
+            },
+            {
+              value: 'valid',
+              label: 'Valid',
             },
           ]"
           :showClearButton="true"
@@ -61,7 +65,8 @@
       id="listbox-input"
       labelId="listbox-input-label"
       :options="listboxData"
-      :hasError="listboxState === 'error'"
+      :invalid="listboxState === 'error'"
+      :valid="listboxState === 'valid'"
       :disabled="listboxState === 'disabled'"
       :placeholder="listboxPlaceholder"
       @update:model-value="(value) => (modelValue = value)"
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index c308bd7218..bc576da01b 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -152,9 +152,12 @@ module.exports = {
         "tab": "var(--background-color-tab)",
         "tab-hover": "var(--background-color-tab-hover)",
         "tab-active": "var(--background-color-tab-active)",
-        "disabled": "var(--background-color-disabled)",
-        "invalid": "var(--background-color-invalid)",
-        "valid": "var(--background-color-valid)",
+        
+        "valid": "var(--color-valid-background)",
+        "invalid": "var(--color-invalid-background)",
+        "disabled": "var(--color-disabled-background)",
+        "neutral": "var(--color-neutral-background)",
+        
         "input": "var(--background-color-input)",
         "listbox": "var(--background-color-listbox)",
         "listbox-hover": "var(--background-color-listbox-hover)",
@@ -211,9 +214,12 @@ module.exports = {
         "table-column-header": "var(--text-color-table-column-header)",
         "form-header": "var(--text-color-form-header)",
         "input-description": "var(--text-color-input-description)",
-        "invalid": "var(--text-color-invalid)",
-        "valid": "var(--text-color-valid)",
-        "disabled": "var(--text-color-disabled)",
+        
+        "invalid": "var(--color-invalid-foreground)",
+        "neutral": "var(--color-neutral-foreground)",
+        "valid": "var(--color-valid-foreground)",
+        "disabled": "var(--color-disabled-foreground)",
+        
         "required": "var(--text-color-required)",
         "listbox": "var(--text-color-listbox)",
         "listbox-hover": "var(--text-color-listbox-hover)",
@@ -239,9 +245,11 @@ module.exports = {
         "search-input-mobile": "var(--border-color-search-input-mobile)",
         "pagination": "var(--border-color-pagination)",
         "checkbox": "var(--border-color-checkbox)",
-        "invalid": "var(--border-color-invalid)",
-        "valid": "var(--border-color-valid)",
-        "disabled": "var(--border-color-disabled)",
+        
+        "invalid": "var(--color-invalid-foreground)",
+        "valid": "var(--color-valid-foreground)",
+        "disabled": "var(--color-disabled-foreground)",
+        
         "input": "var(--border-color-input)",
         "input-inverted": "var(--border-color-input-inverted)",
         "listbox": "var(--border-color-search-input)",
@@ -251,8 +259,9 @@ module.exports = {
         "input": "var(--border-color-input)",
         "notification-text": "var(--text-color-legend-error-count)",
         "check": "var(--text-color-button-primary)",
-        "invalid": "var(--text-color-invalid)",
-        "valid": "var(--text-color-valid)",
+        "invalid": "var(--color-invalid-foreground)",
+        "valid": "var(--color-valid-foreground)",
+        "disabled": "var(--color-disabled-foreground)",
       }),
       fill: ({ theme }) => ({
         "input": "var(--background-color-input)",
@@ -261,9 +270,11 @@ module.exports = {
         "notification": "var(--background-color-notification)",
         "notification-text": "var(--text-color-legend-error-count)",
         "check": "var(--text-color-button-primary)",
-        "invalid": "var(--text-color-invalid)",
-        "valid": "var(--text-color-valid)",
-        "fill-checkbox-invalid": "var(--background-color-invalid)"
+        "fill-checkbox-invalid": "var(--background-color-invalid)",
+        
+        "invalid": "var(--color-invalid-foreground)",
+        "valid": "var(--color-valid-foreground)",
+        "disabled": "var(--color-disabled-foreground)",
       }),
       borderRadius: {
         "3px": "var(--border-radius-3px)",