Repository: MetaMask/metamask-design-system
Pull request #699: chore: removing deprecated typography tokens
Author: login: georgewrmarshall
Created: 2025-05-25T04:40:30Z | Merged: 2025-05-28T05:06:00Z

### **!BREAKING CHANGE!**

## **Description**

This PR removes deprecated typography design tokens that were scheduled for deletion in v2.0. The deprecated `sHeadingSMRegular` and `lHeadingSMRegular` tokens have been completely removed from the codebase.

**Key changes:**
1. **Removed deprecated typography tokens** - Eliminated `sHeadingSMRegular` and `lHeadingSMRegular` tokens from all formats (JS, CSS, Figma)
2. **Fixed letter-spacing inconsistencies** - Corrected XS body typography tokens to use `--letter-spacing-1` instead of `--letter-spacing-0`
3. **Added comprehensive CSS typography tests** - Created new test suite to prevent future token inconsistencies
4. **Updated documentation and stories** - Removed all references to deprecated tokens
5. **Fixed ESLint issues** - Added unicode flags to regular expressions

This is a **breaking change** for consumers using the deprecated tokens. Migration path: replace `sHeadingSMRegular` with `sHeadingSM` and `lHeadingSMRegular` with `lHeadingSM`.

## **Related issues**

Fixes: #698

## **Manual testing steps**

1. Run `yarn workspace @metamask/design-tokens test` to verify all tests pass
2. Run `yarn eslint --quiet` to ensure no linting errors
3. Check Storybook typography examples to confirm deprecated tokens are removed
4. Verify CSS variables are correctly generated without deprecated tokens
5. Confirm letter-spacing values for XS body tokens are now `2.5%` instead of `0`

## **Screenshots/Recordings**

### **Before**

- Deprecated tokens were present in CSS with deprecation comments
- XS body tokens had incorrect letter-spacing values (`0` instead of `2.5%`)
- Tests included deprecated token validation
- ESLint showed unicode regexp warnings

### **After**

- All deprecated tokens completely removed from codebase
- XS body tokens now use correct letter-spacing values (`2.5%`)
- Comprehensive CSS typography tests added for better coverage
- All ESLint issues resolved
- Documentation updated to remove deprecated token references

## **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.


Diff:
diff --git a/packages/design-system-tailwind-preset/src/typography.test.ts b/packages/design-system-tailwind-preset/src/typography.test.ts
index 89a6e278b..b2b56f816 100644
--- a/packages/design-system-tailwind-preset/src/typography.test.ts
+++ b/packages/design-system-tailwind-preset/src/typography.test.ts
@@ -11,14 +11,6 @@ describe('Typography', () => {
 
   // Ignored CSS variables
   const ignoreList: string[] = [
-    '--typography-s-heading-sm-regular-font-size',
-    '--typography-s-heading-sm-regular-line-height',
-    '--typography-s-heading-sm-regular-font-weight',
-    '--typography-s-heading-sm-regular-letter-spacing',
-    '--typography-l-heading-sm-regular-font-size',
-    '--typography-l-heading-sm-regular-line-height',
-    '--typography-l-heading-sm-regular-font-weight',
-    '--typography-l-heading-sm-regular-letter-spacing',
     '--typography-s-body-lg-regular-font-size',
     '--typography-s-body-lg-regular-line-height',
     '--typography-s-body-lg-regular-font-weight',
diff --git a/packages/design-tokens/src/css/typography.css b/packages/design-tokens/src/css/typography.css
index 8fedd5207..6b614b722 100644
--- a/packages/design-tokens/src/css/typography.css
+++ b/packages/design-tokens/src/css/typography.css
@@ -57,15 +57,6 @@
   --typography-s-heading-sm-line-height: var(--line-height-4);
   --typography-s-heading-sm-font-weight: var(--font-weight-bold);
   --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);
-
-  /**
-   * @deprecated [#1] since version 1.9 [#2].
-   * [#3] Will be deleted in version 2.0.
-   */
-  --typography-s-heading-sm-regular-font-size: var(--font-size-4);
-  --typography-s-heading-sm-regular-line-height: var(--line-height-4);
-  --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);
-  --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
   --typography-s-body-lg-medium-font-size: var(--font-size-5);
   --typography-s-body-lg-medium-line-height: var(--line-height-4);
   --typography-s-body-lg-medium-font-weight: var(--font-weight-medium);
@@ -128,15 +119,6 @@
   --typography-l-heading-sm-line-height: var(--line-height-4);
   --typography-l-heading-sm-font-weight: var(--font-weight-bold);
   --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);
