feat!: Split text tokens into ‘body text’ and ‘heading’ groups and rename to ‘typography’

[VincentSmedinga]

Describe the pull request

Thank you for contributing to the project!
Please use this template to help us handle your PR smoothly.

What

Refactors typography tokens:

• Renames ams.text to ams.typography to match NLDS
• Splits font size, line height and font weight tokens into body-text and heading groups to prepare for separate line height values

Why

To implement a stable API of brand tokens for typography.

How

(How were these changes implemented? Provide a brief overview of the approach taken and any key considerations.)

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

• Next up: update line height values in a separate PR
• The bottom half of the Typography documentation is a bit out of place, but hasn’t changed in this PR. Out of scope.

[VincentSmedinga]

Hmm, icons can be paired with both text and headings, and these have different line heights for the same text levels.

[VincentSmedinga]

@alimpens We must update the Icon API for this. An icon can no longer just say “I’m with someone on text level 4”, because that could be either a heading (with a line height of 1.3) or a large paragraph (with 1.5).

How about

size: 'small' | 'medium' | 'large' | 'extra-large' | 'heading-0' … 'heading-6' ?

[alimpens]

If we want to communicate that the 2 lists partially overlap, we could use a reference here. Something like {ams.typography.heading.5.font-size}. That would also prevent inconsistencies.

[VincentSmedinga]

That’s because we made our ‘layer above brand’ invisible. You could say we lost the same kind of information in our colour tokens, where nothing explicitly indicates that our invalid red and error red stem from the same colour code.

So, relating a body text size to a heading size is incorrect – they have the same ancestor. Even more so because the only reason for a ‘level 5 heading’ font size to exist is to allow a Heading to match the font size of a paragraph.

[alimpens]

I know, what I mean is more: do we want to communicate this invisible layer to our users? Relating a body text size to a heading size isn't strictly correct, but we do communicate possibly valuable information to our users if we do.