Replace deprecated Typography with Text component

Description

The extension still uses legacy typography/text implementations that should be migrated to the MMDS Text component from @metamask/design-system-react.

This issue is a reusable tracker for many small PRs. Do not try to migrate every Typography/Text usage in one PR. Each PR should migrate a small set of files completely and leave this issue open for the remaining work.

Migration target

Migrate typography/text usage from these legacy extension sources:

• ui/components/ui/typography
• ui/components/component-library/text

To the MMDS Text component:

import { Text } from '@metamask/design-system-react';

The ui/components/component-library Text component is not the destination for this migration. It is also part of the legacy extension text surface that should eventually be replaced.

Migration docs

Use the MMDS docs and migration guide when updating each file:

• MMDS Text documentation
• MMDS Text migration guide

Pay special attention to prop, variant, color, font weight, and type differences. This should not be treated as an import-only migration.

Common failure mode

A PR that changes Typography imports from ui/components/ui/typography to Text from ui/components/component-library does not complete this migration. The selected files must import Text and related constants/types from @metamask/design-system-react and update any incompatible props/types.

PR scope and linking

• PRs should contain a minimum of 1 migrated product file and no more than 3 migrated product files. Necessary test, snapshot, or story updates may be included alongside those files.
• Do not use auto-closing keywords such as Fixes #17670, Closes #17670, or Resolves #17670.
• Use Part of #17670 or Part of: https://github.com/MetaMask/metamask-extension/issues/17670 so this tracker stays open until all legacy Typography/Text usage is migrated.

Type and API requirements

For every migrated file:

• Audit the Text/Typography props being used; do not only change the import path or component name.
• Follow the MMDS Text migration guide for variant, color, font weight, and type differences.
• Migrate boxProps to direct MMDS props or Tailwind className utilities where appropriate.
• Convert extension TextVariant camelCase values to MMDS PascalCase values, for example TextVariant.bodyMd -> TextVariant.BodyMd.
• Split extension semantic weight variants into variant plus fontWeight, for example TextVariant.bodyMdBold -> variant={TextVariant.BodyMd} fontWeight={FontWeight.Bold}.
• Convert extension text colors such as Color.textMuted to MMDS TextColor.TextMuted.
• Remove TextVariant.inherit; omit the variant prop when inheritance is intended.
• Update imported text-related constants/types to MMDS exports where applicable, including TextVariant, TextColor, FontWeight, and TextProps.
• Do not add broad any, unsafe casts, or type suppressions to force compatibility.
• Fix TypeScript, Flow, Jest, or lint failures caused by Text prop/type differences.

Typography to Text mapping

When migrating legacy Typography from ui/components/ui/typography, use the MMDS Text migration guide as the source of truth. The historical extension mapping below can help identify the closest text role, but final values should use MMDS PascalCase TextVariant members and separate FontWeight where needed:

• TypographyVariant.H1 -> TextVariant.DisplayMd
• TypographyVariant.H2 -> TextVariant.HeadingLg
• TypographyVariant.H3 -> TextVariant.HeadingMd
• TypographyVariant.H4 -> TextVariant.HeadingSm
• TypographyVariant.H5 -> TextVariant.BodyMd
• TypographyVariant.H6 -> TextVariant.BodySm
• TypographyVariant.Paragraph -> TextVariant.BodyMd
• TypographyVariant.H7 -> TextVariant.BodySm
• TypographyVariant.H8 -> TextVariant.BodyXs
• TypographyVariant.H9 -> TextVariant.BodyXs

Acceptance Criteria

• Selected files no longer import typography/text components or related constants from ui/components/ui/typography, ui/components/component-library, or ui/components/component-library/text.
• Selected files import Text and any related constants/types from @metamask/design-system-react.
• Any legacy Typography/Text props are migrated according to the MMDS Text migration guide.
• Type usage is updated cleanly with no new unsafe casts, any, or suppressions.
• Each PR migrates 1-3 product files, excluding necessary tests, snapshots, or stories.
• Each PR links this issue with Part of, not an auto-closing keyword.
• Relevant Jest tests pass.
• Lint/type checks pass for touched files or for the repo's normal validation command.
• Before/after screenshots are included for reachable UI. If the UI is unreachable or dead code, the PR must clearly prove that with search evidence and still include test coverage where possible.

If the acceptance criteria are not met, PRs may be closed.

Difficulty: Intermediate

Good first issue for external contributors who are familiar with running the extension locally, React component props, type checking, Jest tests, linting, and Storybook.