Merge pull request #11143 from ethereum/staging

Deploy: v7.21.0

Author: corwintines

.all-contributorsrc

@@ -10496,6 +10496,33 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "kritik-sah",
+      "name": "kritik sah",
+      "avatar_url": "https://avatars.githubusercontent.com/u/57076429?v=4",
+      "profile": "https://linktr.ee/kritik",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "Fuliggine",
+      "name": "Fuliggine",
+      "avatar_url": "https://avatars.githubusercontent.com/u/56844974?v=4",
+      "profile": "https://github.com/Fuliggine",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "Omsify",
+      "name": "Omsify",
+      "avatar_url": "https://avatars.githubusercontent.com/u/87442202?v=4",
+      "profile": "https://github.com/Omsify",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.storybook/i18next.ts

@@ -14,6 +14,7 @@ const ns = [
   "common",
   "glossary",
   "page-about",
+  "page-index",
   "page-upgrades",
   "page-developers-index",
 ]

README.md

@@ -1640,6 +1640,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/blazingrome"><img src="https://avatars.githubusercontent.com/u/136898739?v=4?s=100" width="100px;" alt="blazingrome"/><br /><sub><b>blazingrome</b></sub></a><br /><a href="#content-blazingrome" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/etan-status"><img src="https://avatars.githubusercontent.com/u/89844309?v=4?s=100" width="100px;" alt="Etan Kissling"/><br /><sub><b>Etan Kissling</b></sub></a><br /><a href="#content-etan-status" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://linktr.ee/kritik"><img src="https://avatars.githubusercontent.com/u/57076429?v=4?s=100" width="100px;" alt="kritik sah"/><br /><sub><b>kritik sah</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Akritik-sah" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Fuliggine"><img src="https://avatars.githubusercontent.com/u/56844974?v=4?s=100" width="100px;" alt="Fuliggine"/><br /><sub><b>Fuliggine</b></sub></a><br /><a href="#content-Fuliggine" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Omsify"><img src="https://avatars.githubusercontent.com/u/87442202?v=4?s=100" width="100px;" alt="Omsify"/><br /><sub><b>Omsify</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AOmsify" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.20.1",
+  "version": "7.21.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",

src/@chakra-ui/gatsby-plugin/components/Badge.ts

@@ -10,6 +10,7 @@ const baseStyle = defineMergeStyles(defaultBaseStyle, {
   fontWeight: "initial",
   py: 1,
   px: 2,
+  lineHeight: "1.6rem",
   textTransform: "uppercase",
 })
 

src/@chakra-ui/gatsby-plugin/components/Heading.ts

@@ -0,0 +1,39 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+import { headingDefaultTheme } from "./components.utils"
+
+const { sizes: defaultSizes } = headingDefaultTheme
+
+const lineHeightScale = {
+  "4xl": "6xs",
+  "3xl": ["5xs", null, "6xs"],
+  "2xl": ["5xs", null, "4xs"],
+  xl: ["3xs", null, "2xs"],
+  lg: ["3xs", null, "2xs"],
+  md: "xs",
+  sm: "base",
+  xs: "base",
+}
+
+/*
+ * Instead of rewriting the entire sizes object, take the existing value from the
+ * default theme and replace the lineHeight values.
+ */
+const sizes = Object.entries(defaultSizes || {}).reduceRight(
+  (acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: defineStyle({
+        ...value,
+        lineHeight: lineHeightScale[key],
+      }),
+    }
+  },
+  {
+    ...defaultSizes,
+  }
+)
+
+export const Heading = defineStyleConfig({
+  ...headingDefaultTheme,
+  sizes,
+})

src/@chakra-ui/gatsby-plugin/components/Link.ts

@@ -1,5 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react"
+import components from "."
 import { defineMergeStyles, linkDefaultTheme } from "./components.utils"
+import { Text } from "./Text"
 
 export const Link = defineStyleConfig({
   baseStyle: defineMergeStyles(linkDefaultTheme.baseStyle, {
@@ -22,4 +24,5 @@ export const Link = defineStyleConfig({
       },
     },
   }),
+  sizes: Text.sizes,
 })

src/@chakra-ui/gatsby-plugin/components/Text.ts

@@ -0,0 +1,48 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+
+const sizes = {
+  "6xl": defineStyle({
+    fontSize: "6xl",
+    lineHeight: "4xs",
+  }),
+  "5xl": defineStyle({
+    fontSize: "5xl",
+    lineHeight: "4xs",
+  }),
+  "4xl": defineStyle({
+    fontSize: "4xl",
+    lineHeight: "sm",
+  }),
+  "3xl": defineStyle({
+    fontSize: "3xl",
+    lineHeight: "sm",
+  }),
+  "2xl": defineStyle({
+    fontSize: "2xl",
+    lineHeight: "sm",
+  }),
+  xl: defineStyle({
+    fontSize: "xl",
+    lineHeight: "sm",
+  }),
+  lg: defineStyle({
+    fontSize: "lg",
+    lineHeight: "base",
+  }),
+  md: defineStyle({
+    fontSize: "md",
+    lineHeight: "base",
+  }),
+  sm: defineStyle({
+    fontSize: "sm",
+    lineHeight: "base",
+  }),
+  xs: defineStyle({
+    fontSize: "xs",
+    lineHeight: "base",
+  }),
+}
+
+export const Text = defineStyleConfig({
+  sizes,
+})

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

@@ -2,12 +2,14 @@ import { Alert } from "./Alert"
 import { Avatar } from "./Avatar"
 import { Badge } from "./Badge"
 import { Button } from "./Button"
+import { Heading } from "./Heading"
 import { Link } from "./Link"
 import { Tag } from "./Tag"
 import { Modal } from "./Modal"
 import { Checkbox } from "./Checkbox"
 import { Progress } from "./Progress"
 import { Tabs } from "./Tabs"
+import { Text } from "./Text"
 import { Table } from "./Table"
 import { Radio } from "./Radio"
 import { Select } from "./Select"
@@ -41,7 +43,7 @@ export default {
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,
-  Heading: headingDefaultTheme,
+  Heading,
   Input,
   Link,
   Menu: menuDefaultTheme,
@@ -54,4 +56,5 @@ export default {
   Table,
   Tabs,
   Tag,
+  Text,
 }

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

@@ -6,9 +6,10 @@ const typography = {
   },
 
   lineHeights: {
-    "5xs": 1.1,
-    "4xs": 1.15,
-    "3xs": 1.2,
+    "6xs": 1.1,
+    "5xs": 1.15,
+    "4xs": 1.2,
+    "3xs": 1.25,
     "2xs": 1.35,
     xs: 1.4,
     sm: 1.5,