feat!: rework latest typography styles into polymorphic Text component

src/avatar/avatar.stories.tsx

@@ -135,9 +135,9 @@ function StorySection({
     return (
         <Stack space="small">
             <Stack space="xsmall">
-                <Text weight="semibold">{title}</Text>
+                <Text variant="body-2">{title}</Text>
                 {description ? (
-                    <Text size="copy" tone="secondary">
+                    <Text variant="callout-2" tone="secondary">
                         {description}
                     </Text>
                 ) : null}
@@ -152,7 +152,7 @@ function AvatarExample({ label, children }: { label: string; children: React.Rea
         <Box width="fitContent">
             <Stack space="xsmall" align="center">
                 {children}
-                <Text size="caption" tone="secondary" align="center">
+                <Text variant="caption-3" tone="secondary" align="center">
                     {label}
                 </Text>
             </Stack>

src/base-field/base-field.tsx

@@ -30,7 +30,7 @@ function fieldToneToTextTone(tone: FieldTone) {
 
 function FieldMessage({ id, children, tone }: FieldMessageProps) {
     return (
-        <Text as="p" tone={fieldToneToTextTone(tone)} size="copy" id={id}>
+        <Text render={<p />} tone={fieldToneToTextTone(tone)} variant="callout-2" id={id}>
             {tone === 'loading' ? (
                 <Box
                     as="span"
@@ -53,7 +53,7 @@ type FieldCharacterCountProps = {
 
 function FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {
     return (
-        <Text tone={fieldToneToTextTone(tone)} size="copy">
+        <Text tone={fieldToneToTextTone(tone)} variant="callout-2">
             {children}
         </Text>
     )
@@ -334,9 +334,8 @@ function BaseField({
                             alignItems="flexEnd"
                         >
                             <Text
-                                size={variant === 'bordered' ? 'caption' : 'body'}
-                                as="label"
-                                htmlFor={id}
+                                variant={variant === 'bordered' ? 'caption-3' : 'body-3'}
+                                render={<label htmlFor={id} />}
                             >
                                 {label ? (
                                     <span className={styles.primaryLabel}>{label}</span>

src/box/box.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 
-import { Heading } from '../heading'
 import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'
@@ -148,7 +147,9 @@ function PaddedBox({ prop, value }: { prop: keyof BoxPaddingProps; value: Space
 export function PaddingStory({ padding }: { padding: Space }) {
     return (
         <Stack space="large">
-            <Heading level="2">The transparent bordered box has padding</Heading>
+            <Text variant="subheader-1" render={<h2 />}>
+                The transparent bordered box has padding
+            </Text>
             <Inline space="large" align="center" alignY="center">
                 <PaddedBox prop="padding" value={padding} />
                 <PaddedBox prop="paddingX" value={padding} />
@@ -214,7 +215,9 @@ function MarginBox({ prop, value }: { prop: keyof BoxMarginProps; value: Space }
 export function MarginStory({ margin }: { margin: Space }) {
     return (
         <Stack space="large">
-            <Heading level="2">The shaded box has margin</Heading>
+            <Text variant="subheader-1" render={<h2 />}>
+                The shaded box has margin
+            </Text>
             <Text>
                 When margin is negative, you will see the outer bordered box appear to be inside the
                 shaded box.
@@ -272,15 +275,17 @@ export function OverlayScrollStory() {
                 background="aside"
             >
                 <Stack space="medium">
-                    <Heading level={3}>Scrollable Content with Overlay Scroll</Heading>
+                    <Text variant="body-1" render={<h3 />}>
+                        Scrollable Content with Overlay Scroll
+                    </Text>
                     <Text>
                         This Box component demonstrates the overlay scroll functionality. The
                         scrollbar is hidden by default and appears on hover.
                     </Text>
                     {Array.from({ length: 20 }, (_, i) => (
                         <Box key={i} padding="medium" background="default" borderRadius="standard">
                             <Text>Content item {i + 1}</Text>
-                            <Text size="caption" color="secondary">
+                            <Text variant="caption-3" tone="secondary">
                                 This is some additional content to make the item taller and ensure
                                 scrolling is needed.
                             </Text>

src/button/button.mdx

@@ -4,7 +4,6 @@ import { Box } from '../box'
 import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'
-import { Heading } from '../heading'
 import { Button } from './button'
 import * as ButtonStories from './button.stories'
 

src/button/button.stories.jsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'
 
 import { withDarkTheme } from '../../.storybook/dark-theme'
 import { Box } from '../box'
-import { Heading } from '../heading'
 import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'
@@ -53,7 +52,9 @@ function FullWidthTemplate({ label, ...otherProps }) {
     }
     return (
         <Stack space="medium">
-            <Heading level="2">Full-width buttons and label alignment</Heading>
+            <Text variant="subheader-1" render={<h2 />}>
+                Full-width buttons and label alignment
+            </Text>
             <Text>
                 When buttons have `width` other than the default `auto` they can also customize how
                 the label is aligned horizontally.
@@ -87,7 +88,9 @@ function PlaygroundTemplate({ label, ...props }) {
     }
     return (
         <Stack space="large">
-            <Heading level="2">Click on the buttons to see the loading state</Heading>
+            <Text variant="subheader-1" render={<h2 />}>
+                Click on the buttons to see the loading state
+            </Text>
             <Inline space="large">
                 <Box>
                     <Stack space="large">

src/button/icon-button.mdx

@@ -4,7 +4,6 @@ import { Box } from '../box'
 import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'
-import { Heading } from '../heading'
 import { IconButton } from '../button'
 import * as IconButtonStories from './icon-button.stories'
 

src/button/icon-button.stories.jsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import { withDarkTheme } from '../../.storybook/dark-theme'
 import { Box } from '../box'
 import { IconButton } from '../button'
-import { Heading } from '../heading'
 import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'
@@ -35,7 +34,9 @@ function LoadingButton(props) {
 function PlaygroundTemplate({ label, ...props }) {
     return (
         <Stack space="large">
-            <Heading level="2">Click on the buttons to see the loading state</Heading>
+            <Text variant="subheader-1" render={<h2 />}>
+                Click on the buttons to see the loading state
+            </Text>
             <Inline space="large">
                 <Box>
                     <Stack space="large">

src/expansion-panel/expansion-panel.stories.tsx

@@ -26,7 +26,7 @@ export const IconToggle = {
                     alignItems="center"
                     justifyContent="spaceBetween"
                 >
-                    <Text size="body" tone="secondary" weight="semibold">
+                    <Text variant="body-2" tone="secondary">
                         Fruit
                     </Text>
                     <ExpansionPanelToggle size="16" aria-label="Toggle fruit list" />