fix: 🤔 correct colors in form field validation (#1381)

solid-design-system · Sep 17, 2024 · c587094 · c587094
1 parent 2b560d2
commit c587094
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 37 deletions.
diff --git a/packages/components/src/components/input/input.ts b/packages/components/src/components/input/input.ts
@@ -450,16 +450,6 @@ export default class SdInput extends SolidElement implements SolidFormControl {
 
     // Conditional Styles
     const textSize = this.size === 'sm' ? 'text-sm' : 'text-base';
-    const textColor = {
-      disabled: 'text-neutral-500',
-      readonly: 'text-black',
-      activeInvalid: 'text-error',
-      activeValid: 'text-black',
-      active: 'text-black',
-      invalid: 'text-error',
-      valid: 'text-black',
-      default: 'text-black'
-    }[inputState];
 
     const borderColor = {
       disabled: 'border-neutral-500',
@@ -507,7 +497,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               // States
               !this.disabled && !this.readonly ? 'hover:bg-neutral-200' : '',
               this.readonly ? 'bg-neutral-100' : 'bg-white',
-              textColor
+              inputState === 'disabled' ? 'text-neutral-500' : 'text-black'
             )}
           >
             ${slots['left']

diff --git a/packages/components/src/components/select/select.ts b/packages/components/src/components/select/select.ts
@@ -841,19 +841,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
 
         <div
           part="form-control-input"
-          class=${cx(
-            'relative w-full bg-white',
-            {
-              disabled: 'text-neutral-500',
-              readonly: 'text-black',
-              activeInvalid: 'text-error',
-              activeValid: 'text-success',
-              active: 'text-black',
-              invalid: 'text-error',
-              valid: 'text-success',
-              default: 'text-black'
-            }[selectState]
-          )}
+          class=${cx('relative w-full bg-white', selectState === 'disabled' ? 'text-neutral-500' : 'text-black')}
         >
           <div
             part="border"
@@ -979,7 +967,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
                 ? html`
                     <sd-icon
                       part="invalid-icon"
-                      class=${cx(iconMarginLeft, iconSize)}
+                      class=${cx(iconMarginLeft, iconSize, 'text-error')}
                       library="system"
                       name="risk"
                     ></sd-icon>
@@ -989,7 +977,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
                 ? html`
                     <sd-icon
                       part="valid-icon"
-                      class=${cx('flex-shrink-0', iconMarginLeft, iconSize)}
+                      class=${cx('flex-shrink-0 text-success', iconMarginLeft, iconSize)}
                       library="system"
                       name="status-check"
                     ></sd-icon>

diff --git a/packages/components/src/components/textarea/textarea.ts b/packages/components/src/components/textarea/textarea.ts
@@ -370,18 +370,9 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
                 md: 'textarea-md py-1',
                 lg: 'textarea-lg py-2'
               }[this.size],
-              {
-                disabled: 'text-neutral-500',
-                readonly: 'text-black',
-                activeInvalid: 'text-error',
-                activeValid: 'text-success',
-                active: 'text-black',
-                invalid: 'text-error',
-                valid: 'text-success',
-                default: 'text-black'
-              }[textareaState],
               !this.disabled && !this.readonly ? 'hover:bg-neutral-200' : '',
-              this.readonly ? 'bg-neutral-100' : 'bg-white'
+              this.readonly ? 'bg-neutral-100' : 'bg-white',
+              textareaState === 'disabled' ? 'text-neutral-500' : 'text-black'
             )}
           >
             <textarea