Update colors

trilitech · Sep 12, 2024 · 77f241e · 77f241e
1 parent 47c28d4
commit 77f241e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 45 deletions.
diff --git a/apps/web/src/components/AccountCard/AccountCard.tsx b/apps/web/src/components/AccountCard/AccountCard.tsx
@@ -23,7 +23,7 @@ export const AccountCard = () => {
       borderRadius="40px"
     >
       <AccountTile
-        background={color("50")}
+        background={color("100")}
         account={currentAccount}
         id="account-tile"
         onClick={() => openWith(<AccountSelectorModal />)}

diff --git a/apps/web/src/components/Tab/Tab.tsx b/apps/web/src/components/Tab/Tab.tsx
@@ -1,5 +1,6 @@
 import { Tab as ChakraTab } from "@chakra-ui/react";
 import { NavLink, useMatch } from "react-router-dom";
+import { useColor } from "../../styles/useColor";
 
 type TabProps = {
   to: string;
@@ -8,15 +9,16 @@ type TabProps = {
 
 export const Tab = ({ to, label }: TabProps) => {
   const isActive = useMatch(to);
+  const color = useColor();
 
   return (
     <ChakraTab
       as={NavLink}
       width="full"
       to={to}
       {...(isActive && {
-        bg: "gray.200",
-        color: "gray.900",
+        bg: color("100"),
+        color: color("900"),
       })}
     >
       {label}

diff --git a/apps/web/src/styles/colors.ts b/apps/web/src/styles/colors.ts
@@ -1,55 +1,55 @@
 const light = {
   red: "#E53E3E",
   redDark: "#C53030",
-  blue: "#0052FF",
-  blueDark: "#003EE0",
+  blue: "#3A3AFF",
+  blueDark: "#2C2CE5",
   green: "#38A169",
   greenDark: "#25855A",
-  bg: "#E0E6EE",
-  bgGradient: "linear-gradient(67deg, rgba(226, 232, 240, 0.00) 0%, #E2E8F0 100%)",
-  bgMaskColor: "#E2E8F0",
+  bg: "#E0E0FF",
+  bgGradient: "linear-gradient(67deg, rgba(248, 248, 255, 0.70) 0%, #F8F8FF 100%)",
+  bgMaskColor: "#F8F8FF",
   grey: {
-    black: "#10121B",
+    black: "#121224",
     white: "#FFFFFF",
-    900: "#171923",
-    800: "#1A202C",
-    700: "#2D3748",
-    600: "#4A5568",
-    500: "#718096",
+    900: "#16162B",
+    800: "#22223F",
+    700: "#2E2E5C",
+    600: "#4B4B6A",
+    500: "#6C7A8F",
     450: "#E0E6EE",
-    400: "#A0AEC0",
-    300: "#CBD5E0",
-    200: "#E2E8F0",
-    100: "#EDF2F7",
-    50: "#F7FAFC",
+    400: "#909CAF",
+    300: "#B0B0DA",
+    200: "#E0E0FF",
+    100: "#F0F0FF",
+    50: "#F8F8FF",
   },
 };
 
 const dark = {
   red: "#E53E3E",
   redDark: "#C53030",
-  blue: "#0052FF",
-  blueDark: "#003EE0",
+  blue: "#3A3AFF",
+  blueDark: "#2C2CE5",
   green: "#38A169",
   greenDark: "#25855A",
-  bg: "#0D0F19",
-  bgGradient: "linear-gradient(67deg, rgba(16, 18, 27, 0.00) 0%, #10121B 100%)",
-  bgMaskColor: "#10121B",
+  bg: "#121224",
+  bgGradient: "linear-gradient(67deg, rgba(22, 22, 43, 0.20) 0%, #16162B 100%)",
+  bgMaskColor: "#16162B",
   grey: {
     black: "#FFFFFF",
-    white: "#1A202C",
-    900: "#F7FAFC",
-    800: "#EDF2F7",
-    700: "#E2E8F0",
-    600: "#CBD5E0",
-    500: "#A0AEC0",
+    white: "#22223F",
+    900: "#F8F8FF",
+    800: "#F0F0FF",
+    700: "#E0E0FF",
+    600: "#B0B0DA",
+    500: "#909CAF",
     450: "#E0E6EE",
-    400: "#718096",
-    300: "#4A5568",
-    200: "#10121B",
-    100: "#2D3748",
-    50: "#171923",
+    400: "#6C7A8F",
+    300: "#4B4B6A",
+    200: "#121224",
+    100: "#2E2E5C",
+    50: "#16162B",
   },
 };
 
-export { light, dark };
+export { light, dark };
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
@@ -223,26 +223,26 @@ const theme = extendTheme({
       sizes,
     },
     Tabs: {
-      baseStyle: {
+      baseStyle: (props: StyleFunctionProps) => ({
         tab: {
           color: "gray.500",
           _selected: {
             _hover: {
-              bg: "gray.200",
-              color: "gray.900",
+              bg: mode("gray.200", "gray.100")(props),
+              color: "gray.600",
             },
-            bg: "gray.200",
+            bg: "gray.100",
             color: "gray.900",
           },
           _hover: {
             bg: "gray.100",
-            color: "gray.600",
+            color: "gray.900",
           },
         },
         tabpanel: {
           padding: 0,
         },
-      },
+      }),
       variants: {
         onboarding: {
           tab: {
@@ -283,7 +283,7 @@ const theme = extendTheme({
         track: {
           backgroundColor: mode(light.grey[300], dark.grey[300])(props),
           _checked: {
-            backgroundColor: mode(light.grey[400], dark.grey[400])(props),
+            backgroundColor: mode(light.grey[400], dark.grey[600])(props),
           },
         },
         thumb: {
@@ -597,11 +597,11 @@ const theme = extendTheme({
     global: (props: StyleFunctionProps) => ({
       body: {
         color: mode(light.grey[600], dark.grey[600])(props),
-        bgColor: mode(light.bg, dark.bg)(props),
+        bg: mode(light.bg, dark.bg)(props),
         bgImage: mode(light.bgGradient, dark.bgGradient)(props),
         _before: {
-          bgColor: mode(light.bgMaskColor, dark.bgMaskColor)(props),
           maskImage: "url(/static/bg.svg)",
+          bgColor: mode(light.bgMaskColor, dark.bgMaskColor)(props),
         },
       },
       ":root": {