[SCSE-188] Implement Chakra UI custom colors (#60)

* Added custom colors to chakra ui theming files and use them in the ui package * update test snapshot --------- Co-authored-by: Jing Qiang <[email protected]>
ntuscse · Feb 23, 2023 · eab1cbe · eab1cbe · vercel · Feb 23, 2023
1 parent 263d6c0
commit eab1cbe
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 34 deletions.
diff --git a/apps/web/__tests__/__snapshots__/index.snapshot.tsx.snap b/apps/web/__tests__/__snapshots__/index.snapshot.tsx.snap
@@ -21,7 +21,7 @@ exports[`renders homepage unchanged 1`] = `
           class="chakra-stack css-md5zo3"
         >
           <button
-            class="chakra-button css-1cwf3eu"
+            class="chakra-button css-ik4ihr"
             type="button"
           >
             <a
@@ -71,7 +71,7 @@ exports[`renders homepage unchanged 1`] = `
             href="blog/techterview-101-navigating-the-internship-world"
           >
             <div
-              class="css-1ivaz1t"
+              class="css-hkp7"
             >
               <div
                 class="css-1m6ql1p"
@@ -87,12 +87,12 @@ exports[`renders homepage unchanged 1`] = `
                 class="chakra-stack css-lha1ht"
               >
                 <h2
-                  class="chakra-heading css-1fgxt6g"
+                  class="chakra-heading css-6hfru0"
                 >
                   Techterview 101: Navigating the Internship World
                 </h2>
                 <p
-                  class="chakra-text css-7wvmeg"
+                  class="chakra-text css-1h1oeyi"
                 >
                   February 22, 2022
                 </p>
@@ -117,7 +117,7 @@ exports[`renders homepage unchanged 1`] = `
             href="blog/21st-main-committee"
           >
             <div
-              class="css-1ivaz1t"
+              class="css-hkp7"
             >
               <div
                 class="css-1m6ql1p"
@@ -133,12 +133,12 @@ exports[`renders homepage unchanged 1`] = `
                 class="chakra-stack css-lha1ht"
               >
                 <h2
-                  class="chakra-heading css-1fgxt6g"
+                  class="chakra-heading css-6hfru0"
                 >
                   21st Main Committee
                 </h2>
                 <p
-                  class="chakra-text css-7wvmeg"
+                  class="chakra-text css-1h1oeyi"
                 >
                   March 31, 2021
                 </p>
@@ -163,7 +163,7 @@ exports[`renders homepage unchanged 1`] = `
       Let’s work together
     </h2>
     <button
-      class="chakra-button css-1godlkh"
+      class="chakra-button css-2nck4"
       type="button"
     >
       <a

diff --git a/packages/ui/components/blog-card/BlogCard.tsx b/packages/ui/components/blog-card/BlogCard.tsx
@@ -21,13 +21,13 @@ export const BlogCard = ({
           maxW="445px"
           w="full"
           minH="600px"
-          bg="white"
+          bg="brand.white"
           boxShadow="2xl"
           rounded="2xl"
           p={6}
           overflow="hidden"
           _hover={{
-            bg: "gray.50",
+            bg: "brand.gray",
           }}
           transition="transform 0.25s ease"
         >

diff --git a/packages/ui/components/blog-card/BlogCardContent.tsx b/packages/ui/components/blog-card/BlogCardContent.tsx
@@ -19,13 +19,13 @@ export const BlogCardContent = ({
         color="gray.700"
         fontSize="2xl"
         fontFamily="body"
-        _hover={{ cursor: "pointer", color: "blue.600" }}
+        _hover={{ cursor: "pointer", color: "brand.blue" }}
       >
         {title}
       </Heading>
 
       {/* Date */}
-      <Text color="gray.400" _before={{ content: '"🕓 "' }}>
+      <Text color="brand.gray.mid" _before={{ content: '"🕓 "' }}>
         {date}
       </Text>
 

diff --git a/packages/ui/components/blog-card/BlogCardImage.tsx b/packages/ui/components/blog-card/BlogCardImage.tsx
@@ -32,12 +32,12 @@ export const BlogCardImage = ({ alt, src, ...props }: BlogCardImageProps) => {
         <Box
           h="100%"
           w="100%"
-          bgColor="blackAlpha.300"
+          bgColor="brand.blackAlpha.mid"
           display="flex"
           justifyContent="center"
           alignItems="center"
         >
-          <Text color="blackAlpha.500">{alt}</Text>
+          <Text color="brand.blackAlpha.dark">{alt}</Text>
         </Box>
       }
     </Box>

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
@@ -24,7 +24,7 @@ const PrimaryBlueButton = ({ label, href, ...props }: ButtonProps) => {
           key={ label }
           size='lg'
           rounded='none'
-          bg='blue.600'
+          bg='brand.blue'
           color='white'
           _hover={{ bg: 'white', color: 'black' }}
           px={ 12 }

diff --git a/packages/ui/components/faq/Qna.tsx b/packages/ui/components/faq/Qna.tsx
@@ -8,7 +8,7 @@ export interface QnaProps{
 export const Qna = ({ question, answer }: QnaProps) => {
     return (
         <Flex
-            borderColor='blue'
+            borderColor='brand.blue'
             justifyContent='center'
             flexDirection='column'
             marginBottom='30px'

diff --git a/packages/ui/components/footer-content-text/Announcement.tsx b/packages/ui/components/footer-content-text/Announcement.tsx
@@ -16,11 +16,11 @@ export const Announcement = ({ title, description } : AnnouncementProps) => {
                 py='10px'
                 fontWeight='600'
                 fontFamily='Roboto, Sans-serif'
-                color='white'
+                color='brand.white'
             >
                 {title}
             </Heading>
-            <Text color='white' textAlign={{ base: 'justify', md:'left' }}> {description} </Text>
+            <Text color='brand.white' textAlign={{ base: 'justify', md:'left' }}> {description} </Text>
         </Flex>
     )
 }
diff --git a/packages/ui/components/hero/Hero.stories.tsx b/packages/ui/components/hero/Hero.stories.tsx
@@ -15,7 +15,7 @@ const Template: ComponentStory<typeof Hero> = (args) => <Hero {...args} />;
 export const Default = Template.bind({});
 Default.args = {
     backgroundImage: 'url(https://images.unsplash.com/photo-1600267175161-cfaa711b4a81?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)',
-    backgroundGradient: 'linear(to-r, blackAlpha.600, transparent)',
+    backgroundGradient: 'linear(to-r, brand.blackAlpha.darker, transparent)',
     text: 'WELCOME TO SCSE CLUB',
     buttons: [
         { label: 'LEARN MORE', href: '/learn', buttonType: 'primary.blue', size: 'lg' },
@@ -26,5 +26,5 @@ Default.args = {
 export const WithoutContent = Template.bind({});
 WithoutContent.args = {
     backgroundImage: 'url(https://images.unsplash.com/photo-1600267175161-cfaa711b4a81?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)',
-    backgroundGradient: 'linear(to-r, blackAlpha.600, transparent)'
+    backgroundGradient: 'linear(to-r, brand.blackAlpha.darker, transparent)'
 };
diff --git a/packages/ui/components/layout/Layout.tsx b/packages/ui/components/layout/Layout.tsx
@@ -19,7 +19,7 @@ export const Layout = ({ navbarProps, footerProps, children }: LayoutProps) => {
             </header>
 
             <NavBar links={navbarProps.links} logoProps={navbarProps.logoProps} />
-            <main><Box bg="blackAlpha.50">{children}</Box></main>
+            <main><Box bg="brand.blackAlpha.light">{children}</Box></main>
             <Footer links={footerProps.links} vercelpoweredProps={footerProps.vercelpoweredProps}/>
         </>
     )

diff --git a/packages/ui/components/navbar/MenuLink.tsx b/packages/ui/components/navbar/MenuLink.tsx
@@ -22,9 +22,9 @@ const DefaultMenuLink = ({ label, href }: MenuLinkProps) => {
     return (
         <Link
             href={href}
-            color={router?.pathname === href ? "blue.600" : "black"}
-            _hover={{ color: "blue.600" }}
-            _focus={{ color: "blue.600" }}
+            color={router?.pathname === href ? "brand.blue" : "brand.black"}
+            _hover={{ color: "brand.blue" }}
+            _focus={{ color: "brand.blue" }}
         >
             <Text display="block" fontFamily="Poppins">
                 {label}
@@ -39,9 +39,9 @@ const ButtonMenuLinkGolden = ({ label, href }: MenuLinkProps) => {
             href={ href }
             _hover={{
                 bgColor: 'transparent',
-                color: 'orange.400'
+                color: 'brand.orange.mid'
             }}
-            bgColor='orange.300'
+            bgColor='brand.orange.light'
             px={ 4 }
             py={ 2 }
             borderRadius='5px'

diff --git a/packages/ui/components/navbar/MenuToggle.tsx b/packages/ui/components/navbar/MenuToggle.tsx
@@ -12,7 +12,7 @@ export const MenuToggle = ({ toggle, isOpen } : MenuToggleProps) => {
         <Box
             display={{ base: "block", xl: "none" }}
             onClick={toggle}
-            _hover={{ color: "blue.600", cursor: "pointer" }}
+            _hover={{ color: "brand.blue", cursor: "pointer" }}
             marginLeft={{ base: 5, md: 10 }}
         >
             {isOpen ?

diff --git a/packages/ui/components/navbar/NavBarContainer.tsx b/packages/ui/components/navbar/NavBarContainer.tsx
@@ -15,10 +15,10 @@ export const NavBarContainer = ({ children, ...props }: NavBarContainerProps) =>
             p={[3, 3, 5, 5]}
             pl={4}
             pr={8}
-            bg="white"
-            color="black"
+            bg="brand.white"
+            color="brand.black"
             borderBottom="1px"
-            borderColor="gray.200"
+            borderColor="brand.gray.midlight"
             {...props}
         >
             { children }

diff --git a/packages/ui/components/navbar/NavDrawer.tsx b/packages/ui/components/navbar/NavDrawer.tsx
@@ -24,7 +24,7 @@ export const NavDrawer = ({ isOpen, onClose, links }: NavDrawerProps) => {
                 onClose={onClose}
             >
                 <DrawerOverlay />
-                <DrawerContent bgColor="gray.50">
+                <DrawerContent bgColor="brand.gray.light">
                     <DrawerCloseButton />
 
                     <DrawerBody marginTop={100}>

diff --git a/packages/ui/theme/foundations/colors.ts b/packages/ui/theme/foundations/colors.ts
@@ -1,7 +1,26 @@
 const colors = {
-  // brand: {
-  //
-  // }
+  brand: {
+    blue: '#2B6CB0', //blue.600
+    black: '#000000',
+    white: '#FFFFFF',
+    orange: {
+      light: '#ED8936',//300
+      mid: '#ED8936'//400
+    },
+    gray: {
+      light: '#F7FAFC', //gray.50
+      midlight: '#E2E8F0',//gray.200
+      mid: '#A0AEC0', //gray.400
+      midDark: '#718096', //gray.500
+      dark: '#2D3748' //gray.700
+    },
+    blackAlpha: {
+      light: 'RGBA(0, 0, 0, 0.04)',//50
+      mid: 'RGBA(0, 0, 0, 0.16)', //300
+      dark: 'RGBA(0, 0, 0, 0.36)',//500
+      darker: 'RGBA(0, 0, 0, 0.48)'//600
+    }
+  }
 };
 
 export default colors;