Merge pull request #7179 from ethereum/emotion

Implement emotion & chakra

Author: pettinarip

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;