Formation Deprecation - Step 2 - Discovery: Migrate DST playground applications base font-size

[micahchiang]

Description

A fundamental step necessary in the deprecation of Formation in favor of the new CSS Library is the use of a base font-size consistent with USWDS.

Formation currently sets font-size by doing two things:

html { font-size: 10px; }
body { font-size: 1.6rem; }

USWDS does something similar by doing this:

html { font-size: 100%; }
body { font-size: 16px; }

Problem Statement

Formation bases rem values off of 10px while USWDS bases them off of 16px. Simply changing the base font-size in Formation would result in a significant increase in size:

// .vads-base-font as an example

// Current:
10px * 1.6rem = 16px
// Browser default (uswds)
16px * 1.6rem = 25.6px

How does VA.gov, from both a sitewide and application specific perspective, move to the USWDS base font-size without disrupting content flow?

Considerations

• Import minimal.scss into DST playground applications but override font-size declarations in formation/sass/base/va
• add font-size declarations to css-library/src/stylesheets/elements.scss and import this for base font-size declaration.
• link local instances of formation, css-library, and formation together to test this locally

Acceptance Criteria

• Discovery has determined whether or not app by app imports is a viable way to migrate font-size. If it isn't, then an alternate solution is proposed.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @micahchiang @Andrew565 @powellkerry @harshil1793 @ataker @nickjg231 @rmessina1010

[caw310]

This will go into the next sprint as Jami and Ray have been busy working on other things so need more time.

[jamigibbs]

We have added our discovery notes to this Confluence doc for discussion: https://vfs.atlassian.net/wiki/spaces/DST/pages/2817130631/Discovery+Formation+base+font-size

[jamigibbs]

A follow-up ticket has been created about deciding on the approach:

• Formation Deprecation: Root font-size rem value approach (global vs app-by-app) #2252