Allow conversion of rem font size to pixels in typography presets

[jamesmockett]

What are you changing?

Adds presetToPx helper to convert default rem font size in a given typography preset to a pixel value. Line height is untouched as this is already specified as a unitless relative value.

Why?

We want to encourage use of rem font sizes so rather than duplicating all of the presets with different units a conversion function provides a pixel equivalent where strictly necessary.

presetToPx(headlineBold24))

👇

font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif;
font-size: 24px;
line-height: 1.15;
font-weight: 700;
font-style: normal;
--source-text-decoration-thickness: 3px;

Notes

This adds a TypographyPreset type to define the shape of a preset, but this hasn't been applied to the presets themselves as it hides the underlying values of the properties with the expected type:

With untyped presets the values are exposed:

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7a98a77

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

[github-actions]

Tip

Once this PR is ready to go, add the run_chromatic label to run the Chromatic tests.

This saves us a lot of money by not running the tests before we need them.

[mxdvl]

You can also use a replacer function as part of String.prototype.replace, which could make this simpler:

return preset.replace(REGEX_FONT_SIZE, (_, match) => {
  const pxValue = parseFloat(match) * 16;
  return `font-size: ${pxValue}px`;
})

[mxdvl]

I think you might have an issue if the value does not contain a decimal part… Thankfully we currently do not use 16px, 32px or 48px as a font size, but we might in the future!

Suggested change

	const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/;
	const REGEX_FONT_SIZE = /font-size:\s(\d+\.?\d*)rem/;

Explore in Regex101

[SiAdcock]

This nombre magique is exposed as rootPixelFontSize in ./convert-value. Shall we pull it in here?

[jamesmockett]

Thanks the comments @mxdvl and @SiAdcock 🙏 We've realised that people don't seem to be using the existing API's unit: 'px' option so given that we want to encourage the use of relative font sizes we've decided to leave this functionality out for now. We're not planning to deprecate the typography API immediately so if it turns out that there is a need for this we can resurrect the PR.