Add font-weight-medium to marketing styles, and use it in the type scale

[tobiasahlin]

The medium weight of a font usually maps to 500, but this weight is taken in Primer by semibold. In order to add the ability to use medium weights on marketing pages, this PR adds medium at weight 450 and extrabold at 800, and adds a .text-medium utility to use this font-weight. It also changes the marketing type scale to use medium rather than semibold for all fX-mktg utilities.

This produces the full weight scale as follows:

$font-weight-extrabold: 800 !default;
$font-weight-bold: 600 !default;
$font-weight-semibold: 500 !default;
$font-weight-medium: 450 !default;
$font-weight-normal: 400 !default;
$font-weight-light: 300 !default;

[changeset-bot]

🦋 Changeset detected

Latest commit: 99828a1

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

[ajashams]

@trosage @tobiasahlin -- I'm just comparing these across figma.

Figma	Suggested code updates
	$font-weight-extrabold: 700 !default; $font-weight-bold: 600 !default; $font-weight-semibold: 500 !default; $font-weight-medium: 450 !default; $font-weight-normal: 400 !default; $font-weight-light: 300 !default;

There are a few discrepancies so i want to make sure I'm up to speed on any other changes we may have made prior to this convo beforehand.

[tobiasahlin]

@ajashams All of the numbers in this implementation are just semantic and are used to map a certain number/weight to a font file 🙏 so the numbers differ from Figma but none of the actual used font weights in the type scale should differ in the end!

[simurai]

Should the class and variables names be pre/suffixed with mktg?

So that it's clearer that this is only available in marketing and not in core?

[tobiasahlin]

@simurai I've been battling with this choice internally 😅 adding mktg for buttons for example makes total sense, when we have two flavors of a similar component. But in a way I think this addition is more akin to when we extended the padding and margin scales, which was only available in the marketing bundle but kept the naming scheme for simplicity. I think this makes sense from the perspective that otherwise using the font weight scale would require you to go back and forth between appending mktg and not (mktg-font-medium, font-semibold, font-bold, mktg-font-extrabold...), which could be a bit confusing.

For what it's worth, these utilities also don't use mktg yet are specific to the marketing bundle:

.width-auto {}
.height-auto {}

// Make an object fill its parent
.object-fit-cover {}

// Handling z-index
.z-1 {}
.z-2 {}
.z-3 {}

// Negative z-index
.z-n1 {}
.z-n2 {}

[simurai]

when we have two flavors of a similar component
more akin to when we extended

Ahh, I see. Using mktg is more for something unique or an alternative. But feels weird when just extending core stuff. Ok, yeah.. that sounds reasonable to me. 👍

[tobiasahlin]

Bumped the extra-bold weight to 800 to reduce flickering at font swap: the --apple-system font (San Francisco) is much closer to Alliance Extra Bold at weight 800 🙏