fix(core): add missing error styles for inputs with errors (#2384)

Author: jorgemoya

.changeset/crazy-wings-smell.md

@@ -0,0 +1,22 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add missing border style for `Input`, `NumberInput` and `DatePicker`.
+
+## Migration
+
+Following convention, add these conditional classes to the fields using `clsx`:
+
+```
+{
+light:
+    errors && errors.length > 0
+    ? 'border-[var(--input-light-border-error,hsl(var(--error)))]'
+    : 'border-[var(--input-light-border,hsl(var(--contrast-100)))]',
+dark:
+    errors && errors.length > 0
+    ? 'border-[var(--input-dark-border-error,hsl(var(--error)))]'
+    : 'border-[var(--input-dark-border,hsl(var(--contrast-500)))]',
+}[colorScheme],
+```

core/vibes/soul/form/input/index.tsx

@@ -13,15 +13,15 @@ import { Label } from '@/vibes/soul/form/label';
  *   --input-light-background: hsl(var(--background));
  *   --input-light-text: hsl(var(--foreground));
  *   --input-light-border: hsl(var(--contrast-100));
+ *   --input-light-border-error: hsl(var(--error));
  *   --input-light-focus: hsl(var(--foreground));
  *   --input-light-placeholder: hsl(var(--contrast-500));
- *   --input-light-error: hsl(var(--error));
  *   --input-dark-background: hsl(var(--foreground));
  *   --input-dark-text: hsl(var(--background));
  *   --input-dark-border: hsl(var(--contrast-500));
  *   --input-dark-focus: hsl(var(--background));
  *   --input-dark-placeholder: hsl(var(--contrast-100));
- *   --input-dark-error: hsl(var(--error));
+ *   --input-dark-border-error: hsl(var(--error));
  *  }
  * ```
  */
@@ -48,8 +48,18 @@ export const Input = React.forwardRef<
           'relative overflow-hidden rounded-lg border transition-colors duration-200 focus:outline-none',
           {
             light:
-              'border-[var(--input-light-border,hsl(var(--contrast-100)))] bg-[var(--input-light-background,hsl(var(--background)))] focus-within:border-[var(--input-light-focus,hsl(var(--foreground)))]',
-            dark: 'border-[var(--input-dark-border,hsl(var(--contrast-500)))] bg-[var(--input-dark-background,hsl(var(--foreground)))] focus-within:border-[var(--input-dark-focus,hsl(var(--background)))]',
+              'bg-[var(--input-light-background,hsl(var(--background)))] focus-within:border-[var(--input-light-focus,hsl(var(--foreground)))]',
+            dark: 'bg-[var(--input-dark-background,hsl(var(--foreground)))] focus-within:border-[var(--input-dark-focus,hsl(var(--background)))]',
+          }[colorScheme],
+          {
+            light:
+              errors && errors.length > 0
+                ? 'border-[var(--input-light-border-error,hsl(var(--error)))]'
+                : 'border-[var(--input-light-border,hsl(var(--contrast-100)))]',
+            dark:
+              errors && errors.length > 0
+                ? 'border-[var(--input-dark-border-error,hsl(var(--error)))]'
+                : 'border-[var(--input-dark-border,hsl(var(--contrast-500)))]',
           }[colorScheme],
         )}
       >

core/vibes/soul/form/number-input/index.tsx

@@ -21,13 +21,15 @@ import { Label } from '@/vibes/soul/form/label';
  *   --number-input-light-button-background: hsl(var(--background));
  *   --number-input-light-button-background-hover: hsl(var(--contrast-100) / 50%);
  *   --number-input-light-border: hsl(var(--contrast-100));
+ *   --number-input-light-border-error: hsl(var(--error));
  *   --number-input-dark-background: hsl(var(--background));
  *   --number-input-dark-text: hsl(var(--background));
  *   --number-input-dark-icon: hsl(var(--contrast-300));
  *   --number-input-dark-icon-hover: hsl(var(--background));
  *   --number-input-dark-button-background: hsl(var(--foreground));
  *   --number-input-dark-button-background-hover: hsl(var(--contrast-500) / 50%);
  *   --number-input-dark-border: hsl(var(--contrast-500));
+ *   --number-input-dark-border-error: hsl(var(--error));
  *  }
  * ```
  */
@@ -67,10 +69,19 @@ export const NumberInput = React.forwardRef<
         <div
           className={clsx(
             'inline-flex items-center rounded-lg border',
+            {
+              light: 'bg-[var(--number-input-light-background,hsl(var(--background)))]',
+              dark: 'bg-[var(--number-input-dark-background,hsl(var(--foreground)))]',
+            }[colorScheme],
             {
               light:
-                'border-[var(--number-input-light-border,hsl(var(--contrast-100)))] bg-[var(--number-input-light-background,hsl(var(--background)))]',
-              dark: 'border-[var(--number-input-dark-border,hsl(var(--contrast-500)))] bg-[var(--number-input-dark-background,hsl(var(--foreground)))]',
+                errors && errors.length > 0
+                  ? 'border-[var(--number-input-light-border-error,hsl(var(--error)))]'
+                  : 'border-[var(--number-input-light-border,hsl(var(--contrast-100)))]',
+              dark:
+                errors && errors.length > 0
+                  ? 'border-[var(--number-input-dark-border-error,hsl(var(--error)))]'
+                  : 'border-[var(--number-input-dark-border,hsl(var(--contrast-500)))]',
             }[colorScheme],
           )}
         >