css-library: add source-sans normalize token, rename base to root

[powellkerry]

Chromatic

https://3452-update-font-tokens--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

• Renames font-size-base to font-size-root
• Adds a new token for source-sans-normalized
• Adds a utility class for source-sans-normalized - vads-u-font-size--source-sans-normalized

Documentation site PR: department-of-veterans-affairs/vets-design-system-documentation#3511
Closes 3452

QA Checklist

• [ x] Component maintains 1:1 parity with design mocks
• [ x] Text is consistent with what's been provided in the mocks
• [ x] Component behaves as expected across breakpoints
• [ x] Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• [ x] Designer has signed off on changes (if applicable. If not applicable provide reason why)
• [ x] Tab order and focus state work as expected
• [ x] Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• [ x] New components are covered by e2e tests; updates to existing components are covered by existing test suite
• [ x] Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

• No visual changes, --font-size-base was not used in vets-website or component-library (outside of css-library)

Acceptance criteria

• [ x] QA checklist has been completed
• [ x] Screenshots have been attached that cover desktop and mobile screens

Definition of done

• [ x] Documentation has been updated, if applicable
• [ x] A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[danbrady]

@powellkerry @micahchiang If we're renaming font-size-base to font-size-root, then anywhere we use this token will need to be updated for the name change. If that's the case, why wouldn't we point to the newly added vads-font-size-root instead? They both have the same value/meaning, right? What are the reasons we need to have both these tokens?

[powellkerry]

I was wondering about that but thought I would leave it until someone validated my thoughts :) The --vads--font-size-root should be removed now.

[micahchiang]

@powellkerry @danbrady - I added a comment below. We can keep the css custom property that gets generated - font-size-root - because the original, font-size-base, wasn't being used anywhere in vets-website.

[micahchiang]

requesting changes to just the src/tokens/fonts.scss file so utility classes remain the same.

[micahchiang]

For now, you can keep this as base with the updated value so the utility class remains the same.

Suggested change

	'root': $font-size-root,
	'base': $font-size-root,

[powellkerry]

I did update this on the documentation site PR. Should we keep root and base or should I revert that change on the documentation site PR?

[micahchiang]

I left some comments on your doc site PR. I think some of the changes need to be reverted for the utility class updates there, and some changes need to be modified because we're not actually generating a vads-font-size-root token, just a token named font-size-root

[micahchiang]

@powellkerry I looked back at our original slack conversation.

Currently in this PR we're just generating a font-size-root token, given your changes above on line 21. If we want to additionally add a vads-font-size-root token, then another entry needs to be added here in the vads-font.size object, similar to what you've added above for source-sans-normalized. Adding a "root": {"value": "1rem"} entry here should generate a token named vads-font-size-root.