[Typography foundations] Add 24px variant to `Text` component

[sarahill]

Why

In the old type system, DisplayMedium (26px) and DisplayLarge (28px) were often both used for numerals and other similar elements and with the difference between them being on 2px, the goal was to consolidate these and have the new Heading2xl style replace those two.

However, after applying the styles more widely to components and pages in the admin, I'm finding there is a need for increment between 20 and 28. We have 24 as part of our scale but it's currently only being used as a responsive style.

Adding a dedicated variant that introduces 24px will give product teams the sizes they need to more accurately migrate and having that extra increment works well across a lot of different contexts.

I originally thought having a larger increment between headingXl and heading2xl would create more hierarchy but I believe it was forcing a rule that doesn't necessarily work in a denser more productive UI.

Proposal

Adjust the heading variants and introduce a new variant using 24px

I'm proposing shifting the t-shirt sizes down by introducing headingXs instead of having the t-shirt sizes go up to heading5xl. Shifting the sizing would look like this:

Updated naming	Current naming
no change	heading4xl
no change	heading3xl
no change	heading2xl
headingXl	-
headingLg	headingXl
headingMd	headingLg
headingSm	headingMd
headingXs	headingSm

Variants with updated values (size , line-height, weight):

Variant	Size/height	Weight
heading4xl	40 / 48	bold
heading3xl	32 / 40	semibold
heading2xl	28 / 32	semibold
headingXl	24 / 28	semibold
headingLg	20 / 24	semibold
headingMd	16 / 24	semibold
headingSm	14 / 20	semibold
headingXs	12 / 16	bold

We'll also need to update the mapping:

Variant	Size/height
heading4xl	DisplayXLarge
heading3xl (new)	-
heading2xl	DisplayLarge
headingXl	DisplayMedium
headingLg	DisplaySmall
headingMd	Heading
headingSm (new)	-
headingXs	Subheading