-
-  /**
-   * @deprecated [#1] since version 1.9 [#2].
-   * [#3] Will be deleted in version 2.0.
-   */
-  --typography-l-heading-sm-regular-font-size: var(--font-size-5);
-  --typography-l-heading-sm-regular-line-height: var(--line-height-4);
-  --typography-l-heading-sm-regular-font-weight: var(--font-weight-regular);
-  --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
   --typography-l-body-lg-medium-font-size: var(--font-size-5);
   --typography-l-body-lg-medium-line-height: var(--line-height-4);
   --typography-l-body-lg-medium-font-weight: var(--font-weight-medium);
diff --git a/packages/design-tokens/src/figma/tokens.json b/packages/design-tokens/src/figma/tokens.json
index 7f135e305..126486077 100644
--- a/packages/design-tokens/src/figma/tokens.json
+++ b/packages/design-tokens/src/figma/tokens.json
@@ -514,18 +514,6 @@
       },
       "type": "typography"
     },
-    "L-Heading-SM-Regular": {
-      "value": {
-        "fontWeight": "$fontWeights.regular",
-        "lineHeight": "$lineHeights.4",
-        "fontSize": "$fontSize.5",
-        "letterSpacing": "$letterSpacing.0",
-        "paragraphSpacing": "$paragraphSpacing.0",
-        "textCase": "$textCase.none",
-        "textDecoration": "$textDecoration.none"
-      },
-      "type": "typography"
-    },
     "L-Heading-SM": {
       "value": {
         "fontWeight": "$fontWeights.bold",
@@ -706,18 +694,6 @@
       },
       "type": "typography"
     },
