fix custom tw colors opacity. replace Input css module with tw (#1906)

* fix custom tw colors opacity. replace Input css module with tw

* type cast hslWithOpacity values to string

* remove arbitrary values

Author: billy-le

common/styles/globals.css

@@ -5,6 +5,22 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --primary-rgb: 62 214 240;
+    --secondary-rgb: 37 46 62;
+    --gray-rgb: 226 226 226;
+    --white-rgb: 247 247 247;
+    --burnt-orange-hsl: 14 55% 45%;
+    --success-hsl: 132 35% 88%;
+    --success-deep-hsl: 132 60% 23%;
+    --warning-hsl: 46 100% 90%;
+    --warning-deep-hsl: 39 80% 31%;
+    --error-hsl: 355 70% 91%;
+    --error-deep-hsl: 355 63% 34%;
+  }
+}
 /* stylelint-enable at-rule-no-unknown */
 
 /* Global Styles */

components/Form/Checkbox/Checkbox.tsx

@@ -16,13 +16,13 @@ function Checkbox({
   id,
   label,
 }: CheckboxProps) {
-  const hasErrors = errors[name];
+  const hasErrors = Boolean(errors[name]);
   return (
     <div className="relative m-4" data-testid={CHECKBOX}>
       <Label for={name} isHidden={false}>
         <input
           {...field}
-          className="border border-secondary/5 rounded-[3px] text-lg p-2 scale-150 mr-3 disabled:opacity-60 hover:disabled:cursor-not-allowed"
+          className="border border-secondary/5 rounded-sm text-lg p-2 scale-150 mr-3 disabled:opacity-60 hover:disabled:cursor-not-allowed"
           id={id || name}
           name={name}
           type="checkbox"

components/Form/Input/Input.module.css

@@ -5,7 +5,6 @@ import type { InputHTMLAttributes } from 'react';
 import { cx } from 'common/utils/cva';
 import Label from 'components/Form/Label/Label';
 import Alert from 'components/Alert/Alert';
-import styles from './Input.module.css';
 
 /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes_common_to_all_input_types */
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'form'> {
@@ -34,21 +33,31 @@ function Input({
   const isLabelBeforeInput = !isLabelAfterInput;
 
   return (
-    <div className={cx(className, styles.field)} data-testid={INPUT}>
+    <div className={cx('m-4', className)} data-testid={INPUT}>
       {isLabelBeforeInput && (
         <Label for={name} isHidden={isLabelHidden}>
           {label}
         </Label>
       )}
 
-      <div className={styles.inputFeedbackGrouping} data-testid={INPUT_FEEDBACK_GROUPING}>
+      <div
+        className="flex flex-col items-stretch lg:relative"
+        data-testid={INPUT_FEEDBACK_GROUPING}
+      >
         <input
           {...field}
           {...props}
-          className={cx(styles.Input, hasValidationStyling, {
-            [styles.valid]: touched[name] && !hasErrors && hasValidationStyling,
-            [styles.invalid]: touched[name] && hasErrors && hasValidationStyling,
-          })}
+          className={cx(
+            'border border-secondary/50 rounded-sm text-lg p-2',
+            'disabled:opacity-60 hover:disabled:cursor-not-allowed min-w-48',
+            'focus-visible:border-primary/50 focus-visible:shadow-xs focus-visible:shadow-primary/75 focus-visible:outline-none',
+            {
+              'border-success-deep shadow-xs shadow-success-deep outline-none':
+                touched[name] && !hasErrors && hasValidationStyling,
+              'border-error-deep shadow-xs shadow-error-deep':
+                touched[name] && hasErrors && hasValidationStyling,
+            },
+          )}
           disabled={isDisabled}
           id={id || name}
           name={name}
@@ -59,7 +68,16 @@ function Input({
         <ErrorMessage name={name}>
           {(message: string) => {
             return hasErrors ? (
-              <Alert className={styles.errorMessage} data-testid={INPUT_ERROR} type="error">
+              <Alert
+                className={cx([
+                  'mt-2 flex-1 text-center max-w-full -mx-0.5',
+                  'lg:mt-0 lg:ml-4 lg:absolute lg:-top-0.5 lg:left-full',
+                  'lg:min-w-36 lg:max-w-72 lg:w-auto',
+                  'lg:py-0 lg:px-2.5 lg:min-h-full lg:flex lg:items-center lg:justify-center',
+                ])}
+                data-testid={INPUT_ERROR}
+                type="error"
+              >
                 {message}
               </Alert>
             ) : null;
@@ -68,7 +86,7 @@ function Input({
       </div>
 
       {isLabelAfterInput && (
-        <Label for={name} isHidden={isLabelHidden} className={styles.labelAfterInput}>
+        <Label for={name} isHidden={isLabelHidden}>
           {label}
         </Label>
       )}

components/Form/Input/Input.tsx

@@ -2,7 +2,7 @@
 
 exports[`Input > should render with required props 1`] = `
 <div
-  className="field"
+  className="m-4"
   data-testid="INPUT"
 >
   <label
@@ -13,11 +13,11 @@ exports[`Input > should render with required props 1`] = `
     Some Input:
   </label>
   <div
-    className="inputFeedbackGrouping"
+    className="flex flex-col items-stretch lg:relative"
     data-testid="INPUT_FEEDBACK_GROUPING"
   >
     <input
-      className="Input"
+      className="border border-secondary/50 rounded-sm text-lg p-2 disabled:opacity-60 hover:disabled:cursor-not-allowed min-w-48 focus-visible:border-primary/50 focus-visible:shadow-xs focus-visible:shadow-primary/75 focus-visible:outline-none"
       disabled={false}
       id="someInputName"
       name="someInputName"