Merge pull request #12853 from TylerAPfledderer/refactor/typography-DS-update

refactor(theme/typography): update typography with DS

Author: pettinarip

.storybook/preview.ts

@@ -9,7 +9,10 @@ import "../src/styles/global.css"
 
 const extendedTheme = extendBaseTheme(theme)
 
-const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints)
+const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints) as [
+  string,
+  string
+][]
 
 const preview: Preview = {
   globals: {
@@ -42,6 +45,9 @@ const preview: Preview = {
       viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
         const [token, key] = currVal
 
+        // `key` value is in em. Need to convert to px for Chromatic Story mode snapshots
+        const emToPx = (Number(key.replace("em", "")) * 16).toString() + "px"
+
         // Replace base value
         if (token === "base")
           return {
@@ -60,7 +66,7 @@ const preview: Preview = {
           [token]: {
             name: token,
             styles: {
-              width: key,
+              width: emToPx,
               height: "600px",
             },
           },

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

@@ -1,38 +1,42 @@
-import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+import { defineStyleConfig } from "@chakra-ui/react"
 
 import { headingDefaultTheme } from "./components.utils"
 
-const { sizes: defaultSizes } = headingDefaultTheme
+const HEADING_SIZES = ["2xl", "xl", "lg", "md", "sm", "xs"] as const
 
-const lineHeightScale = {
-  "4xl": "6xs",
-  "3xl": ["6xs", null, "5xs"],
-  "2xl": ["4xs", null, "5xs"],
-  xl: ["2xs", null, "4xs"],
-  lg: ["2xs", null, "3xs"],
-  md: "xs",
-  sm: "base",
+type SCALE_VALUE = string | [string, null, null, string]
+
+type SIZE_SCALE = { [key in (typeof HEADING_SIZES)[number]]: SCALE_VALUE }
+
+const lineHeightScale: SIZE_SCALE = {
+  "2xl": "4xs",
+  xl: ["2xs", null, null, "4xs"],
+  lg: "2xs",
+  md: ["xs", null, null, "2xs"],
+  sm: ["base", null, null, "xs"],
   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,
+const fontSizeScale: SIZE_SCALE = {
+  "2xl": ["4xl", null, null, "5xl"],
+  xl: ["3xl", null, null, "4xl"],
+  lg: ["2xl", null, null, "3xl"],
+  md: ["xl", null, null, "2xl"],
+  sm: ["md", null, null, "xl"],
+  xs: ["sm", null, null, "md"],
+}
+
+const sizes = HEADING_SIZES.reduce<{
+  [key: string]: { fontSize: SCALE_VALUE; lineHeight: SCALE_VALUE }
+}>((obj, key) => {
+  return {
+    ...obj,
+    [key]: {
+      fontSize: fontSizeScale[key],
+      lineHeight: lineHeightScale[key],
+    },
   }
-)
+}, {})
 
 export const Heading = defineStyleConfig({
   ...headingDefaultTheme,

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

@@ -11,19 +11,19 @@ const sizes = {
   }),
   "4xl": defineStyle({
     fontSize: "4xl",
-    lineHeight: "sm",
+    lineHeight: "4xs",
   }),
   "3xl": defineStyle({
     fontSize: "3xl",
-    lineHeight: "sm",
+    lineHeight: "2xs",
   }),
   "2xl": defineStyle({
     fontSize: "2xl",
-    lineHeight: "sm",
+    lineHeight: "2xs",
   }),
   xl: defineStyle({
     fontSize: "xl",
-    lineHeight: "sm",
+    lineHeight: "xs",
   }),
   lg: defineStyle({
     fontSize: "lg",

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

@@ -10,7 +10,7 @@ const typography = {
     "5xs": 1.15,
     "4xs": 1.2,
     "3xs": 1.25,
-    "2xs": 1.35,
+    "2xs": 1.3,
     xs: 1.4,
     sm: 1.5,
     base: 1.6,

src/@chakra-ui/styles.ts

@@ -12,7 +12,7 @@ const styles = {
     body: {
       bg: "background.base",
       lineHeight: "base",
-      fontSize: "md",
+      fontSize: ["sm", null, null, "md"],
     },
     a: {
       color: "primary.base",

src/components/BaseStories/Heading.stories.tsx

@@ -7,6 +7,7 @@ import {
   Stack,
   VStack,
 } from "@chakra-ui/react"
+import { objectKeys } from "@chakra-ui/utils"
 import { Meta, StoryObj } from "@storybook/react"
 
 import Translation from "../Translation"
@@ -16,6 +17,16 @@ const meta = {
   component: HeadingComponent,
   parameters: {
     layout: null,
+    chromatic: {
+      modes: {
+        md: {
+          viewport: "md",
+        },
+        "2xl": {
+          viewport: "2xl",
+        },
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -31,20 +42,14 @@ 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
+    // Note that `h2` is the default render
+    as: "h2",
+    size: "xl",
   },
   {
     as: "h3",
@@ -65,16 +70,13 @@ const headingScale: Array<HeadingProps> = [
 ]
 
 export const Heading: Story = {
-  args: {
-    children: <Translation id="page-index:page-index-title" />,
-  },
-  render: (args) => (
+  render: () => (
     <VStack w="full">
       <Box>
         Adjust the viewport to below &quot;md&quot; to see the font size and
         line height change
       </Box>
-      <Stack>
+      <Stack width="full" maxW="4xl">
         {headingScale.map((obj, idx) => (
           <Flex key={idx} gap="6">
             <HeadingComponent
@@ -86,7 +88,7 @@ export const Heading: Story = {
               {(obj.size as string) || "xl"}
             </HeadingComponent>
             <HeadingComponent flex="3" {...obj}>
-              {args.children}
+              {`${obj.as} base component`}
             </HeadingComponent>
           </Flex>
         ))}

src/components/BaseStories/Text.stories.tsx

@@ -22,6 +22,18 @@ const meta = {
   parameters: {
     layout: "none",
   },
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    fontWeight: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <Center minH="100vh">
@@ -145,6 +157,18 @@ export const Link: StoryObj<typeof ChakraLink> = {
 }
 
 export const BodyCopy: Story = {
+  parameters: {
+    chromatic: {
+      modes: {
+        md: {
+          viewport: "md",
+        },
+        "2xl": {
+          viewport: "2xl",
+        },
+      },
+    },
+  },
   render: () => (
     <Box maxW="prose" px="4">
       <Text>

src/components/Hero/HubHero/index.tsx

@@ -50,15 +50,15 @@ const HubHero = ({
         wordBreak="break-word"
       >
         {title ? (
-          <Heading
+          <Text
             as="h1"
-            size="sm"
+            size="md"
             color="body.medium"
             fontWeight="normal"
             textTransform="uppercase"
           >
             {title}
-          </Heading>
+          </Text>
         ) : null}
         <Stack
           alignSelf="center"