## Release 27.0.0

Release 27.0.0 updates the semibold typography tokens, ensures
BadgeWrapper enumerations now reuse const-object + union typings, and
syncs the Button migration guidance across changelogs and MIGRATION docs
so every surface tells the same story.

### 📦 Package Versions

- `@metamask/design-system-shared`: **0.6.0**
- `@metamask/design-system-react`: **0.13.0**
- `@metamask/design-system-react-native`: **0.13.0**

### 🔄 Shared Type Updates (0.6.0)

#### Component Type Additions (#1014)

- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`,
`BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now derive
from const-object + string-union definitions per ADR-0003/ADR-0004;
React and React Native continue to re-export the same names, so import
paths stay rooted at the platform entry points while the shared package
hosts the canonical typings.
- This keeps the type surface aligned between platforms and makes future
shared-type updates easier to ship without duplicating runtime enums.

### 🌐 React Web Updates (0.13.0)

#### Added

- None.

#### Changed

- **BREAKING:** `FontWeight.Bold` and the `Text` component now map bold
to weight 600; the Storybook font loader switched to the
`Geist-SemiBold` assets and the tokens emit `--font-weight-bold: 600`,
so update any hardcoded `font-weight: 700` references as documented in
`MIGRATION.md#from-version-0120-to-0130` (#1017).
- The Button migration guide now spells out the prop, variant, and size
mappings for both web and mobile so the before/after story is easy to
follow (`MIGRATION.md#button-component`, #999).

#### Fixed

- None.

### 📱 React Native Updates (0.13.0)

#### Added

- None.

#### Changed

- Shared Button migration guidance now lives in
`MIGRATION.md#button-component` so React Native can mirror the same
prop/variant/size story (#999).

#### Fixed

- None.

### ⚠️ Breaking Changes

#### Typography semantics (Both Platforms)

**What Changed:**

- `FontWeight.Bold` and `Text` now resolve to weight 600, and the
tokens/storybook assets switched to `Geist-SemiBold` so the bold slot
emits semibold at runtime.

**Migration:**

```tsx
// Before (v0.12.x)
<Text weight={FontWeight.Bold}>...</Text>
```
```tsx
// After (v0.13.0)
import {
  Text,
  FontWeight,
} from '@metamask/design-system-react';

<Text weight={FontWeight.Bold}>...</Text>
```

(Consumers only need to update any `font-weight: 700` references or
bundled `Geist-Bold` assets; the API surface stays the same.)

**Impact:**

- Affects any code that assumes `FontWeight.Bold` resolves to 700 or
bundles the retired `Geist-Bold` files. See
`MIGRATION.md#from-version-0120-to-0130`.

#### BadgeWrapper typings (Both Platforms)

**What Changed:**

- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`,
`BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now come
from const objects + string unions defined in
`@metamask/design-system-shared`. The platform bundles re-export the
same names so existing imports keep working, but the type shape is now
string-literal friendly per ADR-0003/ADR-0004.

**Migration:**

```ts
// Before (enum)
import { BadgeWrapperPosition } from '@metamask/design-system-react';

const position: BadgeWrapperPosition = BadgeWrapperPosition.TopRight;
```
```ts
// After (const-object + union)
import {
  BadgeWrapperPosition,
} from '@metamask/design-system-react';

const position: (typeof BadgeWrapperPosition)[keyof typeof BadgeWrapperPosition] = 'top-right';
```

**Impact:**

- Ensures React and React Native share the same canonical definitions
while preserving the original import paths; no import-path changes are
required.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [ ] Changelog validation passed (`yarn changelog:validate`)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: patch (0.5.0 → 0.6.0) – shared type
alignment for BadgeWrapper values
- [x] design-system-react: minor (0.12.0 → 0.13.0) – semibold typography
semantics and linked Button migration docs
- [x] design-system-react-native: minor (0.12.0 → 0.13.0) – mirrors
React’s semibold/type migration guidance
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [ ] I've reviewed the [Release
Workflow](./.cursor/rules/release-workflow.md) cursor rule
- [ ] All tests pass (`yarn build && yarn test && yarn lint`)
- [ ] Changelog validation passes (`yarn changelog:validate`)

## **Pre-merge reviewer checklist**

- [ ] I've reviewed the [Reviewing Release
PRs](./docs/reviewing-release-prs.md) guide
- [ ] Package versions follow semantic versioning
- [ ] Changelog entries are consumer-facing (not commit message
regurgitation)
- [ ] Breaking changes are documented in MIGRATION.md with examples
- [ ] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Medium risk because this is a release/version bump that ships breaking
typography weight changes and type-shape updates that can affect
consumers’ styling and TypeScript usage. Repo changes are mostly
metadata/docs, but downstream upgrades may require font asset and
`font-weight` updates.
> 
> **Overview**
> **Release bump to `27.0.0`** with package version updates
(`design-system-react`/`react-native` → `0.13.0`, `design-system-shared`
→ `0.6.0`, `design-tokens` → `8.3.0`, `design-system-twrnc-preset` →
`0.4.0`).
> 
> Documents and publishes the **typography semantic change** where
`FontWeight.Bold`/`--font-weight-bold` now map to `600` and font
mappings move from `Geist-Bold*` to `Geist-SemiBold*`, plus the
**`BadgeWrapper` type migration** to `as const` + string-union
definitions centralized in `design-system-shared`. Migration
guides/changelogs are updated accordingly, and React Native peer deps
are updated to require `@metamask/design-system-twrnc-preset@^0.4.0`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7ad09f1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## Release 27.0.0

Release 27.0.0 updates the semibold typography tokens, ensures
BadgeWrapper enumerations now reuse const-object + union typings, and
syncs the Button migration guidance across changelogs and MIGRATION docs
so every surface tells the same story.

### 📦 Package Versions

- `@metamask/design-system-shared`: **0.6.0**
- `@metamask/design-system-react`: **0.13.0**
- `@metamask/design-system-react-native`: **0.13.0**

### 🔄 Shared Type Updates (0.6.0)

#### Component Type Additions (#1014)

- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`,
`BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now derive
from const-object + string-union definitions per ADR-0003/ADR-0004;
React and React Native continue to re-export the same names, so import
paths stay rooted at the platform entry points while the shared package
hosts the canonical typings.
- This keeps the type surface aligned between platforms and makes future
shared-type updates easier to ship without duplicating runtime enums.

### 🌐 React Web Updates (0.13.0)

#### Added

- None.

#### Changed

- **BREAKING:** `FontWeight.Bold` and the `Text` component now map bold
to weight 600; the Storybook font loader switched to the
`Geist-SemiBold` assets and the tokens emit `--font-weight-bold: 600`,
so update any hardcoded `font-weight: 700` references as documented in
`MIGRATION.md#from-version-0120-to-0130` (#1017).
- The Button migration guide now spells out the prop, variant, and size
mappings for both web and mobile so the before/after story is easy to
follow (`MIGRATION.md#button-component`, #999).

#### Fixed

- None.

### 📱 React Native Updates (0.13.0)

#### Added

- None.

#### Changed

- Shared Button migration guidance now lives in
`MIGRATION.md#button-component` so React Native can mirror the same
prop/variant/size story (#999).

#### Fixed

- None.

### ⚠️ Breaking Changes

#### Typography semantics (Both Platforms)

**What Changed:**

- `FontWeight.Bold` and `Text` now resolve to weight 600, and the
tokens/storybook assets switched to `Geist-SemiBold` so the bold slot
emits semibold at runtime.

**Migration:**

```tsx
// Before (v0.12.x)
<Text weight={FontWeight.Bold}>...</Text>
```
```tsx
// After (v0.13.0)
import {
  Text,
  FontWeight,
} from '@metamask/design-system-react';

<Text weight={FontWeight.Bold}>...</Text>
```

(Consumers only need to update any `font-weight: 700` references or
bundled `Geist-Bold` assets; the API surface stays the same.)

**Impact:**

- Affects any code that assumes `FontWeight.Bold` resolves to 700 or
bundles the retired `Geist-Bold` files. See
`MIGRATION.md#from-version-0120-to-0130`.

#### BadgeWrapper typings (Both Platforms)

**What Changed:**

- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`,
`BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now come
from const objects + string unions defined in
`@metamask/design-system-shared`. The platform bundles re-export the
same names so existing imports keep working, but the type shape is now
string-literal friendly per ADR-0003/ADR-0004.

**Migration:**

```ts
// Before (enum)
import { BadgeWrapperPosition } from '@metamask/design-system-react';

const position: BadgeWrapperPosition = BadgeWrapperPosition.TopRight;
```
```ts
// After (const-object + union)
import {
  BadgeWrapperPosition,
} from '@metamask/design-system-react';

const position: (typeof BadgeWrapperPosition)[keyof typeof BadgeWrapperPosition] = 'top-right';
```

**Impact:**

- Ensures React and React Native share the same canonical definitions
while preserving the original import paths; no import-path changes are
required.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [ ] Changelog validation passed (`yarn changelog:validate`)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: patch (0.5.0 → 0.6.0) – shared type
alignment for BadgeWrapper values
- [x] design-system-react: minor (0.12.0 → 0.13.0) – semibold typography
semantics and linked Button migration docs
- [x] design-system-react-native: minor (0.12.0 → 0.13.0) – mirrors
React’s semibold/type migration guidance
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [ ] I've reviewed the [Release
Workflow](./.cursor/rules/release-workflow.md) cursor rule
- [ ] All tests pass (`yarn build && yarn test && yarn lint`)
- [ ] Changelog validation passes (`yarn changelog:validate`)

## **Pre-merge reviewer checklist**

- [ ] I've reviewed the [Reviewing Release
PRs](./docs/reviewing-release-prs.md) guide
- [ ] Package versions follow semantic versioning
- [ ] Changelog entries are consumer-facing (not commit message
regurgitation)
- [ ] Breaking changes are documented in MIGRATION.md with examples
- [ ] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Medium risk because this is a release/version bump that ships breaking
typography weight changes and type-shape updates that can affect
consumers’ styling and TypeScript usage. Repo changes are mostly
metadata/docs, but downstream upgrades may require font asset and
`font-weight` updates.
> 
> **Overview**
> **Release bump to `27.0.0`** with package version updates
(`design-system-react`/`react-native` → `0.13.0`, `design-system-shared`
→ `0.6.0`, `design-tokens` → `8.3.0`, `design-system-twrnc-preset` →
`0.4.0`).
> 
> Documents and publishes the **typography semantic change** where
`FontWeight.Bold`/`--font-weight-bold` now map to `600` and font
mappings move from `Geist-Bold*` to `Geist-SemiBold*`, plus the
**`BadgeWrapper` type migration** to `as const` + string-union
definitions centralized in `design-system-shared`. Migration
guides/changelogs are updated accordingly, and React Native peer deps
are updated to require `@metamask/design-system-twrnc-preset@^0.4.0`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7ad09f1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Release 27.0.0 updates the semibold typography tokens, ensures
BadgeWrapper enumerations now reuse const-object + union typings, and
syncs the Button migration guidance across changelogs and MIGRATION docs
so every surface tells the same story.

- `@metamask/design-system-shared`: **0.6.0**
- `@metamask/design-system-react`: **0.13.0**
- `@metamask/design-system-react-native`: **0.13.0**

- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`,
`BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now derive
from const-object + string-union definitions per ADR-0003/ADR-0004;
React and React Native continue to re-export the same names, so import
paths stay rooted at the platform entry points while the shared package
hosts the canonical typings.
- This keeps the type surface aligned between platforms and makes future
shared-type updates easier to ship without duplicating runtime enums.

- None.

- **BREAKING:** `FontWeight.Bold` and the `Text` component now map bold
to weight 600; the Storybook font loader switched to the
`Geist-SemiBold` assets and the tokens emit `--font-weight-bold: 600`,
so update any hardcoded `font-weight: 700` references as documented in
`MIGRATION.md#from-version-0120-to-0130` (#1017).
- The Button migration guide now spells out the prop, variant, and size
mappings for both web and mobile so the before/after story is easy to
follow (`MIGRATION.md#button-component`, #999).

- None.

- None.

- Shared Button migration guidance now lives in
`MIGRATION.md#button-component` so React Native can mirror the same
prop/variant/size story (#999).

- None.

**What Changed:**

- `FontWeight.Bold` and `Text` now resolve to weight 600, and the
tokens/storybook assets switched to `Geist-SemiBold` so the bold slot
emits semibold at runtime.

**Migration:**

```tsx
// Before (v0.12.x)
<Text weight={FontWeight.Bold}>...</Text>
```
```tsx
// After (v0.13.0)
import {
  Text,
  FontWeight,
} from '@metamask/design-system-react';

<Text weight={FontWeight.Bold}>...</Text>
```

(Consumers only need to update any `font-weight: 700` references or
bundled `Geist-Bold` assets; the API surface stays the same.)

**Impact:**

- Affects any code that assumes `FontWeight.Bold` resolves to 700 or
bundles the retired `Geist-Bold` files. See
`MIGRATION.md#from-version-0120-to-0130`.

**What Changed:**

- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`,
`BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now come
from const objects + string unions defined in
`@metamask/design-system-shared`. The platform bundles re-export the
same names so existing imports keep working, but the type shape is now
string-literal friendly per ADR-0003/ADR-0004.

**Migration:**

```ts
// Before (enum)
import { BadgeWrapperPosition } from '@metamask/design-system-react';

const position: BadgeWrapperPosition = BadgeWrapperPosition.TopRight;
```
```ts
// After (const-object + union)
import {
  BadgeWrapperPosition,
} from '@metamask/design-system-react';

const position: (typeof BadgeWrapperPosition)[keyof typeof BadgeWrapperPosition] = 'top-right';
```

**Impact:**

- Ensures React and React Native share the same canonical definitions
while preserving the original import paths; no import-path changes are
required.

- [x] Changelogs updated with human-readable descriptions
- [ ] Changelog validation passed (`yarn changelog:validate`)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: patch (0.5.0 → 0.6.0) – shared type
alignment for BadgeWrapper values
- [x] design-system-react: minor (0.12.0 → 0.13.0) – semibold typography
semantics and linked Button migration docs
- [x] design-system-react-native: minor (0.12.0 → 0.13.0) – mirrors
React’s semibold/type migration guidance
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [ ] I've reviewed the [Release
Workflow](./.cursor/rules/release-workflow.md) cursor rule
- [ ] All tests pass (`yarn build && yarn test && yarn lint`)
- [ ] Changelog validation passes (`yarn changelog:validate`)

- [ ] I've reviewed the [Reviewing Release
PRs](./docs/reviewing-release-prs.md) guide
- [ ] Package versions follow semantic versioning
- [ ] Changelog entries are consumer-facing (not commit message
regurgitation)
- [ ] Breaking changes are documented in MIGRATION.md with examples
- [ ] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Medium risk because this is a release/version bump that ships breaking
typography weight changes and type-shape updates that can affect
consumers’ styling and TypeScript usage. Repo changes are mostly
metadata/docs, but downstream upgrades may require font asset and
`font-weight` updates.
>
> **Overview**
> **Release bump to `27.0.0`** with package version updates
(`design-system-react`/`react-native` → `0.13.0`, `design-system-shared`
→ `0.6.0`, `design-tokens` → `8.3.0`, `design-system-twrnc-preset` →
`0.4.0`).
>
> Documents and publishes the **typography semantic change** where
`FontWeight.Bold`/`--font-weight-bold` now map to `600` and font
mappings move from `Geist-Bold*` to `Geist-SemiBold*`, plus the
**`BadgeWrapper` type migration** to `as const` + string-union
definitions centralized in `design-system-shared`. Migration
guides/changelogs are updated accordingly, and React Native peer deps
are updated to require `@metamask/design-system-twrnc-preset@^0.4.0`.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7ad09f1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->