[RFC]: New font tokens

[krzysztofzuraw]

Short description of the feature

We currently have several difficult-to-use font tokens connected to context, such as heroLarge. To improve usability, we should rename them and introduce a scale from 1 to 11 instead.

Full description

We should replace the current font-related tokens (fontSize, letterSpacing, and lineHeight) with ones that have a scale from 1 to 11:

--mu-font-size-1: 11px;
--mu-font-size-2: 12px;
--mu-font-size-3: 13px;
--mu-font-size-4: 14px;
--mu-font-size-5: 16px;
--mu-font-size-6: 18px;
--mu-font-size-7: 20px;
--mu-font-size-8: 22px;
--mu-font-size-9: 24px;
--mu-font-size-10: 28px;
--mu-font-size-11: 34px;

--mu-line-height-1: 16px;
--mu-line-height-2: 18px;
--mu-line-height-3: 20px;
--mu-line-height-4: 20px;
--mu-line-height-5: 22px;
--mu-line-height-6: 24px;
--mu-line-height-7: 26px;
--mu-line-height-8: 28px;
--mu-line-height-9: 30px;
--mu-line-height-10: 36px;
--mu-line-height-11: 40px;

--mu-letter-spacing-1: 0.025em;
--mu-letter-spacing-2: 0.015em;
--mu-letter-spacing-3: 0.015em;
--mu-letter-spacing-4: 0.01em;
--mu-letter-spacing-5: 0em;
--mu-letter-spacing-6: 0em;
--mu-letter-spacing-7: 0em;
--mu-letter-spacing-8: 0em;
--mu-letter-spacing-9: -0.01em;
--mu-letter-spacing-10: -0.01em;
--mu-letter-spacing-11: -0.01em;

Developers should use the corresponding line-height and letter-spacing when using values from the scale. For example, font-weight-1 should be used with line-height-1 and letter-spacing-1.

For fontWeight we should have:

--mu-font-weight-light: 300;
--mu-font-weight-regular: 400;
--mu-font-weight-medium: 500;
--mu-font-weight-bold: 700;

As we introduce new tokens we should also change API for Text component:

<Text size={1} weight="bold">Small bold text</Text>
// it renders text with:
// --mu-font-size-1: 11px
// --mu-line-height-1: 16px
// --mu-letter-spacing-1: 0.025em
// --mu-font-weight-bold: 700

Acceptance Criteria

• Introduce new tokens.
• Transition MacawUI components to the new tokens.
• Test dashboard using the new MacawUI.
• Migrate the dashboard to the new tokens.
• Migrate the cloud to the new tokens.
• Migrate the apps to the new tokens.

Additional notes

Text – Radix Themes
Text — Shopify Polaris

[lkostrowski]

Is it possible that text size smaller than 1/11px will be introduced?

[krzysztofzuraw]

I checked Dashboard and capture CSS overview for some pages and there are at least 3 places where text size is smaller than 11px (see screenshots) but I think those can be migrated to 11px.

[github-actions]

This issue is stale because it has been open 14 days with no activity.

[github-actions]

This issue was closed because it has been stalled for 2 days with no activity. You are still welcome to reopen it and continue from where you finished. Best regards Saleor team

[github-actions]

This issue is stale because it has been open 14 days with no activity.