## **Description**

This PR introduces **version 9.0.0** of the MetaMask Design System with
significant breaking changes and the initial release of three new
component packages. This is a major release that includes:

### **Breaking Changes in @metamask/design-tokens@8.0.0:**
1. **Background color token changes**: `background.muted` is now
transparent instead of opaque, with new `background.section` and
`background.subsection` tokens added for opaque backgrounds
2. **Typography token removal**: Deprecated `sHeadingSMRegular` and
`lHeadingSMRegular` tokens have been completely removed
3. **Font family token cleanup**: Completed removal of individual
typography font family tokens in favor of base font family tokens
4. **Build system updates**: Updated to use ts-bridge for React Native
compatibility

### **Initial Package Releases:**
- **@metamask/design-system-react@0.1.0**: Complete React component
library with Avatar, Badge, Button, Form, Layout, Typography, Icon, and
Utility components
- **@metamask/design-system-react-native@0.1.0**: React Native component
library with full component set and TWRNC integration
- **@metamask/design-system-twrnc-preset@0.1.0**: TWRNC preset with
theme management and MetaMask design token integration

### **Package Updates:**
- **@metamask/design-system-tailwind-preset@0.5.0**: Updated with
breaking changes to support new design tokens and typography system

The reason for these changes is to:
1. **Improve design consistency** by separating transparent and opaque
background use cases
2. **Simplify the typography system** by removing deprecated tokens that
were causing confusion
3. **Enable component library adoption** by releasing stable initial
versions of React and React Native packages
4. **Enhance React Native support** with improved build system and TWRNC
integration

## **Related issues**

## **Manual testing steps**

1. **Test design token breaking changes:**
   - Verify `background.muted` now renders as transparent
- Confirm `background.section` provides opaque backgrounds for badges
and avatars
- Check that `sHeadingSMRegular` and `lHeadingSMRegular` tokens are no
longer available

2. **Test new component packages:**
- Install and import components from
`@metamask/design-system-react@0.1.0`
- Install and import components from
`@metamask/design-system-react-native@0.1.0`
- Test TWRNC preset integration with
`@metamask/design-system-twrnc-preset@0.1.0`

3. **Test migration compatibility:**
   - Verify peer dependency updates work correctly
- Test that existing applications can migrate using the provided
migration guide
   - Confirm TypeScript definitions are working properly

4. **Test build and distribution:**
   - Verify all packages build successfully
   - Test that published packages can be installed and imported
   - Confirm Storybook examples work with new versions

## **Screenshots/Recordings**

### **Before**

- `background.muted` was opaque (grey050 | grey800)
- `sHeadingSMRegular` and `lHeadingSMRegular` tokens were available but
deprecated
- Component packages were at version 0.0.0 and not ready for consumption
- Individual typography font family tokens were still present

### **After**

- `background.muted` is now transparent (#3C4D9D 10% | E0E5FF 15%)
- New `background.section` and `background.subsection` tokens provide
opaque alternatives
- `sHeadingSMRegular` and `lHeadingSMRegular` tokens are completely
removed
- Component packages are released as stable 0.1.0 versions with
comprehensive component sets
- Typography system uses only base font family tokens
- Enhanced React Native support with ts-bridge build system

## **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.

---

## **⚠️ BREAKING CHANGES - MIGRATION REQUIRED**

This release contains multiple breaking changes. Please review the
[Migration
Guide](./packages/design-tokens/MIGRATION.md#from-version-700-to-800)
for detailed migration instructions.

### **Critical Actions Required:**
1. **Replace `background.muted` with `background.section`** for all
opaque background use cases (badges, avatars, read-only sections)
2. **Remove all references to `sHeadingSMRegular` and
`lHeadingSMRegular`** and choose appropriate replacement typography
tokens
3. **Update peer dependencies** to use the new package versions
4. **Test visual regression** carefully, especially for components using
background colors

### **New Package Versions:**
- `@metamask/design-tokens`: 7.1.0 → 8.0.0
- `@metamask/design-system-react`: 0.0.0 → 0.1.0 
- `@metamask/design-system-react-native`: 0.0.0 → 0.1.0
- `@metamask/design-system-twrnc-preset`: 0.0.0 → 0.1.0
- `@metamask/design-system-tailwind-preset`: 0.4.0 → 0.5.0
```