Merge pull request #7179 from ethereum/emotion

Implement emotion & chakra

docs/best-practices.md

@@ -104,14 +104,14 @@ export default ComponentName
 ## Styling
 
 - `src/theme.ts` - Declares site color themes, breakpoints and other constants (try to utilize these colors first)
-- We use [styled-components](https://styled-components.com/)
+- We use [emotion](https://emotion.sh/)
 
   - Tagged template literals are used to style custom components
 
   ```tsx
-  // Example of styling syntax using styled-components
+  // Example of styling syntax using emotion
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const GenericButton = styled.div`
     width: 200px;
@@ -128,14 +128,12 @@ export default ComponentName
   // ie: <PrimaryButton>Text</PrimaryButton>
   ```
 
-  - Recommended VS Code Plugin: `vscode-styled-components` <br>To install: Open VS Code > `Ctrl+P` / `Cmd+P` > Run: <br>`ext install vscode-styled-components`
-
 - Values from `src/theme.ts` are automatically passed as a prop object to styled components
 
   ```tsx
   // Example of theme.ts usage
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const Container = styled.div`
     background: ${(props) => props.theme.colors.background};

gatsby-config.ts

@@ -185,7 +185,19 @@ const config: GatsbyConfig = {
       },
     },
     // CSS in JS
-    `gatsby-plugin-styled-components`,
+    {
+      resolve: `gatsby-plugin-emotion`,
+      options: {
+        labelFormat: "[filename]--[local]",
+      },
+    },
+    {
+      resolve: "@chakra-ui/gatsby-plugin",
+      options: {
+        resetCSS: false,
+        isUsingColorMode: true,
+      },
+    },
     // Source assets
     {
       resolve: `gatsby-source-filesystem`,

package.json

@@ -9,13 +9,16 @@
   "private": false,
   "dependencies": {
     "@apollo/client": "^3.3.13",
+    "@chakra-ui/gatsby-plugin": "^3.0.1",
+    "@chakra-ui/react": "^1.0.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
     "@formatjs/intl-numberformat": "^6.1.4",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",
     "axios": "^0.21.2",
-    "babel-plugin-styled-components": "^1.10.7",
     "browser-lang": "^0.1.0",
     "browserslist": "^4.21.0",
     "clipboard": "^2.0.6",
@@ -24,8 +27,9 @@
     "embla-carousel-react": "^6.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "focus-trap-react": "^8.11.2",
-    "framer-motion": "^4.1.3",
+    "framer-motion": "^6.5.1",
     "gatsby": "^4.15.0",
+    "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-gatsby-cloud": "^4.3.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-manifest": "^4.10.1",
@@ -37,7 +41,6 @@
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-sharp": "^4.10.0",
     "gatsby-plugin-sitemap": "^5.0.0",
-    "gatsby-plugin-styled-components": "^5.0.0",
     "gatsby-remark-autolink-headers": "^5.0.0",
     "gatsby-remark-copy-linked-files": "^5.0.0",
     "gatsby-remark-images": "^6.0.0",
@@ -67,7 +70,6 @@
     "react-intl": "^3.12.1",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
-    "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "unist-util-visit-parents": "^2.1.2"
   },
@@ -81,7 +83,6 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-instantsearch-dom": "^6.12.3",
-    "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
     "babel-preset-gatsby": "^2.14.0",
     "github-slugger": "^1.3.0",

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -0,0 +1,5 @@
+export type Colors = typeof colors
+
+const colors = {}
+
+export default colors

src/@chakra-ui/gatsby-plugin/foundations/index.ts

@@ -0,0 +1,7 @@
+import colors from "./colors"
+
+const foundations = {
+  colors,
+}
+
+export default foundations

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -0,0 +1,22 @@
+const styles = {
+  global: (_props) => ({
+    /**
+     * Current scenario: we have 2 places where global styles are defined.
+     * - Our legacy global styles under `src/components/GlobalStyle.ts`
+     * - Chakra also defines its own global styles. Check them here:
+     *  https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts
+     *
+     * Having those 2 global styles creates some style conflicts. Here we
+     * override some of the default Chakra globals in order to keep the same
+     * styles as we had in the legacy one.
+     *
+     * TODO: remove these overrides as we adopt the new Design System and we
+     * don't need the global styles anymore
+     */
+    body: {
+      lineHeight: "1.6rem",
+    },
+  }),
+}
+
+export default styles

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -0,0 +1,25 @@
+import {
+  extendTheme,
+  type ThemeConfig,
+  type ThemeOverride,
+} from "@chakra-ui/react"
+
+// Global style overrides
+import styles from "./styles"
+
+// Foundational style overrides
+import foundations from "./foundations"
+
+const config: ThemeConfig = {
+  cssVarPrefix: "eth",
+  initialColorMode: "light",
+  useSystemColorMode: true,
+}
+
+const theme: ThemeOverride = {
+  config,
+  styles,
+  ...foundations,
+}
+
+export default extendTheme(theme)

src/components/Accordion.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // TODO add motion animation
 // import { motion } from "framer-motion"
 import { FakeLink } from "./SharedStyledComponents"

src/components/ActionCard.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"

src/components/AdoptionChart.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 
 const Container = styled.div`
   display: flex;

src/components/AssetDownload.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image"
 
 import Translation from "../components/Translation"

src/components/BannerGrid/index.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export const Banner = styled.div`
   width: 100%;

src/components/BannerNotification.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export interface IStyledBanner {
   shouldShow: boolean

src/components/BeaconChainActions.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import { translateMessageId } from "../utils/translations"

src/components/BoxGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 export interface IBoxItem {

src/components/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import Link from "./Link"

src/components/BugBountyCards.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { TranslationKey } from "../utils/translations"
 import ButtonLink from "./ButtonLink"
 

src/components/BugBountyPoints.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useState, useEffect } from "react"
-import { ThemeContext } from "styled-components"
+import { useTheme } from "@emotion/react"
 import { useStaticQuery, graphql } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import Emoji from "./Emoji"
@@ -103,8 +103,8 @@ const BugBountyPoints: React.FC<IProps> = () => {
     currentDAIPriceUSD: 1,
     hasError: false,
   })
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   useEffect(() => {
     axios

src/components/ButtonDropdown.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState, createRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 

src/components/ButtonLink.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { margin, MarginProps } from "styled-system"
 
 import { scrollIntoView } from "../utils/scrollIntoView"

src/components/CallToContribute.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Link from "./Link"
 import ButtonLink from "./ButtonLink"
 import Icon from "./Icon"

src/components/Callout.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 import Translation from "./Translation"
 import { TranslationKey } from "../utils/translations"

src/components/CalloutBanner.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Translation from "./Translation"

src/components/Card.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 const StyledCard = styled.div`

src/components/CardList.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"

src/components/Checkbox.tsx

@@ -1,12 +1,12 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const CheckboxContainer = styled.div`
   display: inline-block;
   vertical-align: middle;
 `
 
-const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+const HiddenCheckbox = styled.input`
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -76,7 +76,7 @@ const Checkbox: React.FC<IProps> = ({
   }
   return (
     <CheckboxContainer className={className} onClick={handleClick}>
-      <HiddenCheckbox checked={checked} readOnly {...rest} />
+      <HiddenCheckbox type="checkbox" checked={checked} readOnly {...rest} />
       <StyledCheckbox
         aria-hidden="true"
         checked={checked}

src/components/CodeModal.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 
 import Icon from "./Icon"

src/components/Codeblock.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from "react"
-import styled, { ThemeContext } from "styled-components"
+import styled from "@emotion/styled"
+import { useTheme } from "@emotion/react"
 import Highlight, {
   defaultProps,
   Language,
@@ -283,8 +284,8 @@ const Codeblock: React.FC<IProps> = ({
   )
   const shouldShowLineNumbers = language !== "bash"
   const totalLines = codeText.split("\n").length
-  const themeContext = useContext(ThemeContext)
-  const theme = themeContext.isDark ? codeTheme.dark : codeTheme.light
+  const theme = useTheme()
+  const selectedTheme = theme.isDark ? codeTheme.dark : codeTheme.light
   return (
     <Container>
       <HightlightContainer
@@ -295,7 +296,7 @@ const Codeblock: React.FC<IProps> = ({
           {...defaultProps}
           code={codeText}
           language={language as Language}
-          theme={theme as PrismTheme}
+          theme={selectedTheme as PrismTheme}
         >
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
             <StyledPre

src/components/Contributors.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { shuffle } from "lodash"
 
 import ActionCard from "./ActionCard"

src/components/DataProductCard.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"

src/components/DismissibleCard.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Icon from "./Icon"