Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/AppProvider/AppProvider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ button {

html {
position: relative;
font-size: ($base-font-size / $default-browser-font-size) * 100%;
font-size: 100%;
Copy link
Contributor Author

@aveline aveline Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@kyledurand kyledurand Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@alex-page alex-page Nov 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@aveline aveline Nov 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

-webkit-font-smoothing: antialiased;

// This needs to come after -webkit-font-smoothing
Expand Down
4 changes: 2 additions & 2 deletions src/components/Navigation/Navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,11 +348,11 @@ $secondary-item-font-size: rem(15px);
padding-left: spacing();

.Text {
font-size: font-size(subheading);
font-size: var(--fs-1);
Copy link
Member

@aaronccasanova aaronccasanova Nov 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
}

Copy link
Contributor Author

@aveline aveline Nov 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member

@aaronccasanova aaronccasanova Nov 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...?

color: var(--p-text-subdued);

@include when-typography-not-condensed {
font-size: font-size(subheading, large-screen);
font-size: var(--fs-0);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/Navigation/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
$item-font-size: rem(16px);
$item-font-size-small: rem(14px);
$item-font-size: var(--fs-4);
$item-font-size-small: var(--fs-2);
$item-line-height-small: rem(32px);
$item-line-height-large: rem(36px);
// This is the only place this color is used.
Expand Down
6 changes: 3 additions & 3 deletions src/components/Page/components/Header/components/Title/Title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
.Title {
@include text-breakword;
@include text-emphasis-strong;
font-size: rem(24px);
line-height: rem(28px);
font-size: var(--fs-8);
line-height: var(--lh-3);

@include when-typography-not-condensed {
font-size: rem(20px);
font-size: var(--fs-6);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/styles/foundation/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $base-font-size: 10px;
} @else if $unit == 'rem' {
@return $value;
} @else if $unit == 'px' {
@return $value / $base-font-size * 1rem;
@return $value / $default-browser-font-size * 1rem;
Copy link
Contributor Author

@aveline aveline Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

} @else if $unit == 'em' {
@return $unit / 1em * 1rem;
} @else {
Expand Down
18 changes: 9 additions & 9 deletions src/styles/shared/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,34 @@ $typography-condensed: em(640px);
}

@mixin text-style-caption {
Copy link
Contributor Author

@aveline aveline Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

font-size: font-size(caption);
font-size: var(--fs-1);
font-weight: 400;
line-height: line-height(caption);

@include when-typography-not-condensed {
font-size: font-size(caption, large-screen);
font-size: var(--fs-0);
line-height: line-height(caption, large-screen);
}
}

@mixin text-style-heading {
font-size: font-size(heading);
font-size: var(--fs-8);
font-weight: 600;
line-height: line-height(heading);

@include when-typography-not-condensed {
font-size: font-size(heading, large-screen);
font-size: var(--fs-4);
}
}

@mixin text-style-subheading {
font-size: font-size(subheading);
font-size: var(--fs-1);
font-weight: 600;
line-height: line-height(subheading);
line-height: var(--lh-0);
text-transform: uppercase;

@include when-typography-not-condensed {
font-size: font-size(subheading, large-screen);
font-size: var(--fs-0);
}
}

Expand All @@ -59,15 +59,15 @@ $typography-condensed: em(640px);
}

@mixin text-style-body {
font-size: font-size(body);
font-size: var(--fs-2);
font-weight: 400;
line-height: line-height(body);

text-transform: initial;
letter-spacing: initial;

@include when-typography-not-condensed {
font-size: font-size(body, large-screen);
font-size: var(--fs-3);
}
}

Expand Down