[Design Token] Added 5 new text styles for trade-app alignment by Akatori-Design · Pull Request #777 · MetaMask/metamask-design-system

Akatori-Design · 2025-07-14T23:04:22Z

Description

Summary:
Added 10 new system text styles to support more use-case-specific typography across the UI.

New Styles:
• L-PageHeading : alias of L-Heading-Lg
• L-SectionHeading : alias of L-Heading-Sm
• L-ButtonLabel-Lg : alias of L-Body-Lg-Medium
• L-ButtonLabel-Md : alias of L-Body-Md-Medium
• L-AmountDisplay-Lg : alias of L-Display-Lg
• S-PageHeading : alias of S-Heading-Lg
• S-SectionHeading : alias of S-Heading-Sm
• S-ButtonLabel-Lg : alias of S-Body-Lg-Medium
• S-ButtonLabel-Md : alias of S-Body-Md-Medium
• S-AmountDisplay-Lg : alias of S-Display-Lg

These are not true aliases (due to JSON limitations), but intentionally mirror the values of their global counterparts. Unlike global styles (e.g., Display, Heading, Body), these system styles are scoped to common patterns from the trading app, such as page headings, button labels, and amount displays, to make them more purposeful, reusable, and consistent across future features.

Related issues

Fixes:

Manual testing steps

Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2025-07-14T23:05:59Z

📖 Storybook Preview

View PR Storybook

amandaye0h · 2025-07-15T20:02:56Z

Are we planning to support semibold as a weight option? Noticing that the headers use semibold (600), not bold (700):

Added these objects: - L-PageHeading (=L-Heading-Lg) - L-SectionHeading (=L-Heading-Sm) - L-ButtonLabel-Md (=L-Body-Md-Medium) - L-ButtonLabel-Lg (=L-Body-Lg-Medium) - S-PageHeading (=S-Heading-Lg) - S-SectionHeading (=S-Heading-Sm) - S-ButtonLabel-Md (=S-Body-Md-Medium) - S-ButtonLabel-Lg (=S-Body-Lg-Medium) -

georgewrmarshall · 2025-07-16T23:22:04Z

apps/storybook-react/.storybook/main.ts

+    // Add optimizeDeps configuration to handle workspace packages
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      exclude: [
+        '@metamask/design-tokens',
+        '@metamask/design-system-react',
+        '@metamask/design-system-tailwind-preset',
+      ],
+    };


Fixes an issue with storybook. Not exactly sure why it has started now.

github-actions · 2025-07-16T23:22:08Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-07-16T23:22:55Z

packages/design-system-react-native/src/components/Text/README.md

+- `TextVariant.ButtonLabelMd`
+- `TextVariant.ButtonLabelLg`
+- `TextVariant.AmountDisplayLg`



Updating DSRN docs

Storybook

georgewrmarshall · 2025-07-16T23:23:21Z

packages/design-system-react-native/src/components/Text/Text.constants.ts

+  [TextVariant.ButtonLabelLg]: typography.sButtonLabelLg
+    .fontWeight as FontWeight,
+  [TextVariant.AmountDisplayLg]: typography.sAmountDisplayLg
+    .fontWeight as FontWeight,


Updating DSRN Text constants

georgewrmarshall · 2025-07-16T23:23:41Z

packages/design-system-react-native/src/types/index.ts

+  SectionHeading = 'section-heading',
+  ButtonLabelMd = 'button-label-md',
+  ButtonLabelLg = 'button-label-lg',
+  AmountDisplayLg = 'amount-display-lg',


Updating DSRN TextVariants

georgewrmarshall · 2025-07-16T23:24:01Z

packages/design-system-react/src/components/Text/README.mdx

