[bug]: font-size: 62.5% side effects

[bddjong]

What version of design-system are you using?

• Strapi design system: 2.x

What's Wrong?

Strapi Design System 2.x sets font-size: 62.5% globally on the html element. This causes two problems: it silently breaks any third-party components or plugins used in the strapi dashboard with rem font size values, and it creates an implicit contract that every rem value in the entire page assumes 1rem = 10px. This can cause accessibility issues as well with regards to font sizes in design systems or components that would otherwise have legible sizes.

To Reproduce

Use any external component that uses rem font size values / tokens in a strapi plugin

Expected Behaviour

No hidden side effect on the html element.

[akash-dabhi-qed]

This change is needed but making them without any planning would create a plethora of issues:

• Any Strapi plugin/custom code that uses rem values in its own CSS assuming 1rem = 10px — those will now render 1.6× larger. This is the most common case.
• Any consumer that passes rem string values to Box/Flex props (e.g. width="2rem") — same issue, 2rem is now 32px not 20px.
• extendTheme users who override fontSizes or sizes with old 10px-based rem values — their overrides will
  silently be wrong.
• Any custom styled-component that uses ${theme.fontSizes[X]} in a context where it was tuned against the 10px base — the tokens are now different values.
• Third-party components that are intentionally sized small (e.g. icons at 1.2rem) will now be 1.6× bigger in the Strapi context.