@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/2025-q4-ds-cleanup-njc6pOZy.js

@@ -0,0 +1,351 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Migrations/2025 Q4 DS cleanup`}),`
+`,(0,c.jsx)(t.h1,{id:`migrations2025-q4---design-system-cleanup-initiative`,children:`Migrations/2025 Q4 - Design System cleanup initiative`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`#for-teams`,children:`For teams`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#themes`,children:`Themes`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#color-schemes`,children:`Color schemes`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#panel-components`,children:`Panel components`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#roottextbaselineheight-token`,children:[(0,c.jsx)(t.code,{children:`root.text.base.lineHeight`}),` token`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#contentcolor-tokens`,children:[(0,c.jsx)(t.code,{children:`content.*.color`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#rootradius-tokens`,children:[(0,c.jsx)(t.code,{children:`root.radius.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#texticonheadingtextinline-accent`,children:[(0,c.jsx)(t.code,{children:`<Text/>`}),`/`,(0,c.jsx)(t.code,{children:`<Icon/>`}),`/`,(0,c.jsx)(t.code,{children:`<Heading/>`}),`/`,(0,c.jsx)(t.code,{children:`<TextInline/>`}),` `,(0,c.jsx)(t.code,{children:`accent`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#button--iconbutton-size`,children:[(0,c.jsx)(t.code,{children:`<Button/>`}),` / `,(0,c.jsx)(t.code,{children:`<IconButton/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#iconsize-tokens`,children:[(0,c.jsx)(t.code,{children:`icon.size.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#textweightmediumfontweight-token`,children:[(0,c.jsx)(t.code,{children:`text.weight.medium.fontWeight`}),` token`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#icon-size`,children:[(0,c.jsx)(t.code,{children:`<Icon/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#other-tokensvariables`,children:`Other tokens/variables`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#old-icons`,children:`Old icons`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#badge-color`,children:[(0,c.jsx)(t.code,{children:`<Badge/>`}),` `,(0,c.jsx)(t.code,{children:`color`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#rootpalette-tokens`,children:[(0,c.jsx)(t.code,{children:`root.palette.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#textheadingicontextinlines-color`,children:[(0,c.jsx)(t.code,{children:`<Text/>`}),`/`,(0,c.jsx)(t.code,{children:`<Heading/>`}),`/`,(0,c.jsx)(t.code,{children:`<Icon/>`}),`/`,(0,c.jsx)(t.code,{children:`<TextInline/>`}),`'s `,(0,c.jsx)(t.code,{children:`color`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#rebrandalert-maybebrokenlayout`,children:[`RebrandAlert `,(0,c.jsx)(t.code,{children:`maybeBrokenLayout`})]})}),`
+`]}),`
+`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`#for-the-design-system-team`,children:`For the Design System team`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#roottextweight-tokens`,children:[(0,c.jsx)(t.code,{children:`root.text.weight.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#roottextsize-tokens`,children:[(0,c.jsx)(t.code,{children:`root.text.size.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#contentcolor-tokens-1`,children:[(0,c.jsx)(t.code,{children:`content.*.color`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#rootsize-tokens`,children:[(0,c.jsx)(t.code,{children:`root.size.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#rootsize-tokens-1`,children:[(0,c.jsx)(t.code,{children:`root.size.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#rootradius-tokens-1`,children:[(0,c.jsx)(t.code,{children:`root.radius.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#font-family-tokens`,children:`Font family tokens`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#font-weight-tokens`,children:`Font weight tokens`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#text-variants-and-corresponding-tokens`,children:`Text variants (and corresponding tokens)`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#text-size`,children:`Text size`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#avatar-size`,children:`Avatar size`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#texticonheadingtextinline-accent-1`,children:[(0,c.jsx)(t.code,{children:`<Text/>`}),`/`,(0,c.jsx)(t.code,{children:`<Icon/>`}),`/`,(0,c.jsx)(t.code,{children:`<Heading/>`}),`/`,(0,c.jsx)(t.code,{children:`<TextInline/>`}),` `,(0,c.jsx)(t.code,{children:`accent`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#textinline-italic`,children:[(0,c.jsx)(t.code,{children:`<TextInline/>`}),` `,(0,c.jsx)(t.code,{children:`italic`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#heading-large`,children:[(0,c.jsx)(t.code,{children:`<Heading/>`}),` `,(0,c.jsx)(t.code,{children:`large`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#heading-level`,children:[(0,c.jsx)(t.code,{children:`<Heading/>`}),` `,(0,c.jsx)(t.code,{children:`level`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#headinglevel-tokens`,children:[(0,c.jsx)(t.code,{children:`heading.level.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#layoutflex-padding-layoutflex-gap--layoutgrid-paddinglayoutgrid-gap-box-padding`,children:[(0,c.jsx)(t.code,{children:`<LayoutFlex/>`}),` `,(0,c.jsx)(t.code,{children:`padding`}),` /`,(0,c.jsx)(t.code,{children:`<LayoutFlex/>`}),` `,(0,c.jsx)(t.code,{children:`gap`}),` / `,(0,c.jsx)(t.code,{children:`<LayoutGrid/>`}),` `,(0,c.jsx)(t.code,{children:`padding`}),`/`,(0,c.jsx)(t.code,{children:`<LayoutGrid/>`}),` `,(0,c.jsx)(t.code,{children:`gap`}),` /`,(0,c.jsx)(t.code,{children:`<Box/>`}),` `,(0,c.jsx)(t.code,{children:`padding`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#actionsize-tokens`,children:[(0,c.jsx)(t.code,{children:`action.size.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#actionvariantplain-tokens`,children:[(0,c.jsx)(t.code,{children:`action.variant.plain`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#button-plain-variant`,children:[(0,c.jsx)(t.code,{children:`Button`}),` `,(0,c.jsx)(t.code,{children:`plain`}),` variant`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#actionvariantdangerous-tokens`,children:[(0,c.jsx)(t.code,{children:`action.variant.dangerous`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#button-dangerous-variant`,children:[(0,c.jsx)(t.code,{children:`Button`}),` `,(0,c.jsx)(t.code,{children:`dangerous`}),` variant`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#button--iconbutton-size-1`,children:[(0,c.jsx)(t.code,{children:`<Button/>`}),` / `,(0,c.jsx)(t.code,{children:`<IconButton/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#box-radius`,children:[(0,c.jsx)(t.code,{children:`<Box/>`}),` `,(0,c.jsx)(t.code,{children:`radius`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#iconsize-tokens-1`,children:[(0,c.jsx)(t.code,{children:`icon.size.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#icon-size-1`,children:[(0,c.jsx)(t.code,{children:`<Icon/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#preplylogo-variant-monochrome`,children:[(0,c.jsx)(t.code,{children:`<PreplyLogo/>`}),` `,(0,c.jsx)(t.code,{children:`variant`}),` monochrome`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#preplylogo-rebranded-monochrome`,children:[(0,c.jsx)(t.code,{children:`<PreplyLogo/>`}),` `,(0,c.jsx)(t.code,{children:`rebranded`}),` monochrome`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#other-tokensvariables-apart-from-the-ones-related-to-the-deprecations-above`,children:`Other tokens/variables (apart from the ones related to the deprecations above)`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#old-icons-1`,children:`Old icons`})}),`
+`]}),`
+`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`#not-to-worry-about`,children:`Not to worry about`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#avatarwithstatus-size`,children:`AvatarWithStatus size`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#actionsize-tokens-1`,children:[(0,c.jsx)(t.code,{children:`action.size.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#button--iconbutton-size-2`,children:[(0,c.jsx)(t.code,{children:`<Button/>`}),` / `,(0,c.jsx)(t.code,{children:`<IconButton/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#variationsettings-tokens`,children:[(0,c.jsx)(t.code,{children:`variationSettings`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsxs)(t.a,{href:`#headinglevel-tokens-1`,children:[(0,c.jsx)(t.code,{children:`heading.level.*`}),` tokens`]})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#other-tokensvariables-apart-from-the-ones-related-to-the-deprecations-above-1`,children:`Other tokens/variables (apart from the ones related to the deprecations above)`})}),`
+`]}),`
+`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Resources`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`Official `,(0,c.jsx)(t.a,{href:`https://preply.atlassian.net/wiki/spaces/PDS/pages/4009000993/Design+System+cleanup`,rel:`nofollow`,children:`Confluence page`})]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`https://docs.google.com/spreadsheets/d/1OML7PSyKWzlpe4FerIJ2rHZ2Iwa3ofKXm9PiMTGW8vY`,rel:`nofollow`,children:`Design System cleanup: tracker`}),` to know about the usages of deprecated APIs`]}),`
+`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`Migrations are split in`,`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`"🧘 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`}),`
+`,(0,c.jsx)(t.li,{children:`"🤔 thoughtful" ones (where replacements require evaluating different options). The DS team will not take care of them`}),`
+`]}),`
+`]}),`
+`,(0,c.jsx)(t.li,{children:`All the following APIs will be completely removed by the DS team in 2024 Q4`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`List of deprecated APIs`}),`
+`,(0,c.jsx)(t.h1,{id:`for-teams`,children:`For teams`}),`
+`,(0,c.jsx)(t.h2,{id:`themes`,children:`Themes`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.p,{children:`Theoretically old themes are not used in public pages, but you never know.`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Deprecation     | What Product teams should do               |\n| --------------- | ------------------------------------------ |\n| Preply UI theme | Look for `preply-ui` theme and remove them |\n| Base UI theme   | Look for `base-ui` theme and remove them   |\n| Bold UI theme   | Look for `bold-ui` theme and remove them   |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`color-schemes`,children:`Color schemes`}),`
+`,(0,c.jsx)(t.p,{children:`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.`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Deprecation                    | What Product teams should do |\n| ------------------------------ | ---------------------------- |\n| `useColorScheme`               | Remove every reference       |\n| `ColorSchemeProvider`          | Remove every reference       |\n| `.color-schemes`               | Remove every reference       |\n| `withColorScheme` + props      | Remove every reference       |\n| `<Box />`'s `colorScheme` prop | Remove every reference       |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`panel-components`,children:`Panel components`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Deprecation                                                        | Replacement                                                   |\n| ------------------------------------------------------------------ | ------------------------------------------------------------- |\n| `Panel`, `PanelHeader`, `PanelBody`, `PanelSection`, `PanelFooter` | Use combination of `Box` and `LayoutFlex` components instead. |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`roottextbaselineheight-token`,children:[(0,c.jsx)(t.code,{children:`root.text.base.lineHeight`}),` token`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`root.text.base.lineHeight`}),` (and `,(0,c.jsx)(t.code,{children:`root-text-base-lineHeight`}),`) is used ~30 times in product.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Replacing it depends on the font-size used in the same element where the `,(0,c.jsx)(t.code,{children:`lineHeight`}),` is set.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Current font-size    | New line height                                                                                                             |\n| -------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| 16px                 | `text.default.regular.body.lineHeight`                                                                                      |\n| 20px                 | `text.large.regular.body.lineHeight`                                                                                        |\n| 24px                 | `text.heading.medium.lineHeight` (if it's related to a heading)                                                             |\n| 28px                 | 28px is not a DS font size                                                                                                  |\n| 36px                 | 36px is not a DS font size                                                                                                  |\n| root.text.size.100   | `text.small.regular.body.lineHeight`                                                                                        |\n| root.text.size.200   | `text.small.regular.body.lineHeight`                                                                                        |\n| root.text.size.600   | `text.heading.medium.lineHeight` (if it's related to a heading)                                                             |\n| text.size.s.fontSize | `text.small.regular.body.lineHeight`                                                                                        |\n| [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 |\n"})}),`
+`,(0,c.jsx)(t.p,{children:`instead, for buttons, there are three more tokens`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.code,{children:`action.size.small.lineHeight`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.code,{children:`action.size.medium.lineHeight`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.code,{children:`action.size.large.lineHeight`})}),`
+`]}),`
+`,(0,c.jsxs)(t.h2,{id:`contentcolor-tokens`,children:[(0,c.jsx)(t.code,{children:`content.*.color`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                              | Replacement                               |\n| -------------------------------------------------- | ----------------------------------------- |\n| `content.branded.color`, `content-branded-color`   | `color.text.accentDark` (slightly darker) |\n| `content.brand.color`, `content-brand-color`       | `color.text.accentDark` (slightly darker) |\n| `content.selected.color`, `content-selected-color` | `color.text.accentDark` (slightly darker) |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`rootradius-tokens`,children:[(0,c.jsx)(t.code,{children:`root.radius.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                              | Safe replacement                                  |\n| ---------------------------------- | ------------------------------------------------- |\n| `root.radius.m`, `root-radius-m`   | No safe replacement, use `radius.8` or `radius.8` |\n| `root.radius.xl`, `root-radius-xl` | No safe replacement, use `radius.16`              |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`texticonheadingtextinline-accent`,children:[(0,c.jsx)(t.code,{children:`<Text/>`}),`/`,(0,c.jsx)(t.code,{children:`<Icon/>`}),`/`,(0,c.jsx)(t.code,{children:`<Heading/>`}),`/`,(0,c.jsx)(t.code,{children:`<TextInline/>`}),` `,(0,c.jsx)(t.code,{children:`accent`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `<Text/>`/`<Icon/>`/`<Heading/>`/`<TextInline/>` `accent` | Safe replacement             |\n| --------------------------------------------------------- | ---------------------------- |\n| branded                                                   | accentDark (slightly darker) |\n| selected                                                  | accentDark (slightly darker) |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`button--iconbutton-size`,children:[(0,c.jsx)(t.code,{children:`<Button/>`}),` / `,(0,c.jsx)(t.code,{children:`<IconButton/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`size\` | Safe replacement    |
+| ------ | ------------------- |
+| xs     | No safe replacement |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`iconsize-tokens`,children:[(0,c.jsx)(t.code,{children:`icon.size.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `size`                                 | Safe replacement                                                             |\n| -------------------------------------- | ---------------------------------------------------------------------------- |\n| `icon.size.l.size`, `icon-size-l-size` | No safe replacement, use `sizing.32` or `sizing.48` (it was `40` previously) |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`textweightmediumfontweight-token`,children:[(0,c.jsx)(t.code,{children:`text.weight.medium.fontWeight`}),` token`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                                            | Safe replacement                                                                                                                                                             |\n| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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 |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`icon-size`,children:[(0,c.jsx)(t.code,{children:`<Icon/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `size` | Safe replacement                                               |\n| ------ | -------------------------------------------------------------- |\n| `l`    | No safe replacement, use `32` or `48` (it was `40` previously) |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`other-tokensvariables`,children:`Other tokens/variables`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                      | Safe replacement                                   |\n| ------------------------------------------ | -------------------------------------------------- |\n| `COLOR_NAME_OPTIONS`                       | `COLOR_TEXT_OPTIONS` (not the same values, though) |\n| `color.text.branded`, `color-text-branded` | `color.text.accentDark` (slightly darker)          |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`old-icons`,children:`Old icons`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe (mostly)`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| 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                        |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`badge-color`,children:[(0,c.jsx)(t.code,{children:`<Badge/>`}),` `,(0,c.jsx)(t.code,{children:`color`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:'| `size`    | Safe replacement                                                                                |\n| --------- | ----------------------------------------------------------------------------------------------- |\n| `gray`    | No safe replacement, `tertiary` is the closest, but everything depends on the semantic meaning. |\n| `teal`    | No safe replacement, `positive` is the closest, but everything depends on the semantic meaning. |\n| `green`   | No safe replacement, `positive` is the closest, but everything depends on the semantic meaning. |\n| `blue`    | No safe replacement, `info` is the closest, but everything depends on the semantic meaning.     |\n| `yellow`  | No safe replacement, `warning` is the closest, but everything depends on the semantic meaning.  |\n| `red`     | No safe replacement, `critical` is the closest, but everything depends on the semantic meaning. |\n| `magenta` | No safe replacement, `accent` is the closest, but everything depends on the semantic meaning.   |\n\nHere is a `color` (left column) and `accent` (right column) comparison.\n\n<img src="./2024-q2-assets/badge-color-accent.png" alt="Badge color and accent" />\n'})}),`
+`,(0,c.jsxs)(t.h2,{id:`rootpalette-tokens`,children:[(0,c.jsx)(t.code,{children:`root.palette.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsxs)(t.p,{children:[`The `,(0,c.jsx)(t.code,{children:`root.palette.*`}),` must be replaced with their Tokyo UI semantic counterparts. Most of them require deciding which semantic tokens fits the usage.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `root.palette.*` tokens used as `background`                                        | Safe replacement                                             | Current value (NOT USE IT)             |\n| ----------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------- |\n| `root.palette.white`, `root-palette-white`                                          | `color.background.primary`                                   |                                        |\n| `root.palette.ivory`, `root-palette-ivory`                                          | `color.background.secondary`                                 |                                        |\n| `root.palette.transparent`, `root-palette-transparent`                              | `dsInternalPrimitive.color.grey.900-6`                       |                                        |\n| `root.palette.gray.100`, `root.palette.gray[100]`, `root-palette-gray-100`          | `color.background.tertiary`                                  |                                        |\n| `root.palette.gray.200`, `root.palette.gray[200]`, `root-palette-gray-200`          | `color.background.disabled`                                  |                                        |\n| `root.palette.gray.300`, `root.palette.gray[300]`, `root-palette-gray-300`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.300`   |\n| `root.palette.gray.400`, `root.palette.gray[400]`, `root-palette-gray-400`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.400`   |\n| `root.palette.gray.500`, `root.palette.gray[500]`, `root-palette-gray-500`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.500`   |\n| `root.palette.gray.600`, `root.palette.gray[600]`, `root-palette-gray-600`          | No semantic meaning                                          | `dsInternalPrimitive.color.grey.600`   |\n| `root.palette.teal.100`, `root.palette.teal[100]`, `root-palette-teal-100`          | `color.background.positiveLight`                             |                                        |\n| `root.palette.teal.200`, `root.palette.teal[200]`, `root-palette-teal-200`          | No semantic meaning                                          | `dsInternalPrimitive.color.teal.200`   |\n| `root.palette.teal.300`, `root.palette.teal[300]`, `root-palette-teal-300`          | No semantic meaning                                          | `dsInternalPrimitive.color.teal.300`   |\n| `root.palette.teal.400`, `root.palette.teal[400]`, `root-palette-teal-400`          | No semantic meaning                                          | `dsInternalPrimitive.color.teal.400`   |\n| `root.palette.teal.500`, `root.palette.teal[500]`, `root-palette-teal-500`          | No semantic meaning (maybe `color.background.positiveDark`?) | `dsInternalPrimitive.color.teal.500`   |\n| `root.palette.green.100`, `root.palette.green[100]`, `root-palette-green-100`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.100`   |\n| `root.palette.green.200`, `root.palette.green[200]`, `root-palette-green-200`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.200`   |\n| `root.palette.green.300`, `root.palette.green[300]`, `root-palette-green-300`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.300`   |\n| `root.palette.green.400`, `root.palette.green[400]`, `root-palette-green-400`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.400`   |\n| `root.palette.green.500`, `root.palette.green[500]`, `root-palette-green-500`       | No semantic meaning                                          | `dsInternalPrimitive.color.teal.500`   |\n| `root.palette.yellow.100`, `root.palette.yellow[100]`, `root-palette-yellow-100`    | `color.background.warningLight`                              |                                        |\n| `root.palette.yellow.200`, `root.palette.yellow[200]`, `root-palette-yellow-200`    |                                                              | `dsInternalPrimitive.color.yellow.200` |\n| `root.palette.yellow.300`, `root.palette.yellow[300]`, `root-palette-yellow-300`    |                                                              | `dsInternalPrimitive.color.yellow.300` |\n| `root.palette.yellow.400`, `root.palette.yellow[400]`, `root-palette-yellow-400`    |                                                              | `dsInternalPrimitive.color.yellow.400` |\n| `root.palette.yellow.500`, `root.palette.yellow[500]`, `root-palette-yellow-500`    | No semantic meaning (maybe `color.background.warningDark`?)  | `dsInternalPrimitive.color.yellow.500` |\n| `root.palette.red.100`, `root.palette.red[100]`, `root-palette-red-100`             | `color.background.criticalLight`                             |                                        |\n| `root.palette.red.200`, `root.palette.red[200]`, `root-palette-red-200`             |                                                              | `dsInternalPrimitive.color.red.200`    |\n| `root.palette.red.300`, `root.palette.red[300]`, `root-palette-red-300`             |                                                              | `dsInternalPrimitive.color.red.300`    |\n| `root.palette.red.400`, `root.palette.red[400]`, `root-palette-red-400`             |                                                              | `dsInternalPrimitive.color.red.400`    |\n| `root.palette.red.500`, `root.palette.red[500]`, `root-palette-red-500`             | No semantic meaning (maybe `color.background.criticalDark`?) | `dsInternalPrimitive.color.red.500`    |\n| `root.palette.blue.100`, `root.palette.blue[100]`, `root-palette-blue-100`          | `color.background.infoLight`                                 |                                        |\n| `root.palette.blue.200`, `root.palette.blue[200]`, `root-palette-blue-200`          |                                                              | `dsInternalPrimitive.color.blue.200`   |\n| `root.palette.blue.300`, `root.palette.blue[300]`, `root-palette-blue-300`          |                                                              | `dsInternalPrimitive.color.blue.300`   |\n| `root.palette.blue.400`, `root.palette.blue[400]`, `root-palette-blue-400`          |                                                              | `dsInternalPrimitive.color.blue.400`   |\n| `root.palette.blue.500`, `root.palette.blue[500]`, `root-palette-blue-500`          | No semantic meaning (maybe `color.background.infoDark`?)     | `dsInternalPrimitive.color.blue.500`   |\n| `root.palette.magenta.100`, `root.palette.magenta[100]`, `root-palette-magenta-100` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.100`   |\n| `root.palette.magenta.200`, `root.palette.magenta[200]`, `root-palette-magenta-200` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.200`   |\n| `root.palette.magenta.300`, `root.palette.magenta[300]`, `root-palette-magenta-300` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.300`   |\n| `root.palette.magenta.400`, `root.palette.magenta[400]`, `root-palette-magenta-400` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.400`   |\n| `root.palette.magenta.500`, `root.palette.magenta[500]`, `root-palette-magenta-500` | No semantic meaning                                          | `dsInternalPrimitive.color.pink.500`   |\n\n````md\n| `root.palette.*` tokens used as text or icon `color`                                | Safe replacement                                                           | Current value (NOT USE IT)             |\n| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------- |\n| `root.palette.white`, `root-palette-white`                                          | `color.text.inverted`                                                      |                                        |\n| `root.palette.ivory`, `root-palette-ivory`                                          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.50`    |\n| `root.palette.transparent`, `root-palette-transparent`                              | `transparent`                                                              |                                        |\n| `root.palette.gray.100`, `root.palette.gray[100]`, `root-palette-gray-100`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.100`   |\n| `root.palette.gray.200`, `root.palette.gray[200]`, `root-palette-gray-200`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.200`   |\n| `root.palette.gray.300`, `root.palette.gray[300]`, `root-palette-gray-300`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.300`   |\n| `root.palette.gray.400`, `root.palette.gray[400]`, `root-palette-gray-400`          | No semantic meaning                                                        | `dsInternalPrimitive.color.grey.400`   |\n| `root.palette.gray.500`, `root.palette.gray[500]`, `root-palette-gray-500`          | `color.text.tertiary` or `color.text.placeholder` or `color.icon.disabled` |                                        |\n| `root.palette.gray.600`, `root.palette.gray[600]`, `root-palette-gray-600`          | `color.text.primary`                                                       |                                        |\n| `root.palette.teal.100`, `root.palette.teal[100]`, `root-palette-teal-100`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.100`   |\n| `root.palette.teal.200`, `root.palette.teal[200]`, `root-palette-teal-200`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.200`   |\n| `root.palette.teal.300`, `root.palette.teal[300]`, `root-palette-teal-300`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.300`   |\n| `root.palette.teal.400`, `root.palette.teal[400]`, `root-palette-teal-400`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.400`   |\n| `root.palette.teal.500`, `root.palette.teal[500]`, `root-palette-teal-500`          | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.500`   |\n| `root.palette.green.100`, `root.palette.green[100]`, `root-palette-green-100`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.100`   |\n| `root.palette.green.200`, `root.palette.green[200]`, `root-palette-green-200`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.200`   |\n| `root.palette.green.300`, `root.palette.green[300]`, `root-palette-green-300`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.300`   |\n| `root.palette.green.400`, `root.palette.green[400]`, `root-palette-green-400`       | No semantic meaning                                                        | `dsInternalPrimitive.color.teal.400`   |\n| `root.palette.green.500`, `root.palette.green[500]`, `root-palette-green-500`       | No semantic meaning (maybe `color.text.positive`?)                         | `dsInternalPrimitive.color.teal.500`   |\n| `root.palette.yellow.100`, `root.palette.yellow[100]`, `root-palette-yellow-100`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.100` |\n| `root.palette.yellow.200`, `root.palette.yellow[200]`, `root-palette-yellow-200`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.200` |\n| `root.palette.yellow.300`, `root.palette.yellow[300]`, `root-palette-yellow-300`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.300` |\n| `root.palette.yellow.400`, `root.palette.yellow[400]`, `root-palette-yellow-400`    | No semantic meaning                                                        | `dsInternalPrimitive.color.yellow.400` |\n| `root.palette.yellow.500`, `root.palette.yellow[500]`, `root-palette-yellow-500`    | No semantic meaning (maybe `color.text.warning`?)                          | `dsInternalPrimitive.color.yellow.500` |\n| `root.palette.red.100`, `root.palette.red[100]`, `root-palette-red-100`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.100`    |\n| `root.palette.red.200`, `root.palette.red[200]`, `root-palette-red-200`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.200`    |\n| `root.palette.red.300`, `root.palette.red[300]`, `root-palette-red-300`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.300`    |\n| `root.palette.red.400`, `root.palette.red[400]`, `root-palette-red-400`             | No semantic meaning                                                        | `dsInternalPrimitive.color.red.400`    |\n| `root.palette.red.500`, `root.palette.red[500]`, `root-palette-red-500`             | No semantic meaning (maybe `color.text.critical`?)                         | `dsInternalPrimitive.color.red.500`    |\n| `root.palette.blue.100`, `root.palette.blue[100]`, `root-palette-blue-100`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.100`   |\n| `root.palette.blue.200`, `root.palette.blue[200]`, `root-palette-blue-200`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.200`   |\n| `root.palette.blue.300`, `root.palette.blue[300]`, `root-palette-blue-300`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.300`   |\n| `root.palette.blue.400`, `root.palette.blue[400]`, `root-palette-blue-400`          | No semantic meaning                                                        | `dsInternalPrimitive.color.blue.400`   |\n| `root.palette.blue.500`, `root.palette.blue[500]`, `root-palette-blue-500`          | No semantic meaning (maybe `color.text.info`?)                             | `dsInternalPrimitive.color.blue.500`   |\n| `root.palette.magenta.100`, `root.palette.magenta[100]`, `root-palette-magenta-100` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.100`   |\n| `root.palette.magenta.200`, `root.palette.magenta[200]`, `root-palette-magenta-200` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.200`   |\n| `root.palette.magenta.300`, `root.palette.magenta[300]`, `root-palette-magenta-300` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.300`   |\n| `root.palette.magenta.400`, `root.palette.magenta[400]`, `root-palette-magenta-400` | No semantic meaning                                                        | `dsInternalPrimitive.color.pink.400`   |\n| `root.palette.magenta.500`, `root.palette.magenta[500]`, `root-palette-magenta-500` | `color.text.accentDark`                                                    |                                        |\n\n```md\n| `root.palette.*` tokens used as `border`                                            | Safe replacement                                  | Current value (NOT USE IT)             |\n| ----------------------------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------- |\n| `root.palette.white`, `root-palette-white`                                          | No semantic meaning                               | `dsInternalPrimitive.color.grey.0`     |\n| `root.palette.ivory`, `root-palette-ivory`                                          | `color.border.tertiary`                           |                                        |\n| `root.palette.transparent`, `root-palette-transparent`                              | No semantic meaning                               | `transparent`                          |\n| `root.palette.gray.100`, `root.palette.gray[100]`, `root-palette-gray-100`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.100`   |\n| `root.palette.gray.200`, `root.palette.gray[200]`, `root-palette-gray-200`          | `color.border.primary` or `color.border.disabled` |                                        |\n| `root.palette.gray.300`, `root.palette.gray[300]`, `root-palette-gray-300`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.300`   |\n| `root.palette.gray.400`, `root.palette.gray[400]`, `root-palette-gray-400`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.400`   |\n| `root.palette.gray.500`, `root.palette.gray[500]`, `root-palette-gray-500`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.500`   |\n| `root.palette.gray.600`, `root.palette.gray[600]`, `root-palette-gray-600`          | No semantic meaning                               | `dsInternalPrimitive.color.grey.600`   |\n| `root.palette.teal.100`, `root.palette.teal[100]`, `root-palette-teal-100`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.100`   |\n| `root.palette.teal.200`, `root.palette.teal[200]`, `root-palette-teal-200`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.200`   |\n| `root.palette.teal.300`, `root.palette.teal[300]`, `root-palette-teal-300`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.300`   |\n| `root.palette.teal.400`, `root.palette.teal[400]`, `root-palette-teal-400`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.400`   |\n| `root.palette.teal.500`, `root.palette.teal[500]`, `root-palette-teal-500`          | No semantic meaning                               | `dsInternalPrimitive.color.teal.500`   |\n| `root.palette.green.100`, `root.palette.green[100]`, `root-palette-green-100`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.100`   |\n| `root.palette.green.200`, `root.palette.green[200]`, `root-palette-green-200`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.200`   |\n| `root.palette.green.300`, `root.palette.green[300]`, `root-palette-green-300`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.300`   |\n| `root.palette.green.400`, `root.palette.green[400]`, `root-palette-green-400`       | No semantic meaning                               | `dsInternalPrimitive.color.teal.400`   |\n| `root.palette.green.500`, `root.palette.green[500]`, `root-palette-green-500`       | (maybe `color.border.positive`?)                  | `dsInternalPrimitive.color.teal.500`   |\n| `root.palette.yellow.100`, `root.palette.yellow[100]`, `root-palette-yellow-100`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.100` |\n| `root.palette.yellow.200`, `root.palette.yellow[200]`, `root-palette-yellow-200`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.200` |\n| `root.palette.yellow.300`, `root.palette.yellow[300]`, `root-palette-yellow-300`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.300` |\n| `root.palette.yellow.400`, `root.palette.yellow[400]`, `root-palette-yellow-400`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.400` |\n| `root.palette.yellow.500`, `root.palette.yellow[500]`, `root-palette-yellow-500`    | No semantic meaning                               | `dsInternalPrimitive.color.yellow.500` |\n| `root.palette.red.100`, `root.palette.red[100]`, `root-palette-red-100`             | No semantic meaning                               | `dsInternalPrimitive.color.red.100`    |\n| `root.palette.red.200`, `root.palette.red[200]`, `root-palette-red-200`             | No semantic meaning                               | `dsInternalPrimitive.color.red.200`    |\n| `root.palette.red.300`, `root.palette.red[300]`, `root-palette-red-300`             | No semantic meaning                               | `dsInternalPrimitive.color.red.300`    |\n| `root.palette.red.400`, `root.palette.red[400]`, `root-palette-red-400`             | No semantic meaning                               | `dsInternalPrimitive.color.red.400`    |\n| `root.palette.red.500`, `root.palette.red[500]`, `root-palette-red-500`             | (maybe `color.border.critical`?)                  | `dsInternalPrimitive.color.red.500`    |\n| `root.palette.blue.100`, `root.palette.blue[100]`, `root-palette-blue-100`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.100`   |\n| `root.palette.blue.200`, `root.palette.blue[200]`, `root-palette-blue-200`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.200`   |\n| `root.palette.blue.300`, `root.palette.blue[300]`, `root-palette-blue-300`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.300`   |\n| `root.palette.blue.400`, `root.palette.blue[400]`, `root-palette-blue-400`          | No semantic meaning                               | `dsInternalPrimitive.color.blue.400`   |\n| `root.palette.blue.500`, `root.palette.blue[500]`, `root-palette-blue-500`          | `color.border.focus`                              |                                        |\n| `root.palette.magenta.100`, `root.palette.magenta[100]`, `root-palette-magenta-100` | No semantic meaning                               | `dsInternalPrimitive.color.pink.100`   |\n| `root.palette.magenta.200`, `root.palette.magenta[200]`, `root-palette-magenta-200` | No semantic meaning                               | `dsInternalPrimitive.color.pink.200`   |\n| `root.palette.magenta.300`, `root.palette.magenta[300]`, `root-palette-magenta-300` | No semantic meaning                               | `dsInternalPrimitive.color.pink.300`   |\n| `root.palette.magenta.400`, `root.palette.magenta[400]`, `root-palette-magenta-400` | `color.border.brand`                              |                                        |\n| `root.palette.magenta.500`, `root.palette.magenta[500]`, `root-palette-magenta-500` | No semantic meaning                               | `dsInternalPrimitive.color.pink.500`   |\n\nIf 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.\n```\n````\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`textheadingicontextinlines-color`,children:[(0,c.jsx)(t.code,{children:`<Text/>`}),`/`,(0,c.jsx)(t.code,{children:`<Heading/>`}),`/`,(0,c.jsx)(t.code,{children:`<Icon/>`}),`/`,(0,c.jsx)(t.code,{children:`<TextInline/>`}),`'s `,(0,c.jsx)(t.code,{children:`color`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsxs)(t.p,{children:[`The `,(0,c.jsx)(t.code,{children:`color`}),` must be replaced with their Tokyo UI semantic counterparts. Most of them require deciding which semantic tokens fits the usage.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `color`       | Safe replacement                        | Current value (NOT USE IT)             |\n| ------------- | --------------------------------------- | -------------------------------------- |\n| `white`       | `inverted`                              |                                        |\n| `gray-100`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.100`   |\n| `gray-200`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.200`   |\n| `gray-300`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.300`   |\n| `gray-400`    | No semantic meaning                     | `dsInternalPrimitive.color.grey.400`   |\n| `gray-500`    | `tertiary` or `placeholder`             |                                        |\n| `gray-600`    | `secondary`                             |                                        |\n| `teal-100`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.100`   |\n| `teal-200`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.200`   |\n| `teal-300`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.300`   |\n| `teal-400`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.400`   |\n| `teal-500`    | No semantic meaning                     | `dsInternalPrimitive.color.teal.500`   |\n| `green-100`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.100`   |\n| `green-200`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.200`   |\n| `green-300`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.300`   |\n| `green-400`   | No semantic meaning                     | `dsInternalPrimitive.color.teal.400`   |\n| `green-500`   | No semantic meaning (maybe `positive`?) | `dsInternalPrimitive.color.teal.500`   |\n| `yellow-100`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.100` |\n| `yellow-200`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.200` |\n| `yellow-300`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.300` |\n| `yellow-400`  | No semantic meaning                     | `dsInternalPrimitive.color.yellow.400` |\n| `yellow-500`  | No semantic meaning (maybe `warning`?)  | `dsInternalPrimitive.color.yellow.500` |\n| `red-100`     | No semantic meaning                     | `dsInternalPrimitive.color.red.100`    |\n| `red-200`     | No semantic meaning                     | `dsInternalPrimitive.color.red.200`    |\n| `red-300`     | No semantic meaning                     | `dsInternalPrimitive.color.red.300`    |\n| `red-400`     | No semantic meaning                     | `dsInternalPrimitive.color.red.400`    |\n| `red-500`     | No semantic meaning (maybe `critical`?) | `dsInternalPrimitive.color.red.500`    |\n| `blue-100`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.100`   |\n| `blue-200`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.200`   |\n| `blue-300`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.300`   |\n| `blue-400`    | No semantic meaning                     | `dsInternalPrimitive.color.blue.400`   |\n| `blue-500`    | No semantic meaning (maybe `info`?)     | `dsInternalPrimitive.color.blue.500`   |\n| `magenta-100` | No semantic meaning                     | `dsInternalPrimitive.color.pink.100`   |\n| `magenta-200` | No semantic meaning                     | `dsInternalPrimitive.color.pink.200`   |\n| `magenta-300` | No semantic meaning                     | `dsInternalPrimitive.color.pink.300`   |\n| `magenta-400` | No semantic meaning                     | `dsInternalPrimitive.color.pink.400`   |\n| `magenta-500` | `accentDark`                            |                                        |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`rebrandalert-maybebrokenlayout`,children:[`RebrandAlert `,(0,c.jsx)(t.code,{children:`maybeBrokenLayout`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🤔 thoughtful`}),`
+`,(0,c.jsxs)(t.p,{children:[`Remove `,(0,c.jsx)(t.code,{children:`maybeBrokenLayout`}),` and add `,(0,c.jsx)(t.code,{children:`fullPageWidth`}),` if the RebrandAlert is rendered with full page width. See `,(0,c.jsx)(t.a,{href:`https://preply.slack.com/archives/C024EAEHP6V/p1702989181325429`,rel:`nofollow`,children:`the full explanation on this Slack message`}),`.`]}),`
+`,(0,c.jsx)(t.p,{children:`Usages: ~59 usages.`}),`
+`,(0,c.jsx)(t.h1,{id:`for-the-design-system-team`,children:`For the Design System team`}),`
+`,(0,c.jsxs)(t.h2,{id:`roottextweight-tokens`,children:[(0,c.jsx)(t.code,{children:`root.text.weight.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: ~50 usages combined`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                          | Safe replacement                |\n| ---------------------------------------------- | ------------------------------- |\n| `root.text.weight.400`, `root-text-weight-400` | `text.weight.normal.fontWeight` |\n| `root.text.weight.500`, `root-text-weight-500` | `text.weight.medium.fontWeight` |\n| `root.text.weight.700`, `root-text-weight-700` | `text.weight.bold.fontWeight`   |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`roottextsize-tokens`,children:[(0,c.jsx)(t.code,{children:`root.text.size.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: ~70 usages combined`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                        | Safe replacement                      |\n| -------------------------------------------- | ------------------------------------- |\n| `root.text.size.70`, `root-text-size-70`     | `text.caption.regular.body.fontSize`  |\n| `root.text.size.80`, `root-text-size-80`     | `text.caption.regular.body.fontSize`  |\n| `root.text.size.90`, `root-text-size-90`     | `text.small.regular.body.fontSize`    |\n| `root.text.size.100`, `root-text-size-100`   | `text.small.regular.body.fontSize`    |\n| `root.text.size.200`, `root-text-size-200`   | `text.small.regular.body.fontSize`    |\n| `root.text.size.300`, `root-text-size-300`   | `text.large.regular.body.fontSize`    |\n| `root.text.size.400`, `root-text-size-400`   | `text.large.regular.body.fontSize`    |\n| `root.text.size.500`, `root-text-size-500`   | `text.large.regular.body.fontSize`    |\n| `root.text.size.600`, `root-text-size-600`   | `text.heading.medium.fontSize`        |\n| `root.text.size.800`, `root-text-size-800`   | `text.variant.large.regular.fontSize` |\n| `root.text.size.1000`, `root-text-size-1000` | `text.heading.large.fontSize`         |\n| `root.text.size.1200`, `root-text-size-1200` | `text.heading.large.fontSize`         |\n| `root.text.size.1800`, `root-text-size-1800` | `text.heading.extraLarge.fontSize`    |\n| `root.text.size.2400`, `root-text-size-2400` | `text.heading.huge.fontSize`          |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`contentcolor-tokens-1`,children:[(0,c.jsx)(t.code,{children:`content.*.color`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: ~20 usages combined`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                                | Safe replacement         |\n| ---------------------------------------------------- | ------------------------ |\n| `content.primary.color`, `content-primary-color`     | `color.text.primary`     |\n| `content.secondary.color`, `content-secondary-color` | `color.text.secondary`   |\n| `content.positive.color`, `content-positive-color`   | `color.text.positive`    |\n| `content.error.color`, `content-error-color`         | `color.text.critical`    |\n| `content.tertiary.color`, `content-tertiary-color`   | `color.text.tertiary`    |\n| `content.warning.color`, `content-warning-color`     | `color.text.warning`     |\n| `content.critical.color`, `content-critical-color`   | `color.text.critical`    |\n| `content.info.color`, `content-info-color`           | `color.text.info`        |\n| `content.inverted.color`, `content-inverted-color`   | `color.text.inverted`    |\n| `content.accent.color`, `content-accent-color`       | `color.text.accentDark`  |\n| `content.disabled.color`, `content-disabled-color`   | `color.text.placeholder` |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`rootsize-tokens`,children:[(0,c.jsx)(t.code,{children:`root.size.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: ~50 usages combined`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token            | Safe replacement |\n| ---------------- | ---------------- |\n| `root.size.none` | `sizing.0`       |\n| `root.size.25`   | `sizing.2`       |\n| `root.size.50`   | `sizing.4`       |\n| `root.size.100`  | `sizing.8`       |\n| `root.size.150`  | `sizing.12`      |\n| `root.size.200`  | `sizing.16`      |\n| `root.size.300`  | `sizing.24`      |\n| `root.size.400`  | `sizing.32`      |\n| `root.size.500`  | `sizing.48`      |\n| `root.size.600`  | `sizing.64`      |\n| `root.size.800`  | `sizing.96`      |\n| `root.size.1000` | `sizing.160`     |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`rootsize-tokens-1`,children:[(0,c.jsx)(t.code,{children:`root.size.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: ~1000 usages combined`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token             | Safe replacement |\n| ----------------- | ---------------- |\n| `root.space.none` | `spacing.0`      |\n| `root.space.3xs`  | `spacing.4`      |\n| `root.space.2xs`  | `spacing.8`      |\n| `root.space.xs`   | `spacing.16`     |\n| `root.space.s`    | `spacing.24`     |\n| `root.space.m`    | `spacing.32`     |\n| `root.space.l`    | `spacing.64`     |\n| `root.space.xl`   | `spacing.96`     |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`rootradius-tokens-1`,children:[(0,c.jsx)(t.code,{children:`root.radius.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: ~110 usages combined`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token              | Safe replacement |\n| ------------------ | ---------------- |\n| `root.radius.none` | `radius.0`       |\n| `root.radius.xs`   | `radius.2`       |\n| `root.radius.s`    | `radius.4`       |\n| `root.radius.l`    | `radius.16`      |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`font-family-tokens`,children:`Font family tokens`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`The font families are now managed in a centered way for all Tokyo UI contents.`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                   | Safe replacement                                   | How spread it is in the Product |\n| --------------------------------------- | -------------------------------------------------- | ------------------------------- |\n| `button.medium.fontFamily`              | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `link.default.fontFamily`               | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `root.heading.base.fontFamily`          | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `root.text.base.fontFamily`             | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.default.regular.body.fontFamily`  | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.default.regular.body.fontFamily`  | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.default.semibold.body.fontFamily` | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.default.semibold.body.fontFamily` | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.heading.huge.fontFamily`          | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.heading.medium.fontFamily`        | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.heading.small.fontFamily`         | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.large.regular.body.fontFamily`    | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.small.regular.body.fontFamily`    | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.small.regular.body.fontFamily`    | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.small.semibold.body.fontFamily`   | Simply remove it and the CSS property that uses it | < 10 usages                     |\n| `text.heading.massive.fontFamily`       | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `text.heading.extraLarge.fontFamily`    | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `text.heading.large.fontFamily`         | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `text.large.semibold.body.fontFamily`   | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `text.caption.semibold.body.fontFamily` | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `text.caption.regular.body.fontFamily`  | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `link.large.fontFamily`                 | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `link.small.fontFamily`                 | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `button.large.fontFamily`               | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `button.small.fontFamily`               | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `text.fieldAdditionalText.fontFamily`   | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `button.default.fontFamily`             | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `heading.variant.massive.fontFamily`    | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `heading.variant.huge.fontFamily`       | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `heading.variant.extraLarge.fontFamily` | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `heading.variant.large.fontFamily`      | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `heading.variant.medium.fontFamily`     | Simply remove it and the CSS property that uses it | 0 usages                        |\n| `heading.variant.small.fontFamily`      | Simply remove it and the CSS property that uses it | 0 usages                        |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`font-weight-tokens`,children:`Font weight tokens`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                        | Safe replacement                | How spread it is in the Product |\n| ---------------------------- | ------------------------------- | ------------------------------- |\n| `text.weight.400.fontWeight` | `text.weight.normal.fontWeight` | ~10 usages                      |\n| `text.weight.500.fontWeight` | `text.weight.medium.fontWeight` | ~20 usages                      |\n| `text.weight.700.fontWeight` | `text.weight.bold.fontWeight`   | ~30 usages                      |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`text-variants-and-corresponding-tokens`,children:`Text variants (and corresponding tokens)`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: TODO:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`<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   |
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`text-size`,children:`Text size`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: TODO:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `<Text/>` `size` | Safe replacement  |\n| ---------------- | ----------------- |\n| `s`              | `small-regular`   |\n| `m`              | `default-regular` |\n| `l`              | `large-regular`   |\n| `2xs`            | `caption-regular` |\n| `xs`             | `caption-regular` |\n| `xl`             | `large-regular`   |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`avatar-size`,children:`Avatar size`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`<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                         |
+\`\`\`
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`texticonheadingtextinline-accent-1`,children:[(0,c.jsx)(t.code,{children:`<Text/>`}),`/`,(0,c.jsx)(t.code,{children:`<Icon/>`}),`/`,(0,c.jsx)(t.code,{children:`<Heading/>`}),`/`,(0,c.jsx)(t.code,{children:`<TextInline/>`}),` `,(0,c.jsx)(t.code,{children:`accent`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`accent\` | Safe replacement | How spread it is in the Product |
+| -------- | ---------------- | ------------------------------- |
+| disabled | placeholder      | 2 usages                        |
+| error    | critical         | ~20 usages                      |
+| accent   | accentDark       | ~35 usages                      |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`textinline-italic`,children:[(0,c.jsx)(t.code,{children:`<TextInline/>`}),` `,(0,c.jsx)(t.code,{children:`italic`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `<TextInline/>` `italic` | Safe replacement               | How spread it is in the Product |\n| ------------------------ | ------------------------------ | ------------------------------- |\n| true/false               | Just remove it, it was useless | 1 usage                         |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`heading-large`,children:[(0,c.jsx)(t.code,{children:`<Heading/>`}),` `,(0,c.jsx)(t.code,{children:`large`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `<Heading/>` `large` | Safe replacement               | How spread it is in the Product |\n| -------------------- | ------------------------------ | ------------------------------- |\n| true/false           | Just remove it, it was useless | 1 usage                         |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`heading-level`,children:[(0,c.jsx)(t.code,{children:`<Heading/>`}),` `,(0,c.jsx)(t.code,{children:`level`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsxs)(t.p,{children:[`Replace Heading `,(0,c.jsx)(t.code,{children:`level`}),` with `,(0,c.jsx)(t.code,{children:`variant`}),` and the following values. You can use `,(0,c.jsx)(t.code,{children:`tag`}),` to set the HTML tag, instead.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `<Heading/>` `level` | Safe replacement | How spread it is in the Product |\n| -------------------- | ---------------- | ------------------------------- |\n| `h1`                 | `huge`           | TODO:                           |\n| `h2`                 | `extraLarge`     | TODO:                           |\n| `h3`                 | `large`          | TODO:                           |\n| `h4`                 | `medium`         | TODO:                           |\n| `h5`                 | `small`          | TODO:                           |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`headinglevel-tokens`,children:[(0,c.jsx)(t.code,{children:`heading.level.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                | Safe replacement                     | How spread it is in the Product |\n| ------------------------------------ | ------------------------------------ | ------------------------------- |\n| `heading.level.h1.fontSize`          | `text.heading.huge.fontSize`         | TODO:                           |\n| `heading.level.h2.fontSize`          | `text.heading.extraLarge.fontSize`   | TODO:                           |\n| `heading.level.h3.fontSize`          | `text.heading.large.fontSize`        | TODO:                           |\n| `heading.level.h4.fontSize`          | `text.heading.medium.fontSize`       | TODO:                           |\n| `heading.level.h5.fontSize`          | `text.heading.small.fontSize`        | TODO:                           |\n| `heading.level.h1.normal.fontSize`   | `text.heading.huge.fontSize`         | TODO:                           |\n| `heading.level.h1.normal.fontWeight` | `text.heading.huge.fontWeight`       | TODO:                           |\n| `heading.level.h1.normal.lineHeight` | `text.heading.huge.lineHeight`       | TODO:                           |\n| `heading.level.h2.normal.fontSize`   | `text.heading.extraLarge.fontSize`   | TODO:                           |\n| `heading.level.h2.normal.fontWeight` | `text.heading.extraLarge.fontWeight` | TODO:                           |\n| `heading.level.h2.normal.lineHeight` | `text.heading.extraLarge.lineHeight` | TODO:                           |\n| `heading.level.h3.normal.fontSize`   | `text.heading.large.fontSize`        | TODO:                           |\n| `heading.level.h3.normal.fontWeight` | `text.heading.large.fontWeight`      | TODO:                           |\n| `heading.level.h3.normal.lineHeight` | `text.heading.large.lineHeight`      | TODO:                           |\n| `heading.level.h4.normal.fontSize`   | `text.heading.medium.fontSize`       | TODO:                           |\n| `heading.level.h4.normal.fontWeight` | `text.heading.medium.fontWeight`     | TODO:                           |\n| `heading.level.h4.normal.lineHeight` | `text.heading.medium.lineHeight`     | TODO:                           |\n| `heading.level.h5.normal.fontSize`   | `text.heading.small.fontSize`        | TODO:                           |\n| `heading.level.h5.normal.fontWeight` | `text.heading.small.fontWeight`      | TODO:                           |\n| `heading.level.h5.normal.lineHeight` | `text.heading.small.lineHeight`      | TODO:                           |\n| `heading.level.h1.large.fontSize`    | `text.heading.huge.fontSize`         | TODO:                           |\n| `heading.level.h1.large.fontWeight`  | `text.heading.huge.fontWeight`       | TODO:                           |\n| `heading.level.h1.large.lineHeight`  | `text.heading.huge.lineHeight`       | TODO:                           |\n| `heading.level.h2.large.fontSize`    | `text.heading.extraLarge.fontSize`   | TODO:                           |\n| `heading.level.h2.large.fontWeight`  | `text.heading.extraLarge.fontWeight` | TODO:                           |\n| `heading.level.h2.large.lineHeight`  | `text.heading.extraLarge.lineHeight` | TODO:                           |\n| `heading.level.h3.large.fontSize`    | `text.heading.large.fontSize`        | TODO:                           |\n| `heading.level.h3.large.fontWeight`  | `text.heading.large.fontWeight`      | TODO:                           |\n| `heading.level.h3.large.lineHeight`  | `text.heading.large.lineHeight`      | TODO:                           |\n| `heading.level.h4.large.fontSize`    | `text.heading.medium.fontSize`       | TODO:                           |\n| `heading.level.h4.large.fontWeight`  | `text.heading.medium.fontWeight`     | TODO:                           |\n| `heading.level.h4.large.lineHeight`  | `text.heading.medium.lineHeight`     | TODO:                           |\n| `heading.level.h5.large.fontSize`    | `text.heading.small.fontSize`        | TODO:                           |\n| `heading.level.h5.large.fontWeight`  | `text.heading.small.fontWeight`      | TODO:                           |\n| `heading.level.h5.large.lineHeight`  | `text.heading.small.lineHeight`      | TODO:                           |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`layoutflex-padding-layoutflex-gap--layoutgrid-paddinglayoutgrid-gap-box-padding`,children:[(0,c.jsx)(t.code,{children:`<LayoutFlex/>`}),` `,(0,c.jsx)(t.code,{children:`padding`}),` /`,(0,c.jsx)(t.code,{children:`<LayoutFlex/>`}),` `,(0,c.jsx)(t.code,{children:`gap`}),` / `,(0,c.jsx)(t.code,{children:`<LayoutGrid/>`}),` `,(0,c.jsx)(t.code,{children:`padding`}),`/`,(0,c.jsx)(t.code,{children:`<LayoutGrid/>`}),` `,(0,c.jsx)(t.code,{children:`gap`}),` /`,(0,c.jsx)(t.code,{children:`<Box/>`}),` `,(0,c.jsx)(t.code,{children:`padding`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.p,{children:`Usages: countless usages (also given responsive usages)`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`padding\` | Safe replacement |
+| --------- | ---------------- |
+| none      | 0                |
+| 3xs       | 4                |
+| 2xs       | 8                |
+| xs        | 16               |
+| s         | 24               |
+| m         | 32               |
+| l         | 64               |
+| xl        | 96               |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`actionsize-tokens`,children:[(0,c.jsx)(t.code,{children:`action.size.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                             | Safe replacement                       | How spread it is in the Product |\n| --------------------------------- | -------------------------------------- | ------------------------------- |\n| `action.size.s.height`            | `action.size.small.height`             | 0 usages                        |\n| `action.size.s.verticalPadding`   | `action.size.small.verticalPadding`    | 0 usages                        |\n| `action.size.s.horizontalPadding` | `action.size.small.horizontalPadding`  | 0 usages                        |\n| `action.size.s.fontSize`          | `button.small.fontSize`                | 0 usages                        |\n| `action.size.s.letterSpacing`     | `button.small.letterSpacing`           | 0 usages                        |\n| `action.size.m.height`            | `action.size.medium.height`            | 0 usages                        |\n| `action.size.m.verticalPadding`   | `action.size.medium.verticalPadding`   | 0 usages                        |\n| `action.size.m.horizontalPadding` | `action.size.medium.horizontalPadding` | 0 usages                        |\n| `action.size.m.fontSize`          | `button.medium.fontSize`               | 6 usages                        |\n| `action.size.m.letterSpacing`     | `button.medium.letterSpacing`          | 3 usages                        |\n| `action.size.l.height`            | `action.size.large.height`             | 0 usages                        |\n| `action.size.l.verticalPadding`   | `action.size.large.verticalPadding`    | 1 usage                         |\n| `action.size.l.horizontalPadding` | `action.size.large.horizontalPadding`  | 0 usages                        |\n| `action.size.l.fontSize`          | `button.large.fontSize`                | 0 usages                        |\n| `action.size.l.letterSpacing`     | `button.large.letterSpacing`           | 0 usages                        |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`actionvariantplain-tokens`,children:[(0,c.jsx)(t.code,{children:`action.variant.plain`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                     | Safe replacement                                | How spread it is in the Product |\n| ----------------------------------------- | ----------------------------------------------- | ------------------------------- |\n| `action.variant.plain.textDecoration`     | `action.variant.secondary.textDecoration`       | uncounted usages yet            |\n| `action.variant.plain.color`              | `action.variant.secondary.color`                | uncounted usages yet            |\n| `action.variant.plain.bgColor`            | `action.variant.secondary.bgColor`              | uncounted usages yet            |\n| `action.variant.plain.borderColor`        | `action.variant.secondary.borderColor`          | uncounted usages yet            |\n| `action.variant.plain.hover.col`          | `action.variant.secondary.hover.color`          | uncounted usages yet            |\n| `action.variant.plain.hover.bgCol`        | `action.variant.secondary.hover.bgColor`        | uncounted usages yet            |\n| `action.variant.plain.hover.borderCol`    | `action.variant.secondary.hover.borderColor`    | uncounted usages yet            |\n| `action.variant.plain.active.col`         | `action.variant.secondary.active.color`         | uncounted usages yet            |\n| `action.variant.plain.active.bgCol`       | `action.variant.secondary.active.bgColor`       | uncounted usages yet            |\n| `action.variant.plain.active.borderCol`   | `action.variant.secondary.active.borderColor`   | uncounted usages yet            |\n| `action.variant.plain.disabled.col`       | `action.variant.secondary.disabled.color`       | uncounted usages yet            |\n| `action.variant.plain.disabled.bgCol`     | `action.variant.secondary.disabled.bgColor`     | uncounted usages yet            |\n| `action.variant.plain.disabled.borderCol` | `action.variant.secondary.disabled.borderColor` | uncounted usages yet            |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`button-plain-variant`,children:[(0,c.jsx)(t.code,{children:`Button`}),` `,(0,c.jsx)(t.code,{children:`plain`}),` variant`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token   | Safe replacement | How spread it is in the Product |\n| ------- | ---------------- | ------------------------------- |\n| `plain` | `secondary`      | 2 usages                        |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`actionvariantdangerous-tokens`,children:[(0,c.jsx)(t.code,{children:`action.variant.dangerous`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                         | Safe replacement                               | How spread it is in the Product |\n| --------------------------------------------- | ---------------------------------------------- | ------------------------------- |\n| `action.variant.dangerous.textDecoration`     | `action.variant.critical.textDecoration`       | uncounted usages yet            |\n| `action.variant.dangerous.color`              | `action.variant.critical.color`                | uncounted usages yet            |\n| `action.variant.dangerous.bgColor`            | `action.variant.critical.bgColor`              | uncounted usages yet            |\n| `action.variant.dangerous.borderColor`        | `action.variant.critical.borderColor`          | uncounted usages yet            |\n| `action.variant.dangerous.hover.col`          | `action.variant.critical.hover.color`          | uncounted usages yet            |\n| `action.variant.dangerous.hover.bgCol`        | `action.variant.critical.hover.bgColor`        | uncounted usages yet            |\n| `action.variant.dangerous.hover.borderCol`    | `action.variant.critical.hover.borderColor`    | uncounted usages yet            |\n| `action.variant.dangerous.active.col`         | `action.variant.critical.active.color`         | uncounted usages yet            |\n| `action.variant.dangerous.active.bgCol`       | `action.variant.critical.active.bgColor`       | uncounted usages yet            |\n| `action.variant.dangerous.active.borderCol`   | `action.variant.critical.active.borderColor`   | uncounted usages yet            |\n| `action.variant.dangerous.disabled.col`       | `action.variant.critical.disabled.color`       | uncounted usages yet            |\n| `action.variant.dangerous.disabled.bgCol`     | `action.variant.critical.disabled.bgColor`     | uncounted usages yet            |\n| `action.variant.dangerous.disabled.borderCol` | `action.variant.critical.disabled.borderColor` | uncounted usages yet            |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`button-dangerous-variant`,children:[(0,c.jsx)(t.code,{children:`Button`}),` `,(0,c.jsx)(t.code,{children:`dangerous`}),` variant`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| Token       | Safe replacement | How spread it is in the Product |
+| ----------- | ---------------- | ------------------------------- |
+| \`dangerous\` | \`critical\`       | 17 usages                       |
+
+Migration type: 🧘 safe
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`button--iconbutton-size-1`,children:[(0,c.jsx)(t.code,{children:`<Button/>`}),` / `,(0,c.jsx)(t.code,{children:`<IconButton/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`size\` | Safe replacement | How spread it is in the Product |
+| ------ | ---------------- | ------------------------------- |
+| s      | small            | 7 usages                        |
+| m      | medium           | 100 usages                      |
+| l      | large            | 40 usages                       |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`box-radius`,children:[(0,c.jsx)(t.code,{children:`<Box/>`}),` `,(0,c.jsx)(t.code,{children:`radius`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`radius\` | Safe replacement | How spread it is in the Product |
+| -------- | ---------------- | ------------------------------- |
+| none     | 0                | 8 usages                        |
+| m        | 16               | 0 usages                        |
+| l        | 16               | 0 usages                        |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`iconsize-tokens-1`,children:[(0,c.jsx)(t.code,{children:`icon.size.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `size`               | Safe replacement | How spread it is in the Product |\n| -------------------- | ---------------- | ------------------------------- |\n| `icon.size.s.size`   | `sizing.24`      | Uncounted usages yet            |\n| `icon.size.m.size`   | `sizing.32`      | Uncounted usages yet            |\n| `icon.size.2xs.size` | `sizing.12`      | Uncounted usages yet            |\n| `icon.size.xs.size`  | `sizing.16`      | Uncounted usages yet            |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`icon-size-1`,children:[(0,c.jsx)(t.code,{children:`<Icon/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `size` | Safe replacement              | How spread it is in the Product |\n| ------ | ----------------------------- | ------------------------------- |\n| `s`    | `24`                          | Uncounted usages yet            |\n| `m`    | `32`                          | Uncounted usages yet            |\n| `2xs`  | No safe replacement, use `16` | Uncounted usages yet            |\n| `xs`   | `16`                          | Uncounted usages yet            |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`preplylogo-variant-monochrome`,children:[(0,c.jsx)(t.code,{children:`<PreplyLogo/>`}),` `,(0,c.jsx)(t.code,{children:`variant`}),` monochrome`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Migration type: 🧘 safe (if also `,(0,c.jsx)(t.code,{children:`rebranded`}),` prop ia passed)`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`\`variant\` | Safe replacement                       | How spread it is in the Product |
+| ---------- | -------------------------------------- | ------------------------------- |
+| monochrome | Remove it, all variants are monochrome | 3 usages                        |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`preplylogo-rebranded-monochrome`,children:[(0,c.jsx)(t.code,{children:`<PreplyLogo/>`}),` `,(0,c.jsx)(t.code,{children:`rebranded`}),` monochrome`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`\`rebranded\` | Safe replacement                      | How spread it is in the Product |
+| ------------ | ------------------------------------- | ------------------------------- |
+| true/false   | Remove it, all variants are rebranded | Hard to count                   |
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`other-tokensvariables-apart-from-the-ones-related-to-the-deprecations-above`,children:`Other tokens/variables (apart from the ones related to the deprecations above)`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                                        | Safe replacement                                                                                                                                                                   | How spread it is in the Product |\n| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |\n| `panel.base.bgColor`, `@panel-base-bgColor`                  | `color.background.primary`, `@color-background-primary`                                                                                                                            | ~10 usages                      |\n| `panel.base.borderRadius`, `@panel-base-borderRadius`        | `radius.16`, `@radius-16`                                                                                                                                                          | 3 usages                        |\n| `PANEL_PADDING`                                              | `[sizing.16, sizing.24, sizing.32, sizing.64]`                                                                                                                                     | 2 usages                        |\n| `PANEL_PADDING_DEFAULT`                                      | `sizing.24`                                                                                                                                                                        | 2 usages                        |\n| `text.size.s.fontSize`, `text-size-s-fontSize`               | `text.small.regular.body.fontSize`                                                                                                                                                 | ~ 20 usages                     |\n| `text.size.m.fontSize`, `text-size-m-fontSize`               | `text.default.regular.body.fontSize`                                                                                                                                               | ~ 50 usages                     |\n| `text.size.l.fontSize`, `text-size-l-fontSize`               | `text.large.regular.body.fontSize`                                                                                                                                                 | ~ 20 usages                     |\n| `text.size.2xs.fontSize`, `text-size-2xs-fontSize`           | `text.caption.regular.body.fontSize`                                                                                                                                               | ~ 2 usages                      |\n| `text.size.xs.fontSize`, `text-size-xs-fontSize`             | `text.caption.regular.body.fontSize`                                                                                                                                               | ~ 10 usages                     |\n| `text.size.xl.fontSize`, `text-size-xl-fontSize`             | `text.large.regular.body.fontSize`                                                                                                                                                 | ~ 10 usages                     |\n| `root.text.height.200`, `root-text-height-200`               | `text.small.regular.body.fontSize`                                                                                                                                                 | ~10 usages                      |\n| `root.text.height.2800`, `root-text-height-2800`             | `text.heading.huge.fontSize`                                                                                                                                                       | 1 usage                         |\n| `color.text.disabled`, `color-text-disabled`                 | `color.text.placeholder`                                                                                                                                                           | 4 usages                        |\n| `color.text.accent`, `color-text-accent`                     | `color.text.accentDark`                                                                                                                                                            | 3 usages                        |\n| `border.base.borderColor`, `border-base-borderColor`         | `color.border.primary`                                                                                                                                                             | ~20 usages                      |\n| `border.focus.borderColor`, `border-focus-borderColor`       | `color.border.focus`                                                                                                                                                               | ~15 usages                      |\n| `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                        |\n| `root.heading.base.fontFamily`                               | Not needed anymore                                                                                                                                                                 | 1 usage                         |\n| `root.text.base.fontSize`                                    | `text.small.regular.body.fontSize`                                                                                                                                                 | 1 usages                        |\n| `background.secondary`                                       | `color.background.secondary`                                                                                                                                                       | 5 usages                        |\n| `background.overlay`                                         | `color.background.overlay`                                                                                                                                                         | 2 usages                        |\n| `box.radius.m.borderRadius`                                  | `box.radius.16.borderRadius`                                                                                                                                                       | 2 usages                        |\n| `color.field.userInput`                                      | `color.text.primary`                                                                                                                                                               | 0 usages                        |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`old-icons-1`,children:`Old icons`}),`
+`,(0,c.jsx)(t.p,{children:`Migration type: 🧘 safe (mostly)`}),`
+`,(0,c.jsxs)(t.p,{children:[`How spread icons are in the Product can't be calculated due to local copies of the same icons. All the Svg are `,(0,c.jsx)(t.a,{href:`https://github.com/preply/design-system/tree/main/packages/media-icons/svg/24`,rel:`nofollow`,children:`here`}),`.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Icons                         | Safe replacement                         | How spread it is in the Product |\n| ----------------------------- | ---------------------------------------- | ------------------------------- |\n| `ArrowLeft`                   | `TokyoUIArrowLeft`                       |                                 |\n| `ArrowLeftHeavy`              | `TokyoUIArrowLeft`                       |                                 |\n| `ArrowRight`                  | `TokyoUIArrowRight`                      |                                 |\n| `ArrowRightHeavy`             | `TokyoUIArrowRight`                      |                                 |\n| `ArrowRightFull`              | `TokyoUIArrowRightFull`                  |                                 |\n| `ArrowTopFull`                | `TokyoUIArrowTopFull`                    |                                 |\n| `Attach`                      | `TokyoUIAttach`                          |                                 |\n| `Attachments`                 | `TokyoUIAttachments`                     |                                 |\n| `Availability1EarlyMorning`   | `TokyoUIAvailability1EarlyMorning`       |                                 |\n| `Availability2Morning`        | `TokyoUIAvailability2Morning`            |                                 |\n| `Availability3Day`            | `TokyoUIAvailability3Day`                |                                 |\n| `Availability4Midday`         | `TokyoUIAvailability4Midday`             |                                 |\n| `Availability5Evening`        | `TokyoUIAvailability5Evening`            |                                 |\n| `Availability6LateEvening`    | `TokyoUIAvailability6LateEvening`        |                                 |\n| `Availability7LateNight`      | `TokyoUIAvailability7LateNight`          |                                 |\n| `Availability7Night`          | `TokyoUIAvailability8Night`              |                                 |\n| `Bell`                        | `TokyoUIBell`                            |                                 |\n| `BirthdayCake`                | `TokyoUIBirthdayCake`                    |                                 |\n| `Bug`                         | `TokyoUIBug`                             |                                 |\n| `Calendar`                    | `TokyoUICalendar`                        |                                 |\n| `CancelHeavy`                 | `TokyoUICancel`                          |                                 |\n| `Certificate`                 | `TokyoUICertificate` (not available yet) | 1 usage                         |\n| `Checkmark`                   | `TokyoUICheckmark`                       |                                 |\n| `CheckmarkHeavy`              | `TokyoUICheckmark`                       |                                 |\n| `Clock`                       | `TokyoUIClock`                           |                                 |\n| `Close`                       | `TokyoUIClose`                           |                                 |\n| `CloseHeavy`                  | `TokyoUIClose`                           |                                 |\n| `Compass`                     | `TokyoUICompass`                         |                                 |\n| `Confirmed`                   | `TokyoUIConfirmed`                       |                                 |\n| `Contactus`                   | No replacement nor usages in product     | 0 usages                        |\n| `Copy`                        | `TokyoUICopy`                            |                                 |\n| `CreditCard`                  | `TokyoUICreditCard`                      |                                 |\n| `Dashboard`                   | `TokyoUIDashboard`                       |                                 |\n| `Delete`                      | `TokyoUIDelete`                          |                                 |\n| `Download`                    | `TokyoUIDownload`                        |                                 |\n| `DragAndDrop`                 | `TokyoUIDragAndDrop`                     |                                 |\n| `Edit`                        | `TokyoUIEdit`                            |                                 |\n| `Email`                       | `TokyoUIEmail`                           |                                 |\n| `Email`                       | `TokyoUIEmail`                           |                                 |\n| `Error`                       | `TokyoUIError`                           |                                 |\n| `ErrorWarning`                | `TokyoUIErrorWarning`                    |                                 |\n| `ExerciseClosedGapsJumble`    | `TokyoUIExerciseClosedGapsJumble`        |                                 |\n| `ExerciseConversationStarer`  | `TokyoUIExerciseConversationStarer`      |                                 |\n| `ExerciseDialogHidden`        | `TokyoUIExerciseDialogHidden`            |                                 |\n| `ExerciseDialogSpeach`        | `TokyoUIExerciseDialogSpeach`            |                                 |\n| `ExerciseDialogText`          | `TokyoUIExerciseDialogText`              |                                 |\n| `ExerciseDialogTextClosedGap` | `TokyoUIExerciseDialogTextClosedGap`     |                                 |\n| `ExerciseImageText`           | `TokyoUIExerciseImageText`               |                                 |\n| `ExerciseMultiChoice`         | `TokyoUIExerciseMultiChoice`             |                                 |\n| `ExerciseMultiChoice`         | `TokyoUIExerciseMultiChoice`             |                                 |\n| `ExerciseOpenWriting`         | `TokyoUIExerciseOpenWriting`             |                                 |\n| `ExerciseRephrase`            | `TokyoUIExerciseRephrase`                |                                 |\n| `ExerciseTextClosedGaps`      | `TokyoUIExerciseTextClosedGaps`          |                                 |\n| `ExerciseVideoMultiChoice`    | `TokyoUIExerciseVideoMultiChoice`        |                                 |\n| `ExerciseVocabClosedGap`      | `TokyoUIExerciseVocabClosedGap`          |                                 |\n| `ExerciseVocabOpenGap`        | `TokyoUIExerciseVocabOpenGap`            |                                 |\n| `Expand`                      | `TokyoUIExpand`                          |                                 |\n| `ExpandHeavy`                 | `TokyoUIExpandHeavy`                     |                                 |\n| `Eye`                         | `TokyoUIEye`                             |                                 |\n| `EyeHide`                     | `TokyoUIEyeHide`                         |                                 |\n| `Fav`                         | `TokyoUIFav`                             |                                 |\n| `File`                        | `TokyoUIFile`                            |                                 |\n| `Filter`                      | `TokyoUIFilter`                          |                                 |\n| `FilterApplied`               | `TokyoUIFilterApplied`                   |                                 |\n| `Flag`                        | `TokyoUIFlag`                            |                                 |\n| `FlagHeavy`                   | `TokyoUIFlag`                            |                                 |\n| `FloatingOff`                 | `TokyoUIFloatingOff`                     |                                 |\n| `FloatingStart`               | `TokyoUIFloatingStart`                   |                                 |\n| `FullscreenCollapse`          | `TokyoUIFullscreenCollapse`              |                                 |\n| `FullscreenExpand`            | `TokyoUIFullscreenExpand`                |                                 |\n| `Gallery`                     | `TokyoUIGallery`                         |                                 |\n| `HelpCenter`                  | `TokyoUIHelpCenter`                      |                                 |\n| `HelpHeader`                  | No replacement nor usages in product     | 0 usages                        |\n| `History`                     | `TokyoUIHistory`                         |                                 |\n| `Home`                        | `TokyoUIHome`                            |                                 |\n| `Info`                        | `TokyoUIInfo`                            |                                 |\n| `InfoLightBulb`               | `TokyoUIInfoLightBulb`                   |                                 |\n| `Key`                         | `TokyoUIKey`                             |                                 |\n| `Language`                    | `TokyoUILanguage`                        |                                 |\n| `Lessons`                     | `TokyoUILessons`                         |                                 |\n| `Level`                       | `TokyoUILevel`                           |                                 |\n| `LevelHeavy`                  | `TokyoUILevelHeavy`                      |                                 |\n| `Library`                     | `TokyoUILibrary`                         |                                 |\n| `LibraryAdd`                  | `TokyoUILibraryAdd`                      |                                 |\n| `LibraryExplore`              | `TokyoUILibraryExplore`                  |                                 |\n| `Lightning`                   | `TokyoUILightning`                       |                                 |\n| `LightningFilled`             | `TokyoUILightning`                       |                                 |\n| `Link`                        | `TokyoUILink`                            |                                 |\n| `LinkAlt`                     | `TokyoUILinkAlt`                         |                                 |\n| `Location`                    | `TokyoUILocation`                        |                                 |\n| `Lock`                        | `TokyoUILock`                            |                                 |\n| `LogIn`                       | `TokyoUILogIn`                           |                                 |\n| `LogOut`                      | `TokyoUILogOut`                          |                                 |\n| `Mail`                        | `TokyoUIMail`                            |                                 |\n| `Mark`                        | `TokyoUIMark`                            |                                 |\n| `Messages`                    | `TokyoUIMessages`                        |                                 |\n| `Microphone`                  | `TokyoUIMicrophone`                      |                                 |\n| `MicrophoneOff`               | `TokyoUIMicrophoneOff`                   |                                 |\n| `More`                        | `TokyoUIMore`                            |                                 |\n| `Notes`                       | `TokyoUINotes`                           |                                 |\n| `NotesWithPad`                | `TokyoUINotesWithPad`                    |                                 |\n| `Pause`                       | `TokyoUIPause`                           |                                 |\n| `Payed`                       | `TokyoUIPayed`                           |                                 |\n| `PhotoCamera`                 | `TokyoUIPhotoCamera`                     |                                 |\n| `PhotoUpload`                 | `TokyoUIPhotoUpload`                     |                                 |\n| `PlacementProgressTest`       | `TokyoUIPlacementProgressTest`           |                                 |\n| `Play`                        | `TokyoUIPlay`                            |                                 |\n| `Plus`                        | `TokyoUIPlus`                            |                                 |\n| `PlusHeavy`                   | `TokyoUIPlus`                            |                                 |\n| `PracticeLightning`           | `TokyoUPracticeLightning`                |                                 |\n| `Profile`                     | No replacement nor usages in product     | 0 usages                        |\n| `Progress`                    | `TokyoUIProgress`                        |                                 |\n| `ProgressAlt`                 | `TokyoUIProgressAlt`                     |                                 |\n| `QuestionMark`                | `TokyoUIQuestionMark`                    |                                 |\n| `Queue`                       | `TokyoUIQueue`                           |                                 |\n| `Quote`                       | `TokyoUIQuote`                           |                                 |\n| `Refresh`                     | `TokyoUIRefresh`                         |                                 |\n| `Reschedule`                  | `TokyoUIReschedule`                      |                                 |\n| `RescheduleAlt`               | `TokyoUIRescheduleAlt`                   |                                 |\n| `Resume`                      | `TokyoUIResume`                          |                                 |\n| `Save`                        | `TokyoUISave`                            |                                 |\n| `ScreenshareEnd`              | `TokyoUIScreenshareEnd`                  |                                 |\n| `ScreenshareStart`            | `TokyoUIScreenshareStart`                |                                 |\n| `Search`                      | `TokyoUISearch`                          |                                 |\n| `SearchNavbar`                | `TokyoUISearchNavbar`                    |                                 |\n| `Send`                        | `TokyoUISend`                            |                                 |\n| `Settings`                    | `TokyoUISettings`                        |                                 |\n| `SettingsAlt`                 | `TokyoUISettings`                        |                                 |\n| `Share`                       | `TokyoUIShare`                           |                                 |\n| `ShareAlt`                    | `TokyoUIShare`                           |                                 |\n| `Shield`                      | `TokyoUIShield`                          |                                 |\n| `SignUp`                      | `TokyoUISignUp`                          |                                 |\n| `Sound`                       | `TokyoUISound`                           |                                 |\n| `SoundAlt`                    | `TokyoUISound`                           |                                 |\n| `SoundHeavy`                  | `TokyoUISound`                           |                                 |\n| `Star`                        | `TokyoUIStar`                            |                                 |\n| `Study`                       | `TokyoUIStudy`                           |                                 |\n| `SupportCenter`               | No replacement nor usages in product     | 0 usages                        |\n| `Tag`                         | `TokyoUITag`                             |                                 |\n| `ThumbsDown`                  | `TokyoUIThumbsDown`                      |                                 |\n| `ThumbsUp`                    | `TokyoUIThumbsUp`                        |                                 |\n| `Timeoff`                     | `TokyoUITimeoff`                         |                                 |\n| `Todo`                        | `TokyoUITodo`                            |                                 |\n| `User`                        | `TokyoUIUser`                            |                                 |\n\n# Not to worry about\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`avatarwithstatus-size`,children:`AvatarWithStatus size`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`<AvatarWithStatus/>\` \`size\` | Safe replacement    | How spread it is in the Product |
+| ---------------------------- | ------------------- | ------------------------------- |
+| 2xs                          | No safe replacement | 0 usages                        |
+| xs                           | No safe replacement | 0 usages                        |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`actionsize-tokens-1`,children:[(0,c.jsx)(t.code,{children:`action.size.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                              | Safe replacement    | How spread it is in the Product |\n| ---------------------------------- | ------------------- | ------------------------------- |\n| `action.size.xs.height`            | No safe replacement | 0 usages                        |\n| `action.size.xs.verticalPadding`   | No safe replacement | 0 usages                        |\n| `action.size.xs.horizontalPadding` | No safe replacement | 0 usages                        |\n| `action.size.xs.fontSize`          | No safe replacement | 0 usages                        |\n| `action.size.xs.letterSpacing`     | No safe replacement | 0 usages                        |\n| `action.size.xl.height`            | No safe replacement | 0 usages                        |\n| `action.size.xl.verticalPadding`   | No safe replacement | 0 usages                        |\n| `action.size.xl.horizontalPadding` | No safe replacement | 0 usages                        |\n| `action.size.xl.fontSize`          | No safe replacement | 0 usages                        |\n| `action.size.xl.letterSpacing`     | No safe replacement | 0 usages                        |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`button--iconbutton-size-2`,children:[(0,c.jsx)(t.code,{children:`<Button/>`}),` / `,(0,c.jsx)(t.code,{children:`<IconButton/>`}),` `,(0,c.jsx)(t.code,{children:`size`})]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:`| \`size\` | Safe replacement    | How spread it is in the Product |
+| ------ | ------------------- | ------------------------------- |
+| xl     | No safe replacement | 0 usages                        |
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`variationsettings-tokens`,children:[(0,c.jsx)(t.code,{children:`variationSettings`}),` tokens`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| `size`                                                   | Safe replacement    | How spread it is in the Product |\n| -------------------------------------------------------- | ------------------- | ------------------------------- |\n| `text.variant.caption-regular.variationSettings`         | No safe replacement | 0 usages                        |\n| `text.variant.caption-semibold.variationSettings`        | No safe replacement | 0 usages                        |\n| `text.variant.small-regular.variationSettings`           | No safe replacement | 0 usages                        |\n| `text.variant.small-regular-italic.variationSettings`    | No safe replacement | 0 usages                        |\n| `text.variant.small-semibold.variationSettings`          | No safe replacement | 0 usages                        |\n| `text.variant.small-semibold-italic.variationSettings`   | No safe replacement | 0 usages                        |\n| `text.variant.default-regular.variationSettings`         | No safe replacement | 0 usages                        |\n| `text.variant.default-regular-italic.variationSettings`  | No safe replacement | 0 usages                        |\n| `text.variant.default-semibold.variationSettings`        | No safe replacement | 0 usages                        |\n| `text.variant.default-semibold-italic.variationSettings` | No safe replacement | 0 usages                        |\n| `text.variant.large-regular.variationSettings`           | No safe replacement | 0 usages                        |\n| `text.variant.large-regular-italic.variationSettings`    | No safe replacement | 0 usages                        |\n| `text.variant.large-semibold.variationSettings`          | No safe replacement | 0 usages                        |\n| `text.variant.large-semibold-italic.variationSettings`   | No safe replacement | 0 usages                        |\n"})}),`
+`,(0,c.jsxs)(t.h2,{id:`headinglevel-tokens-1`,children:[(0,c.jsx)(t.code,{children:`heading.level.*`}),` tokens`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                   | Safe replacement                               | How spread it is in the Product |\n| --------------------------------------- | ---------------------------------------------- | ------------------------------- |\n| `heading.level.h1.normal.letterSpacing` | No safe replacement (original value is -0.005) | 0 usages                        |\n| `heading.level.h2.normal.letterSpacing` | No safe replacement (original value is 0)      | 0 usages                        |\n| `heading.level.h3.normal.letterSpacing` | No safe replacement (original value is 0.01)   | 0 usages                        |\n| `heading.level.h4.normal.letterSpacing` | No safe replacement (original value is 0.0125) | 0 usages                        |\n| `heading.level.h5.normal.letterSpacing` | No safe replacement (original value is 0.0175) | 0 usages                        |\n| `heading.level.h1.large.letterSpacing`  | No safe replacement (original value is -0.005) | 0 usages                        |\n| `heading.level.h2.large.letterSpacing`  | No safe replacement (original value is 0)      | 0 usages                        |\n| `heading.level.h3.large.letterSpacing`  | No safe replacement (original value is 0.01)   | 0 usages                        |\n| `heading.level.h4.large.letterSpacing`  | No safe replacement (original value is 0.0125) | 0 usages                        |\n| `heading.level.h5.large.letterSpacing`  | No safe replacement (original value is 0.0175) | 0 usages                        |\n"})}),`
+`,(0,c.jsx)(t.h2,{id:`other-tokensvariables-apart-from-the-ones-related-to-the-deprecations-above-1`,children:`Other tokens/variables (apart from the ones related to the deprecations above)`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-md`,children:"| Token                                                                                                                      | Safe replacement                                   | How spread it is in the Product |\n| -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------- |\n| `scheme.color`, `@scheme-color`                                                                                            |                                                    | 0 usages                        |\n| `scheme.bgColor`, `@scheme-bgColor`                                                                                        |                                                    | 0 usages                        |\n| `panel.divider.borderColor`, `@panel-divider-borderColor`                                                                  |                                                    | 0 usages                        |\n| `panel.padding.small.padding`, `panel.padding.base.padding`, `panel.padding.medium.padding`, `panel.padding.large.padding` |                                                    | 0 usages                        |\n| `root.text.height.400`                                                                                                     |                                                    | 0 usages                        |\n| `root.text.height.600`                                                                                                     |                                                    | 0 usages                        |\n| `root.text.height.1000`                                                                                                    |                                                    | 0 usages                        |\n| `root.text.height.1600`                                                                                                    |                                                    | 0 usages                        |\n| `root.text.height.2000`                                                                                                    |                                                    | 0 usages                        |\n| `avatar.size.2xs.size`                                                                                                     | `avatar.size.24.size`                              | 0 usages                        |\n| `avatar.size.xs.size`                                                                                                      | `avatar.size.32.size`                              | 0 usages                        |\n| `avatar.size.s.size`                                                                                                       | `avatar.size.48.size`                              | 0 usages                        |\n| `avatar.size.m.size`                                                                                                       | `avatar.size.64.size`                              | 0 usages                        |\n| `avatar.size.l.size`                                                                                                       | `avatar.size.96.size`                              | 0 usages                        |\n| `avatar.size.xl.size`                                                                                                      | `avatar.size.160.size`                             | 0 usages                        |\n| `avatarWithStatus.size.2xs.onlineIndicator.size`                                                                           |                                                    | 0 usages                        |\n| `avatarWithStatus.size.2xs.onlineIndicator.offset`                                                                         |                                                    | 0 usages                        |\n| `avatarWithStatus.size.xs.onlineIndicator.size`                                                                            |                                                    | 0 usages                        |\n| `avatarWithStatus.size.xs.onlineIndicator.offset`                                                                          |                                                    | 0 usages                        |\n| `avatarWithStatus.size.m.onlineIndicator.size`                                                                             | `avatarWithStatus.size.64.onlineIndicator.size`    | 0 usages                        |\n| `avatarWithStatus.size.m.onlineIndicator.offset`                                                                           | `avatarWithStatus.size.64.onlineIndicator.offset`  | 0 usages                        |\n| `avatarWithStatus.size.xl.onlineIndicator.size`                                                                            | `avatarWithStatus.size.160.onlineIndicator.size`   | 0 usages                        |\n| `avatarWithStatus.size.xl.onlineIndicator.offset`                                                                          | `avatarWithStatus.size.160.onlineIndicator.offset` | 0 usages                        |\n| `color.text.selected`, `color-text-selected`                                                                               | `color.text.accentDark` (slightly darker)          | 0 usages                        |\n| `color.text.error`, `color-text-error`                                                                                     | `color.text.critical`                              | 0 usages                        |\n| `border.hover.borderColor`, `border-hover-borderColor`                                                                     | `color.border.secondary`                           | 0 usages                        |\n| `border.error.borderColor`, `border-error-borderColor`                                                                     | `color.border.critical`                            | 0 usages                        |\n| `border.positive.borderColor`, `border-positive-borderColor`                                                               | `color.border.primary`                             | 0 usages                        |\n| `border.accent.borderColor`, `border-accent-borderColor`                                                                   | `color.border.primary`                             | 0 usages                        |\n| `border.disabled.borderColor`, `border-disabled-borderColor`                                                               | `color.border.primary`                             | 0 usages                        |\n| `root.text.base.fontFamily`                                                                                                | 'text.fontFamily'                                  | 0÷ usages                       |\n| `root.heading.base.fontFamily`                                                                                             | 'text.heading.fontFamily'                          | 0 usages                        |\n| `root.text.base.fontFamily`                                                                                                | Not needed anymore                                 | 0 usages                        |\n| `root.text.base.variable.fontFamily`                                                                                       | Not needed anymore                                 | 0 usages                        |\n| `root.heading.base.typeface`                                                                                               | `text.heading.typeface`                            | 0 usages                        |\n| `root.text.base.typeface`                                                                                                  | `text.typeface`                                    | 0 usages                        |\n| `root.text.spacing.tight`                                                                                                  | Not needed anymore                                 | 0 usages                        |\n| `root.text.spacing.regular`                                                                                                | Not needed anymore                                 | 0 usages                        |\n| `root.text.spacing.loose`                                                                                                  | Not needed anymore                                 | 0 usages                        |\n| `root.text.style.normal`                                                                                                   | Not needed anymore                                 | 0 usages                        |\n| `root.text.style.italic`                                                                                                   | Not needed anymore                                 | 0 usages                        |\n| `root.text.variation.normal`                                                                                               | Not needed anymore                                 | 0 usages                        |\n| `root.text.variation.italic`                                                                                               | Not needed anymore                                 | 0 usages                        |\n| `box.radius.l.borderRadius`                                                                                                | `box.radius.16.borderRadius`                       | 0 usages                        |\n| `box.radius.none.borderRadius`                                                                                             | `box.radius.0.borderRadius`                        | 0 usages                        |\n| `box.radius.12.borderRadius`                                                                                               | `sizing.12`                                        | 0 usages                        |\n| `box.radius.24.borderRadius`                                                                                               | `sizing.24`                                        | 0 usages                        |\n| `box.radius.32.borderRadius`                                                                                               | `sizing.32`                                        | 0 usages                        |\n| `box.radius.48.borderRadius`                                                                                               | `sizing.48`                                        | 0 usages                        |\n| `box.radius.64.borderRadius`                                                                                               | `sizing.64`                                        | 0 usages                        |\n| `box.radius.96.borderRadius`                                                                                               | `sizing.96`                                        | 0 usages                        |\n| `box.radius.160.borderRadius`                                                                                              | `sizing.160`                                       | 0 usages                        |\n"})}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};