feat(components): added

Signed-off-by: sudhanshu dasgupta <[email protected]>

src/theme/components/input.modifier.ts

@@ -0,0 +1,18 @@
+import { Components, Theme } from '@mui/material/styles';
+import { CARIBBEAN_GREEN } from '../colors';
+
+export const MuiInput: Components<Theme>['MuiInput'] = {
+  styleOverrides: {
+    root: {
+      '&:before': {
+        borderBottom: '2px solid rgba(0, 0, 0, 0.5)'
+      },
+      '&.Mui-focused:after': {
+        borderBottom: ` 2px solid ${CARIBBEAN_GREEN}`
+      },
+      '&:hover:not(.Mui-disabled):before': {
+        borderBottom: `2px solid ${CARIBBEAN_GREEN}`
+      }
+    }
+  }
+};

src/theme/components/outlinedinput.modifier.ts

@@ -1,14 +1,24 @@
 import { Components, Theme } from '@mui/material';
-import { defaultPalette } from '../colors';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { CARIBBEAN_GREEN, KEPPEL } from '../colors';
 
 export const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'] = {
   styleOverrides: {
+    notchedOutline: {
+      borderColor: 'rgba(0, 0, 0, 0.5)'
+    },
     root: {
-      '&:hover $notchedOutline': {
-        borderColor: defaultPalette.keppel[3]
+      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: CARIBBEAN_GREEN
       },
-      '&$focused $notchedOutline': {
-        borderColor: defaultPalette.keppel[3]
+      [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: CARIBBEAN_GREEN
+      },
+      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+        borderColor: KEPPEL
+      },
+      '&:hover .MuiOutlinedInput-notchedOutline': {
+        borderColor: KEPPEL
       }
     }
   }

src/theme/components/textfield.modifier.ts

@@ -0,0 +1,15 @@
+import { Components, Theme } from '@mui/material';
+import { CARIBBEAN_GREEN } from '../colors';
+
+export const MuiTextField: Components<Theme>['MuiTextField'] = {
+  styleOverrides: {
+    root: {
+      '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
+      '--TextField-brandBorderHoverColor': CARIBBEAN_GREEN,
+      '--TextField-brandBorderFocusedColor': CARIBBEAN_GREEN,
+      '& label.Mui-focused': {
+        color: 'var(--TextField-brandBorderFocusedColor)'
+      }
+    }
+  }
+};