import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Migrations/2025 Q4 DS cleanup" />

# Migrations/2025 Q4 - Design System cleanup initiative

- [For teams](#for-teams)
    - [Themes](#themes)
    - [Color schemes](#color-schemes)
    - [Panel components](#panel-components)
    - [`root.text.base.lineHeight` token](#roottextbaselineheight-token)
    - [`content.*.color` tokens](#contentcolor-tokens)
    - [`root.radius.*` tokens](#rootradius-tokens)
    - [`<Text/>`/`<Icon/>`/`<Heading/>`/`<TextInline/>` `accent`](#texticonheadingtextinline-accent)
    - [`<Button/>` / `<IconButton/>` `size`](#button--iconbutton-size)
    - [`icon.size.*` tokens](#iconsize-tokens)
    - [`text.weight.medium.fontWeight` token](#textweightmediumfontweight-token)
    - [`<Icon/>` `size`](#icon-size)
    - [Other tokens/variables](#other-tokensvariables)
    - [Old icons](#old-icons)
    - [`<Badge/>` `color`](#badge-color)
    - [`root.palette.*` tokens](#rootpalette-tokens)
    - [`<Text/>`/`<Heading/>`/`<Icon/>`/`<TextInline/>`'s `color`](#textheadingicontextinlines-color)
    - [RebrandAlert `maybeBrokenLayout`](#rebrandalert-maybebrokenlayout)
- [For the Design System team](#for-the-design-system-team)
    - [`root.text.weight.*` tokens](#roottextweight-tokens)
    - [`root.text.size.*` tokens](#roottextsize-tokens)
    - [`content.*.color` tokens](#contentcolor-tokens-1)
    - [`root.size.*` tokens](#rootsize-tokens)
    - [`root.size.*` tokens](#rootsize-tokens-1)
    - [`root.radius.*` tokens](#rootradius-tokens-1)
    - [Font family tokens](#font-family-tokens)
    - [Font weight tokens](#font-weight-tokens)
    - [Text variants (and corresponding tokens)](#text-variants-and-corresponding-tokens)
    - [Text size](#text-size)
    - [Avatar size](#avatar-size)
    - [`<Text/>`/`<Icon/>`/`<Heading/>`/`<TextInline/>` `accent`](#texticonheadingtextinline-accent-1)
    - [`<TextInline/>` `italic`](#textinline-italic)
    - [`<Heading/>` `large`](#heading-large)
    - [`<Heading/>` `level`](#heading-level)
    - [`heading.level.*` tokens](#headinglevel-tokens)
    - [`<LayoutFlex/>` `padding` /`<LayoutFlex/>` `gap` / `<LayoutGrid/>` `padding`/`<LayoutGrid/>` `gap` /`<Box/>` `padding`](#layoutflex-padding-layoutflex-gap--layoutgrid-paddinglayoutgrid-gap-box-padding)
    - [`action.size.*` tokens](#actionsize-tokens)
    - [`action.variant.plain` tokens](#actionvariantplain-tokens)
    - [`Button` `plain` variant](#button-plain-variant)
    - [`action.variant.dangerous` tokens](#actionvariantdangerous-tokens)
    - [`Button` `dangerous` variant](#button-dangerous-variant)
    - [`<Button/>` / `<IconButton/>` `size`](#button--iconbutton-size-1)
    - [`<Box/>` `radius`](#box-radius)
    - [`icon.size.*` tokens](#iconsize-tokens-1)
    - [`<Icon/>` `size`](#icon-size-1)
    - [`<PreplyLogo/>` `variant` monochrome](#preplylogo-variant-monochrome)
    - [`<PreplyLogo/>` `rebranded` monochrome](#preplylogo-rebranded-monochrome)
    - [Other tokens/variables (apart from the ones related to the deprecations above)](#other-tokensvariables-apart-from-the-ones-related-to-the-deprecations-above)
    - [Old icons](#old-icons-1)
- [Not to worry about](#not-to-worry-about)
    - [AvatarWithStatus size](#avatarwithstatus-size)
    - [`action.size.*` tokens](#actionsize-tokens-1)
    - [`<Button/>` / `<IconButton/>` `size`](#button--iconbutton-size-2)
    - [`variationSettings` tokens](#variationsettings-tokens)
    - [`heading.level.*` tokens](#headinglevel-tokens-1)
    - [Other tokens/variables (apart from the ones related to the deprecations above)](#other-tokensvariables-apart-from-the-ones-related-to-the-deprecations-above-1)

Resources

1. Official [Confluence page](https://preply.atlassian.net/wiki/spaces/PDS/pages/4009000993/Design+System+cleanup)
2. [Design System cleanup: tracker](https://docs.google.com/spreadsheets/d/1OML7PSyKWzlpe4FerIJ2rHZ2Iwa3ofKXm9PiMTGW8vY) to know about the usages of deprecated APIs

- Migrations are split in
    - "🧘 safe" ones (where DS elements can be replaced blindly since the DS guarantees the same end result). The DS team will take care of them
    - "🤔 thoughtful" ones (where replacements require evaluating different options). The DS team will not take care of them
- All the following APIs will be completely removed by the DS team in 2024 Q4

List of deprecated APIs

# For teams

## Themes

Migration type: 🤔 thoughtful

Theoretically old themes are not used in public pages, but you never know.

```md
| Deprecation     | What Product teams should do               |
| --------------- | ------------------------------------------ |
| Preply UI theme | Look for `preply-ui` theme and remove them |
| Base UI theme   | Look for `base-ui` theme and remove them   |
| Bold UI theme   | Look for `bold-ui` theme and remove them   |
```

## Color schemes

Migration type: 🧘 safe if used in combinations with Tokyo UI (color schemes look all the same under Tokyo UI), 🤔 thoughtful if used in combinations with Bold UI.

```md
| Deprecation                    | What Product teams should do |
| ------------------------------ | ---------------------------- |
| `useColorScheme`               | Remove every reference       |
| `ColorSchemeProvider`          | Remove every reference       |
| `.color-schemes`               | Remove every reference       |
| `withColorScheme` + props      | Remove every reference       |
| `<Box />`'s `colorScheme` prop | Remove every reference       |
```

## Panel components

Migration type: 🤔 thoughtful

```md
| Deprecation                                                        | Replacement                                                   |
| ------------------------------------------------------------------ | ------------------------------------------------------------- |
| `Panel`, `PanelHeader`, `PanelBody`, `PanelSection`, `PanelFooter` | Use combination of `Box` and `LayoutFlex` components instead. |
```

## `root.text.base.lineHeight` token

Migration type: 🤔 thoughtful

`root.text.base.lineHeight` (and `root-text-base-lineHeight`) is used ~30 times in product.

Replacing it depends on the font-size used in the same element where the `lineHeight` is set.

```md
| Current font-size    | New line height                                                                                                             |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| 16px                 | `text.default.regular.body.lineHeight`                                                                                      |
| 20px                 | `text.large.regular.body.lineHeight`                                                                                        |
| 24px                 | `text.heading.medium.lineHeight` (if it's related to a heading)                                                             |
| 28px                 | 28px is not a DS font size                                                                                                  |
| 36px                 | 36px is not a DS font size                                                                                                  |
| root.text.size.100   | `text.small.regular.body.lineHeight`                                                                                        |
| root.text.size.200   | `text.small.regular.body.lineHeight`                                                                                        |
| root.text.size.600   | `text.heading.medium.lineHeight` (if it's related to a heading)                                                             |
| text.size.s.fontSize | `text.small.regular.body.lineHeight`                                                                                        |
| [unset]              | If you can't identify the font size, you can use the raw value `1.4285714286` but this detaches the line height from the DS |
```

instead, for buttons, there are three more tokens

- `action.size.small.lineHeight`
- `action.size.medium.lineHeight`
- `action.size.large.lineHeight`

## `content.*.color` tokens

Migration type: 🤔 thoughtful

```md
| Token                                              | Replacement                               |
| -------------------------------------------------- | ----------------------------------------- |
| `content.branded.color`, `content-branded-color`   | `color.text.accentDark` (slightly darker) |
| `content.brand.color`, `content-brand-color`       | `color.text.accentDark` (slightly darker) |
| `content.selected.color`, `content-selected-color` | `color.text.accentDark` (slightly darker) |
```

## `root.radius.*` tokens

Migration type: 🤔 thoughtful

```md
| Token                              | Safe replacement                                  |
| ---------------------------------- | ------------------------------------------------- |
| `root.radius.m`, `root-radius-m`   | No safe replacement, use `radius.8` or `radius.8` |
| `root.radius.xl`, `root-radius-xl` | No safe replacement, use `radius.16`              |
```

## `<Text/>`/`<Icon/>`/`<Heading/>`/`<TextInline/>` `accent`

Migration type: 🤔 thoughtful

```md
| `<Text/>`/`<Icon/>`/`<Heading/>`/`<TextInline/>` `accent` | Safe replacement             |
| --------------------------------------------------------- | ---------------------------- |
| branded                                                   | accentDark (slightly darker) |
| selected                                                  | accentDark (slightly darker) |
```

## `<Button/>` / `<IconButton/>` `size`

Migration type: 🤔 thoughtful

```md
| `size` | Safe replacement    |
| ------ | ------------------- |
| xs     | No safe replacement |
```

## `icon.size.*` tokens

Migration type: 🤔 thoughtful

```md
| `size`                                 | Safe replacement                                                             |
| -------------------------------------- | ---------------------------------------------------------------------------- |
| `icon.size.l.size`, `icon-size-l-size` | No safe replacement, use `sizing.32` or `sizing.48` (it was `40` previously) |
```

## `text.weight.medium.fontWeight` token

Migration type: 🤔 thoughtful

```md
| Token                                                            | Safe replacement                                                                                                                                                             |
| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text.weight.medium.fontWeight`, `text-weight-medium-fontWeight` | This was rendered as a normal 400-bolded text, without differences compared to standard texts. If you need to get it bolder than normal text, use `text.weight.bold` instead |
```

## `<Icon/>` `size`

Migration type: 🤔 thoughtful

```md
| `size` | Safe replacement                                               |
| ------ | -------------------------------------------------------------- |
| `l`    | No safe replacement, use `32` or `48` (it was `40` previously) |
```

## Other tokens/variables

Migration type: 🤔 thoughtful

```md
| Token                                      | Safe replacement                                   |
| ------------------------------------------ | -------------------------------------------------- |
| `COLOR_NAME_OPTIONS`                       | `COLOR_TEXT_OPTIONS` (not the same values, though) |
| `color.text.branded`, `color-text-branded` | `color.text.accentDark` (slightly darker)          |
```

## Old icons

Migration type: 🧘 safe (mostly)

```md
| Icons      | Safe replacement                                               | How spread it is in the Product |
| ---------- | -------------------------------------------------------------- | ------------------------------- |
| `Homework` | Please report the usages to the DS team since it's not correct | 2 usages                        |
```

## `<Badge/>` `color`

Migration type: 🤔 thoughtful

```md
| `size`    | Safe replacement                                                                                |
| --------- | ----------------------------------------------------------------------------------------------- |
| `gray`    | No safe replacement, `tertiary` is the closest, but everything depends on the semantic meaning. |
| `teal`    | No safe replacement, `positive` is the closest, but everything depends on the semantic meaning. |
| `green`   | No safe replacement, `positive` is the closest, but everything depends on the semantic meaning. |
| `blue`    | No safe replacement, `info` is the closest, but everything depends on the semantic meaning.     |
| `yellow`  | No safe replacement, `warning` is the closest, but everything depends on the semantic meaning.  |
| `red`     | No safe replacement, `critical` is the closest, but everything depends on the semantic meaning. |
| `magenta` | No safe replacement, `accent` is the closest, but everything depends on the semantic meaning.   |

Here is a `color` (left column) and `accent` (right column) comparison.

<img src="./2024-q2-assets/badge-color-accent.png" alt="Badge color and accent" />
```

## `root.palette.*` tokens

Migration type: 🤔 thoughtful

The `root.palette.*` must be replaced with their Tokyo UI semantic counterparts. Most of them require deciding which semantic tokens fits the usage.

`````md
| `root.palette.*` tokens used as `background`                                        | Safe replacement                                             | Current value (NOT USE IT)             |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------- |
| `root.palette.white`, `root-palette-white`                                          | `color.background.primary`                                   |                                        |
| `root.palette.ivory`, `root-palette-ivory`                                          | `color.background.secondary`                                 |                                        |
| `root.palette.transparent`, `root-palette-transparent`                              | `dsInternalPrimitive.color.grey.900-6`                       |                                        |
| `root.palette.gray.100`, `root.palette.gray[100]`, `root-palette-gray-100`          | `color.background.tertiary`                                  |                                        |
| `root.palette.gray.200`, `root.palette.gray[200]`, `root-palette-gray-200`          | `color.background.disabled`                                  |                                        |
| `root.palette.gray.300`, `root.palette.gray[300]`, `root-palette-gray-300`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.300`   |
| `root.palette.gray.400`, `root.palette.gray[400]`, `root-palette-gray-400`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.400`   |
| `root.palette.gray.500`, `root.palette.gray[500]`, `root-palette-gray-500`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.500`   |
| `root.palette.gray.600`, `root.palette.gray[600]`, `root-palette-gray-600`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.600`   |
| `root.palette.teal.100`, `root.palette.teal[100]`, `root-palette-teal-100`          | `color.background.positiveLight`                             |                                        |
| `root.palette.teal.200`, `root.palette.teal[200]`, `root-palette-teal-200`          | No semantic meaning                                          | `dsInternalPrimitive.color.teal.200`   |
| `root.palette.teal.300`, `root.palette.teal[300]`, `root-palette-teal-300`          | No semantic meaning                                          | `dsInternalPrimitive.color.teal.300`   |
| `root.palette.teal.400`, `root.palette.teal[400]`, `root-palette-teal-400`          | No semantic meaning                                          | `dsInternalPrimitive.color.teal.400`   |
| `root.palette.teal.500`, `root.palette.teal[500]`, `root-palette-teal-500`          | No semantic meaning (maybe `color.background.positiveDark`?) | `dsInternalPrimitive.color.teal.500`   |
| `root.palette.green.100`, `root.palette.green[100]`, `root-palette-green-100`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.100`   |
| `root.palette.green.200`, `root.palette.green[200]`, `root-palette-green-200`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.200`   |
| `root.palette.green.300`, `root.palette.green[300]`, `root-palette-green-300`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.300`   |
| `root.palette.green.400`, `root.palette.green[400]`, `root-palette-green-400`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.400`   |
| `root.palette.green.500`, `root.palette.green[500]`, `root-palette-green-500`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.500`   |
| `root.palette.yellow.100`, `root.palette.yellow[100]`, `root-palette-yellow-100`    | `color.background.warningLight`                              |                                        |
| `root.palette.yellow.200`, `root.palette.yellow[200]`, `root-palette-yellow-200`    |                                                              | `dsInternalPrimitive.color.yellow.200` |
| `root.palette.yellow.300`, `root.palette.yellow[300]`, `root-palette-yellow-300`    |                                                              | `dsInternalPrimitive.color.yellow.300` |
| `root.palette.yellow.400`, `root.palette.yellow[400]`, `root-palette-yellow-400`    |                                                              | `dsInternalPrimitive.color.yellow.400` |
| `root.palette.yellow.500`, `root.palette.yellow[500]`, `root-palette-yellow-500`    | No semantic meaning (maybe `color.background.warningDark`?)  | `dsInternalPrimitive.color.yellow.500` |
| `root.palette.red.100`, `root.palette.red[100]`, `root-palette-red-100`             | `color.background.criticalLight`                             |                                        |
| `root.palette.red.200`, `root.palette.red[200]`, `root-palette-red-200`             |                                                              | `dsInternalPrimitive.color.red.200`    |
| `root.palette.red.300`, `root.palette.red[300]`, `root-palette-red-300`             |                                                              | `dsInternalPrimitive.color.red.300`    |
| `root.palette.red.400`, `root.palette.red[400]`, `root-palette-red-400`             |                                                              | `dsInternalPrimitive.color.red.400`    |
| `root.palette.red.500`, `root.palette.red[500]`, `root-palette-red-500`             | No semantic meaning (maybe `color.background.criticalDark`?) | `dsInternalPrimitive.color.red.500`    |
| `root.palette.blue.100`, `root.palette.blue[100]`, `root-palette-blue-100`          | `color.background.infoLight`                                 |                                        |
| `root.palette.blue.200`, `root.palette.blue[200]`, `root-palette-blue-200`          |                                                              | `dsInternalPrimitive.color.blue.200`   |
| `root.palette.blue.300`, `root.palette.blue[300]`, `root-palette-blue-300`          |                                                              | `dsInternalPrimitive.color.blue.300`   |
| `root.palette.blue.400`, `root.palette.blue[400]`, `root-palette-blue-400`          |                                                              | `dsInternalPrimitive.color.blue.400`   |
| `root.palette.blue.500`, `root.palette.blue[500]`, `root-palette-blue-500`          | No semantic meaning (maybe `color.background.infoDark`?)     | `dsInternalPrimitive.color.blue.500`   |
| `root.palette.magenta.100`, `root.palette.magenta[100]`, `root-palette-magenta-100` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.100`   |
| `root.palette.magenta.200`, `root.palette.magenta[200]`, `root-palette-magenta-200` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.200`   |
| `root.palette.magenta.300`, `root.palette.magenta[300]`, `root-palette-magenta-300` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.300`   |
| `root.palette.magenta.400`, `root.palette.magenta[400]`, `root-palette-magenta-400` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.400`   |
| `root.palette.magenta.500`, `root.palette.magenta[500]`, `root-palette-magenta-500` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.500`   |

````md
| `root.palette.*` tokens used as text or icon `color`                                | Safe replacement                                                           | Current value (NOT USE IT)             |
| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------- |
| `root.palette.white`, `root-palette-white`                                          | `color.text.inverted`                                                      |                                        |
| `root.palette.ivory`, `root-palette-ivory`                                          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.50`    |
| `root.palette.transparent`, `root-palette-transparent`                              | `transparent`                                                              |                                        |
| `root.palette.gray.100`, `root.palette.gray[100]`, `root-palette-gray-100`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.100`   |
| `root.palette.gray.200`, `root.palette.gray[200]`, `root-palette-gray-200`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.200`   |
| `root.palette.gray.300`, `root.palette.gray[300]`, `root-palette-gray-300`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.300`   |
| `root.palette.gray.400`, `root.palette.gray[400]`, `root-palette-gray-400`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.400`   |
| `root.palette.gray.500`, `root.palette.gray[500]`, `root-palette-gray-500`          | `color.text.tertiary` or `color.text.placeholder` or `color.icon.disabled` |                                        |
| `root.palette.gray.600`, `root.palette.gray[600]`, `root-palette-gray-600`          | `color.text.primary`                                                       |                                        |
| `root.palette.teal.100`, `root.palette.teal[100]`, `root-palette-teal-100`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.100`   |
| `root.palette.teal.200`, `root.palette.teal[200]`, `root-palette-teal-200`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.200`   |
| `root.palette.teal.300`, `root.palette.teal[300]`, `root-palette-teal-300`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.300`   |
| `root.palette.teal.400`, `root.palette.teal[400]`, `root-palette-teal-400`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.400`   |
| `root.palette.teal.500`, `root.palette.teal[500]`, `root-palette-teal-500`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.500`   |
| `root.palette.green.100`, `root.palette.green[100]`, `root-palette-green-100`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.100`   |
| `root.palette.green.200`, `root.palette.green[200]`, `root-palette-green-200`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.200`   |
| `root.palette.green.300`, `root.palette.green[300]`, `root-palette-green-300`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.300`   |
| `root.palette.green.400`, `root.palette.green[400]`, `root-palette-green-400`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.400`   |
| `root.palette.green.500`, `root.palette.green[500]`, `root-palette-green-500`       | No semantic meaning (maybe `color.text.positive`?)                         | `dsInternalPrimitive.color.teal.500`   |
| `root.palette.yellow.100`, `root.palette.yellow[100]`, `root-palette-yellow-100`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.100` |
| `root.palette.yellow.200`, `root.palette.yellow[200]`, `root-palette-yellow-200`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.200` |
| `root.palette.yellow.300`, `root.palette.yellow[300]`, `root-palette-yellow-300`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.300` |
| `root.palette.yellow.400`, `root.palette.yellow[400]`, `root-palette-yellow-400`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.400` |
| `root.palette.yellow.500`, `root.palette.yellow[500]`, `root-palette-yellow-500`    | No semantic meaning (maybe `color.text.warning`?)                          | `dsInternalPrimitive.color.yellow.500` |
| `root.palette.red.100`, `root.palette.red[100]`, `root-palette-red-100`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.100`    |
| `root.palette.red.200`, `root.palette.red[200]`, `root-palette-red-200`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.200`    |
| `root.palette.red.300`, `root.palette.red[300]`, `root-palette-red-300`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.300`    |
| `root.palette.red.400`, `root.palette.red[400]`, `root-palette-red-400`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.400`    |
| `root.palette.red.500`, `root.palette.red[500]`, `root-palette-red-500`             | No semantic meaning (maybe `color.text.critical`?)                         | `dsInternalPrimitive.color.red.500`    |
| `root.palette.blue.100`, `root.palette.blue[100]`, `root-palette-blue-100`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.100`   |
| `root.palette.blue.200`, `root.palette.blue[200]`, `root-palette-blue-200`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.200`   |
| `root.palette.blue.300`, `root.palette.blue[300]`, `root-palette-blue-300`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.300`   |
| `root.palette.blue.400`, `root.palette.blue[400]`, `root-palette-blue-400`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.400`   |
| `root.palette.blue.500`, `root.palette.blue[500]`, `root-palette-blue-500`          | No semantic meaning (maybe `color.text.info`?)                             | `dsInternalPrimitive.color.blue.500`   |
| `root.palette.magenta.100`, `root.palette.magenta[100]`, `root-palette-magenta-100` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.100`   |
| `root.palette.magenta.200`, `root.palette.magenta[200]`, `root-palette-magenta-200` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.200`   |
| `root.palette.magenta.300`, `root.palette.magenta[300]`, `root-palette-magenta-300` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.300`   |
| `root.palette.magenta.400`, `root.palette.magenta[400]`, `root-palette-magenta-400` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.400`   |
| `root.palette.magenta.500`, `root.palette.magenta[500]`, `root-palette-magenta-500` | `color.text.accentDark`                                                    |                                        |

```md
| `root.palette.*` tokens used as `border`                                            | Safe replacement                                  | Current value (NOT USE IT)             |
| ----------------------------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------- |
| `root.palette.white`, `root-palette-white`                                          | No semantic meaning                               | `dsInternalPrimitive.color.grey.0`     |
| `root.palette.ivory`, `root-palette-ivory`                                          | `color.border.tertiary`                           |                                        |
| `root.palette.transparent`, `root-palette-transparent`                              | No semantic meaning                               | `transparent`                          |
| `root.palette.gray.100`, `root.palette.gray[100]`, `root-palette-gray-100`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.100`   |
| `root.palette.gray.200`, `root.palette.gray[200]`, `root-palette-gray-200`          | `color.border.primary` or `color.border.disabled` |                                        |
| `root.palette.gray.300`, `root.palette.gray[300]`, `root-palette-gray-300`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.300`   |
| `root.palette.gray.400`, `root.palette.gray[400]`, `root-palette-gray-400`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.400`   |
| `root.palette.gray.500`, `root.palette.gray[500]`, `root-palette-gray-500`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.500`   |
| `root.palette.gray.600`, `root.palette.gray[600]`, `root-palette-gray-600`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.600`   |
| `root.palette.teal.100`, `root.palette.teal[100]`, `root-palette-teal-100`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.100`   |
| `root.palette.teal.200`, `root.palette.teal[200]`, `root-palette-teal-200`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.200`   |
| `root.palette.teal.300`, `root.palette.teal[300]`, `root-palette-teal-300`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.300`   |
| `root.palette.teal.400`, `root.palette.teal[400]`, `root-palette-teal-400`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.400`   |
| `root.palette.teal.500`, `root.palette.teal[500]`, `root-palette-teal-500`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.500`   |
| `root.palette.green.100`, `root.palette.green[100]`, `root-palette-green-100`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.100`   |
| `root.palette.green.200`, `root.palette.green[200]`, `root-palette-green-200`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.200`   |
| `root.palette.green.300`, `root.palette.green[300]`, `root-palette-green-300`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.300`   |
| `root.palette.green.400`, `root.palette.green[400]`, `root-palette-green-400`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.400`   |
| `root.palette.green.500`, `root.palette.green[500]`, `root-palette-green-500`       | (maybe `color.border.positive`?)                  | `dsInternalPrimitive.color.teal.500`   |
| `root.palette.yellow.100`, `root.palette.yellow[100]`, `root-palette-yellow-100`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.100` |
| `root.palette.yellow.200`, `root.palette.yellow[200]`, `root-palette-yellow-200`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.200` |
| `root.palette.yellow.300`, `root.palette.yellow[300]`, `root-palette-yellow-300`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.300` |
| `root.palette.yellow.400`, `root.palette.yellow[400]`, `root-palette-yellow-400`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.400` |
| `root.palette.yellow.500`, `root.palette.yellow[500]`, `root-palette-yellow-500`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.500` |
| `root.palette.red.100`, `root.palette.red[100]`, `root-palette-red-100`             | No semantic meaning                               | `dsInternalPrimitive.color.red.100`    |
| `root.palette.red.200`, `root.palette.red[200]`, `root-palette-red-200`             | No semantic meaning                               | `dsInternalPrimitive.color.red.200`    |
| `root.palette.red.300`, `root.palette.red[300]`, `root-palette-red-300`             | No semantic meaning                               | `dsInternalPrimitive.color.red.300`    |
| `root.palette.red.400`, `root.palette.red[400]`, `root-palette-red-400`             | No semantic meaning                               | `dsInternalPrimitive.color.red.400`    |
| `root.palette.red.500`, `root.palette.red[500]`, `root-palette-red-500`             | (maybe `color.border.critical`?)                  | `dsInternalPrimitive.color.red.500`    |
| `root.palette.blue.100`, `root.palette.blue[100]`, `root-palette-blue-100`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.100`   |
| `root.palette.blue.200`, `root.palette.blue[200]`, `root-palette-blue-200`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.200`   |
| `root.palette.blue.300`, `root.palette.blue[300]`, `root-palette-blue-300`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.300`   |
| `root.palette.blue.400`, `root.palette.blue[400]`, `root-palette-blue-400`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.400`   |
| `root.palette.blue.500`, `root.palette.blue[500]`, `root-palette-blue-500`          | `color.border.focus`                              |                                        |
| `root.palette.magenta.100`, `root.palette.magenta[100]`, `root-palette-magenta-100` | No semantic meaning                               | `dsInternalPrimitive.color.pink.100`   |
| `root.palette.magenta.200`, `root.palette.magenta[200]`, `root-palette-magenta-200` | No semantic meaning                               | `dsInternalPrimitive.color.pink.200`   |
| `root.palette.magenta.300`, `root.palette.magenta[300]`, `root-palette-magenta-300` | No semantic meaning                               | `dsInternalPrimitive.color.pink.300`   |
| `root.palette.magenta.400`, `root.palette.magenta[400]`, `root-palette-magenta-400` | `color.border.brand`                              |                                        |
| `root.palette.magenta.500`, `root.palette.magenta[500]`, `root-palette-magenta-500` | No semantic meaning                               | `dsInternalPrimitive.color.pink.500`   |

If you think it's impossible to replace the colors because of subsequent UI degradations, please reach out the DS team in Slack's #design-system-cleanup channel.
```
````
`````

## `<Text/>`/`<Heading/>`/`<Icon/>`/`<TextInline/>`'s `color`

Migration type: 🤔 thoughtful

The `color` must be replaced with their Tokyo UI semantic counterparts. Most of them require deciding which semantic tokens fits the usage.

```md
| `color`       | Safe replacement                        | Current value (NOT USE IT)             |
| ------------- | --------------------------------------- | -------------------------------------- |
| `white`       | `inverted`                              |                                        |
| `gray-100`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.100`   |
| `gray-200`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.200`   |
| `gray-300`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.300`   |
| `gray-400`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.400`   |
| `gray-500`    | `tertiary` or `placeholder`             |                                        |
| `gray-600`    | `secondary`                             |                                        |
| `teal-100`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.100`   |
| `teal-200`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.200`   |
| `teal-300`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.300`   |
| `teal-400`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.400`   |
| `teal-500`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.500`   |
| `green-100`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.100`   |
| `green-200`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.200`   |
| `green-300`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.300`   |
| `green-400`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.400`   |
| `green-500`   | No semantic meaning (maybe `positive`?) | `dsInternalPrimitive.color.teal.500`   |
| `yellow-100`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.100` |
| `yellow-200`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.200` |
| `yellow-300`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.300` |
| `yellow-400`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.400` |
| `yellow-500`  | No semantic meaning (maybe `warning`?)  | `dsInternalPrimitive.color.yellow.500` |
| `red-100`     | No semantic meaning                     | `dsInternalPrimitive.color.red.100`    |
| `red-200`     | No semantic meaning                     | `dsInternalPrimitive.color.red.200`    |
| `red-300`     | No semantic meaning                     | `dsInternalPrimitive.color.red.300`    |
| `red-400`     | No semantic meaning                     | `dsInternalPrimitive.color.red.400`    |
| `red-500`     | No semantic meaning (maybe `critical`?) | `dsInternalPrimitive.color.red.500`    |
| `blue-100`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.100`   |
| `blue-200`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.200`   |
| `blue-300`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.300`   |
| `blue-400`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.400`   |
| `blue-500`    | No semantic meaning (maybe `info`?)     | `dsInternalPrimitive.color.blue.500`   |
| `magenta-100` | No semantic meaning                     | `dsInternalPrimitive.color.pink.100`   |
| `magenta-200` | No semantic meaning                     | `dsInternalPrimitive.color.pink.200`   |
| `magenta-300` | No semantic meaning                     | `dsInternalPrimitive.color.pink.300`   |
| `magenta-400` | No semantic meaning                     | `dsInternalPrimitive.color.pink.400`   |
| `magenta-500` | `accentDark`                            |                                        |
```

## RebrandAlert `maybeBrokenLayout`

Migration type: 🤔 thoughtful

Remove `maybeBrokenLayout` and add `fullPageWidth` if the RebrandAlert is rendered with full page width. See [the full explanation on this Slack message](https://preply.slack.com/archives/C024EAEHP6V/p1702989181325429).

Usages: ~59 usages.

# For the Design System team

## `root.text.weight.*` tokens

Migration type: 🧘 safe

Usages: ~50 usages combined

```md
| Token                                          | Safe replacement                |
| ---------------------------------------------- | ------------------------------- |
| `root.text.weight.400`, `root-text-weight-400` | `text.weight.normal.fontWeight` |
| `root.text.weight.500`, `root-text-weight-500` | `text.weight.medium.fontWeight` |
| `root.text.weight.700`, `root-text-weight-700` | `text.weight.bold.fontWeight`   |
```

## `root.text.size.*` tokens

Migration type: 🧘 safe

Usages: ~70 usages combined

```md
| Token                                        | Safe replacement                      |
| -------------------------------------------- | ------------------------------------- |
| `root.text.size.70`, `root-text-size-70`     | `text.caption.regular.body.fontSize`  |
| `root.text.size.80`, `root-text-size-80`     | `text.caption.regular.body.fontSize`  |
| `root.text.size.90`, `root-text-size-90`     | `text.small.regular.body.fontSize`    |
| `root.text.size.100`, `root-text-size-100`   | `text.small.regular.body.fontSize`    |
| `root.text.size.200`, `root-text-size-200`   | `text.small.regular.body.fontSize`    |
| `root.text.size.300`, `root-text-size-300`   | `text.large.regular.body.fontSize`    |
| `root.text.size.400`, `root-text-size-400`   | `text.large.regular.body.fontSize`    |
| `root.text.size.500`, `root-text-size-500`   | `text.large.regular.body.fontSize`    |
| `root.text.size.600`, `root-text-size-600`   | `text.heading.medium.fontSize`        |
| `root.text.size.800`, `root-text-size-800`   | `text.variant.large.regular.fontSize` |
| `root.text.size.1000`, `root-text-size-1000` | `text.heading.large.fontSize`         |
| `root.text.size.1200`, `root-text-size-1200` | `text.heading.large.fontSize`         |
| `root.text.size.1800`, `root-text-size-1800` | `text.heading.extraLarge.fontSize`    |
| `root.text.size.2400`, `root-text-size-2400` | `text.heading.huge.fontSize`          |
```

## `content.*.color` tokens

Migration type: 🧘 safe

Usages: ~20 usages combined

```md
| Token                                                | Safe replacement         |
| ---------------------------------------------------- | ------------------------ |
| `content.primary.color`, `content-primary-color`     | `color.text.primary`     |
| `content.secondary.color`, `content-secondary-color` | `color.text.secondary`   |
| `content.positive.color`, `content-positive-color`   | `color.text.positive`    |
| `content.error.color`, `content-error-color`         | `color.text.critical`    |
| `content.tertiary.color`, `content-tertiary-color`   | `color.text.tertiary`    |
| `content.warning.color`, `content-warning-color`     | `color.text.warning`     |
| `content.critical.color`, `content-critical-color`   | `color.text.critical`    |
| `content.info.color`, `content-info-color`           | `color.text.info`        |
| `content.inverted.color`, `content-inverted-color`   | `color.text.inverted`    |
| `content.accent.color`, `content-accent-color`       | `color.text.accentDark`  |
| `content.disabled.color`, `content-disabled-color`   | `color.text.placeholder` |
```

## `root.size.*` tokens

Migration type: 🧘 safe

Usages: ~50 usages combined

```md
| Token            | Safe replacement |
| ---------------- | ---------------- |
| `root.size.none` | `sizing.0`       |
| `root.size.25`   | `sizing.2`       |
| `root.size.50`   | `sizing.4`       |
| `root.size.100`  | `sizing.8`       |
| `root.size.150`  | `sizing.12`      |
| `root.size.200`  | `sizing.16`      |
| `root.size.300`  | `sizing.24`      |
| `root.size.400`  | `sizing.32`      |
| `root.size.500`  | `sizing.48`      |
| `root.size.600`  | `sizing.64`      |
| `root.size.800`  | `sizing.96`      |
| `root.size.1000` | `sizing.160`     |
```

## `root.size.*` tokens

Migration type: 🧘 safe

Usages: ~1000 usages combined

```md
| Token             | Safe replacement |
| ----------------- | ---------------- |
| `root.space.none` | `spacing.0`      |
| `root.space.3xs`  | `spacing.4`      |
| `root.space.2xs`  | `spacing.8`      |
| `root.space.xs`   | `spacing.16`     |
| `root.space.s`    | `spacing.24`     |
| `root.space.m`    | `spacing.32`     |
| `root.space.l`    | `spacing.64`     |
| `root.space.xl`   | `spacing.96`     |
```

## `root.radius.*` tokens

Migration type: 🧘 safe

Usages: ~110 usages combined

```md
| Token              | Safe replacement |
| ------------------ | ---------------- |
| `root.radius.none` | `radius.0`       |
| `root.radius.xs`   | `radius.2`       |
| `root.radius.s`    | `radius.4`       |
| `root.radius.l`    | `radius.16`      |
```

## Font family tokens

Migration type: 🧘 safe

The font families are now managed in a centered way for all Tokyo UI contents.

```md
| Token                                   | Safe replacement                                   | How spread it is in the Product |
| --------------------------------------- | -------------------------------------------------- | ------------------------------- |
| `button.medium.fontFamily`              | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `link.default.fontFamily`               | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `root.heading.base.fontFamily`          | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `root.text.base.fontFamily`             | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.default.regular.body.fontFamily`  | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.default.regular.body.fontFamily`  | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.default.semibold.body.fontFamily` | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.default.semibold.body.fontFamily` | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.heading.huge.fontFamily`          | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.heading.medium.fontFamily`        | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.heading.small.fontFamily`         | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.large.regular.body.fontFamily`    | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.small.regular.body.fontFamily`    | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.small.regular.body.fontFamily`    | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.small.semibold.body.fontFamily`   | Simply remove it and the CSS property that uses it | < 10 usages                     |
| `text.heading.massive.fontFamily`       | Simply remove it and the CSS property that uses it | 0 usages                        |
| `text.heading.extraLarge.fontFamily`    | Simply remove it and the CSS property that uses it | 0 usages                        |
| `text.heading.large.fontFamily`         | Simply remove it and the CSS property that uses it | 0 usages                        |
| `text.large.semibold.body.fontFamily`   | Simply remove it and the CSS property that uses it | 0 usages                        |
| `text.caption.semibold.body.fontFamily` | Simply remove it and the CSS property that uses it | 0 usages                        |
| `text.caption.regular.body.fontFamily`  | Simply remove it and the CSS property that uses it | 0 usages                        |
| `link.large.fontFamily`                 | Simply remove it and the CSS property that uses it | 0 usages                        |
| `link.small.fontFamily`                 | Simply remove it and the CSS property that uses it | 0 usages                        |
| `button.large.fontFamily`               | Simply remove it and the CSS property that uses it | 0 usages                        |
| `button.small.fontFamily`               | Simply remove it and the CSS property that uses it | 0 usages                        |
| `text.fieldAdditionalText.fontFamily`   | Simply remove it and the CSS property that uses it | 0 usages                        |
| `button.default.fontFamily`             | Simply remove it and the CSS property that uses it | 0 usages                        |
| `heading.variant.massive.fontFamily`    | Simply remove it and the CSS property that uses it | 0 usages                        |
| `heading.variant.huge.fontFamily`       | Simply remove it and the CSS property that uses it | 0 usages                        |
| `heading.variant.extraLarge.fontFamily` | Simply remove it and the CSS property that uses it | 0 usages                        |
| `heading.variant.large.fontFamily`      | Simply remove it and the CSS property that uses it | 0 usages                        |
| `heading.variant.medium.fontFamily`     | Simply remove it and the CSS property that uses it | 0 usages                        |
| `heading.variant.small.fontFamily`      | Simply remove it and the CSS property that uses it | 0 usages                        |
```

## Font weight tokens

Migration type: 🧘 safe

```md
| Token                        | Safe replacement                | How spread it is in the Product |
| ---------------------------- | ------------------------------- | ------------------------------- |
| `text.weight.400.fontWeight` | `text.weight.normal.fontWeight` | ~10 usages                      |
| `text.weight.500.fontWeight` | `text.weight.medium.fontWeight` | ~20 usages                      |
| `text.weight.700.fontWeight` | `text.weight.bold.fontWeight`   | ~30 usages                      |
```

## Text variants (and corresponding tokens)

Migration type: 🧘 safe

Usages: TODO:

```md
| `<Text/>` `variant` | Safe replacement        |
| ------------------- | ----------------------- |
| xs                  | caption-regular         |
| xs-medium           | caption-semibold        |
| s                   | small-regular           |
| s-italic            | small-regular-italic    |
| s-medium            | small-semibold          |
| s-medium-italic     | small-semibold-italic   |
| s-bold              | small-semibold          |
| s-bold-italic       | small-semibold-italic   |
| m                   | default-regular         |
| m-italic            | default-regular-italic  |
| m-medium            | default-semibold        |
| m-medium-italic     | default-semibold-italic |
| m-bold              | default-semibold        |
| m-bold-italic       | default-semibold-italic |
| l                   | large-regular           |
| l-italic            | large-regular-italic    |
| l-medium            | large-semibold          |
| l-medium-italic     | large-semibold-italic   |
| xl                  | large-regular           |
| xl-italic           | large-regular-italic    |
| xl-medium           | large-semibold          |
| xl-medium-italic    | large-semibold-italic   |
```

## Text size

Migration type: 🧘 safe

Usages: TODO:

```md
| `<Text/>` `size` | Safe replacement  |
| ---------------- | ----------------- |
| `s`              | `small-regular`   |
| `m`              | `default-regular` |
| `l`              | `large-regular`   |
| `2xs`            | `caption-regular` |
| `xs`             | `caption-regular` |
| `xl`             | `large-regular`   |
```

## Avatar size

Migration type: 🧘 safe

````md
| `<Avatar/>` `size` | Safe replacement | How spread it is in the Product |
| ------------------ | ---------------- | ------------------------------- |
| 2xs                | 24               | 1 usage                         |
| xs                 | 32               | 1 usage                         |
| s                  | 48               | 1 usage                         |
| m                  | 64               | 5 usages                        |
| l                  | 96               | 5 usages                        |
| xl                 | 160              | 5 usages                        |

```md
| `<AvatarWithStatus/>` `size` | Safe replacement | How spread it is in the Product |
| ---------------------------- | ---------------- | ------------------------------- |
| m                            | 64               | 1 usage                         |
| xl                           | 160              | 1 usage                         |
```
````

## `<Text/>`/`<Icon/>`/`<Heading/>`/`<TextInline/>` `accent`

Migration type: 🧘 safe

```md
| `accent` | Safe replacement | How spread it is in the Product |
| -------- | ---------------- | ------------------------------- |
| disabled | placeholder      | 2 usages                        |
| error    | critical         | ~20 usages                      |
| accent   | accentDark       | ~35 usages                      |
```

## `<TextInline/>` `italic`

Migration type: 🧘 safe

```md
| `<TextInline/>` `italic` | Safe replacement               | How spread it is in the Product |
| ------------------------ | ------------------------------ | ------------------------------- |
| true/false               | Just remove it, it was useless | 1 usage                         |
```

## `<Heading/>` `large`

Migration type: 🧘 safe

```md
| `<Heading/>` `large` | Safe replacement               | How spread it is in the Product |
| -------------------- | ------------------------------ | ------------------------------- |
| true/false           | Just remove it, it was useless | 1 usage                         |
```

## `<Heading/>` `level`

Migration type: 🧘 safe

Replace Heading `level` with `variant` and the following values. You can use `tag` to set the HTML tag, instead.

```md
| `<Heading/>` `level` | Safe replacement | How spread it is in the Product |
| -------------------- | ---------------- | ------------------------------- |
| `h1`                 | `huge`           | TODO:                           |
| `h2`                 | `extraLarge`     | TODO:                           |
| `h3`                 | `large`          | TODO:                           |
| `h4`                 | `medium`         | TODO:                           |
| `h5`                 | `small`          | TODO:                           |
```

## `heading.level.*` tokens

Migration type: 🧘 safe

```md
| Token                                | Safe replacement                     | How spread it is in the Product |
| ------------------------------------ | ------------------------------------ | ------------------------------- |
| `heading.level.h1.fontSize`          | `text.heading.huge.fontSize`         | TODO:                           |
| `heading.level.h2.fontSize`          | `text.heading.extraLarge.fontSize`   | TODO:                           |
| `heading.level.h3.fontSize`          | `text.heading.large.fontSize`        | TODO:                           |
| `heading.level.h4.fontSize`          | `text.heading.medium.fontSize`       | TODO:                           |
| `heading.level.h5.fontSize`          | `text.heading.small.fontSize`        | TODO:                           |
| `heading.level.h1.normal.fontSize`   | `text.heading.huge.fontSize`         | TODO:                           |
| `heading.level.h1.normal.fontWeight` | `text.heading.huge.fontWeight`       | TODO:                           |
| `heading.level.h1.normal.lineHeight` | `text.heading.huge.lineHeight`       | TODO:                           |
| `heading.level.h2.normal.fontSize`   | `text.heading.extraLarge.fontSize`   | TODO:                           |
| `heading.level.h2.normal.fontWeight` | `text.heading.extraLarge.fontWeight` | TODO:                           |
| `heading.level.h2.normal.lineHeight` | `text.heading.extraLarge.lineHeight` | TODO:                           |
| `heading.level.h3.normal.fontSize`   | `text.heading.large.fontSize`        | TODO:                           |
| `heading.level.h3.normal.fontWeight` | `text.heading.large.fontWeight`      | TODO:                           |
| `heading.level.h3.normal.lineHeight` | `text.heading.large.lineHeight`      | TODO:                           |
| `heading.level.h4.normal.fontSize`   | `text.heading.medium.fontSize`       | TODO:                           |
| `heading.level.h4.normal.fontWeight` | `text.heading.medium.fontWeight`     | TODO:                           |
| `heading.level.h4.normal.lineHeight` | `text.heading.medium.lineHeight`     | TODO:                           |
| `heading.level.h5.normal.fontSize`   | `text.heading.small.fontSize`        | TODO:                           |
| `heading.level.h5.normal.fontWeight` | `text.heading.small.fontWeight`      | TODO:                           |
| `heading.level.h5.normal.lineHeight` | `text.heading.small.lineHeight`      | TODO:                           |
| `heading.level.h1.large.fontSize`    | `text.heading.huge.fontSize`         | TODO:                           |
| `heading.level.h1.large.fontWeight`  | `text.heading.huge.fontWeight`       | TODO:                           |
| `heading.level.h1.large.lineHeight`  | `text.heading.huge.lineHeight`       | TODO:                           |
| `heading.level.h2.large.fontSize`    | `text.heading.extraLarge.fontSize`   | TODO:                           |
| `heading.level.h2.large.fontWeight`  | `text.heading.extraLarge.fontWeight` | TODO:                           |
| `heading.level.h2.large.lineHeight`  | `text.heading.extraLarge.lineHeight` | TODO:                           |
| `heading.level.h3.large.fontSize`    | `text.heading.large.fontSize`        | TODO:                           |
| `heading.level.h3.large.fontWeight`  | `text.heading.large.fontWeight`      | TODO:                           |
| `heading.level.h3.large.lineHeight`  | `text.heading.large.lineHeight`      | TODO:                           |
| `heading.level.h4.large.fontSize`    | `text.heading.medium.fontSize`       | TODO:                           |
| `heading.level.h4.large.fontWeight`  | `text.heading.medium.fontWeight`     | TODO:                           |
| `heading.level.h4.large.lineHeight`  | `text.heading.medium.lineHeight`     | TODO:                           |
| `heading.level.h5.large.fontSize`    | `text.heading.small.fontSize`        | TODO:                           |
| `heading.level.h5.large.fontWeight`  | `text.heading.small.fontWeight`      | TODO:                           |
| `heading.level.h5.large.lineHeight`  | `text.heading.small.lineHeight`      | TODO:                           |
```

## `<LayoutFlex/>` `padding` /`<LayoutFlex/>` `gap` / `<LayoutGrid/>` `padding`/`<LayoutGrid/>` `gap` /`<Box/>` `padding`

Migration type: 🧘 safe

Usages: countless usages (also given responsive usages)

```md
| `padding` | Safe replacement |
| --------- | ---------------- |
| none      | 0                |
| 3xs       | 4                |
| 2xs       | 8                |
| xs        | 16               |
| s         | 24               |
| m         | 32               |
| l         | 64               |
| xl        | 96               |
```

## `action.size.*` tokens

Migration type: 🧘 safe

```md
| Token                             | Safe replacement                       | How spread it is in the Product |
| --------------------------------- | -------------------------------------- | ------------------------------- |
| `action.size.s.height`            | `action.size.small.height`             | 0 usages                        |
| `action.size.s.verticalPadding`   | `action.size.small.verticalPadding`    | 0 usages                        |
| `action.size.s.horizontalPadding` | `action.size.small.horizontalPadding`  | 0 usages                        |
| `action.size.s.fontSize`          | `button.small.fontSize`                | 0 usages                        |
| `action.size.s.letterSpacing`     | `button.small.letterSpacing`           | 0 usages                        |
| `action.size.m.height`            | `action.size.medium.height`            | 0 usages                        |
| `action.size.m.verticalPadding`   | `action.size.medium.verticalPadding`   | 0 usages                        |
| `action.size.m.horizontalPadding` | `action.size.medium.horizontalPadding` | 0 usages                        |
| `action.size.m.fontSize`          | `button.medium.fontSize`               | 6 usages                        |
| `action.size.m.letterSpacing`     | `button.medium.letterSpacing`          | 3 usages                        |
| `action.size.l.height`            | `action.size.large.height`             | 0 usages                        |
| `action.size.l.verticalPadding`   | `action.size.large.verticalPadding`    | 1 usage                         |
| `action.size.l.horizontalPadding` | `action.size.large.horizontalPadding`  | 0 usages                        |
| `action.size.l.fontSize`          | `button.large.fontSize`                | 0 usages                        |
| `action.size.l.letterSpacing`     | `button.large.letterSpacing`           | 0 usages                        |
```

## `action.variant.plain` tokens

Migration type: 🧘 safe

```md
| Token                                     | Safe replacement                                | How spread it is in the Product |
| ----------------------------------------- | ----------------------------------------------- | ------------------------------- |
| `action.variant.plain.textDecoration`     | `action.variant.secondary.textDecoration`       | uncounted usages yet            |
| `action.variant.plain.color`              | `action.variant.secondary.color`                | uncounted usages yet            |
| `action.variant.plain.bgColor`            | `action.variant.secondary.bgColor`              | uncounted usages yet            |
| `action.variant.plain.borderColor`        | `action.variant.secondary.borderColor`          | uncounted usages yet            |
| `action.variant.plain.hover.col`          | `action.variant.secondary.hover.color`          | uncounted usages yet            |
| `action.variant.plain.hover.bgCol`        | `action.variant.secondary.hover.bgColor`        | uncounted usages yet            |
| `action.variant.plain.hover.borderCol`    | `action.variant.secondary.hover.borderColor`    | uncounted usages yet            |
| `action.variant.plain.active.col`         | `action.variant.secondary.active.color`         | uncounted usages yet            |
| `action.variant.plain.active.bgCol`       | `action.variant.secondary.active.bgColor`       | uncounted usages yet            |
| `action.variant.plain.active.borderCol`   | `action.variant.secondary.active.borderColor`   | uncounted usages yet            |
| `action.variant.plain.disabled.col`       | `action.variant.secondary.disabled.color`       | uncounted usages yet            |
| `action.variant.plain.disabled.bgCol`     | `action.variant.secondary.disabled.bgColor`     | uncounted usages yet            |
| `action.variant.plain.disabled.borderCol` | `action.variant.secondary.disabled.borderColor` | uncounted usages yet            |
```

## `Button` `plain` variant

Migration type: 🧘 safe

```md
| Token   | Safe replacement | How spread it is in the Product |
| ------- | ---------------- | ------------------------------- |
| `plain` | `secondary`      | 2 usages                        |
```

## `action.variant.dangerous` tokens

Migration type: 🧘 safe

```md
| Token                                         | Safe replacement                               | How spread it is in the Product |
| --------------------------------------------- | ---------------------------------------------- | ------------------------------- |
| `action.variant.dangerous.textDecoration`     | `action.variant.critical.textDecoration`       | uncounted usages yet            |
| `action.variant.dangerous.color`              | `action.variant.critical.color`                | uncounted usages yet            |
| `action.variant.dangerous.bgColor`            | `action.variant.critical.bgColor`              | uncounted usages yet            |
| `action.variant.dangerous.borderColor`        | `action.variant.critical.borderColor`          | uncounted usages yet            |
| `action.variant.dangerous.hover.col`          | `action.variant.critical.hover.color`          | uncounted usages yet            |
| `action.variant.dangerous.hover.bgCol`        | `action.variant.critical.hover.bgColor`        | uncounted usages yet            |
| `action.variant.dangerous.hover.borderCol`    | `action.variant.critical.hover.borderColor`    | uncounted usages yet            |
| `action.variant.dangerous.active.col`         | `action.variant.critical.active.color`         | uncounted usages yet            |
| `action.variant.dangerous.active.bgCol`       | `action.variant.critical.active.bgColor`       | uncounted usages yet            |
| `action.variant.dangerous.active.borderCol`   | `action.variant.critical.active.borderColor`   | uncounted usages yet            |
| `action.variant.dangerous.disabled.col`       | `action.variant.critical.disabled.color`       | uncounted usages yet            |
| `action.variant.dangerous.disabled.bgCol`     | `action.variant.critical.disabled.bgColor`     | uncounted usages yet            |
| `action.variant.dangerous.disabled.borderCol` | `action.variant.critical.disabled.borderColor` | uncounted usages yet            |
```

## `Button` `dangerous` variant

Migration type: 🧘 safe

```md
| Token       | Safe replacement | How spread it is in the Product |
| ----------- | ---------------- | ------------------------------- |
| `dangerous` | `critical`       | 17 usages                       |

Migration type: 🧘 safe
```

## `<Button/>` / `<IconButton/>` `size`

Migration type: 🧘 safe

```md
| `size` | Safe replacement | How spread it is in the Product |
| ------ | ---------------- | ------------------------------- |
| s      | small            | 7 usages                        |
| m      | medium           | 100 usages                      |
| l      | large            | 40 usages                       |
```

## `<Box/>` `radius`

Migration type: 🧘 safe

```md
| `radius` | Safe replacement | How spread it is in the Product |
| -------- | ---------------- | ------------------------------- |
| none     | 0                | 8 usages                        |
| m        | 16               | 0 usages                        |
| l        | 16               | 0 usages                        |
```

## `icon.size.*` tokens

Migration type: 🧘 safe

```md
| `size`               | Safe replacement | How spread it is in the Product |
| -------------------- | ---------------- | ------------------------------- |
| `icon.size.s.size`   | `sizing.24`      | Uncounted usages yet            |
| `icon.size.m.size`   | `sizing.32`      | Uncounted usages yet            |
| `icon.size.2xs.size` | `sizing.12`      | Uncounted usages yet            |
| `icon.size.xs.size`  | `sizing.16`      | Uncounted usages yet            |
```

## `<Icon/>` `size`

Migration type: 🧘 safe

```md
| `size` | Safe replacement              | How spread it is in the Product |
| ------ | ----------------------------- | ------------------------------- |
| `s`    | `24`                          | Uncounted usages yet            |
| `m`    | `32`                          | Uncounted usages yet            |
| `2xs`  | No safe replacement, use `16` | Uncounted usages yet            |
| `xs`   | `16`                          | Uncounted usages yet            |
```

## `<PreplyLogo/>` `variant` monochrome

Migration type: 🧘 safe (if also `rebranded` prop ia passed)

```md
| ``variant` | Safe replacement                       | How spread it is in the Product |
| ---------- | -------------------------------------- | ------------------------------- |
| monochrome | Remove it, all variants are monochrome | 3 usages                        |
```

## `<PreplyLogo/>` `rebranded` monochrome

```md
| ``rebranded` | Safe replacement                      | How spread it is in the Product |
| ------------ | ------------------------------------- | ------------------------------- |
| true/false   | Remove it, all variants are rebranded | Hard to count                   |
```

## Other tokens/variables (apart from the ones related to the deprecations above)

Migration type: 🧘 safe

```md
| Token                                                        | Safe replacement                                                                                                                                                                   | How spread it is in the Product |
| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| `panel.base.bgColor`, `@panel-base-bgColor`                  | `color.background.primary`, `@color-background-primary`                                                                                                                            | ~10 usages                      |
| `panel.base.borderRadius`, `@panel-base-borderRadius`        | `radius.16`, `@radius-16`                                                                                                                                                          | 3 usages                        |
| `PANEL_PADDING`                                              | `[sizing.16, sizing.24, sizing.32, sizing.64]`                                                                                                                                     | 2 usages                        |
| `PANEL_PADDING_DEFAULT`                                      | `sizing.24`                                                                                                                                                                        | 2 usages                        |
| `text.size.s.fontSize`, `text-size-s-fontSize`               | `text.small.regular.body.fontSize`                                                                                                                                                 | ~ 20 usages                     |
| `text.size.m.fontSize`, `text-size-m-fontSize`               | `text.default.regular.body.fontSize`                                                                                                                                               | ~ 50 usages                     |
| `text.size.l.fontSize`, `text-size-l-fontSize`               | `text.large.regular.body.fontSize`                                                                                                                                                 | ~ 20 usages                     |
| `text.size.2xs.fontSize`, `text-size-2xs-fontSize`           | `text.caption.regular.body.fontSize`                                                                                                                                               | ~ 2 usages                      |
| `text.size.xs.fontSize`, `text-size-xs-fontSize`             | `text.caption.regular.body.fontSize`                                                                                                                                               | ~ 10 usages                     |
| `text.size.xl.fontSize`, `text-size-xl-fontSize`             | `text.large.regular.body.fontSize`                                                                                                                                                 | ~ 10 usages                     |
| `root.text.height.200`, `root-text-height-200`               | `text.small.regular.body.fontSize`                                                                                                                                                 | ~10 usages                      |
| `root.text.height.2800`, `root-text-height-2800`             | `text.heading.huge.fontSize`                                                                                                                                                       | 1 usage                         |
| `color.text.disabled`, `color-text-disabled`                 | `color.text.placeholder`                                                                                                                                                           | 4 usages                        |
| `color.text.accent`, `color-text-accent`                     | `color.text.accentDark`                                                                                                                                                            | 3 usages                        |
| `border.base.borderColor`, `border-base-borderColor`         | `color.border.primary`                                                                                                                                                             | ~20 usages                      |
| `border.focus.borderColor`, `border-focus-borderColor`       | `color.border.focus`                                                                                                                                                               | ~15 usages                      |
| `border.selected.borderColor`, `border-selected-borderColor` | `action.variant.primary.hover.borderColor` (since most of the times the color is used as `border` for `hover` effects) or `color.border.secondary` (when used for generic borders) | 6 usages                        |
| `root.heading.base.fontFamily`                               | Not needed anymore                                                                                                                                                                 | 1 usage                         |
| `root.text.base.fontSize`                                    | `text.small.regular.body.fontSize`                                                                                                                                                 | 1 usages                        |
| `background.secondary`                                       | `color.background.secondary`                                                                                                                                                       | 5 usages                        |
| `background.overlay`                                         | `color.background.overlay`                                                                                                                                                         | 2 usages                        |
| `box.radius.m.borderRadius`                                  | `box.radius.16.borderRadius`                                                                                                                                                       | 2 usages                        |
| `color.field.userInput`                                      | `color.text.primary`                                                                                                                                                               | 0 usages                        |
```

## Old icons

Migration type: 🧘 safe (mostly)

How spread icons are in the Product can't be calculated due to local copies of the same icons. All the Svg are [here](https://github.com/preply/design-system/tree/main/packages/media-icons/svg/24).

```md
| Icons                         | Safe replacement                         | How spread it is in the Product |
| ----------------------------- | ---------------------------------------- | ------------------------------- |
| `ArrowLeft`                   | `TokyoUIArrowLeft`                       |                                 |
| `ArrowLeftHeavy`              | `TokyoUIArrowLeft`                       |                                 |
| `ArrowRight`                  | `TokyoUIArrowRight`                      |                                 |
| `ArrowRightHeavy`             | `TokyoUIArrowRight`                      |                                 |
| `ArrowRightFull`              | `TokyoUIArrowRightFull`                  |                                 |
| `ArrowTopFull`                | `TokyoUIArrowTopFull`                    |                                 |
| `Attach`                      | `TokyoUIAttach`                          |                                 |
| `Attachments`                 | `TokyoUIAttachments`                     |                                 |
| `Availability1EarlyMorning`   | `TokyoUIAvailability1EarlyMorning`       |                                 |
| `Availability2Morning`        | `TokyoUIAvailability2Morning`            |                                 |
| `Availability3Day`            | `TokyoUIAvailability3Day`                |                                 |
| `Availability4Midday`         | `TokyoUIAvailability4Midday`             |                                 |
| `Availability5Evening`        | `TokyoUIAvailability5Evening`            |                                 |
| `Availability6LateEvening`    | `TokyoUIAvailability6LateEvening`        |                                 |
| `Availability7LateNight`      | `TokyoUIAvailability7LateNight`          |                                 |
| `Availability7Night`          | `TokyoUIAvailability8Night`              |                                 |
| `Bell`                        | `TokyoUIBell`                            |                                 |
| `BirthdayCake`                | `TokyoUIBirthdayCake`                    |                                 |
| `Bug`                         | `TokyoUIBug`                             |                                 |
| `Calendar`                    | `TokyoUICalendar`                        |                                 |
| `CancelHeavy`                 | `TokyoUICancel`                          |                                 |
| `Certificate`                 | `TokyoUICertificate` (not available yet) | 1 usage                         |
| `Checkmark`                   | `TokyoUICheckmark`                       |                                 |
| `CheckmarkHeavy`              | `TokyoUICheckmark`                       |                                 |
| `Clock`                       | `TokyoUIClock`                           |                                 |
| `Close`                       | `TokyoUIClose`                           |                                 |
| `CloseHeavy`                  | `TokyoUIClose`                           |                                 |
| `Compass`                     | `TokyoUICompass`                         |                                 |
| `Confirmed`                   | `TokyoUIConfirmed`                       |                                 |
| `Contactus`                   | No replacement nor usages in product     | 0 usages                        |
| `Copy`                        | `TokyoUICopy`                            |                                 |
| `CreditCard`                  | `TokyoUICreditCard`                      |                                 |
| `Dashboard`                   | `TokyoUIDashboard`                       |                                 |
| `Delete`                      | `TokyoUIDelete`                          |                                 |
| `Download`                    | `TokyoUIDownload`                        |                                 |
| `DragAndDrop`                 | `TokyoUIDragAndDrop`                     |                                 |
| `Edit`                        | `TokyoUIEdit`                            |                                 |
| `Email`                       | `TokyoUIEmail`                           |                                 |
| `Email`                       | `TokyoUIEmail`                           |                                 |
| `Error`                       | `TokyoUIError`                           |                                 |
| `ErrorWarning`                | `TokyoUIErrorWarning`                    |                                 |
| `ExerciseClosedGapsJumble`    | `TokyoUIExerciseClosedGapsJumble`        |                                 |
| `ExerciseConversationStarer`  | `TokyoUIExerciseConversationStarer`      |                                 |
| `ExerciseDialogHidden`        | `TokyoUIExerciseDialogHidden`            |                                 |
| `ExerciseDialogSpeach`        | `TokyoUIExerciseDialogSpeach`            |                                 |
| `ExerciseDialogText`          | `TokyoUIExerciseDialogText`              |                                 |
| `ExerciseDialogTextClosedGap` | `TokyoUIExerciseDialogTextClosedGap`     |                                 |
| `ExerciseImageText`           | `TokyoUIExerciseImageText`               |                                 |
| `ExerciseMultiChoice`         | `TokyoUIExerciseMultiChoice`             |                                 |
| `ExerciseMultiChoice`         | `TokyoUIExerciseMultiChoice`             |                                 |
| `ExerciseOpenWriting`         | `TokyoUIExerciseOpenWriting`             |                                 |
| `ExerciseRephrase`            | `TokyoUIExerciseRephrase`                |                                 |
| `ExerciseTextClosedGaps`      | `TokyoUIExerciseTextClosedGaps`          |                                 |
| `ExerciseVideoMultiChoice`    | `TokyoUIExerciseVideoMultiChoice`        |                                 |
| `ExerciseVocabClosedGap`      | `TokyoUIExerciseVocabClosedGap`          |                                 |
| `ExerciseVocabOpenGap`        | `TokyoUIExerciseVocabOpenGap`            |                                 |
| `Expand`                      | `TokyoUIExpand`                          |                                 |
| `ExpandHeavy`                 | `TokyoUIExpandHeavy`                     |                                 |
| `Eye`                         | `TokyoUIEye`                             |                                 |
| `EyeHide`                     | `TokyoUIEyeHide`                         |                                 |
| `Fav`                         | `TokyoUIFav`                             |                                 |
| `File`                        | `TokyoUIFile`                            |                                 |
| `Filter`                      | `TokyoUIFilter`                          |                                 |
| `FilterApplied`               | `TokyoUIFilterApplied`                   |                                 |
| `Flag`                        | `TokyoUIFlag`                            |                                 |
| `FlagHeavy`                   | `TokyoUIFlag`                            |                                 |
| `FloatingOff`                 | `TokyoUIFloatingOff`                     |                                 |
| `FloatingStart`               | `TokyoUIFloatingStart`                   |                                 |
| `FullscreenCollapse`          | `TokyoUIFullscreenCollapse`              |                                 |
| `FullscreenExpand`            | `TokyoUIFullscreenExpand`                |                                 |
| `Gallery`                     | `TokyoUIGallery`                         |                                 |
| `HelpCenter`                  | `TokyoUIHelpCenter`                      |                                 |
| `HelpHeader`                  | No replacement nor usages in product     | 0 usages                        |
| `History`                     | `TokyoUIHistory`                         |                                 |
| `Home`                        | `TokyoUIHome`                            |                                 |
| `Info`                        | `TokyoUIInfo`                            |                                 |
| `InfoLightBulb`               | `TokyoUIInfoLightBulb`                   |                                 |
| `Key`                         | `TokyoUIKey`                             |                                 |
| `Language`                    | `TokyoUILanguage`                        |                                 |
| `Lessons`                     | `TokyoUILessons`                         |                                 |
| `Level`                       | `TokyoUILevel`                           |                                 |
| `LevelHeavy`                  | `TokyoUILevelHeavy`                      |                                 |
| `Library`                     | `TokyoUILibrary`                         |                                 |
| `LibraryAdd`                  | `TokyoUILibraryAdd`                      |                                 |
| `LibraryExplore`              | `TokyoUILibraryExplore`                  |                                 |
| `Lightning`                   | `TokyoUILightning`                       |                                 |
| `LightningFilled`             | `TokyoUILightning`                       |                                 |
| `Link`                        | `TokyoUILink`                            |                                 |
| `LinkAlt`                     | `TokyoUILinkAlt`                         |                                 |
| `Location`                    | `TokyoUILocation`                        |                                 |
| `Lock`                        | `TokyoUILock`                            |                                 |
| `LogIn`                       | `TokyoUILogIn`                           |                                 |
| `LogOut`                      | `TokyoUILogOut`                          |                                 |
| `Mail`                        | `TokyoUIMail`                            |                                 |
| `Mark`                        | `TokyoUIMark`                            |                                 |
| `Messages`                    | `TokyoUIMessages`                        |                                 |
| `Microphone`                  | `TokyoUIMicrophone`                      |                                 |
| `MicrophoneOff`               | `TokyoUIMicrophoneOff`                   |                                 |
| `More`                        | `TokyoUIMore`                            |                                 |
| `Notes`                       | `TokyoUINotes`                           |                                 |
| `NotesWithPad`                | `TokyoUINotesWithPad`                    |                                 |
| `Pause`                       | `TokyoUIPause`                           |                                 |
| `Payed`                       | `TokyoUIPayed`                           |                                 |
| `PhotoCamera`                 | `TokyoUIPhotoCamera`                     |                                 |
| `PhotoUpload`                 | `TokyoUIPhotoUpload`                     |                                 |
| `PlacementProgressTest`       | `TokyoUIPlacementProgressTest`           |                                 |
| `Play`                        | `TokyoUIPlay`                            |                                 |
| `Plus`                        | `TokyoUIPlus`                            |                                 |
| `PlusHeavy`                   | `TokyoUIPlus`                            |                                 |
| `PracticeLightning`           | `TokyoUPracticeLightning`                |                                 |
| `Profile`                     | No replacement nor usages in product     | 0 usages                        |
| `Progress`                    | `TokyoUIProgress`                        |                                 |
| `ProgressAlt`                 | `TokyoUIProgressAlt`                     |                                 |
| `QuestionMark`                | `TokyoUIQuestionMark`                    |                                 |
| `Queue`                       | `TokyoUIQueue`                           |                                 |
| `Quote`                       | `TokyoUIQuote`                           |                                 |
| `Refresh`                     | `TokyoUIRefresh`                         |                                 |
| `Reschedule`                  | `TokyoUIReschedule`                      |                                 |
| `RescheduleAlt`               | `TokyoUIRescheduleAlt`                   |                                 |
| `Resume`                      | `TokyoUIResume`                          |                                 |
| `Save`                        | `TokyoUISave`                            |                                 |
| `ScreenshareEnd`              | `TokyoUIScreenshareEnd`                  |                                 |
| `ScreenshareStart`            | `TokyoUIScreenshareStart`                |                                 |
| `Search`                      | `TokyoUISearch`                          |                                 |
| `SearchNavbar`                | `TokyoUISearchNavbar`                    |                                 |
| `Send`                        | `TokyoUISend`                            |                                 |
| `Settings`                    | `TokyoUISettings`                        |                                 |
| `SettingsAlt`                 | `TokyoUISettings`                        |                                 |
| `Share`                       | `TokyoUIShare`                           |                                 |
| `ShareAlt`                    | `TokyoUIShare`                           |                                 |
| `Shield`                      | `TokyoUIShield`                          |                                 |
| `SignUp`                      | `TokyoUISignUp`                          |                                 |
| `Sound`                       | `TokyoUISound`                           |                                 |
| `SoundAlt`                    | `TokyoUISound`                           |                                 |
| `SoundHeavy`                  | `TokyoUISound`                           |                                 |
| `Star`                        | `TokyoUIStar`                            |                                 |
| `Study`                       | `TokyoUIStudy`                           |                                 |
| `SupportCenter`               | No replacement nor usages in product     | 0 usages                        |
| `Tag`                         | `TokyoUITag`                             |                                 |
| `ThumbsDown`                  | `TokyoUIThumbsDown`                      |                                 |
| `ThumbsUp`                    | `TokyoUIThumbsUp`                        |                                 |
| `Timeoff`                     | `TokyoUITimeoff`                         |                                 |
| `Todo`                        | `TokyoUITodo`                            |                                 |
| `User`                        | `TokyoUIUser`                            |                                 |

# Not to worry about
```

## AvatarWithStatus size

```md
| `<AvatarWithStatus/>` `size` | Safe replacement    | How spread it is in the Product |
| ---------------------------- | ------------------- | ------------------------------- |
| 2xs                          | No safe replacement | 0 usages                        |
| xs                           | No safe replacement | 0 usages                        |
```

## `action.size.*` tokens

```md
| Token                              | Safe replacement    | How spread it is in the Product |
| ---------------------------------- | ------------------- | ------------------------------- |
| `action.size.xs.height`            | No safe replacement | 0 usages                        |
| `action.size.xs.verticalPadding`   | No safe replacement | 0 usages                        |
| `action.size.xs.horizontalPadding` | No safe replacement | 0 usages                        |
| `action.size.xs.fontSize`          | No safe replacement | 0 usages                        |
| `action.size.xs.letterSpacing`     | No safe replacement | 0 usages                        |
| `action.size.xl.height`            | No safe replacement | 0 usages                        |
| `action.size.xl.verticalPadding`   | No safe replacement | 0 usages                        |
| `action.size.xl.horizontalPadding` | No safe replacement | 0 usages                        |
| `action.size.xl.fontSize`          | No safe replacement | 0 usages                        |
| `action.size.xl.letterSpacing`     | No safe replacement | 0 usages                        |
```

## `<Button/>` / `<IconButton/>` `size`

```md
| `size` | Safe replacement    | How spread it is in the Product |
| ------ | ------------------- | ------------------------------- |
| xl     | No safe replacement | 0 usages                        |
```

## `variationSettings` tokens

```md
| `size`                                                   | Safe replacement    | How spread it is in the Product |
| -------------------------------------------------------- | ------------------- | ------------------------------- |
| `text.variant.caption-regular.variationSettings`         | No safe replacement | 0 usages                        |
| `text.variant.caption-semibold.variationSettings`        | No safe replacement | 0 usages                        |
| `text.variant.small-regular.variationSettings`           | No safe replacement | 0 usages                        |
| `text.variant.small-regular-italic.variationSettings`    | No safe replacement | 0 usages                        |
| `text.variant.small-semibold.variationSettings`          | No safe replacement | 0 usages                        |
| `text.variant.small-semibold-italic.variationSettings`   | No safe replacement | 0 usages                        |
| `text.variant.default-regular.variationSettings`         | No safe replacement | 0 usages                        |
| `text.variant.default-regular-italic.variationSettings`  | No safe replacement | 0 usages                        |
| `text.variant.default-semibold.variationSettings`        | No safe replacement | 0 usages                        |
| `text.variant.default-semibold-italic.variationSettings` | No safe replacement | 0 usages                        |
| `text.variant.large-regular.variationSettings`           | No safe replacement | 0 usages                        |
| `text.variant.large-regular-italic.variationSettings`    | No safe replacement | 0 usages                        |
| `text.variant.large-semibold.variationSettings`          | No safe replacement | 0 usages                        |
| `text.variant.large-semibold-italic.variationSettings`   | No safe replacement | 0 usages                        |
```

## `heading.level.*` tokens

```md
| Token                                   | Safe replacement                               | How spread it is in the Product |
| --------------------------------------- | ---------------------------------------------- | ------------------------------- |
| `heading.level.h1.normal.letterSpacing` | No safe replacement (original value is -0.005) | 0 usages                        |
| `heading.level.h2.normal.letterSpacing` | No safe replacement (original value is 0)      | 0 usages                        |
| `heading.level.h3.normal.letterSpacing` | No safe replacement (original value is 0.01)   | 0 usages                        |
| `heading.level.h4.normal.letterSpacing` | No safe replacement (original value is 0.0125) | 0 usages                        |
| `heading.level.h5.normal.letterSpacing` | No safe replacement (original value is 0.0175) | 0 usages                        |
| `heading.level.h1.large.letterSpacing`  | No safe replacement (original value is -0.005) | 0 usages                        |
| `heading.level.h2.large.letterSpacing`  | No safe replacement (original value is 0)      | 0 usages                        |
| `heading.level.h3.large.letterSpacing`  | No safe replacement (original value is 0.01)   | 0 usages                        |
| `heading.level.h4.large.letterSpacing`  | No safe replacement (original value is 0.0125) | 0 usages                        |
| `heading.level.h5.large.letterSpacing`  | No safe replacement (original value is 0.0175) | 0 usages                        |
```

## Other tokens/variables (apart from the ones related to the deprecations above)

```md
| Token                                                                                                                      | Safe replacement                                   | How spread it is in the Product |
| -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------- |
| `scheme.color`, `@scheme-color`                                                                                            |                                                    | 0 usages                        |
| `scheme.bgColor`, `@scheme-bgColor`                                                                                        |                                                    | 0 usages                        |
| `panel.divider.borderColor`, `@panel-divider-borderColor`                                                                  |                                                    | 0 usages                        |
| `panel.padding.small.padding`, `panel.padding.base.padding`, `panel.padding.medium.padding`, `panel.padding.large.padding` |                                                    | 0 usages                        |
| `root.text.height.400`                                                                                                     |                                                    | 0 usages                        |
| `root.text.height.600`                                                                                                     |                                                    | 0 usages                        |
| `root.text.height.1000`                                                                                                    |                                                    | 0 usages                        |
| `root.text.height.1600`                                                                                                    |                                                    | 0 usages                        |
| `root.text.height.2000`                                                                                                    |                                                    | 0 usages                        |
| `avatar.size.2xs.size`                                                                                                     | `avatar.size.24.size`                              | 0 usages                        |
| `avatar.size.xs.size`                                                                                                      | `avatar.size.32.size`                              | 0 usages                        |
| `avatar.size.s.size`                                                                                                       | `avatar.size.48.size`                              | 0 usages                        |
| `avatar.size.m.size`                                                                                                       | `avatar.size.64.size`                              | 0 usages                        |
| `avatar.size.l.size`                                                                                                       | `avatar.size.96.size`                              | 0 usages                        |
| `avatar.size.xl.size`                                                                                                      | `avatar.size.160.size`                             | 0 usages                        |
| `avatarWithStatus.size.2xs.onlineIndicator.size`                                                                           |                                                    | 0 usages                        |
| `avatarWithStatus.size.2xs.onlineIndicator.offset`                                                                         |                                                    | 0 usages                        |
| `avatarWithStatus.size.xs.onlineIndicator.size`                                                                            |                                                    | 0 usages                        |
| `avatarWithStatus.size.xs.onlineIndicator.offset`                                                                          |                                                    | 0 usages                        |
| `avatarWithStatus.size.m.onlineIndicator.size`                                                                             | `avatarWithStatus.size.64.onlineIndicator.size`    | 0 usages                        |
| `avatarWithStatus.size.m.onlineIndicator.offset`                                                                           | `avatarWithStatus.size.64.onlineIndicator.offset`  | 0 usages                        |
| `avatarWithStatus.size.xl.onlineIndicator.size`                                                                            | `avatarWithStatus.size.160.onlineIndicator.size`   | 0 usages                        |
| `avatarWithStatus.size.xl.onlineIndicator.offset`                                                                          | `avatarWithStatus.size.160.onlineIndicator.offset` | 0 usages                        |
| `color.text.selected`, `color-text-selected`                                                                               | `color.text.accentDark` (slightly darker)          | 0 usages                        |
| `color.text.error`, `color-text-error`                                                                                     | `color.text.critical`                              | 0 usages                        |
| `border.hover.borderColor`, `border-hover-borderColor`                                                                     | `color.border.secondary`                           | 0 usages                        |
| `border.error.borderColor`, `border-error-borderColor`                                                                     | `color.border.critical`                            | 0 usages                        |
| `border.positive.borderColor`, `border-positive-borderColor`                                                               | `color.border.primary`                             | 0 usages                        |
| `border.accent.borderColor`, `border-accent-borderColor`                                                                   | `color.border.primary`                             | 0 usages                        |
| `border.disabled.borderColor`, `border-disabled-borderColor`                                                               | `color.border.primary`                             | 0 usages                        |
| `root.text.base.fontFamily`                                                                                                | 'text.fontFamily'                                  | 0÷ usages                       |
| `root.heading.base.fontFamily`                                                                                             | 'text.heading.fontFamily'                          | 0 usages                        |
| `root.text.base.fontFamily`                                                                                                | Not needed anymore                                 | 0 usages                        |
| `root.text.base.variable.fontFamily`                                                                                       | Not needed anymore                                 | 0 usages                        |
| `root.heading.base.typeface`                                                                                               | `text.heading.typeface`                            | 0 usages                        |
| `root.text.base.typeface`                                                                                                  | `text.typeface`                                    | 0 usages                        |
| `root.text.spacing.tight`                                                                                                  | Not needed anymore                                 | 0 usages                        |
| `root.text.spacing.regular`                                                                                                | Not needed anymore                                 | 0 usages                        |
| `root.text.spacing.loose`                                                                                                  | Not needed anymore                                 | 0 usages                        |
| `root.text.style.normal`                                                                                                   | Not needed anymore                                 | 0 usages                        |
| `root.text.style.italic`                                                                                                   | Not needed anymore                                 | 0 usages                        |
| `root.text.variation.normal`                                                                                               | Not needed anymore                                 | 0 usages                        |
| `root.text.variation.italic`                                                                                               | Not needed anymore                                 | 0 usages                        |
| `box.radius.l.borderRadius`                                                                                                | `box.radius.16.borderRadius`                       | 0 usages                        |
| `box.radius.none.borderRadius`                                                                                             | `box.radius.0.borderRadius`                        | 0 usages                        |
| `box.radius.12.borderRadius`                                                                                               | `sizing.12`                                        | 0 usages                        |
| `box.radius.24.borderRadius`                                                                                               | `sizing.24`                                        | 0 usages                        |
| `box.radius.32.borderRadius`                                                                                               | `sizing.32`                                        | 0 usages                        |
| `box.radius.48.borderRadius`                                                                                               | `sizing.48`                                        | 0 usages                        |
| `box.radius.64.borderRadius`                                                                                               | `sizing.64`                                        | 0 usages                        |
| `box.radius.96.borderRadius`                                                                                               | `sizing.96`                                        | 0 usages                        |
| `box.radius.160.borderRadius`                                                                                              | `sizing.160`                                       | 0 usages                        |
```

```

```
