chore(www): convert badge component to theme-ui (gatsbyjs#24817)

* convert badge component to theme-ui

* cleaned up the badge component

* cleanup

Author: abhishekjakhar

www/src/components/guidelines/badge.js

@@ -1,44 +1,28 @@
-import React from "react"
-import styled from "@emotion/styled"
-import { border, typography, compose } from "styled-system"
-import propTypes from "@styled-system/prop-types"
+/** @jsx jsx */
+import { jsx } from "theme-ui"
 
-import { Flex } from "./system"
-
-const styleProps = compose(border, typography)
-
-const BadgeBase = styled(Flex)(
-  {
-    display: `inline-flex`,
-    position: `relative`,
-    textTransform: `uppercase`,
-  },
-  styleProps
-)
-
-BadgeBase.propTypes = {
-  ...propTypes.border,
-  ...propTypes.typography,
-}
-
-BadgeBase.defaultProps = {
-  alignItems: `center`,
-  bg: `yellow.10`,
-  border: 1,
-  borderColor: `yellow.10`,
-  borderRadius: 5,
-  color: `yellow.90`,
-  fontFamily: `body`,
-  fontSize: 0,
-  fontWeight: `body`,
-  letterSpacing: `tracked`,
-  lineHeight: `solid`,
-  py: 1,
-  px: 2,
-}
-
-const Badge = ({ children, ...rest }) => (
-  <BadgeBase {...rest}>{children}</BadgeBase>
+const Badge = ({ children }) => (
+  <div
+    sx={{
+      display: `inline-flex`,
+      alignItems: `center`,
+      position: `relative`,
+      fontSize: 0,
+      letterSpacing: `tracked`,
+      textTransform: `uppercase`,
+      lineHeight: `solid`,
+      color: `yellow.90`,
+      bg: `yellow.10`,
+      border: 1,
+      borderColor: `yellow.10`,
+      borderRadius: 5,
+      py: 1,
+      px: 2,
+      my: 3,
+    }}
+  >
+    {children}
+  </div>
 )
 
 export default Badge

www/src/pages/guidelines/color.js

@@ -68,7 +68,7 @@ const Color = props => {
           consistent experiences and meaningful expressions across marketing and
           products.
         </Intro>
-        <Badge my={3}>
+        <Badge>
           Work in Progress{` `}
           <MdWarning style={{ fontSize: 16, marginLeft: `0.25rem` }} />
         </Badge>

www/src/pages/guidelines/design-tokens.js

@@ -100,7 +100,7 @@ const DesignTokens = ({ location }) => (
           This page collects all design tokens currently available for
           gatsbyjs.org which are not covered on sibling pages.
         </Intro>
-        <Badge my={3}>
+        <Badge>
           Work in Progress{` `}
           <MdWarning style={{ fontSize: 16, marginLeft: `0.25rem` }} />
         </Badge>

www/src/pages/guidelines/typography.js

@@ -120,7 +120,7 @@ const Typography = ({ location }) => (
           organizations, and purposeful alignments that guide the user through
           content, product, and experience.
         </Intro>
-        <Badge my={3}>
+        <Badge>
           Work in Progress{` `}
           <MdWarning style={{ fontSize: 16, marginLeft: `0.25rem` }} />
         </Badge>