Skip to content
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

Jump to bottom

Update font-weight and letter-spacing for Inter font #9782

Closed
wants to merge 8 commits into from
Closed

Update font-weight and letter-spacing for Inter font #9782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1c725b8
Update font-weight tokens
aaronccasanova Jul 19, 2023
7e8487d
Add experimental letter-spacing tokens
aaronccasanova Jul 19, 2023
693625a
Adjust experimental letter-spacing tokens
aaronccasanova Jul 20, 2023
58222e5
Group variant styles into mixins and update font-weight and letter-sp…
aaronccasanova Jul 20, 2023
6511f6d
Update google fonts Inter url
aaronccasanova Jul 20, 2023
7066113
Move beta-flag styles into variant mixins
aaronccasanova Jul 20, 2023
2c9efb7
Add changeset entry
aaronccasanova Jul 21, 2023
08ecb5a
Revert font-weigh-regular update and drop font-weight-extra-medium
aaronccasanova Jul 21, 2023
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
6 changes: 6 additions & 0 deletions .changeset/early-coats-trade.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@shopify/polaris': patch
'@shopify/polaris-tokens': patch
---

Updated experimental `font-weight` and `letter-spacing` for Inter font
2 changes: 1 addition & 1 deletion polaris-react/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
rel="stylesheet"
/>
219 changes: 164 additions & 55 deletions polaris-react/src/components/Text/Text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,165 +56,274 @@
color: var(--p-color-text-inverse);
}

@mixin se23-headingSm {
font-size: var(--p-font-size-80-experimental);
line-height: var(--p-font-line-height-2);
}

.headingXs {
@mixin text-heading-xs {
font-size: var(--p-font-size-75);
line-height: var(--p-font-line-height-1);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-1);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

#{$se23} & {
@include se23-headingSm;
@include text-heading-sm-experimental;
}
}

.headingSm {
@mixin text-heading-sm {
font-size: var(--p-font-size-100);
line-height: var(--p-font-line-height-2);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

#{$se23} & {
@include se23-headingSm;
@include text-heading-sm-experimental;
}
}

.headingMd {
@mixin text-heading-sm-experimental {
font-size: var(--p-font-size-80-experimental);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);
}

@mixin text-heading-md {
font-size: var(--p-font-size-200);
line-height: var(--p-font-line-height-3);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-3);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

#{$se23} & {
font-size: var(--p-font-size-100);
line-height: var(--p-font-line-height-2);
@include text-heading-md-experimental;
}
}

.headingLg {
font-size: var(--p-font-size-200);
@mixin text-heading-md-experimental {
font-size: var(--p-font-size-100);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);
}

@mixin text-heading-lg {
font-size: var(--p-font-size-200);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

#{$se23} & {
@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-300);
line-height: var(--p-font-line-height-3);
font-weight: var(--p-font-weight-bold);
}

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-300);
line-height: var(--p-font-line-height-3);
#{$se23} & {
@include text-heading-lg-experimental;
}
}

.headingXl {
@mixin text-heading-lg-experimental {
font-size: var(--p-font-size-300);
font-weight: var(--p-font-weight-extra-semibold-experimental);
line-height: var(--p-font-line-height-3);
font-weight: var(--p-font-weight-semibold);
letter-spacing: var(--p-font-letter-spacing-tight-experimental);
}

#{$se23} & {
font-weight: var(--p-font-weight-bold);
}
@mixin text-heading-xl {
font-size: var(--p-font-size-300);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-3);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-400);
line-height: var(--p-font-line-height-4);
}

#{$se23} & {
line-height: var(--p-font-line-height-5);
}
#{$se23} & {
@include text-heading-xl-experimental;
}
}

.heading2xl {
@mixin text-heading-xl-experimental {
font-size: var(--p-font-size-300);
font-weight: var(--p-font-weight-extra-semibold-experimental);
line-height: var(--p-font-line-height-3);
font-weight: var(--p-font-weight-semibold);
letter-spacing: var(--p-font-letter-spacing-tight-experimental);

#{$se23} & {
@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-400);
line-height: var(--p-font-line-height-5);
font-weight: var(--p-font-weight-bold);
line-height: var(--p-font-line-height-5);
letter-spacing: var(--p-font-letter-spacing-tight-experimental);
}
}

