feat(theme): update theme color (#75)

src/lib/components/item/ItemCard.tsx

@@ -90,7 +90,7 @@ const ItemCard = ({ value, useAccordion = true }: ItemCardProps) => {
     <Grid
       padding={{ base: 4, md: 8 }}
       border="1px solid"
-      borderColor={colorMode === "light" ? "gray.200" : "gray.600"}
+      borderColor={colorMode === "light" ? "gray.200" : "gray.400"}
       borderRadius={24}
       gap={4}
     >

src/lib/styles/theme/colors.ts

@@ -0,0 +1,16 @@
+import type { DeepPartial, Theme } from "@chakra-ui/react";
+
+export const colors: DeepPartial<Theme["colors"]> = {
+  gray: {
+    50: "#e8e9e9",
+    100: "#d1d2d2",
+    200: "#a3a5a5",
+    300: "#747978",
+    400: "#464c4b",
+    500: "#181f1e",
+    600: "#131918",
+    700: "#0e1312",
+    800: "#0a0c0c",
+    900: "#050606",
+  },
+};

src/lib/styles/theme/components/button.ts

@@ -0,0 +1,7 @@
+import type { ComponentStyleConfig } from "@chakra-ui/react";
+
+export const Button: ComponentStyleConfig = {
+  baseStyle: {
+    borderRadius: 24,
+  },
+};

src/lib/styles/theme/components/index.ts

@@ -0,0 +1,7 @@
+import { Button } from "./button";
+import { Input } from "./input";
+
+export const components = {
+  Button,
+  Input,
+};

src/lib/styles/theme/components/input.ts

@@ -0,0 +1,11 @@
+import type { ComponentStyleConfig } from "@chakra-ui/react";
+
+export const Input: ComponentStyleConfig = {
+  sizes: {
+    lg: {
+      field: {
+        borderRadius: 24,
+      },
+    },
+  },
+};

src/lib/styles/theme/config.ts

@@ -0,0 +1,5 @@
+import type { ThemeConfig } from "@chakra-ui/react";
+
+export const config: ThemeConfig = {
+  disableTransitionOnChange: false,
+};

src/lib/styles/theme/fonts.ts

@@ -0,0 +1,6 @@
+import type { DeepPartial, Theme } from "@chakra-ui/react";
+
+export const fonts: DeepPartial<Theme["fonts"]> = {
+  heading: "Outfit, sans-serif",
+  body: "Outfit, sans-serif",
+};

src/lib/styles/theme/index.ts

@@ -0,0 +1,15 @@
+import { extendTheme } from "@chakra-ui/react";
+
+import { colors } from "./colors";
+import { components } from "./components";
+import { config } from "./config";
+import { fonts } from "./fonts";
+
+const customTheme = extendTheme({
+  fonts,
+  colors,
+  components,
+  config,
+});
+
+export default customTheme;

src/pages/_app.tsx

@@ -1,12 +1,12 @@
 import { ChakraProvider } from "@chakra-ui/react";
-import { DefaultSeo } from "next-seo";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import { DefaultSeo } from "next-seo";
 import NextNProgress from "nextjs-progressbar";
 
 import defaultSEOConfig from "../../next-seo.config";
 import Layout from "lib/components/layout";
-import customTheme from "lib/styles/customTheme";
+import customTheme from "lib/styles/theme";
 import "lib/styles/globals.css";
 
 const MyApp = ({ Component, pageProps }: AppProps) => {

src/pages/_document.tsx

@@ -3,7 +3,7 @@ import type { DocumentContext } from "next/document";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 
 import { UMAMI_SRC, UMAMI_WEBSITE_ID } from "lib/constants/umami";
-import customTheme from "lib/styles/customTheme";
+import customTheme from "lib/styles/theme";
 
 export const APP_NAME = "Public APIs";