refactored styling for input states (#4724)

* refactored styles for valid, invalid, and disabled; adjusted colors for each theme
molgenis · Feb 17, 2025 · f0e4a4b · f0e4a4b
1 parent 5e05a3e
commit f0e4a4b
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)",