@mixin text-heading-2xl {
font-size: var(--p-font-size-300);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-3);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-500);
line-height: var(--p-font-line-height-5);
}

#{$se23} & {
// Specificity bump
font-size: var(--p-font-size-500);
line-height: var(--p-font-line-height-6);
}
#{$se23} & {
@include text-heading-2xl-experimental;
}
}

@mixin se23-heading3xl {
font-size: var(--p-font-size-500);
line-height: var(--p-font-line-height-6);
@mixin text-heading-2xl-experimental {
font-size: var(--p-font-size-400);
font-weight: var(--p-font-weight-bold);
line-height: var(--p-font-line-height-5);
letter-spacing: var(--p-font-letter-spacing-tight-experimental);

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-600);
line-height: var(--p-font-line-height-7);
font-size: var(--p-font-size-500);
line-height: var(--p-font-line-height-6);
letter-spacing: var(--p-font-letter-spacing-tighter-experimental);
}
}

.heading3xl {
@mixin text-heading-3xl {
font-size: var(--p-font-size-400);
line-height: var(--p-font-line-height-4);
font-weight: var(--p-font-weight-semibold);
line-height: var(--p-font-line-height-4);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-600);
line-height: var(--p-font-line-height-6);
}

#{$se23} & {
@include se23-heading3xl;
@include text-heading-3xl-experimental;
}
}

.heading4xl {
font-size: var(--p-font-size-600);
@mixin text-heading-3xl-experimental {
font-size: var(--p-font-size-500);
font-weight: var(--p-font-weight-bold);
line-height: var(--p-font-line-height-6);
letter-spacing: var(--p-font-letter-spacing-tighter-experimental);

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-600);
line-height: var(--p-font-line-height-7);
letter-spacing: var(--p-font-letter-spacing-tightest-experimental);
}
}

@mixin text-heading-4xl {
font-size: var(--p-font-size-600);
font-weight: var(--p-font-weight-bold);
line-height: var(--p-font-line-height-6);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

@media #{$p-breakpoints-md-up} {
font-size: var(--p-font-size-700);
line-height: var(--p-font-line-height-7);
}

#{$se23} & {
@include se23-heading3xl;
@include text-heading-3xl-experimental;
}
}

.bodySm {
@mixin text-body-xs-experimental {
font-size: var(--p-font-size-70-experimental);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-075-experimental);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);
}

@mixin text-body-sm {
font-size: var(--p-font-size-75);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-1);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);
}

.bodyMd {
@mixin text-body-md {
font-size: var(--p-font-size-100);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

#{$se23} & {
font-size: var(--p-font-size-80-experimental);
@include text-body-md-experimental;
}
}

.bodyLg {
@mixin text-body-md-experimental {
font-size: var(--p-font-size-80-experimental);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);
}

@mixin text-body-lg {
font-size: var(--p-font-size-200);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);

#{$se23} & {
font-size: var(--p-font-size-100);
@include text-body-lg-experimental;
}
}

@mixin text-body-lg-experimental {
font-size: var(--p-font-size-100);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-2);
letter-spacing: var(--p-font-letter-spacing-normal-experimental);
}

.headingXs {
@include text-heading-xs;
}

.headingSm {
@include text-heading-sm;
}

.headingMd {
@include text-heading-md;
}

.headingLg {
@include text-heading-lg;
}

.headingXl {
@include text-heading-xl;
}

.heading2xl {
@include text-heading-2xl;
}

.heading3xl {
@include text-heading-3xl;
}

.heading4xl {
@include text-heading-4xl;
}

.bodySm {
@include text-body-sm;
}

.bodyMd {
@include text-body-md;
}

.bodyLg {
@include text-body-lg;
}

// font-weight must be below variant styles so
// it can override the styles when necessary.
.regular {
Expand Down
Loading