feat: handle removed grey-x colors from stylekit (#1046)

app/assets/javascripts/Components/Input/DecoratedInput.tsx

@@ -10,7 +10,7 @@ const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean
     input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
       !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
     } ${hasRightDecorations ? 'pr-2' : ''}`,
-    disabled: 'bg-grey-5 cursor-not-allowed',
+    disabled: 'bg-passive-5 cursor-not-allowed',
   }
 }
 

app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx

@@ -10,7 +10,7 @@ const Toggle: FunctionComponent<{
   setIsToggled: StateUpdater<boolean>
 }> = ({ isToggled, setIsToggled }) => (
   <IconButton
-    className="w-5 h-5 p-0 justify-center sk-circle hover:bg-grey-4 color-neutral"
+    className="w-5 h-5 p-0 justify-center sk-circle hover:bg-passive-4 color-neutral"
     icon={isToggled ? 'eye-off' : 'eye'}
     iconClassName="sn-icon--small"
     title="Show/hide password"

app/assets/javascripts/Components/Input/FloatingLabelInput.tsx

@@ -38,12 +38,12 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
 
     const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${
       focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : ''
-    } ${isInvalid ? 'color-dark-red' : ''} ${labelClassName}`
+    } ${isInvalid ? 'color-danger' : ''} ${labelClassName}`
 
     const INPUT_CLASSNAME = `w-full h-full ${
       focused || value ? 'pt-6 pb-2' : 'py-2.5'
     } px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
-      isInvalid ? 'border-dark-red placeholder-dark-red' : ''
+      isInvalid ? 'border-danger placeholder-dark-red' : ''
     } ${inputClassName}`
 
     const handleFocus = () => setFocused(true)