@preply/ds-docs 10.0.0 → 11.1.0

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

@@ -1,341 +0,0 @@
-import{j as e,M as i}from"./iframe-DjYTJz7A.js";import{useMDXComponents as a}from"./index-cpi3YaXo.js";import"./preload-helper-Dp1pzeXC.js";function o(n){const t={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...a(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Migrations/2025 Q4 DS cleanup"}),`
-`,e.jsx(t.h1,{id:"migrations2025-q4---design-system-cleanup-initiative",children:"Migrations/2025 Q4 - Design System cleanup initiative"}),`
-`,e.jsxs(t.ul,{children:[`
-`,e.jsxs(t.li,{children:[e.jsx(t.a,{href:"#for-teams",children:"For teams"}),`
-`,e.jsxs(t.ul,{children:[`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#themes",children:"Themes"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#color-schemes",children:"Color schemes"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#panel-components",children:"Panel components"})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#roottextbaselineheight-token",children:[e.jsx(t.code,{children:"root.text.base.lineHeight"})," token"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#contentcolor-tokens",children:[e.jsx(t.code,{children:"content.*.color"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#rootradius-tokens",children:[e.jsx(t.code,{children:"root.radius.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#texticonheadingtextinline-accent",children:[e.jsx(t.code,{children:"<Text/>"}),"/",e.jsx(t.code,{children:"<Icon/>"}),"/",e.jsx(t.code,{children:"<Heading/>"}),"/",e.jsx(t.code,{children:"<TextInline/>"})," ",e.jsx(t.code,{children:"accent"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#button--iconbutton-size",children:[e.jsx(t.code,{children:"<Button/>"})," / ",e.jsx(t.code,{children:"<IconButton/>"})," ",e.jsx(t.code,{children:"size"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#iconsize-tokens",children:[e.jsx(t.code,{children:"icon.size.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#textweightmediumfontweight-token",children:[e.jsx(t.code,{children:"text.weight.medium.fontWeight"})," token"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#icon-size",children:[e.jsx(t.code,{children:"<Icon/>"})," ",e.jsx(t.code,{children:"size"})]})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#other-tokensvariables",children:"Other tokens/variables"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#old-icons",children:"Old icons"})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#badge-color",children:[e.jsx(t.code,{children:"<Badge/>"})," ",e.jsx(t.code,{children:"color"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#rootpalette-tokens",children:[e.jsx(t.code,{children:"root.palette.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#textheadingicontextinlines-color",children:[e.jsx(t.code,{children:"<Text/>"}),"/",e.jsx(t.code,{children:"<Heading/>"}),"/",e.jsx(t.code,{children:"<Icon/>"}),"/",e.jsx(t.code,{children:"<TextInline/>"}),"'s ",e.jsx(t.code,{children:"color"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#rebrandalert-maybebrokenlayout",children:["RebrandAlert ",e.jsx(t.code,{children:"maybeBrokenLayout"})]})}),`
-`]}),`
-`]}),`
-`,e.jsxs(t.li,{children:[e.jsx(t.a,{href:"#for-the-design-system-team",children:"For the Design System team"}),`
-`,e.jsxs(t.ul,{children:[`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#roottextweight-tokens",children:[e.jsx(t.code,{children:"root.text.weight.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#roottextsize-tokens",children:[e.jsx(t.code,{children:"root.text.size.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#contentcolor-tokens-1",children:[e.jsx(t.code,{children:"content.*.color"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#rootsize-tokens",children:[e.jsx(t.code,{children:"root.size.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#rootsize-tokens-1",children:[e.jsx(t.code,{children:"root.size.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#rootradius-tokens-1",children:[e.jsx(t.code,{children:"root.radius.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#font-family-tokens",children:"Font family tokens"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#font-weight-tokens",children:"Font weight tokens"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#text-variants-and-corresponding-tokens",children:"Text variants (and corresponding tokens)"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#text-size",children:"Text size"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#avatar-size",children:"Avatar size"})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#texticonheadingtextinline-accent-1",children:[e.jsx(t.code,{children:"<Text/>"}),"/",e.jsx(t.code,{children:"<Icon/>"}),"/",e.jsx(t.code,{children:"<Heading/>"}),"/",e.jsx(t.code,{children:"<TextInline/>"})," ",e.jsx(t.code,{children:"accent"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#textinline-italic",children:[e.jsx(t.code,{children:"<TextInline/>"})," ",e.jsx(t.code,{children:"italic"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#heading-large",children:[e.jsx(t.code,{children:"<Heading/>"})," ",e.jsx(t.code,{children:"large"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#heading-level",children:[e.jsx(t.code,{children:"<Heading/>"})," ",e.jsx(t.code,{children:"level"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#headinglevel-tokens",children:[e.jsx(t.code,{children:"heading.level.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#layoutflex-padding-layoutflex-gap--layoutgrid-paddinglayoutgrid-gap-box-padding",children:[e.jsx(t.code,{children:"<LayoutFlex/>"})," ",e.jsx(t.code,{children:"padding"})," /",e.jsx(t.code,{children:"<LayoutFlex/>"})," ",e.jsx(t.code,{children:"gap"})," / ",e.jsx(t.code,{children:"<LayoutGrid/>"})," ",e.jsx(t.code,{children:"padding"}),"/",e.jsx(t.code,{children:"<LayoutGrid/>"})," ",e.jsx(t.code,{children:"gap"})," /",e.jsx(t.code,{children:"<Box/>"})," ",e.jsx(t.code,{children:"padding"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#actionsize-tokens",children:[e.jsx(t.code,{children:"action.size.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#actionvariantplain-tokens",children:[e.jsx(t.code,{children:"action.variant.plain"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#button-plain-variant",children:[e.jsx(t.code,{children:"Button"})," ",e.jsx(t.code,{children:"plain"})," variant"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#actionvariantdangerous-tokens",children:[e.jsx(t.code,{children:"action.variant.dangerous"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#button-dangerous-variant",children:[e.jsx(t.code,{children:"Button"})," ",e.jsx(t.code,{children:"dangerous"})," variant"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#button--iconbutton-size-1",children:[e.jsx(t.code,{children:"<Button/>"})," / ",e.jsx(t.code,{children:"<IconButton/>"})," ",e.jsx(t.code,{children:"size"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#box-radius",children:[e.jsx(t.code,{children:"<Box/>"})," ",e.jsx(t.code,{children:"radius"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#iconsize-tokens-1",children:[e.jsx(t.code,{children:"icon.size.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#icon-size-1",children:[e.jsx(t.code,{children:"<Icon/>"})," ",e.jsx(t.code,{children:"size"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#preplylogo-variant-monochrome",children:[e.jsx(t.code,{children:"<PreplyLogo/>"})," ",e.jsx(t.code,{children:"variant"})," monochrome"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#preplylogo-rebranded-monochrome",children:[e.jsx(t.code,{children:"<PreplyLogo/>"})," ",e.jsx(t.code,{children:"rebranded"})," monochrome"]})}),`
-`,e.jsx(t.li,{children:e.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)"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#old-icons-1",children:"Old icons"})}),`
-`]}),`
-`]}),`
-`,e.jsxs(t.li,{children:[e.jsx(t.a,{href:"#not-to-worry-about",children:"Not to worry about"}),`
-`,e.jsxs(t.ul,{children:[`
-`,e.jsx(t.li,{children:e.jsx(t.a,{href:"#avatarwithstatus-size",children:"AvatarWithStatus size"})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#actionsize-tokens-1",children:[e.jsx(t.code,{children:"action.size.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#button--iconbutton-size-2",children:[e.jsx(t.code,{children:"<Button/>"})," / ",e.jsx(t.code,{children:"<IconButton/>"})," ",e.jsx(t.code,{children:"size"})]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#variationsettings-tokens",children:[e.jsx(t.code,{children:"variationSettings"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.jsxs(t.a,{href:"#headinglevel-tokens-1",children:[e.jsx(t.code,{children:"heading.level.*"})," tokens"]})}),`
-`,e.jsx(t.li,{children:e.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)"})}),`
-`]}),`
-`]}),`
-`]}),`
-`,e.jsx(t.p,{children:"Resources"}),`
-`,e.jsxs(t.ol,{children:[`
-`,e.jsxs(t.li,{children:["Official ",e.jsx(t.a,{href:"https://preply.atlassian.net/wiki/spaces/PDS/pages/4009000993/Design+System+cleanup",rel:"nofollow",children:"Confluence page"})]}),`
-`,e.jsxs(t.li,{children:[e.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"]}),`
-`]}),`
-`,e.jsxs(t.ul,{children:[`
-`,e.jsxs(t.li,{children:["Migrations are split in",`
-`,e.jsxs(t.ul,{children:[`
-`,e.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'}),`
-`,e.jsx(t.li,{children:'"🤔 thoughtful" ones (where replacements require evaluating different options). The DS team will not take care of them'}),`
-`]}),`
-`]}),`
-`,e.jsx(t.li,{children:"All the following APIs will be completely removed by the DS team in 2024 Q4"}),`
-`]}),`
-`,e.jsx(t.p,{children:"List of deprecated APIs"}),`
-`,e.jsx(t.h1,{id:"for-teams",children:"For teams"}),`
-`,e.jsx(t.h2,{id:"themes",children:"Themes"}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.p,{children:"Theoretically old themes are not used in public pages, but you never know."}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"color-schemes",children:"Color schemes"}),`
-`,e.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."}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"panel-components",children:"Panel components"}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"roottextbaselineheight-token",children:[e.jsx(t.code,{children:"root.text.base.lineHeight"})," token"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsxs(t.p,{children:[e.jsx(t.code,{children:"root.text.base.lineHeight"})," (and ",e.jsx(t.code,{children:"root-text-base-lineHeight"}),") is used ~30 times in product."]}),`
-`,e.jsxs(t.p,{children:["Replacing it depends on the font-size used in the same element where the ",e.jsx(t.code,{children:"lineHeight"})," is set."]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.p,{children:"instead, for buttons, there are three more tokens"}),`
-`,e.jsxs(t.ul,{children:[`
-`,e.jsx(t.li,{children:e.jsx(t.code,{children:"action.size.small.lineHeight"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.code,{children:"action.size.medium.lineHeight"})}),`
-`,e.jsx(t.li,{children:e.jsx(t.code,{children:"action.size.large.lineHeight"})}),`
-`]}),`
-`,e.jsxs(t.h2,{id:"contentcolor-tokens",children:[e.jsx(t.code,{children:"content.*.color"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"rootradius-tokens",children:[e.jsx(t.code,{children:"root.radius.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"texticonheadingtextinline-accent",children:[e.jsx(t.code,{children:"<Text/>"}),"/",e.jsx(t.code,{children:"<Icon/>"}),"/",e.jsx(t.code,{children:"<Heading/>"}),"/",e.jsx(t.code,{children:"<TextInline/>"})," ",e.jsx(t.code,{children:"accent"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"button--iconbutton-size",children:[e.jsx(t.code,{children:"<Button/>"})," / ",e.jsx(t.code,{children:"<IconButton/>"})," ",e.jsx(t.code,{children:"size"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-md",children:`| \`size\` | Safe replacement    |
-| ------ | ------------------- |
-| xs     | No safe replacement |
-`})}),`
-`,e.jsxs(t.h2,{id:"iconsize-tokens",children:[e.jsx(t.code,{children:"icon.size.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"textweightmediumfontweight-token",children:[e.jsx(t.code,{children:"text.weight.medium.fontWeight"})," token"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"icon-size",children:[e.jsx(t.code,{children:"<Icon/>"})," ",e.jsx(t.code,{children:"size"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"other-tokensvariables",children:"Other tokens/variables"}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"old-icons",children:"Old icons"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe (mostly)"}),`
-`,e.jsx(t.pre,{children:e.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                        |
-`})}),`
-`,e.jsxs(t.h2,{id:"badge-color",children:[e.jsx(t.code,{children:"<Badge/>"})," ",e.jsx(t.code,{children:"color"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsx(t.pre,{children:e.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'})}),`
-`,e.jsxs(t.h2,{id:"rootpalette-tokens",children:[e.jsx(t.code,{children:"root.palette.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsxs(t.p,{children:["The ",e.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."]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"textheadingicontextinlines-color",children:[e.jsx(t.code,{children:"<Text/>"}),"/",e.jsx(t.code,{children:"<Heading/>"}),"/",e.jsx(t.code,{children:"<Icon/>"}),"/",e.jsx(t.code,{children:"<TextInline/>"}),"'s ",e.jsx(t.code,{children:"color"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsxs(t.p,{children:["The ",e.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."]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"rebrandalert-maybebrokenlayout",children:["RebrandAlert ",e.jsx(t.code,{children:"maybeBrokenLayout"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🤔 thoughtful"}),`
-`,e.jsxs(t.p,{children:["Remove ",e.jsx(t.code,{children:"maybeBrokenLayout"})," and add ",e.jsx(t.code,{children:"fullPageWidth"})," if the RebrandAlert is rendered with full page width. See ",e.jsx(t.a,{href:"https://preply.slack.com/archives/C024EAEHP6V/p1702989181325429",rel:"nofollow",children:"the full explanation on this Slack message"}),"."]}),`
-`,e.jsx(t.p,{children:"Usages: ~59 usages."}),`
-`,e.jsx(t.h1,{id:"for-the-design-system-team",children:"For the Design System team"}),`
-`,e.jsxs(t.h2,{id:"roottextweight-tokens",children:[e.jsx(t.code,{children:"root.text.weight.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: ~50 usages combined"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"roottextsize-tokens",children:[e.jsx(t.code,{children:"root.text.size.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: ~70 usages combined"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"contentcolor-tokens-1",children:[e.jsx(t.code,{children:"content.*.color"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: ~20 usages combined"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"rootsize-tokens",children:[e.jsx(t.code,{children:"root.size.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: ~50 usages combined"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"rootsize-tokens-1",children:[e.jsx(t.code,{children:"root.size.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: ~1000 usages combined"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"rootradius-tokens-1",children:[e.jsx(t.code,{children:"root.radius.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: ~110 usages combined"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"font-family-tokens",children:"Font family tokens"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"The font families are now managed in a centered way for all Tokyo UI contents."}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"font-weight-tokens",children:"Font weight tokens"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"text-variants-and-corresponding-tokens",children:"Text variants (and corresponding tokens)"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: TODO:"}),`
-`,e.jsx(t.pre,{children:e.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   |
-`})}),`
-`,e.jsx(t.h2,{id:"text-size",children:"Text size"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: TODO:"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"avatar-size",children:"Avatar size"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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                         |
-\`\`\`
-`})}),`
-`,e.jsxs(t.h2,{id:"texticonheadingtextinline-accent-1",children:[e.jsx(t.code,{children:"<Text/>"}),"/",e.jsx(t.code,{children:"<Icon/>"}),"/",e.jsx(t.code,{children:"<Heading/>"}),"/",e.jsx(t.code,{children:"<TextInline/>"})," ",e.jsx(t.code,{children:"accent"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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                      |
-`})}),`
-`,e.jsxs(t.h2,{id:"textinline-italic",children:[e.jsx(t.code,{children:"<TextInline/>"})," ",e.jsx(t.code,{children:"italic"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"heading-large",children:[e.jsx(t.code,{children:"<Heading/>"})," ",e.jsx(t.code,{children:"large"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"heading-level",children:[e.jsx(t.code,{children:"<Heading/>"})," ",e.jsx(t.code,{children:"level"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsxs(t.p,{children:["Replace Heading ",e.jsx(t.code,{children:"level"})," with ",e.jsx(t.code,{children:"variant"})," and the following values. You can use ",e.jsx(t.code,{children:"tag"})," to set the HTML tag, instead."]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"headinglevel-tokens",children:[e.jsx(t.code,{children:"heading.level.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"layoutflex-padding-layoutflex-gap--layoutgrid-paddinglayoutgrid-gap-box-padding",children:[e.jsx(t.code,{children:"<LayoutFlex/>"})," ",e.jsx(t.code,{children:"padding"})," /",e.jsx(t.code,{children:"<LayoutFlex/>"})," ",e.jsx(t.code,{children:"gap"})," / ",e.jsx(t.code,{children:"<LayoutGrid/>"})," ",e.jsx(t.code,{children:"padding"}),"/",e.jsx(t.code,{children:"<LayoutGrid/>"})," ",e.jsx(t.code,{children:"gap"})," /",e.jsx(t.code,{children:"<Box/>"})," ",e.jsx(t.code,{children:"padding"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.p,{children:"Usages: countless usages (also given responsive usages)"}),`
-`,e.jsx(t.pre,{children:e.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               |
-`})}),`
-`,e.jsxs(t.h2,{id:"actionsize-tokens",children:[e.jsx(t.code,{children:"action.size.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"actionvariantplain-tokens",children:[e.jsx(t.code,{children:"action.variant.plain"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"button-plain-variant",children:[e.jsx(t.code,{children:"Button"})," ",e.jsx(t.code,{children:"plain"})," variant"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-md",children:"| Token   | Safe replacement | How spread it is in the Product |\n| ------- | ---------------- | ------------------------------- |\n| `plain` | `secondary`      | 2 usages                        |\n"})}),`
-`,e.jsxs(t.h2,{id:"actionvariantdangerous-tokens",children:[e.jsx(t.code,{children:"action.variant.dangerous"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"button-dangerous-variant",children:[e.jsx(t.code,{children:"Button"})," ",e.jsx(t.code,{children:"dangerous"})," variant"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-md",children:`| Token       | Safe replacement | How spread it is in the Product |
-| ----------- | ---------------- | ------------------------------- |
-| \`dangerous\` | \`critical\`       | 17 usages                       |
-
-Migration type: 🧘 safe
-`})}),`
-`,e.jsxs(t.h2,{id:"button--iconbutton-size-1",children:[e.jsx(t.code,{children:"<Button/>"})," / ",e.jsx(t.code,{children:"<IconButton/>"})," ",e.jsx(t.code,{children:"size"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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                       |
-`})}),`
-`,e.jsxs(t.h2,{id:"box-radius",children:[e.jsx(t.code,{children:"<Box/>"})," ",e.jsx(t.code,{children:"radius"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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                        |
-`})}),`
-`,e.jsxs(t.h2,{id:"iconsize-tokens-1",children:[e.jsx(t.code,{children:"icon.size.*"})," tokens"]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"icon-size-1",children:[e.jsx(t.code,{children:"<Icon/>"})," ",e.jsx(t.code,{children:"size"})]}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"preplylogo-variant-monochrome",children:[e.jsx(t.code,{children:"<PreplyLogo/>"})," ",e.jsx(t.code,{children:"variant"})," monochrome"]}),`
-`,e.jsxs(t.p,{children:["Migration type: 🧘 safe (if also ",e.jsx(t.code,{children:"rebranded"})," prop ia passed)"]}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-md",children:"| ``variant` | Safe replacement                       | How spread it is in the Product |\n| ---------- | -------------------------------------- | ------------------------------- |\n| monochrome | Remove it, all variants are monochrome | 3 usages                        |\n"})}),`
-`,e.jsxs(t.h2,{id:"preplylogo-rebranded-monochrome",children:[e.jsx(t.code,{children:"<PreplyLogo/>"})," ",e.jsx(t.code,{children:"rebranded"})," monochrome"]}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-md",children:"| ``rebranded` | Safe replacement                      | How spread it is in the Product |\n| ------------ | ------------------------------------- | ------------------------------- |\n| true/false   | Remove it, all variants are rebranded | Hard to count                   |\n"})}),`
-`,e.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)"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"old-icons-1",children:"Old icons"}),`
-`,e.jsx(t.p,{children:"Migration type: 🧘 safe (mostly)"}),`
-`,e.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 ",e.jsx(t.a,{href:"https://github.com/preply/design-system/tree/main/packages/media-icons/svg/24",rel:"nofollow",children:"here"}),"."]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.h2,{id:"avatarwithstatus-size",children:"AvatarWithStatus size"}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-md",children:"| `<AvatarWithStatus/>` `size` | Safe replacement    | How spread it is in the Product |\n| ---------------------------- | ------------------- | ------------------------------- |\n| 2xs                          | No safe replacement | 0 usages                        |\n| xs                           | No safe replacement | 0 usages                        |\n"})}),`
-`,e.jsxs(t.h2,{id:"actionsize-tokens-1",children:[e.jsx(t.code,{children:"action.size.*"})," tokens"]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"button--iconbutton-size-2",children:[e.jsx(t.code,{children:"<Button/>"})," / ",e.jsx(t.code,{children:"<IconButton/>"})," ",e.jsx(t.code,{children:"size"})]}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-md",children:`| \`size\` | Safe replacement    | How spread it is in the Product |
-| ------ | ------------------- | ------------------------------- |
-| xl     | No safe replacement | 0 usages                        |
-`})}),`
-`,e.jsxs(t.h2,{id:"variationsettings-tokens",children:[e.jsx(t.code,{children:"variationSettings"})," tokens"]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsxs(t.h2,{id:"headinglevel-tokens-1",children:[e.jsx(t.code,{children:"heading.level.*"})," tokens"]}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.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)"}),`
-`,e.jsx(t.pre,{children:e.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"})}),`
-`,e.jsx(t.pre,{children:e.jsx(t.code,{})})]})}function c(n={}){const{wrapper:t}={...a(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{c as default};