Prepare marketing typography for variable fonts, align font weights with OpenType spec

[tobiasahlin]

This PR updates marketing typography to work with variable fonts. It does that by:

• Upstreaming some marketing alignment changes from .com
• Adding some new utilities for controlling weight and width (stretch)
• Updated: After some discussion with @langermank, aligns primer's font weight utilities and variables with the OpenType spec by remapping bold to semibold, and semibold to medium

Any visual changes can be avoided by replacing instances of text-semibold with text-medium, and then text-bold with text-semibold.

The reason that I'm suggesting this change is 1) to align with the OpenType spec, but more crucially 2) to enable us to use conventional variable names while uniformly accessing the entire font weight scale (1-1000) with variable fonts. Since we're currently mapping bold to 600 instead of the standard 700, it forces medium and semibold to both gravitate towards 500, and all weights thicker than bold are 100 thinner than expected.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: fa77e60778258d2f69befa0fc390e6265c97d558

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[tobiasahlin]

@simurai @langermank @jonrohan would love your thoughts here 🙏

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.

[simurai]

@tobiasahlin What's the status of this PR? Do we still wanna ship it?

Sorry, there are now lots of merge conflicts because some component styles moved to PVC. E.g.

• primer/css/.../flash.scss moved to primer/view_components/.../flash.pcss

Also in PVC it already uses the new --base-text-weight-semibold with a hardcoded fallback of 600. So maybe the components in PVC don't need to be updated anymore?

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.