feat: change to vue color shades

Author: carwack

website/src/assets/custom-theme.ts

@@ -3,14 +3,14 @@ import { mode } from '@chakra-ui/vue-theme-tools'
 
 export default extendTheme({
   colors: {
-    green: {
+    vue: {
       50: '#EEF8F4',
       100: '#CDEBDD',
       200: '#ACDEC6',
       300: '#8BD1AF',
       400: '#6AC398',
-      500: '#49B682',
-      600: '#35845E',
+      500: '#42B883',
+      600: '#30855F',
       700: '#2E7452',
       800: '#21533B',
       900: '#143223',

website/src/components/Navbar.vue

@@ -9,6 +9,8 @@
     shadow="sm"
     bg="white"
     z-index="10"
+    border-top="6px solid"
+    border-color="vue.500"
   >
     <CFlex align-items="center" flex="1" />
     <CFlex flex="1" justify-content="center">

website/src/components/home/Hero.vue

@@ -11,7 +11,7 @@
   >
     <chakra.div>
       <chakra.h1
-        maxW="20ch"
+        maxW="16ch"
         :fontSize="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
         fontFamily="heading"
         letterSpacing="tighter"
@@ -20,7 +20,7 @@
         lineHeight="1.2"
       >
         Build accessible Vue apps
-        <chakra.span color="green.600" px="5px">with speed</chakra.span>
+        <chakra.span color="vue.600" px="5px">with speed</chakra.span>
       </chakra.h1>
     </chakra.div>
     <chakra.p
@@ -45,7 +45,7 @@
         target="_blank"
         rel="noopener noreferrer"
         color-scheme="green"
-        bg="green.600"
+        bg="vue.600"
       >
         Get started
       </CButton>
@@ -60,7 +60,7 @@
         variant="outline"
         color-scheme="green"
         size="lg"
-        color="green.600"
+        color="vue.600"
       >
         Github
       </CButton>
@@ -70,7 +70,7 @@
       alt="Chakra UI Vue Logo"
       :w="{ base: '0', sm: '45%' }"
       pos="absolute"
-      bottom="-5%"
+      bottom="-7%"
       right="0"
     />
   </chakra.header>

website/src/components/home/PilersHero.vue

@@ -21,7 +21,7 @@
             justify-content="center"
             align-items="center"
             mr="5"
-            bg="vue.400"
+            bg="vue.200"
             w="50px"
             h="50px"
             rounded="full"
@@ -39,7 +39,7 @@
             justify-content="center"
             align-items="center"
             mr="5"
-            bg="vue.400"
+            bg="vue.200"
             w="50px"
             h="50px"
             rounded="full"
@@ -57,7 +57,7 @@
             justify-content="center"
             align-items="center"
             mr="5"
-            bg="vue.400"
+            bg="vue.200"
             w="50px"
             h="50px"
             rounded="full"

website/src/pages/index.vue

@@ -4,7 +4,7 @@
     :min-h="['auto', 'auto', '100vh']"
     w="100%"
     pt="60px"
-    bg="green.50"
+    bg="vue.50"
   >
     <Hero />
     <PilersHero />