feat!: Update typography system and values, implement compact theme

[VincentSmedinga]

• Removes the typography breakpoint – text size grows in one straight line now
• Updates the minimum and maximum font sizes for each text level using typographic scales
• Updates all components to use the new tokens

Text size 4 and 5 are the same now. If the designers agree, we’ll consolidate them in code in a separate PR.

The .amsterdam-theme--density-high class name is a very temporary approach to allow visually evaluating the updated font sizes. We will soon replace it with a theming layer.

For the icon component, all ‘high density’ classes had to move to the bottom because of a specificity rule in Stylelint. For the rest, I minimised the changes to avoid merge conflicts. I did replace custom token names like container-multiplier with line-height.

[alimpens]

I do not agree with scattering a wrapping theme class like this

Certainly not ideal, but the alternative is pulling a complete theming approach into scope of this PR. That would be even worse.

Let’s see this PR as an iteration in the right direction and start work on theming asap so that finding these ugly classes won’t be difficult.

or calling the default font size narrow density-low to avoid a boolean property for density.

The density theme is not about font size alone but spacing lengths (grid and future row and column margins) as well. So if we were to take the Boolean route we would use ‘spacious’ and ‘compact’.

I may be too strict in trying to keep our options open here. @alimpens which approach would you prefer?

I think it totally depends on whether we realistically expect there to be more density variants in the future, which is hard to guess. I'm not a huge fan of adding even more complexity to our already complex spacing system, so maybe we should go for a boolean to make it harder to make it more complex in the future ;) Unless we have an indication that more density variants are required?

[VincentSmedinga]

I think it totally depends on whether we realistically expect there to be more density variants in the future, which is hard to guess.

To be honest, a third density variation appears far-fetched. Extra compact? Semi-spacious?

to make it harder to make it more complex in the future

Yes, how can no-one ever prevent unavoiding not disagreeing with that!

I’ve replaced everything with spacious and compact.

[dlnr]

I think it totally depends on whether we realistically expect there to be more density variants in the future, which is hard to guess.

To be honest, a third density variation appears far-fetched. Extra compact? Semi-spacious?

to make it harder to make it more complex in the future

Yes, how can no-one ever prevent unavoiding not disagreeing with that!

I’ve replaced everything with spacious and compact.

Here are links to theming in Storybook:

• https://storybook.js.org/docs/configure/theming#create-a-theme-quickstart
• https://storybook.js.org/blog/introducing-theme-switcher-addon/
• https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator

[VincentSmedinga]

Here are links to theming in Storybook:

• https://storybook.js.org/docs/configure/theming#create-a-theme-quickstart
• https://storybook.js.org/blog/introducing-theme-switcher-addon/
• https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator

Thanks. The second and third link are about theming canvases, e.g. dark mode.

The first is on theming Storybook itself. I can’t find anything on font sizes there yet. And I think that’s an important change we need.