🚧 Replace font-size() and line-height() with custom properties

[aveline]

WHY are these changes introduced?

Resolves #4600

WHAT is this pull request doing?

• Replacing font-size() and line-height() functions with custom properties
• Currently blocked by Migrate active tokens from polaris-tokens to polaris-react library #4588 which will allow the custom properties to be properly generated

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[aveline]

Is this the right time to introduce this change? It does impact the rem value we would set the font-size and line-height tokens to.

For context, there has been a previous attempt to make this change, but it was reverted #1590

[kyledurand]

Might be worth getting @martenbjork to weigh in on this. I know he's experimented with global font size changes in the past

[alex-page]

My gut feeling is we tackle this when we remove the rem function. Would love to know other thoughts.

[aveline]

@alex-page ok probably best not to conflate things. it's simple enough to update the token values when we do make the change.

[github-actions]

size-limit report

Path	Size
cjs	165.95 KB (0%)
esm	96.52 KB (0%)
esnext	143.39 KB (+0.2% 🔺)
css	34.57 KB (+0.82% 🔺)

[aveline]

This change is related to changing the base font size here https://github.com/Shopify/polaris-react/pull/4674/files#r752497881

[aveline]

Leaving these mixins in for the scope of this PR. It would make sense to address them when we start thinking about composite components.

[aaronccasanova]

Glad to see we settled on token scales for font-size and line-height!

suggestion(non-blocking): Wonder if we should expand these abbreviations to match the --p-font-weight tokens @lgriffee just introduced? I know this is still WIP and the scope of this work is to get 100% token coverage, but I feel like we should have consistency in our typography tokens.

/* This doesn't feel very intuitive */
p {
  font-size: var(--p-fs-1);
  font-weight: var(--p-font-weight-regular)
}

[aveline]

I don't feel too strongly either way. Now is the time to play around with this and it will be easy enough to change through the token generator. Would it be worth creating a separate issue to align on naming convention?

[aaronccasanova]

I don't think a separate issue is necessary personally. If anything I would just have a quick sync with @lgriffee to settle on a convention for v8. Right now it is clear two developers worked on the typography vars. I'm leaning towards expanding since fs isn't clear to me. If I was looking at a collection of :root properties does fs mean: flex-shrink, font-style, font-stretch, font-synthesis, font-size, font-size-adjustment, etc...?

[aveline]

Split up into #4852 and #4784