Bump Doctocat to v2.0.0 (#1679)

* Bump doctocat to v2

* Update hero

* Bump primer components version

* Update variables page

docs/package.json

@@ -13,10 +13,10 @@
   "dependencies": {
     "@babel/preset-react": "^7.10.4",
     "@koddsson/postcss-sass": "5.0.0",
-    "@primer/components": "^17.1.0",
-    "@primer/gatsby-theme-doctocat": "^1.7.0",
-    "@primer/octicons": "^11.0.0",
-    "@primer/octicons-react": "^11.0.0",
+    "@primer/components": "30.3.0",
+    "@primer/gatsby-theme-doctocat": "2.0.0",
+    "@primer/octicons": "16.0.0",
+    "@primer/octicons-react": "16.0.0",
     "@primer/primitives": "4.2.0",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.3.7",

docs/src/@primer/gatsby-theme-doctocat/components/hero.js

@@ -1,22 +1,24 @@
-import {Box, Heading, Text} from '@primer/components'
+import {Box, Heading, Text, ThemeProvider} from '@primer/components'
 import {Container} from '@primer/gatsby-theme-doctocat'
 import React from 'react'
 import {version} from '../../../../../package.json'
 import {ReactComponent as HeroIllustration} from '../../../hero-illustration.svg'
 
 function Hero() {
   return (
-    <Box bg="black" py={6}>
-      <Container>
-        <Heading color="blue.4" fontSize={7} m={0}>
-          Primer CSS
-        </Heading>
-        <Text as="p" fontFamily="mono" mt={0} mb={2} color="blue.3" fontSize={2}>
-          v{version}
-        </Text>
-        <HeroIllustration />
-      </Container>
-    </Box>
+    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+      <Box bg="canvas.default" py={6}>
+        <Container>
+          <Heading color="accent.fg" fontSize={7} m={0}>
+            Primer CSS
+          </Heading>
+          <Text as="p" fontFamily="mono" mt={0} mb={2} color="fg.default" fontSize={2}>
+            v{version}
+          </Text>
+          <HeroIllustration />
+        </Container>
+      </Box>
+    </ThemeProvider>
   )
 }