fix: update docs

Author: codebender828

website/src/components/Navbar.vue

@@ -10,7 +10,7 @@
     bg="white"
     z-index="10"
     border-top="6px solid"
-    border-color="vue.500"
+    border-color="emerald.500"
   >
     <CFlex align-items="center" justify-content="flex-start" flex="1">
       <chakra.a

website/src/components/home/Footer.vue

@@ -11,7 +11,7 @@
       target="_blank"
       rel="noopener noreferrer"
       href="https://github.com/chakra-ui/chakra-ui-vue-next"
-      :_hover="{ color: 'vue.500' }"
+      :_hover="{ color: 'emerald.500' }"
       mx="4"
     >
       <CIcon name="github" mt="8px" />
@@ -21,7 +21,7 @@
       target="_blank"
       rel="noopener noreferrer"
       href="https://twitter.com/chakraui_vue"
-      :_hover="{ color: 'vue.500' }"
+      :_hover="{ color: 'emerald.500' }"
       mx="4"
     >
       <CIcon name="twitter" mt="8px" />
@@ -31,7 +31,7 @@
       target="_blank"
       rel="noopener noreferrer"
       href="https://discord.gg/sq2Kp6x"
-      :_hover="{ color: 'vue.500' }"
+      :_hover="{ color: 'emerald.500' }"
       mx="4"
     >
       <CIcon name="discord" mt="8px" />

website/src/components/home/Hero.vue

@@ -4,7 +4,7 @@
     :template-columns="{ base: '1fr', md: '1fr 1fr' }"
     pos="relative"
     bg="white"
-    :bgGradient="{ base: '', md: 'linear(to-br, white, white, vue.100)' }"
+    :bgGradient="{ base: '', md: 'linear(to-br, white, white, emerald.100)' }"
     :min-h="{
       base: 'calc(100vh - 60px)',
       sm: 'auto',
@@ -26,7 +26,7 @@
             lineHeight="1.2"
           >
             Build accessible Vue apps
-            <chakra.span color="vue.600" px="5px">with speed</chakra.span>
+            <chakra.span color="emerald.600" px="5px">with speed</chakra.span>
           </chakra.h1>
         </chakra.div>
         <chakra.p
@@ -50,7 +50,7 @@
             target="_blank"
             rel="noopener noreferrer"
             color-scheme="green"
-            bg="vue.600"
+            bg="emerald.600"
             :flex="{ base: '1', sm: 'none' }"
           >
             Get started
@@ -66,7 +66,7 @@
             variant="outline"
             color-scheme="green"
             size="lg"
-            color="vue.600"
+            color="emerald.600"
             :flex="{ base: '1', sm: 'none' }"
           >
             Github
@@ -108,7 +108,7 @@
       text-decoration="none"
       font-size="sm"
       opacity="0.7"
-      :_hover="{ color: 'vue.600', opacity: '1' }"
+      :_hover="{ color: 'emerald.600', opacity: '1' }"
       mt="4"
     >
       Looking for the React.js version?

website/src/components/home/PilersHero.vue

@@ -19,7 +19,7 @@
             justify-content="center"
             align-items="center"
             mr="5"
-            bg="vue.200"
+            bg="emerald.200"
             w="50px"
             h="50px"
             rounded="full"
@@ -37,7 +37,7 @@
             justify-content="center"
             align-items="center"
             mr="5"
-            bg="vue.200"
+            bg="emerald.200"
             w="50px"
             h="50px"
             rounded="full"
@@ -55,7 +55,7 @@
             justify-content="center"
             align-items="center"
             mr="5"
-            bg="vue.200"
+            bg="emerald.200"
             w="50px"
             h="50px"
             rounded="full"

website/src/components/home/SandboxExample.vue

@@ -11,7 +11,7 @@
         lineHeight="1.2"
       >
         Less code.
-        <chakra.span color="vue.600" px="5px">More speed.</chakra.span>
+        <chakra.span color="emerald.600" px="5px">More speed.</chakra.span>
       </chakra.h1>
       <chakra.p
         :maxW="{ base: '560px', lg: '650px' }"

website/src/docs-theme/layout/MdxLayoutWrapper.vue

@@ -1,5 +1,10 @@
 <template>
-  <chakra.div :min-h="['auto', 'auto', '100vh']" w="100%" pt="60px" bg="vue.50">
+  <chakra.div
+    :min-h="['auto', 'auto', '100vh']"
+    w="100%"
+    pt="60px"
+    bg="emerald.50"
+  >
     <app-header :frontmatter="frontmatter" />
     <layout-docs style="border: 1px solid green" v-if="isDocs">
       <slot />