-    "S-Heading-SM-Regular": {
-      "value": {
-        "fontWeight": "$fontWeights.regular",
-        "lineHeight": "$lineHeights.4",
-        "fontSize": "$fontSize.4",
-        "letterSpacing": "$letterSpacing.0",
-        "paragraphSpacing": "$paragraphSpacing.0",
-        "textCase": "$textCase.none",
-        "textDecoration": "$textDecoration.none"
-      },
-      "type": "typography"
-    },
     "S-Heading-SM": {
       "value": {
         "fontWeight": "$fontWeights.bold",
diff --git a/packages/design-tokens/src/js/typography/types.ts b/packages/design-tokens/src/js/typography/types.ts
index aab2a3fdc..c0df50935 100644
--- a/packages/design-tokens/src/js/typography/types.ts
+++ b/packages/design-tokens/src/js/typography/types.ts
@@ -10,7 +10,6 @@ export type ThemeTypography = {
   sDisplayMD: TypeStyle;
   sHeadingLG: TypeStyle;
   sHeadingMD: TypeStyle;
-  sHeadingSMRegular: TypeStyle;
   sHeadingSM: TypeStyle;
   sBodyLGMedium: TypeStyle;
   sBodyMD: TypeStyle;
@@ -25,7 +24,6 @@ export type ThemeTypography = {
   lDisplayMD: TypeStyle;
   lHeadingLG: TypeStyle;
   lHeadingMD: TypeStyle;
-  lHeadingSMRegular: TypeStyle;
   lHeadingSM: TypeStyle;
   lBodyLGMedium: TypeStyle;
   lBodyMD: TypeStyle;
diff --git a/packages/design-tokens/src/js/typography/typography.test.ts b/packages/design-tokens/src/js/typography/typography.test.ts
index c7b5156c1..29f18cfa0 100644
--- a/packages/design-tokens/src/js/typography/typography.test.ts
+++ b/packages/design-tokens/src/js/typography/typography.test.ts
@@ -147,37 +147,6 @@ describe('Typography', () => {
       );
     });
 
-    it('js tokens for sHeadingSMRegular matches figma tokens sHeadingSMRegular', () => {
-      expect(typography.sHeadingSMRegular.fontWeight).toBe('400');
-
-      expect(typography.sHeadingSMRegular.fontSize).toStrictEqual(
-        Number(
-          createNewFigmaTokenObject(
-            designTokens.global['S-Heading-SM-Regular'].value.fontSize,
-            designTokens.global,
-          ).value,
-        ),
-      );
-
-      expect(typography.sHeadingSMRegular.lineHeight).toStrictEqual(
-        Number(
-          createNewFigmaTokenObject(
-            designTokens.global['S-Heading-SM-Regular'].value.lineHeight,
-            designTokens.global,
-          ).value,
-        ),
-      );
-
-      expect(typography.sHeadingSMRegular.letterSpacing).toStrictEqual(
-        Number(
-          createNewFigmaTokenObject(
-            designTokens.global['S-Heading-SM-Regular'].value.letterSpacing,
-            designTokens.global,
-          ).value,
-        ),
-      );
-    });
-
     it('js tokens for sHeadingSM matches figma tokens sHeadingSM', () => {
       expect(typography.sHeadingSM.fontWeight).toBe('700');
 
@@ -233,7 +202,7 @@ describe('Typography', () => {
       expect(typography.sBodyLGMedium.letterSpacing).toStrictEqual(
         Number(
           createNewFigmaTokenObject(
-            designTokens.global['S-Heading-SM-Regular'].value.letterSpacing,
+            designTokens.global['S-Body-LG-Medium'].value.letterSpacing,
             designTokens.global,
           ).value,
         ),
@@ -583,37 +552,6 @@ describe('Typography', () => {
       );
     });
 
-    it('js tokens for lHeadingSMRegular matches figma tokens lHeadingSMRegular', () => {
-      expect(typography.lHeadingSMRegular.fontWeight).toBe('400');
-
-      expect(typography.lHeadingSMRegular.fontSize).toStrictEqual(
-        Number(
-          createNewFigmaTokenObject(
-            designTokens.global['L-Heading-SM-Regular'].value.fontSize,
-            designTokens.global,
-          ).value,
-        ),
-      );
-
-      expect(typography.lHeadingSMRegular.lineHeight).toStrictEqual(
-        Number(
-          createNewFigmaTokenObject(
-            designTokens.global['L-Heading-SM-Regular'].value.lineHeight,
-            designTokens.global,
-          ).value,
-        ),
-      );
-
-      expect(typography.lHeadingSMRegular.letterSpacing).toStrictEqual(
-        Number(
-          createNewFigmaTokenObject(
-            designTokens.global['L-Heading-SM-Regular'].value.letterSpacing,
-            designTokens.global,
-          ).value,
-        ),
-      );
-    });
-
     it('js tokens for lHeadingSM matches figma tokens lHeadingSM', () => {
       expect(typography.lHeadingSM.fontWeight).toBe('700');
 
diff --git a/packages/design-tokens/src/js/typography/typography.ts b/packages/design-tokens/src/js/typography/typography.ts
index 0bc900e8f..a0355c4fa 100644
--- a/packages/design-tokens/src/js/typography/typography.ts
+++ b/packages/design-tokens/src/js/typography/typography.ts
@@ -35,16 +35,6 @@ export const typography: ThemeTypography = {
     lineHeight: lineHeights.lineHeight4,
     letterSpacing: letterSpacing.letterSpacing0,
   },
-  /**
-   * @deprecated [#1] since version 1.9 [#2].
-   * [#3] Will be deleted in version 2.0.
-   */
-  sHeadingSMRegular: {
-    fontWeight: fontWeights.regular,
-    fontSize: fontSizes.fontSize4,
-    lineHeight: lineHeights.lineHeight4,
-    letterSpacing: letterSpacing.letterSpacing0,
-  },
   sBodyLGMedium: {
     fontWeight: fontWeights.medium,
     fontSize: fontSizes.fontSize5,
@@ -129,16 +119,6 @@ export const typography: ThemeTypography = {
     lineHeight: lineHeights.lineHeight4,
     letterSpacing: letterSpacing.letterSpacing0,
   },
-  /**
-   * @deprecated [#1] since version 1.9 [#2].
-   * [#3] Will be deleted in version 2.0.
-   */
-  lHeadingSMRegular: {
-    fontWeight: fontWeights.regular,
-    fontSize: fontSizes.fontSize5,
-    lineHeight: lineHeights.lineHeight4,
-    letterSpacing: letterSpacing.letterSpacing0,
-  },
   lBodyLGMedium: {
     fontWeight: fontWeights.medium,
     fontSize: fontSizes.fontSize5,
diff --git a/packages/design-tokens/stories/Typography.mdx b/packages/design-tokens/stories/Typography.mdx
index 89837dbfa..014063df9 100644
--- a/packages/design-tokens/stories/Typography.mdx
+++ b/packages/design-tokens/stories/Typography.mdx
@@ -196,29 +196,6 @@ For screens sizes `767px >` or smaller, use the small screen typography scale
         <code>var(--typography-s-heading-sm-letter-spacing)</code>
       </td>
     </tr>
-    <tr>
-      <td>
-        <strong>S HeadingSM Regular</strong> (DEPRECATED)
-      </td>
-      <td>
-        <code>typography.sHeadingSMRegular.fontWeight</code>
-        <br />
-        <code>typography.sHeadingSMRegular.fontSize</code>
-        <br />
-        <code>typography.sHeadingSMRegular.lineHeight</code>
-        <br />
-        <code>typography.sHeadingSMRegular.letterSpacing</code>
-      </td>
-      <td>
-        <code>var(--typography-s-heading-sm-regular-font-weight)</code>
-        <br />
-        <code>var(--typography-s-heading-sm-regular-font-size)</code>
-        <br />
-        <code>var(--typography-s-heading-sm-regular-line-height)</code>
-        <br />
-        <code>var(--typography-s-heading-sm-regular-letter-spacing)</code>
-      </td>
-    </tr>
     <tr>
       <td>
         <strong>S BodyLGMedium</strong>
@@ -561,29 +538,6 @@ For screens sizes `768px <` or larger, use the large screen typography scale
         <code>var(--typography-l-heading-sm-letter-spacing)</code>
       </td>
     </tr>
-    <tr>
-      <td>
-        <strong>L HeadingSM Regular</strong> (DEPRECATED)
-      </td>
-      <td>
-        <code>typography.lHeadingSMRegular.fontWeight</code>
-        <br />
-        <code>typography.lHeadingSMRegular.fontSize</code>
-        <br />
-        <code>typography.lHeadingSMRegular.lineHeight</code>
-        <br />
-        <code>typography.lHeadingSMRegular.letterSpacing</code>
-      </td>
-      <td>
-        <code>var(--typography-l-heading-sm-regular-font-weight)</code>
-        <br />
-        <code>var(--typography-l-heading-sm-regular-font-size)</code>
-        <br />
-        <code>var(--typography-l-heading-sm-regular-line-height)</code>
-        <br />
-        <code>var(--typography-l-heading-sm-regular-letter-spacing)</code>
-      </td>
-    </tr>
     <tr>
       <td>
         <strong>L BodyLGMedium</strong>
diff --git a/packages/design-tokens/stories/Typography.stories.tsx b/packages/design-tokens/stories/Typography.stories.tsx
index c32a3f15d..5f8c50f30 100644
--- a/packages/design-tokens/stories/Typography.stories.tsx
+++ b/packages/design-tokens/stories/Typography.stories.tsx
@@ -93,12 +93,6 @@ export const SmallScreen: StoryFn<typeof Text> = (...args) => {
       lineHeight: `${typography.sHeadingSM.lineHeight}px`,
       fontWeight: typography.sHeadingSM.fontWeight,
     },
-    headingSMRegular: {
-      fontFamily: fontFamilies.default,
-      fontSize: typography.sHeadingSMRegular.fontSize,
-      lineHeight: `${typography.sHeadingSMRegular.lineHeight}px`,
-      fontWeight: typography.sHeadingSMRegular.fontWeight,
-    },
     bodyLGMedium: {
       fontFamily: fontFamilies.default,
       fontSize: typography.sBodyLGMedium.fontSize,
@@ -183,14 +177,6 @@ export const SmallScreen: StoryFn<typeof Text> = (...args) => {
           styles.headingSM.lineHeight
         } ${styles.headingSM.fontSize / smallScreenFontSizeBase}rem`}
       </Text>
-      <Text style={styles.headingSMRegular} {...args}>
-        {`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
-          styles.headingSMRegular.lineHeight
-        } ${
-          styles.headingSMRegular.fontSize / smallScreenFontSizeBase
-        }rem`}{' '}
-        <span className="text-error-default">DEPRECATED</span>
-      </Text>
       <Text style={styles.bodyLGMedium} {...args}>
         {`S BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${
           styles.bodyLGMedium.lineHeight
@@ -273,12 +259,6 @@ export const LargeScreen: StoryFn<typeof Text> = (...args) => {
       lineHeight: `${typography.lHeadingSM.lineHeight}px`,
       fontWeight: typography.lHeadingSM.fontWeight,
     },
-    headingSMRegular: {
-      fontFamily: fontFamilies.default,
-      fontSize: typography.lHeadingSMRegular.fontSize,
-      lineHeight: `${typography.lHeadingSMRegular.lineHeight}px`,
-      fontWeight: typography.lHeadingSMRegular.fontWeight,
-    },
     bodyLGMedium: {
       fontFamily: fontFamilies.default,
       fontSize: typography.lBodyLGMedium.fontSize,
@@ -363,14 +343,6 @@ export const LargeScreen: StoryFn<typeof Text> = (...args) => {
           styles.headingSM.lineHeight
         } ${styles.headingSM.fontSize / largeScreenFontSizeBase}rem`}
       </Text>
-      <Text style={styles.headingSMRegular} {...args}>
-        {`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
-          styles.headingSMRegular.lineHeight
-        } ${
-          styles.headingSMRegular.fontSize / largeScreenFontSizeBase
-        }rem`}{' '}
-        <span className="text-error-default">DEPRECATED</span>
-      </Text>
       <Text style={styles.bodyLGMedium} {...args}>
         {`L BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${
           styles.bodyLGMedium.lineHeight
@@ -489,12 +461,6 @@ export const SmallScreenCSS: StoryFn<typeof Text> = (...args) => {
       lineHeight: 'var(--typography-s-heading-sm-line-height)',
       fontWeight: 'var(--typography-s-heading-sm-font-weight)',
     },
-    'HeadingSM Regular': {
-      fontFamily: 'var(--font-family-default)',
-      fontSize: 'var(--typography-s-heading-sm-regular-font-size)',
-      lineHeight: 'var(--typography-s-heading-sm-regular-line-height)',
-      fontWeight: 'var(--typography-s-heading-sm-regular-font-weight)',
-    },
     'BodyLG Medium': {
       fontFamily: 'var(--font-family-default)',
       fontSize: 'var(--typography-s-body-lg-medium-font-size)',
@@ -621,12 +587,6 @@ export const LargeScreenCSS: StoryFn<typeof Text> = (...args) => {
       lineHeight: 'var(--typography-l-heading-sm-line-height)',
       fontWeight: 'var(--typography-l-heading-sm-font-weight)',
     },
-    'HeadingSM Regular': {
-      fontFamily: 'var(--font-family-default)',
-      fontSize: 'var(--typography-l-heading-sm-regular-font-size)',
-      lineHeight: 'var(--typography-l-heading-sm-regular-line-height)',
-      fontWeight: 'var(--typography-l-heading-sm-regular-font-weight)',
-    },
     'BodyLG Medium': {
       fontFamily: 'var(--font-family-default)',
       fontSize: 'var(--typography-l-body-lg-medium-font-size)',


Reviews:
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:48:08Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:50:00Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:50:30Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:51:17Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:51:37Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:52:26Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:52:45Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:52:56Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T04:53:23Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:04:20Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:05:09Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:05:52Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:06:19Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:12:35Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:12:53Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:13:28Z
user: login: georgewrmarshall
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-25T05:13:54Z
user: login: brianacnguyen
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-27T20:48:57Z

Review comments:
diff_hunk: @@ -11,14 +11,6 @@ describe('Typography', () => {
 
   // Ignored CSS variables
   const ignoreList: string[] = [
-    '--typography-s-heading-sm-regular-font-size',
-    '--typography-s-heading-sm-regular-line-height',
-    '--typography-s-heading-sm-regular-font-weight',
-    '--typography-s-heading-sm-regular-letter-spacing',
-    '--typography-l-heading-sm-regular-font-size',
-    '--typography-l-heading-sm-regular-line-height',
-    '--typography-l-heading-sm-regular-font-weight',
-    '--typography-l-heading-sm-regular-letter-spacing',
path: packages/design-system-tailwind-preset/src/typography.test.ts
user: login: georgewrmarshall
body: Removing deprecated tokens from the Tailwind preset CSS variable ignore list. These class names weren't generated by the preset, so there's no need to update the component libraries. Confirmed that `s-heading-sm-regular` is not used in the codebase—only found in the changelog and migration documentation.

<img width="491" alt="Screenshot 2025-05-25 at 2 17 54 PM" src="https://github.com/user-attachments/assets/57ad734a-11c3-473f-8dc0-8a17ce65ed98" />

created_at: 2025-05-25T04:48:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -57,15 +57,6 @@
   --typography-s-heading-sm-line-height: var(--line-height-4);
   --typography-s-heading-sm-font-weight: var(--font-weight-bold);
   --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);
-
-  /**
-   * @deprecated [#1] since version 1.9 [#2].
-   * [#3] Will be deleted in version 2.0.
-   */
-  --typography-s-heading-sm-regular-font-size: var(--font-size-4);
-  --typography-s-heading-sm-regular-line-height: var(--line-height-4);
-  --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);
-  --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
path: packages/design-tokens/src/css/typography.css
user: login: georgewrmarshall
body: Removing depreacted CSS variables from CSS stylesheet. Ensured they are not used in the codebase

<img width="510" alt="Screenshot 2025-05-25 at 2 19 28 PM" src="https://github.com/user-attachments/assets/b2802e25-848a-44d8-a6bd-af6da2ffac5b" />

created_at: 2025-05-25T04:50:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -101,11 +92,11 @@
   --typography-s-body-xs-medium-font-size: var(--font-size-2);
   --typography-s-body-xs-medium-line-height: var(--line-height-2);
   --typography-s-body-xs-medium-font-weight: var(--font-weight-medium);
-  --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-0);
+  --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-1);
   --typography-s-body-xs-font-size: var(--font-size-2);
   --typography-s-body-xs-line-height: var(--line-height-2);
   --typography-s-body-xs-font-weight: var(--font-weight-regular);
-  --typography-s-body-xs-letter-spacing: var(--letter-spacing-0);
+  --typography-s-body-xs-letter-spacing: var(--letter-spacing-1);
path: packages/design-tokens/src/css/typography.css
user: login: georgewrmarshall
body: Revert these changes as they should be in https://github.com/MetaMask/metamask-design-system/pull/697
created_at: 2025-05-25T04:50:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -128,15 +119,6 @@
   --typography-l-heading-sm-line-height: var(--line-height-4);
   --typography-l-heading-sm-font-weight: var(--font-weight-bold);
   --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);
-
-  /**
-   * @deprecated [#1] since version 1.9 [#2].
-   * [#3] Will be deleted in version 2.0.
-   */
-  --typography-l-heading-sm-regular-font-size: var(--font-size-5);
-  --typography-l-heading-sm-regular-line-height: var(--line-height-4);
-  --typography-l-heading-sm-regular-font-weight: var(--font-weight-regular);
-  --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
path: packages/design-tokens/src/css/typography.css
user: login: georgewrmarshall
body: Removing depreacted CSS variables from CSS stylesheet. Ensured they are not used in the codebase

<img width="504" alt="Screenshot 2025-05-25 at 2 20 39 PM" src="https://github.com/user-attachments/assets/ba573812-3966-4069-986d-4f4e658c8013" />

created_at: 2025-05-25T04:51:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -168,9 +150,9 @@
   --typography-l-body-xs-medium-font-size: var(--font-size-2);
   --typography-l-body-xs-medium-line-height: var(--line-height-2);
   --typography-l-body-xs-medium-font-weight: var(--font-weight-medium);
-  --typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-0);
+  --typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-1);
   --typography-l-body-xs-font-size: var(--font-size-2);
   --typography-l-body-xs-line-height: var(--line-height-2);
   --typography-l-body-xs-font-weight: var(--font-weight-regular);
-  --typography-l-body-xs-letter-spacing: var(--letter-spacing-0);
+  --typography-l-body-xs-letter-spacing: var(--letter-spacing-1);
path: packages/design-tokens/src/css/typography.css
user: login: georgewrmarshall
body: Revert these changes as they should be in https://github.com/MetaMask/metamask-design-system/pull/697
created_at: 2025-05-25T04:51:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -514,18 +514,6 @@
       },
       "type": "typography"
     },
-    "L-Heading-SM-Regular": {
-      "value": {
-        "fontWeight": "$fontWeights.regular",
-        "lineHeight": "$lineHeights.4",
-        "fontSize": "$fontSize.5",
-        "letterSpacing": "$letterSpacing.0",
-        "paragraphSpacing": "$paragraphSpacing.0",
-        "textCase": "$textCase.none",
-        "textDecoration": "$textDecoration.none"
-      },
-      "type": "typography"
-    },
path: packages/design-tokens/src/figma/tokens.json
user: login: georgewrmarshall
body: Removing deprecated tokens from Figma json. Ensured it's not used in the codebase

<img width="498" alt="Screenshot 2025-05-25 at 2 22 09 PM" src="https://github.com/user-attachments/assets/df6d1765-4cb6-4e70-aee3-cf6df99bc58e" />

created_at: 2025-05-25T04:52:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -706,18 +694,6 @@
       },
       "type": "typography"
     },
-    "S-Heading-SM-Regular": {
-      "value": {
-        "fontWeight": "$fontWeights.regular",
-        "lineHeight": "$lineHeights.4",
-        "fontSize": "$fontSize.4",
-        "letterSpacing": "$letterSpacing.0",
-        "paragraphSpacing": "$paragraphSpacing.0",
-        "textCase": "$textCase.none",
-        "textDecoration": "$textDecoration.none"
-      },
-      "type": "typography"
-    },
path: packages/design-tokens/src/figma/tokens.json
user: login: georgewrmarshall
body: Removing deprecated tokens from Figma json. Ensured it's not used in the codebase

<img width="488" alt="Screenshot 2025-05-25 at 2 22 34 PM" src="https://github.com/user-attachments/assets/d996c866-3d75-4ce4-a8da-53967cf63495" />

created_at: 2025-05-25T04:52:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -147,37 +147,6 @@ describe('Typography', () => {
       );
     });
 
-    it('js tokens for sHeadingSMRegular matches figma tokens sHeadingSMRegular', () => {
path: packages/design-tokens/src/js/typography/typography.test.ts
user: login: georgewrmarshall
body: Removing tests
created_at: 2025-05-25T04:52:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -233,7 +202,7 @@ describe('Typography', () => {
       expect(typography.sBodyLGMedium.letterSpacing).toStrictEqual(
         Number(
           createNewFigmaTokenObject(
-            designTokens.global['S-Heading-SM-Regular'].value.letterSpacing,
+            designTokens.global['S-Body-LG-Medium'].value.letterSpacing,
path: packages/design-tokens/src/js/typography/typography.test.ts
user: login: georgewrmarshall
body: Fixing incorrect test that incidentally had the same value
created_at: 2025-05-25T04:53:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -25,7 +24,6 @@ export type ThemeTypography = {
   lDisplayMD: TypeStyle;
   lHeadingLG: TypeStyle;
   lHeadingMD: TypeStyle;
-  lHeadingSMRegular: TypeStyle;
   lHeadingSM: TypeStyle;
path: packages/design-tokens/src/js/typography/types.ts
user: login: georgewrmarshall
body: Removing deprecated tokens from types. Ensured no instances left in codebase (only instances in migration doc)

<img width="300" alt="Screenshot 2025-05-25 at 2 33 22 PM" src="https://github.com/user-attachments/assets/b8d2fe71-cb8c-4949-a8e6-5d7d5c1a19c7" /><img width="300" alt="Screenshot 2025-05-25 at 2 34 04 PM" src="https://github.com/user-attachments/assets/bacd6c62-e22e-458f-8c4c-9586a1738491" />

created_at: 2025-05-25T05:04:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -129,16 +119,6 @@ export const typography: ThemeTypography = {
     lineHeight: lineHeights.lineHeight4,
     letterSpacing: letterSpacing.letterSpacing0,
   },
-  /**
-   * @deprecated [#1] since version 1.9 [#2].
-   * [#3] Will be deleted in version 2.0.
-   */
-  lHeadingSMRegular: {
-    fontWeight: fontWeights.regular,
-    fontSize: fontSizes.fontSize5,
-    lineHeight: lineHeights.lineHeight4,
-    letterSpacing: letterSpacing.letterSpacing0,
-  },
   lBodyLGMedium: {
path: packages/design-tokens/src/js/typography/typography.ts
user: login: georgewrmarshall
body: Removing deprecated tokens from JS tokens
created_at: 2025-05-25T05:05:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -791,6 +745,7 @@ For screens sizes `768px <` or larger, use the large screen typography scale
         <code>var(--typography-l-body-xs-letter-spacing)</code>
       </td>
     </tr>
+
   </tbody>
 </table>
 
path: packages/design-tokens/stories/Typography.mdx
user: login: georgewrmarshall
body: Removing deprecated tokens from docs
created_at: 2025-05-25T05:05:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -621,12 +589,6 @@ export const LargeScreenCSS: StoryFn<typeof Text> = (...args) => {
       lineHeight: 'var(--typography-l-heading-sm-line-height)',
       fontWeight: 'var(--typography-l-heading-sm-font-weight)',
     },
-    'HeadingSM Regular': {
-      fontFamily: 'var(--font-family-default)',
-      fontSize: 'var(--typography-l-heading-sm-regular-font-size)',
-      lineHeight: 'var(--typography-l-heading-sm-regular-line-height)',
-      fontWeight: 'var(--typography-l-heading-sm-regular-font-weight)',
-    },
     'BodyLG Medium': {
path: packages/design-tokens/stories/Typography.stories.tsx
user: login: georgewrmarshall
body: Updating stories
created_at: 2025-05-25T05:06:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -196,29 +196,6 @@ For screens sizes `767px >` or smaller, use the small screen typography scale
         <code>var(--typography-s-heading-sm-letter-spacing)</code>
       </td>
     </tr>
-    <tr>
-      <td>
-        <strong>S HeadingSM Regular</strong> (DEPRECATED)
-      </td>
-      <td>
-        <code>typography.sHeadingSMRegular.fontWeight</code>
-        <br />
-        <code>typography.sHeadingSMRegular.fontSize</code>
-        <br />
-        <code>typography.sHeadingSMRegular.lineHeight</code>
-        <br />
-        <code>typography.sHeadingSMRegular.letterSpacing</code>
-      </td>
-      <td>
-        <code>var(--typography-s-heading-sm-regular-font-weight)</code>
-        <br />
-        <code>var(--typography-s-heading-sm-regular-font-size)</code>
-        <br />
-        <code>var(--typography-s-heading-sm-regular-line-height)</code>
-        <br />
-        <code>var(--typography-s-heading-sm-regular-letter-spacing)</code>
-      </td>
-    </tr>
path: packages/design-tokens/stories/Typography.mdx
user: login: georgewrmarshall
body: ### Before

<img width="1022" alt="Screenshot 2025-05-25 at 2 44 33 PM" src="https://github.com/user-attachments/assets/524329bc-9199-4e72-a6b0-5148a661fe6e" />


### After
<img width="968" alt="Screenshot 2025-05-25 at 2 40 19 PM" src="https://github.com/user-attachments/assets/1bb8129f-a2a6-4d53-9fa8-7310aa3186bc" />

created_at: 2025-05-25T05:12:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -561,29 +538,6 @@ For screens sizes `768px <` or larger, use the large screen typography scale
         <code>var(--typography-l-heading-sm-letter-spacing)</code>
       </td>
     </tr>
-    <tr>
-      <td>
-        <strong>L HeadingSM Regular</strong> (DEPRECATED)
-      </td>
-      <td>
-        <code>typography.lHeadingSMRegular.fontWeight</code>
-        <br />
-        <code>typography.lHeadingSMRegular.fontSize</code>
-        <br />
-        <code>typography.lHeadingSMRegular.lineHeight</code>
-        <br />
-        <code>typography.lHeadingSMRegular.letterSpacing</code>
-      </td>
-      <td>
-        <code>var(--typography-l-heading-sm-regular-font-weight)</code>
-        <br />
-        <code>var(--typography-l-heading-sm-regular-font-size)</code>
-        <br />
-        <code>var(--typography-l-heading-sm-regular-line-height)</code>
-        <br />
-        <code>var(--typography-l-heading-sm-regular-letter-spacing)</code>
-      </td>
-    </tr>
path: packages/design-tokens/stories/Typography.mdx
user: login: georgewrmarshall
body: ### Before

<img width="1022" alt="Screenshot 2025-05-25 at 2 45 18 PM" src="https://github.com/user-attachments/assets/d0384861-610a-4143-8b0d-a1793c835158" />


### After

<img width="967" alt="Screenshot 2025-05-25 at 2 40 59 PM" src="https://github.com/user-attachments/assets/99a28067-6f72-4ed5-a3a7-7fd920cb0917" />

created_at: 2025-05-25T05:12:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -183,14 +177,6 @@ export const SmallScreen: StoryFn<typeof Text> = (...args) => {
           styles.headingSM.lineHeight
         } ${styles.headingSM.fontSize / smallScreenFontSizeBase}rem`}
       </Text>
-      <Text style={styles.headingSMRegular} {...args}>
-        {`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
-          styles.headingSMRegular.lineHeight
-        } ${
-          styles.headingSMRegular.fontSize / smallScreenFontSizeBase
-        }rem`}{' '}
-        <span className="text-error-default">DEPRECATED</span>
-      </Text>
path: packages/design-tokens/stories/Typography.stories.tsx
user: login: georgewrmarshall
body: ### Before

<img width="1031" alt="Screenshot 2025-05-25 at 2 44 12 PM" src="https://github.com/user-attachments/assets/40c63666-1075-4a5a-aa46-da1077e3bd1e" />


### After

<img width="1027" alt="Screenshot 2025-05-25 at 2 39 41 PM" src="https://github.com/user-attachments/assets/5484db13-4083-4b2f-a5de-aa57620ecc5b" />

created_at: 2025-05-25T05:13:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -363,14 +343,6 @@ export const LargeScreen: StoryFn<typeof Text> = (...args) => {
           styles.headingSM.lineHeight
         } ${styles.headingSM.fontSize / largeScreenFontSizeBase}rem`}
       </Text>
-      <Text style={styles.headingSMRegular} {...args}>
-        {`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
-          styles.headingSMRegular.lineHeight
-        } ${
-          styles.headingSMRegular.fontSize / largeScreenFontSizeBase
-        }rem`}{' '}
-        <span className="text-error-default">DEPRECATED</span>
-      </Text>
path: packages/design-tokens/stories/Typography.stories.tsx
user: login: georgewrmarshall
body: ### Before

<img width="1032" alt="Screenshot 2025-05-25 at 2 44 58 PM" src="https://github.com/user-attachments/assets/b2b84b4c-b898-416f-bc9f-efb91d68b0e2" />


### After

<img width="1030" alt="Screenshot 2025-05-25 at 2 40 38 PM" src="https://github.com/user-attachments/assets/7fd88213-b651-408d-9bd6-51e476698797" />

created_at: 2025-05-25T05:13:54Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-25T04:42:14Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15234279751/storybook-build/index.html)
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-25T04:58:58Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15234392891/storybook-build/index.html)
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-25T05:01:43Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15234405044/storybook-build/index.html)
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-25T05:02:30Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15234412674/storybook-build/index.html)
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-25T05:03:43Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15234423373/storybook-build/index.html)
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-25T05:08:29Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15234464387/storybook-build/index.html)
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-25T05:09:43Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15234473490/storybook-build/index.html)
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-28T05:00:16Z
body: ### 📖 Storybook Preview
- [View PR Storybook](https://diuv6g5fj9pvx.cloudfront.net/metamask-design-system/15291865100/storybook-build/index.html)
author_association: CONTRIBUTOR