Merge 63c9e5a into 75cbb2a

e2e/components/Text.test.ts

@@ -4,58 +4,146 @@ import {themes} from '../test-helpers/themes'
 
 test.describe('Text', () => {
   test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Text.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Playground', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--playground',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Text.Playground.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--playground',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text--default',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Default.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text--default',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('Small', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-small',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Small.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-small',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('Medium', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-medium',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Medium.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-medium',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('Large', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-large',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Large.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-large',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('LightWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--light-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Light.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--light-weight',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('NormalWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--normal-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Normal.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--normal-weight',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('MediumWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--medium-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Medium.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--medium-weight',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('SemiboldWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--semibold-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Semibold.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--semibold-weight',
+      })
+      await expect(page).toHaveNoViolations()
+    })
   })
 })

packages/react/src/Text/Text.docs.json

@@ -14,6 +14,14 @@
     {
       "name": "sx",
       "type": "SystemStyleObject"
+    },
+    {
+      "name": "size",
+      "type": "'large' | 'medium' | 'small'"
+    },
+    {
+      "name": "weight",
+      "type": "'light' | 'normal' | 'medium' | 'semibold'"
     }
   ],
   "subcomponents": []

packages/react/src/Text/Text.features.stories.tsx

@@ -19,7 +19,49 @@ export const Polymorphism = () => (
 )
 
 export const StyledText = () => (
-  <Text as="p" sx={{color: 'fg.onEmphasis', bg: 'neutral.emphasis', p: 2}}>
+  <Text as="p" sx={{color: 'fg.onEmphasis', bg: 'neutral.emphasis', p: 2}} size="small">
+    Stylized text
+  </Text>
+)
+
+export const SizeSmall = () => (
+  <Text as="span" size="small">
+    Stylized text
+  </Text>
+)
+
+export const SizeMedium = () => (
+  <Text as="span" size="medium">
+    Stylized text
+  </Text>
+)
+
+export const SizeLarge = () => (
+  <Text as="span" size="large">
+    Stylized text
+  </Text>
+)
+
+export const LightWeight = () => (
+  <Text as="span" weight="light">
+    Stylized text
+  </Text>
+)
+
+export const NormalWeight = () => (
+  <Text as="span" weight="normal">
+    Stylized text
+  </Text>
+)
+
+export const MediumWeight = () => (
+  <Text as="span" weight="medium">
+    Stylized text
+  </Text>
+)
+
+export const SemiboldWeight = () => (
+  <Text as="span" weight="semibold">
     Stylized text
   </Text>
 )

packages/react/src/Text/Text.stories.tsx

@@ -14,6 +14,8 @@ export const Playground: StoryFn<typeof Text> = args => <Text {...args}>{args.te
 Playground.args = {
   text: 'Playground',
   as: 'span',
+  size: 'medium',
+  weight: 'normal',
 }
 
 Playground.argTypes = {

packages/react/src/Text/Text.tsx

@@ -5,11 +5,52 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 
-const Text = styled.span<SystemTypographyProps & SystemCommonProps & SxProp>`
+type StyledTextProps = {
+  size?: 'large' | 'medium' | 'small'
+  weight?: 'light' | 'normal' | 'medium' | 'semibold'
+} & SystemTypographyProps &
+  SystemCommonProps &
+  SxProp
+
+const Text = styled.span.attrs<StyledTextProps>(({size, weight}) => ({
+  'data-size': size,
+  'data-weight': weight,
+}))<StyledTextProps>`
   ${TYPOGRAPHY};
   ${COMMON};
+
+  &:where([data-size='small']) {
+    font-size: var(--text-body-size-small, 0.75rem);
+    line-height: var(--text-body-lineHeight-small, 1.6666);
+  }
+
+  &:where([data-size='medium']) {
+    font-size: var(--text-body-size-medium, 0.875rem);
+    line-height: var(--text-body-lineHeight-medium, 1.4285);
+  }
+
+  &:where([data-size='large']) {
+    font-size: var(--text-body-size-large, 1rem);
+    line-height: var(--text-body-lineHeight-large, 1.5);
+  }
+
+  &:where([data-weight='light']) {
+    font-weight: var(--base-text-weight-light, 300);
+  }
+
+  &:where([data-weight='normal']) {
+    font-weight: var(--base-text-weight-normal, 400);
+  }
+
+  &:where([data-weight='medium']) {
+    font-weight: var(--base-text-weight-medium, 500);
+  }
+
+  &:where([data-weight='semibold']) {
+    font-weight: var(--base-text-weight-semibold, 600);
+  }
+
   ${sx};
 `
-
 export type TextProps = ComponentProps<typeof Text>
 export default Text

packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -831,6 +831,37 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
+.c9:where([data-size='small']) {
+  font-size: var(--text-body-size-small,0.75rem);
+  line-height: var(--text-body-lineHeight-small,1.6666);
+}
+
+.c9:where([data-size='medium']) {
+  font-size: var(--text-body-size-medium,0.875rem);
+  line-height: var(--text-body-lineHeight-medium,1.4285);
+}
+
+.c9:where([data-size='large']) {
+  font-size: var(--text-body-size-large,1rem);
+  line-height: var(--text-body-lineHeight-large,1.5);
+}
+
+.c9:where([data-weight='light']) {
+  font-weight: var(--base-text-weight-light,300);
+}
+
+.c9:where([data-weight='normal']) {
+  font-weight: var(--base-text-weight-normal,400);
+}
+
+.c9:where([data-weight='medium']) {
+  font-weight: var(--base-text-weight-medium,500);
+}
+
+.c9:where([data-weight='semibold']) {
+  font-weight: var(--base-text-weight-semibold,600);
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;