them?

Author: rony1philip

frontend/package-lock.json

@@ -11,6 +11,7 @@
     "generate-client": "openapi-ts"
   },
   "dependencies": {
+    "@chakra-ui/anatomy": "^2.3.4",
     "@chakra-ui/react": "^3.8.0",
     "@emotion/react": "^11.14.0",
     "@tanstack/react-query": "^5.28.14",

frontend/package.json

@@ -1,31 +1,205 @@
-import { createSystem, defaultConfig } from "@chakra-ui/react"
-import { buttonRecipe } from "./theme/button.recipe"
+import {
+  extendTheme,
+  createMultiStyleConfigHelpers,
+  Textarea,
+  defineStyle,
+  defineStyleConfig,
+} from "@chakra-ui/react";
+import { sliderAnatomy as parts } from "@chakra-ui/anatomy";
+import { inputAnatomy, } from "@chakra-ui/anatomy";
 
-export const system = createSystem(defaultConfig, {
-  globalCss: {
-    html: {
-      fontSize: "16px",
+
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(inputAnatomy.keys);
+
+const textareaoutline = defineStyle({
+  border: "2px dashed", // change the appearance of the border
+  borderRadius: 0,
+  bg: "white",
+         // remove the border radius
+  fontWeight: "semibold", // change the font weight
+  _hover: {
+    bg: "green.50",
+    borderColor: "009688",
+    _dark: {
+      bg: "whiteAlpha.100",
+    }
+  },
+   _focus: {
+        borderColor: "green.500",
+        borderWidth: 2,
+        _dark: {
+          bg: "whiteAlpha.100",
+        },
+      },
+});
+
+const textareaTheme = defineStyleConfig({
+  variants: { outline: textareaoutline },
+});
+// default base style from the Input theme
+const baseStyle = definePartsStyle({
+  field: {
+    width: "100%",
+    minWidth: 0,
+    outline: 0,
+    position: "relative",
+    appearance: "none",
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
     },
-    body: {
-      fontSize: "0.875rem",
-      margin: 0,
-      padding: 0,
+  },
+});
+
+
+
+
+const variantInput = definePartsStyle((props) => {
+  return {
+    field: {
+      fontFamily: "cursive", // change font family to mono
+      bg: "white",
+      borderColor: "009688",
+      fontsize: "large",
+
+      _focus: {
+        borderColor: "green.500",
+        borderWidth: 2,
+        _dark: {
+          bg: "whiteAlpha.100",
+        },
+      },
+      _hover: {
+        bg: "green.50",
+        borderColor: "009688",
+        _dark: {
+          bg: "whiteAlpha.100",
+        },
+      },
+    },
+  };
+});
+
+const variantTextArea = definePartsStyle((props) => {
+  return {
+    field: {
+      fontFamily: "cursive", // change font family to mono
+      bg: "white",
+
+      borderColor: "green.500",
+      borderWidth: "2px",
+      fontsize: "XX-large",
+
+      _focus: {
+        borderColor: "green.500",
+        borderWidth: 2,
+        _dark: {
+          bg: "whiteAlpha.100",
+        },
+      },
+      _focusWithin: { borderColor: "green.500" },
+      _hover: {
+        bg: "green.500",
+        borderColor: "009688",
+      },
     },
-    ".main-link": {
-      color: "ui.main",
-      fontWeight: "bold",
+  };
+});
+
+const disabledStyles = {
+  _disabled: {
+    backgroundColor: "ui.light",
+  },
+};
+const variants = {
+  outline: variantInput,
+  line: variantTextArea,
+};
+const inputTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    size: "md",
+    variant: "outline",
+  },
+});
+
+const TextAreaTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    size: "md",
+    variant: "textArea",
+  },
+});
+
+const theme = extendTheme({
+  colors: {
+    ui: {
+      main: "#009688",
+      secondary: "#EDF2F7",
+      success: "#48BB78",
+      danger: "#E53E3E",
+      light: "B7E0FF",
+      dark: "#1A202C",
+      darkSlate: "#252D3D",
+      dim: "#A0AEC0",
     },
   },
-  theme: {
-    tokens: {
-      colors: {
-        ui: {
-          main: { value: "#009688" },
+  components: {
+    Textarea: textareaTheme,
+    Input: inputTheme,
+    Button: {
+      variants: {
+        primary: {
+          backgroundColor: "ui.main",
+
+          color: "white",
+          _hover: {
+            backgroundColor: "#00766C",
+          },
+          _disabled: {
+            ...disabledStyles,
+            _hover: {
+              ...disabledStyles,
+            },
+          },
+        },
+        danger: {
+          backgroundColor: "ui.danger",
+          color: "ui.light",
+          _hover: {
+            backgroundColor: "#E32727",
+          },
         },
       },
     },
-    recipes: {
-      button: buttonRecipe,
+    Tabs: {
+      variants: {
+        enclosed: {
+          tab: {
+            _selected: {
+              color: "ui.main",
+            },
+          },
+        },
+      },
     },
   },
-})
+
+  styles: {
+    global: (props) => ({
+      body: {
+        bg: "antiqueWhite",
+        fontFamily: "cursive",
+        fontSize: "large",
+      },
+    }),
+  },
+});
+
+export default theme;