Add a custom styles for Stepper and Tabs

dapp/src/theme/Stepper.ts

@@ -0,0 +1,33 @@
+import { mode } from "@chakra-ui/theme-tools"
+import type { StyleFunctionProps } from "@chakra-ui/styled-system"
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Stepper: ComponentSingleStyleConfig = {
+  baseStyle: {
+    indicator: {
+      borderRadius: 4,
+      fontWeight: "500",
+    },
+    step: {
+      gap: 6,
+    },
+  },
+  variants: {
+    basic: (props: StyleFunctionProps) => ({
+      indicator: {
+        "&[data-status=complete]": {
+          // TODO: Set the correct color
+          background: mode("black", "purple")(props),
+        },
+      },
+      separator: {
+        "&[data-status=complete]": {
+          // TODO: Set the correct color
+          background: mode("black", "purple")(props),
+        },
+      },
+    }),
+  },
+}
+
+export default Stepper

dapp/src/theme/Tabs.ts

@@ -0,0 +1,30 @@
+import { mode } from "@chakra-ui/theme-tools"
+import type { StyleFunctionProps } from "@chakra-ui/styled-system"
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Tabs: ComponentSingleStyleConfig = {
+  variants: {
+    underline: (props: StyleFunctionProps) => ({
+      tab: {
+        padding: 0,
+        fontWeight: 700,
+        borderBottom: "4px solid",
+        borderColor: "transparent",
+        background: "transparent",
+        _selected: {
+          // TODO: Set the correct color
+          color: mode("black", "black")(props),
+          borderColor: mode("#F34900", "#F34900")(props),
+        },
+        // TODO: Set the correct color
+        color: mode("#675E60", "#675E60")(props),
+      },
+      tablist: {
+        borderBottom: "none",
+        gap: 8,
+      },
+    }),
+  },
+}
+
+export default Tabs

dapp/src/theme/index.ts

@@ -4,6 +4,8 @@ import Button from "./Button"
 import Switch from "./Switch"
 import { colors, zIndices } from "./utils"
 import Drawer from "./Drawer"
+import Stepper from "./Stepper"
+import Tabs from "./Tabs"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
@@ -24,6 +26,8 @@ const defaultTheme = {
     Button,
     Switch,
     Drawer,
+    Stepper,
+    Tabs,
   },
 }