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,4 +1,4 @@
-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'
@@ -6,17 +6,19 @@ 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>
   )
 }
 

docs/src/variables.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Flex, Link, Text, Tooltip, Flash} from '@primer/components'
-import Octicon, {AlertIcon} from '@primer/octicons-react'
+import {AlertIcon} from '@primer/octicons-react'
 import themeGet from '@styled-system/theme-get'
 import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table'
 import styled from 'styled-components'
@@ -86,7 +86,7 @@ function Variables({children, ...props}) {
       <>
         <h2>No data available</h2>
         {__DEV__ && (
-          <Flash scheme="red">
+          <Flash variant="danger">
             This probably means that the root project has not been built; run `npm run dist` and restart your
             development server.
           </Flash>
@@ -121,17 +121,17 @@ function VariablesDetails({variablesByFile, ...props}) {
             <tr id={name} key={name}>
               <th scope="row">
                 <Flex justifyContent="space-between">
-                  <Link href={`#${name}`} color="gray.4" mr={2}>
+                  <Link href={`#${name}`} color="fg.muted" mr={2}>
                     #
                   </Link>
-                  <Flex.Item flex="1">
+                  <Flex flex="1">
                     <Link href={`https://github.com/primer/css/tree/main/${source.path}#L${source.line}`}>
                       <Mono nowrap>{name}</Mono>
                     </Link>
-                  </Flex.Item>
-                  <Flex.Item justifySelf="end">
+                  </Flex>
+                  <Flex justifySelf="end">
                     <DeprecationFlag variable={name} ml={2} />
-                  </Flex.Item>
+                  </Flex>
                 </Flex>
               </th>
               <td>
@@ -159,7 +159,7 @@ const SwatchBox = styled(Text)`
   vertical-align: baseline;
   width: ${p => p.size};
   height: ${p => p.size};
-  border: 1px solid ${themeGet('colors.gray.3')};
+  border: 1px solid ${themeGet('colors.border.default')};
   border-radius: ${themeGet('radii.1')}px;
   margin-bottom: -2px;
 `
@@ -183,8 +183,8 @@ function DeprecationFlag({variable, ...rest}) {
 
 function DeprecationIcon() {
   return (
-    <Text color="red.5">
-      <Octicon icon={AlertIcon} />
+    <Text color="danger.fg">
+      <AlertIcon />
     </Text>
   )
 }