Metric2 testing - demo adjusted typography values

[taysea]

Deploy Preview - contact Taylor for password

What does this PR do?

Demo showing how typography values can be adjusted to accommodate Metric 2 which renders bigger than the existing Metric.

Had referenced work done by Ashley for some of the initial values, but needed to make adjustments to bring there rendered size closer to current values: https://www.figma.com/design/xUkRoNbURK7XyIqDKxZ70z/HPE-Design-Sticker-Sheet---Working-File?node-id=1564-13423

Approach:

• In the "sticker sheet", the "alpha" branch of tokens renders on the left and the "metric2" version of tokens renders on the right
• If you toggle off "View side-by-side", the "alpha" branch of tokens renders behind in red.
• Adjusted fontSize values for heading/text/paragraph
• Left lineHeight values as is so the overall height of the fonts remained the same

Notes:

• There are some slight discrepancies due to baseline shifts and letter spacing differences between Metric 2 and Metric. I think that is to be expected and okay.
• Differences in where paragraph wraps is because we wrap at "25em" which is a multiplier off the font-size and font-size has decreased so it wraps sooner. Can always adjust the max-width value if desired.
• Horizontal shifts in button widths is due to the difference in letter spacing.
• Metric 2 "bold" is not as heavy as Metric "bold" is -19px is required for font-size on primary button, but given Metric2 renders much bigger, it would make the font-sizes of medium buttons oddly large. In the PR preview, I've set the button font-sizes to "medium" (16px). That said, we either need to wait to adopt Metric 2 until we adjust the primary button background away from brand green, or we need to have the large font-size in the buttons.

Results:

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• [ ] Small, medium, and large screen sizes
• [ ] Cross-browsers (FireFox, Chrome, and Safari)
• [ ] Light & dark modes
• [ ] All hyperlinks route properly

Accessibility Checks

• [ ] Keyboard interactions
• [ ] Screen reader experience
• [ ] Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• [ ] Console is free of warnings and errors
• [ ] Passes E2E commit checks
• [ ] Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Closes #4114

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[netlify[bot]]

✅ Deploy Preview for lustrous-dasik-2fbdc5 ready!

Name	Link
🔨 Latest commit	baf4050244b86bd7fe126e91579a465e820fcf82
🔍 Latest deploy log	https://app.netlify.com/sites/lustrous-dasik-2fbdc5/deploys/66d9fe5253cc1a0008f27577
😎 Deploy Preview	https://deploy-preview-4158--lustrous-dasik-2fbdc5.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for bright-moonbeam-31a872 ready!

Name	Link
🔨 Latest commit	baf4050244b86bd7fe126e91579a465e820fcf82
🔍 Latest deploy log	https://app.netlify.com/sites/bright-moonbeam-31a872/deploys/66d9fe5202625e0008e970bd
😎 Deploy Preview	https://deploy-preview-4158--bright-moonbeam-31a872.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[taysea]

Closing, stale but available for archive