feat: Update Text and Heading Themes for New DS

.storybook/i18next.ts

@@ -9,7 +9,13 @@ export const baseLocales = {
 }
 
 // Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.
-const ns = ["common", "page-about", "page-upgrades", "page-developers-index"]
+const ns = [
+  "common",
+  "page-about",
+  "page-index",
+  "page-upgrades",
+  "page-developers-index",
+]
 const supportedLngs = Object.keys(baseLocales)
 
 /**

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

@@ -94,6 +94,7 @@ const sizes = {
   md: {
     py: "2 !important",
     px: "4 !important",
+    fontSize: "md",
     [ICON_SELECTOR]: {
       fontSize: "2xl",
     },

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, {
@@ -13,4 +15,5 @@ export const Link = defineStyleConfig({
       outline: "auto",
     },
   }),
+  sizes: Text.sizes,
 })

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

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

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

@@ -1,12 +1,14 @@
 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 { Radio } from "./Radio"
 import { Select } from "./Select"
 import { Switch } from "./Switch"
@@ -39,7 +41,7 @@ export default {
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,
-  Heading: headingDefaultTheme,
+  Heading,
   Input,
   Link,
   Menu: menuDefaultTheme,
@@ -52,4 +54,5 @@ export default {
   Table: tableDefaultTheme,
   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,

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

@@ -1,7 +1,5 @@
 import { mode } from "@chakra-ui/theme-tools"
 
-import { lightTheme as oldTheme } from "../../theme"
-
 const styles = {
   global: (props) => ({
     /**
@@ -17,16 +15,18 @@ const styles = {
       // TODO: when we have Chakra v2, this should be done by overriding the
       // native Chakra semantic tokens
       bg: mode("white", "gray.700")(props),
-      lineHeight: "1.6rem",
+      lineHeight: "base",
+      fontSize: ["sm", null, "lg"],
+    },
+    p: {
+      _last: {
+        mb: 0,
+      },
     },
     a: {
       color: "primary.base",
       textDecoration: "underline",
     },
-    // should be replace with https://chakra-ui.com/docs/components/text
-    p: {
-      margin: "0px 0px 1.45rem",
-    },
     // should be replace with https://chakra-ui.com/docs/components/list
     "ul, ol": {
       margin: "0px 0px 1.45rem 1.45rem",
@@ -56,59 +56,9 @@ const styles = {
     "li *:last-child": {
       "margin-bottom": "0",
     },
-    "p *:last-child": {
-      "margin-bottom": "0",
-    },
     "li > p": {
       "margin-bottom": "calc(1.45rem / 2)",
     },
-    // should be replace by the usage of https://chakra-ui.com/docs/components/heading
-    // also, the media queries defined on each of these heading tags are bearly used
-    "h1,h2,h3,h4,h5,h6": {
-      margin: "2rem 0",
-      lineHeight: 1.4,
-      scrollMarginTop: "navHeight",
-      scrollSnapMargin: "navHeight",
-    },
-    h1: {
-      fontSize: "3rem",
-      fontWeight: 700,
-      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
-        fontSize: "2.5rem",
-      },
-    },
-    h2: {
-      fontSize: "2rem",
-      marginTop: "3rem",
-      fontWeight: 600,
-      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
-        fontSize: "1.5rem",
-      },
-    },
-    h3: {
-      fontSize: "1.5rem",
-      marginTop: "2.5rem",
-      fontWeight: 600,
-      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
-        fontSize: "1.25rem",
-      },
-    },
-    h4: {
-      fontSize: "1.25rem",
-      fontWeight: 500,
-      [`@media (max-width: ${oldTheme.breakpoints.m})`]: {
-        fontSize: "1rem",
-      },
-    },
-    h5: {
-      fontSize: "1rem",
-      fontWeight: 450,
-    },
-    h6: {
-      fontSize: "0.9rem",
-      fontWeight: 400,
-      textTransform: "uppercase",
-    },
     // Anchor tag styles
     // Selected specifically for mdx rendered side icon link
     ".header-anchor": {

src/components/BaseStories/Heading.stories.tsx

@@ -0,0 +1,98 @@
+import * as React from "react"
+import {
+  Box,
+  Flex,
+  Heading as HeadingComponent,
+  HeadingProps,
+  Stack,
+  VStack,
+} from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+import Translation from "../Translation"
+
+type HeadingType = typeof HeadingComponent
+
+const meta = {
+  title: "Atoms / Typography / Heading",
+  component: HeadingComponent,
+  parameters: {
+    layout: null,
+  },
+  decorators: [
+    (Story) => (
+      <Flex align="center" minH="100vh">
+        <Story />
+      </Flex>
+    ),
+  ],
+} satisfies Meta<HeadingType>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const headingScale: Array<HeadingProps> = [
+  {
+    as: "h1",
+    size: "4xl",
+  },
+  {
+    as: "h1",
+    size: "3xl",
+  },
+  {
+    as: "h1",
+    size: "2xl",
+  },
+  {
+    // No props as the default is `h2` with size `xl
+  },
+  {
+    as: "h3",
+    size: "lg",
+  },
+  {
+    as: "h4",
+
+    size: "md",
+  },
+  {
+    as: "h5",
+    size: "sm",
+  },
+  {
+    as: "h6",
+    size: "xs",
+  },
+]
+
+export const Heading: Story = {
+  args: {
+    children: <Translation id="page-index-title" />,
+  },
+  render: (args) => (
+    <VStack w="full">
+      <Box>
+        Adjust the viewport to below "md" to see the font size and line height
+        change
+      </Box>
+      <Stack>
+        {headingScale.map((obj, idx) => (
+          <Flex key={idx} gap="6">
+            <HeadingComponent
+              as="span"
+              flex="1"
+              textAlign="right"
+              size={obj.size}
+            >
+              {obj.size || "xl"}
+            </HeadingComponent>
+            <HeadingComponent flex="3" {...obj}>
+              {args.children}
+            </HeadingComponent>
+          </Flex>
+        ))}
+      </Stack>
+    </VStack>
+  ),
+}