USWDS v3 variations are displaying with small font size in vets-website

[jamigibbs]

Description

During the development of the USWDS v3 variation of va-radio, we noticed that the component was displaying very small in Storybook when the v3 stylesheets were applied. (Note: This is specifically when Formation is still loading as a global resource)

For example:

Review the USWDS website for comparison.

We discovered that Formation was setting the root font to 10px on the html tag and 1.6rem on the body tag. We applied this customization in Storybook to toggle the root style depending on if the Storybook page was for a USWDS v3 component so that those components would receive the correct root font size (16px).

The purpose of this ticket is to validate that teams that have opted into using USWDS v3 and opted out of Formation have the v3 components displaying as expected in their apps.

Related Work:

• https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/1211

Tasks

• [ ] Test the display of the va-radio v3 variation in vets-website (specifically the pre-check-in app /health-care/appointment-pre-check-in).
• [ ] Implement any fixes or update as needed.

Acceptance Criteria

• [ ] The v3 variations display normally in vets-website for apps that have opted into using v3 components and opted out of Formation.

[caw310]

Putting this issue back to Reviewed/Needs prioritizing to be worked on in a future sprint as we aren't quite in a place to work on this issue right now.