Merge pull request #64 from uwblueprint/W25/trinity/set-up-color-theme

W25/trinity/ setup color theme + typography

Author: trinity-y

frontend/src/components/pages/CreatePasswordPage.tsx

@@ -109,7 +109,7 @@ const CreatePasswordPage = (): React.ReactElement => {
           <ResponsiveLogo />
           <ResponsiveAuthContainer>
             <Text
-              color="#4A5568"
+              color="gray.600"
               textStyle={{ base: "h2Mobile", md: "h2" }}
               mb="0"
               textAlign="center"
@@ -121,23 +121,23 @@ const CreatePasswordPage = (): React.ReactElement => {
                 <Box>
                   <FormLabel
                     fontSize="14px"
-                    textColor="var(--gray-600, #4A5568)"
+                    textColor="gray.600"
                     lineHeight="8px"
                   >
                     Email Address:
                   </FormLabel>
                   <Input
-                    textColor="var(--gray-400, #A0AEC0)"
+                    textColor="gray.400"
                     fontSize="14px"
                     height="2.4rem"
                     placeholder={email}
                     isDisabled
-                    bg="var(--gray-200, #E2E8F0)"
+                    bg="gray.200"
                   />
                 </Box>
                 <Box fontSize="12px">
                   <FormLabel
-                    textColor="var(--gray-600, #4A5568)"
+                    textColor="gray.600"
                     fontSize="14px"
                     lineHeight="8px"
                   >
@@ -152,7 +152,7 @@ const CreatePasswordPage = (): React.ReactElement => {
                 </Box>
                 <Box fontSize="12px">
                   <FormLabel
-                    textColor="var(--gray-600, #4A5568)"
+                    textColor="gray.600"
                     fontSize="14px"
                     lineHeight="8px"
                   >
@@ -174,7 +174,7 @@ const CreatePasswordPage = (): React.ReactElement => {
                   color="white"
                   h="2.4rem"
                   width="100%"
-                  bg="var(--blue-700, #2C5282)"
+                  bg="blue.700"
                 >
                   Create Account
                 </Button>
@@ -199,7 +199,7 @@ const CreatePasswordPage = (): React.ReactElement => {
       {showModal && (
         <ResponsiveModalWindow>
           <Text
-            color="#2C5282"
+            color="blue.700"
             textAlign="center"
             textStyle={{ base: "h2", md: "h1" }}
           >
@@ -212,8 +212,8 @@ const CreatePasswordPage = (): React.ReactElement => {
             Welcome to the Oakville & Milton Humane Society
           </Text>
           <Button
-            color="var(--gray-100, #EDF2F7)"
-            bg="var(--blue-700, #2C5282)"
+            color="gray.100"
+            bg="blue.700"
             height="3rem"
             padding="0rem 1.875rem"
             textStyle="button"

frontend/src/index.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { ChakraProvider } from "@chakra-ui/react";
-import theme from "./theme";
-
+import theme from "./theme/theme";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";

frontend/src/theme.tsx

@@ -0,0 +1,71 @@
+const colors = {
+  white: {
+    default: "#FFFFFF",
+  },
+  gray: {
+    50: "#F7FAFC",
+    100: "#EDF2F7",
+    200: "#E2E8F0",
+    300: "#CBD5E0",
+    400: "#A0AEC0",
+    500: "#718096",
+    600: "#4A5568",
+    700: "#2D3748",
+    800: "#1A202C",
+  },
+  purple: {
+    50: "#FAF5FF",
+    100: "#E9D8FD",
+    300: "#B794F4",
+    800: "#44337A",
+  },
+  blue: {
+    50: "#EBF8FF",
+    100: "#BEE3F8",
+    200: "#90CDF4",
+    400: "#4299E1",
+    500: "#3182CE",
+    700: "#2C5282",
+  },
+  teal: {
+    50: "#E6FFFA",
+    100: "#B2F5EA",
+    200: "#81E6D9",
+    300: "#4FD1C5",
+    400: "#38B2AC",
+  },
+  green: {
+    50: "#F0FFF4",
+    100: "#C6F6D5",
+    200: "#9AE6B4",
+    300: "#68D391",
+    500: "#38A169",
+    800: "#22543D",
+  },
+  yellow: {
+    200: "#FAF089",
+    400: "#FFEB6A",
+    500: "#EACF03",
+  },
+  orange: {
+    200: "#FBD38D",
+    400: "#ED8936",
+    500: "#DD6B20",
+    800: "#7B341E",
+  },
+  red: {
+    200: "#FBD38D",
+    400: "#F56565",
+    600: "#B02124",
+    800: "#822727",
+  },
+  pink: {
+    50: "#FFF5F7",
+    100: "#FED7E2",
+    300: "#F687B3",
+    400: "#ED64A6",
+    800: "#702459",
+  },
+};
+
+export default colors;

frontend/src/theme/colors.tsx

@@ -0,0 +1,60 @@
+import "@fontsource/poppins";
+import "@fontsource/roboto";
+
+const textStyles = {
+  h1: {
+    fontFamily: "Poppins",
+    fontWeight: 600,
+    fontSize: "40px",
+  },
+  h2: {
+    fontFamily: "Poppins",
+    fontWeight: 600,
+    fontSize: "28px",
+  },
+  h2Mobile: {
+    fontFamily: "Poppins",
+    fontWeight: 600,
+    fontSize: "24px",
+  },
+  h3: {
+    fontFamily: "Poppins",
+    fontWeight: 500,
+    fontSize: "20px",
+  },
+  subheading: {
+    fontFamily: "Poppins",
+    fontWeight: 500,
+    fontSize: "20px",
+  },
+  body: {
+    fontFamily: "Roboto",
+    fontWeight: 400,
+    fontSize: "18px",
+    lineHeight: "150%",
+  },
+  bodyBold: {
+    fontFamily: "Roboto",
+    fontWeight: 700,
+    fontSize: "18px",
+    lineHeight: "150%",
+  },
+  bodyMobile: {
+    fontFamily: "Roboto",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "150%",
+  },
+  button: {
+    fontFamily: "Poppins",
+    fontWeight: 500,
+    fontSize: "18px",
+  },
+  caption: {
+    fontFamily: "Poppins",
+    fontWeight: 400,
+    fontSize: "12px",
+  },
+};
+
+export default textStyles;

frontend/src/theme/textStyles.tsx

@@ -0,0 +1,10 @@
+import { extendTheme } from "@chakra-ui/react";
+import textStyles from "./textStyles";
+import colors from "./colors";
+
+const theme = extendTheme({
+  colors,
+  textStyles,
+});
+
+export default theme;