@@ -102,6 +102,46 @@ Use the `variant` prop and the `TextVariant` enum from `@metamask/design-system-
        <code>p</code>
      </td>
    </tr>


Updating DSR Text docs

georgewrmarshall · 2025-07-16T23:24:20Z

packages/design-system-react/src/components/Text/Text.constants.ts

    'text-s-body-sm leading-s-body-sm tracking-s-body-sm md:text-l-body-sm md:leading-l-body-sm md:tracking-l-body-sm',
  [TextVariant.BodyXs]:
    'text-s-body-xs leading-s-body-xs tracking-s-body-xs md:text-l-body-xs md:leading-l-body-xs md:tracking-l-body-xs',
+  [TextVariant.PageHeading]:


Updating DSR constants

georgewrmarshall · 2025-07-16T23:24:35Z

packages/design-system-react/src/components/Text/Text.stories.tsx

      <Text variant={TextVariant.BodyMd}>BodyMd</Text>
      <Text variant={TextVariant.BodySm}>BodySm</Text>
      <Text variant={TextVariant.BodyXs}>BodyXs</Text>
+      <Text variant={TextVariant.PageHeading}>PageHeading</Text>


Updating DSRN Text variant stories

georgewrmarshall · 2025-07-16T23:26:15Z

packages/design-system-react/src/types/index.ts

  BodySm = 'body-sm',
  BodyXs = 'body-xs',
+
+  // Special Typography Variants


Updating DSR TextVariant types

georgewrmarshall · 2025-07-16T23:26:29Z

packages/design-system-tailwind-preset/src/typography.ts

@@ -10,6 +10,11 @@ export const typography = {
    's-body-md': 'var(--typography-s-body-md-font-size)',


Updating tailwind preset with new tokens

georgewrmarshall · 2025-07-16T23:26:41Z

packages/design-system-twrnc-preset/src/typography.ts

@@ -76,6 +76,46 @@ export const typographyTailwindConfig: TypographyTailwindConfigProps = {
        fontWeight: typography.sBodyXS.fontWeight,
      },
    ],


Updating twrnc with new tokens

georgewrmarshall · 2025-07-16T23:29:24Z

packages/design-tokens/src/css/typography.css

@@ -96,6 +96,26 @@
  --typography-s-body-xs-line-height: var(--line-height-2);


Updating CSS file

georgewrmarshall · 2025-07-16T23:29:59Z

packages/design-tokens/src/css/typography.test.ts


 // Helper function to convert token name to CSS variable name
 const tokenNameToCSSVariable = (tokenName: string): string => {
-  return `--typography-${tokenName.toLowerCase().replace(/-/gu, '-')}`;


Fixing typography test to allow kebab case for the new type tokens

georgewrmarshall · 2025-07-16T23:30:12Z

packages/design-tokens/src/figma/tokens.json

@@ -634,6 +634,66 @@
      },
      "type": "typography"
    },


Figma json updates from @Akatori-Design

georgewrmarshall · 2025-07-16T23:33:07Z

packages/design-tokens/src/js/typography/types.ts

@@ -20,6 +20,11 @@ export type ThemeTypography = {
  sBodySMBold: TypeStyle;
  sBodyXS: TypeStyle;
  sBodyXSMedium: TypeStyle;


Updating JS

georgewrmarshall · 2025-07-16T23:33:26Z

packages/design-tokens/stories/Typography.mdx

        <code>var(--typography-s-body-xs-letter-spacing)</code>
      </td>
    </tr>
+    <tr>


Updating docs

georgewrmarshall

LGTM!

Copilot

Pull Request Overview

This PR adds 10 new typography styles to the design token system to support more use-case-specific typography across the UI for trade-app alignment. The new styles are semantic aliases of existing typography tokens, providing more purposeful naming for common UI patterns.

Adds 5 new small screen (S) and 5 new large screen (L) typography styles for specific use cases
Updates design token definitions, CSS variables, Tailwind configurations, and React components
Provides documentation and storybook examples for the new typography variants

Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`packages/design-tokens/src/js/typography/typography.ts`	Adds the core typography definitions for new semantic styles
`packages/design-tokens/src/js/typography/types.ts`	Updates TypeScript types to include new typography variants
`packages/design-tokens/src/figma/tokens.json`	Adds Figma design token definitions for new typography styles
`packages/design-tokens/src/css/typography.css`	Generates CSS custom properties for the new typography tokens
`packages/design-tokens/stories/Typography.stories.tsx`	Updates Storybook stories to showcase new typography variants
`packages/design-tokens/stories/Typography.mdx`	Adds documentation for the new typography styles
`packages/design-system-react/src/types/index.ts`	Adds new TextVariant enum values for React components
`packages/design-system-react/src/components/Text/Text.constants.ts`	Maps new variants to CSS classes and HTML tags
`packages/design-system-tailwind-preset/src/typography.ts`	Adds Tailwind CSS configuration for new typography tokens
`packages/design-system-twrnc-preset/src/typography.ts`	Adds React Native Tailwind configuration for new typography

packages/design-tokens/stories/Typography.stories.tsx

packages/design-tokens/src/js/typography/typography.ts

packages/design-system-react-native/src/components/Text/README.md

github-actions · 2025-07-16T23:56:09Z

📖 Storybook Preview

View PR Storybook

## **Description** This release adds 5 new typography variants to the MetaMask Design System and introduces new utility props for the Box component across both React and React Native platforms. ### **Typography Enhancements** - **PageHeading**: For main page titles with semantic `<h1>` HTML elements - **SectionHeading**: For section titles with semantic `<h2>` HTML elements - **ButtonLabelMd**: For medium-sized button labels with semantic `<span>` elements - **ButtonLabelLg**: For large-sized button labels with semantic `<span>` elements - **AmountDisplayLg**: For large amount/value displays with semantic `<span>` elements All new variants include: - Responsive typography (small and large screen breakpoints) - Proper font weight, letter spacing, and line height tokens - Integration with existing design token system - Full TypeScript support with updated enums ### **Box Component Improvements** - Added new utility props for margin, padding, border, border color, and background color - Enhanced developer experience with more flexible styling options ### **Package Updates** - **@metamask/design-tokens**: 8.0.0 → 8.1.0 (added new typography tokens + color updates) - **@metamask/design-system-tailwind-preset**: 0.5.0 → 0.6.0 (added CSS classes for new variants) - **@metamask/design-system-twrnc-preset**: 0.1.0 → 0.2.0 (added React Native classes + intellisense improvements) - **@metamask/design-system-react**: 0.1.0 → 0.2.0 (new Text variants + Box utility props) - **@metamask/design-system-react-native**: 0.1.0 → 0.2.0 (new Text variants + Box utility props) - **Root monorepo**: 9.0.0 → 10.0.0 (major version bump for significant feature additions) ## **Related issues** Fixes: #777 (Add new typography variants to React Text component) Fixes: #779 (Add new utility props to Box component) Fixes: #781 (Box component utility props fixes) ## **Manual testing steps** ### **Testing Typography Variants** 1. Navigate to Storybook React: `yarn storybook` 2. Go to "Components" → "Text" → "All Stories" 3. Verify all 5 new variants render correctly: - PageHeading (displays as h1) - SectionHeading (displays as h2) - ButtonLabelMd (displays as span) - ButtonLabelLg (displays as span) - AmountDisplayLg (displays as span) 4. Test responsive behavior by resizing browser window 5. Verify font weights, sizes, and spacing match design specifications ### **Testing React Native Components** 1. Navigate to React Native Storybook: `yarn storybook:ios` or `yarn storybook:android` 2. Go to "Components" → "Text" → "All Stories" 3. Verify all 5 new variants render correctly with proper styling 4. Test on both iOS and Android if possible ### **Testing Box Component** 1. Navigate to Storybook and find Box component stories 2. Verify new utility props work correctly: - Margin props (m, mx, my, mt, mr, mb, ml) - Padding props (p, px, py, pt, pr, pb, pl) - Border props and border color props - Background color props 3. Test both React and React Native implementations ### **Testing Build Process** 1. Run `yarn build` to ensure all packages build successfully 2. Run `yarn test` to verify all tests pass 3. Run `yarn lint` to ensure code quality standards are met ## **Screenshots/Recordings** ### **Before** - Text component had 9 typography variants - Box component had limited utility props - Typography system was missing key variants for page structure ### **After** - Text component now has 14 typography variants (9 existing + 5 new) - Box component includes comprehensive utility props for spacing, borders, and colors - Complete typography system supporting semantic HTML structure - Responsive design tokens for all screen sizes - Full TypeScript support with proper type definitions ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Akatori-Design requested a review from a team as a code owner July 14, 2025 23:04

Akatori-Design changed the title ~~[Design Token] Added 5 new text styles (total of 10 new objects)~~ [Design Token] Added 5 new text styles for trade-app alignment Jul 14, 2025

Akatori-Design and others added 3 commits July 16, 2025 16:17

minor bug fix

3eea8cd

feat: adding new typography tokens and updating text components

abe12ad

georgewrmarshall force-pushed the ta-type-token-alignment branch from 7e4eb23 to abe12ad Compare July 16, 2025 23:20

georgewrmarshall reviewed Jul 16, 2025

View reviewed changes

georgewrmarshall approved these changes Jul 16, 2025

View reviewed changes

georgewrmarshall requested a review from Copilot July 16, 2025 23:34

Copilot AI reviewed Jul 16, 2025

View reviewed changes

packages/design-tokens/stories/Typography.stories.tsx Show resolved Hide resolved

packages/design-tokens/src/js/typography/typography.ts Show resolved Hide resolved

packages/design-system-react-native/src/components/Text/README.md Show resolved Hide resolved

brianacnguyen approved these changes Jul 16, 2025

View reviewed changes

brianacnguyen added this pull request to the merge queue Jul 16, 2025

georgewrmarshall removed this pull request from the merge queue due to the queue being cleared Jul 16, 2025

Merge branch 'main' into ta-type-token-alignment

29b188e

georgewrmarshall merged commit aab0bab into main Jul 16, 2025
38 checks passed

georgewrmarshall deleted the ta-type-token-alignment branch July 16, 2025 23:58

georgewrmarshall changed the title ~~[Design Token] Added 5 new text styles for trade-app alignment~~ feat: added 5 new text styles for trade-app alignment Jul 17, 2025

georgewrmarshall changed the title ~~feat: added 5 new text styles for trade-app alignment~~ [Design Token] Added 5 new text styles for trade-app alignment Jul 17, 2025

georgewrmarshall mentioned this pull request Jul 17, 2025

Release/10.0.0 #784

Merged

7 tasks

		@@ -10,6 +10,11 @@ export const typography = {
		's-body-md': 'var(--typography-s-body-md-font-size)',

		@@ -96,6 +96,26 @@
		--typography-s-body-xs-line-height: var(--line-height-2);

Uh oh!

Conversation

Akatori-Design commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jul 14, 2025

📖 Storybook Preview

Uh oh!

amandaye0h commented Jul 15, 2025

Uh oh!

georgewrmarshall Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 16, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jul 16, 2025

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Akatori-Design commented Jul 14, 2025 •

edited

Loading

georgewrmarshall Jul 16, 2025 •

edited

Loading

georgewrmarshall Jul 16, 2025 •

edited

Loading

georgewrmarshall Jul 16, 2025 •

edited

Loading

georgewrmarshall Jul 16, 2025 •

edited

Loading

georgewrmarshall Jul 16, 2025 •

edited

Loading