v9 font size is fixed instead of relative

[Erikvv]

Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

Yes

Reproduction

https://codesandbox.io/p/sandbox/romantic-cache-5gscm6

Bug Description

Actual Behavior

The FluentProvider sets font-size: var(--fontSizeBase300); which is 14px by default.

Doing it like this overrides the font size set by the user in the OS or browser (or by the developer on the root element). The user might have increased the font size for legibility/accessibility.

Expected Behavior

Respect user setting of font size. For example by setting it to 1rem.

If there is a reason to not respect the absolute size then at least have it scale relative to the users preference. For example by using 0.875rem instead of 14px.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.