Prepend monospace font stack with new ui-monospace font family

[lunacookies]

Prior to this PR the monospace font stack used SFMono-Regular, which would only work when the user had both manually installed SF Mono and was using Chrome. With this PR, the browser will choose the system font’s monospace variant, given that the browser actually supports ui-monospace. Browser support is, as of this PR, limited to Safari. It can’t hurt to add, though. Support will hopefully expand to other browsers as ui-monospace is part of the CSS Fonts Module Level 4 Draft.

/cc @primer/ds-core

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-css/ldzbf4eh0
✅ Preview: https://primer-css-git-fork-arzg-ui-monospace.primer.vercel.app

[simurai]

👋 Just a quick note once we look into this again.

In Slack we got notified that the current .text-mono font is not vertically aligned compared to other things like buttons:

Here a test in isolation https://codepen.io/simurai/pen/04b6aa50642b27ec59acf2fe6b5bb980 and it seems that a lot of monospace fonts are rendered too high compared to the element's height.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0a278f7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[simurai]

There is another request to add ui-monospace: refined-github/refined-github#4398.

So maybe we can combine this PR with #992.