Skip to content

Replace font weight values with tokens #4668

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

Merged
merged 12 commits into from
Nov 22, 2021
Merged

Replace font weight values with tokens #4668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5893a97
Add font-weight tokens
lgriffee Nov 18, 2021
5584000
Replace font-weight: 400 with token
lgriffee Nov 18, 2021
2e7c418
Replace font-weight: 500 with token
lgriffee Nov 18, 2021
7accd94
Replace font-weight: 600 with token
lgriffee Nov 18, 2021
ef03cd0
Replace font-weight: 700 with token
lgriffee Nov 18, 2021
c9eb6de
Update UNRELEASED.md
lgriffee Nov 18, 2021
7d97674
Fix formatting of UNRELEASED
lgriffee Nov 18, 2021
6117c99
Merge branch 'v8.0.0-major' into 4599-replace-font-weight-values-with…
lgriffee Nov 22, 2021
2fb4c51
Merge branch 'v8.0.0-major' into 4599-replace-font-weight-values-with…
alex-page Nov 22, 2021
5f2c4dc
Remove reverted entries in UNRELEASED
lgriffee Nov 22, 2021
91c393e
Regenerate colordocs
lgriffee Nov 22, 2021
3a6db51
Remove duplicate entry in UNRELEASED
lgriffee Nov 22, 2021
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
7 changes: 3 additions & 4 deletions UNRELEASED.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,10 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t

### Code quality

- Clean up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635))
- Remove filter functions ([#4650](https://github.com/Shopify/polaris-react/pull/4650))
- Remove all color() invocations ([#4636](https://github.com/Shopify/polaris-react/pull/4636))
- Cleaned up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635))
- Removed miscellaneous css custom properties ([#4620](https://github.com/Shopify/polaris-react/pull/4620))
- Removed filter functions ([#4650](https://github.com/Shopify/polaris-react/pull/4650))
- Removed all color() invocations ([#4636](https://github.com/Shopify/polaris-react/pull/4636))
- Replaced font-weight values with tokens ([#4599](https://github.com/Shopify/polaris-react/issues/4599))

### Deprecations

Expand Down
4 changes: 4 additions & 0 deletions documentation/Color system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,10 @@ Used to decorate elements where color does convey a specific meaning in componen
| `--p-border-radius-base` | `0.4rem` |
| `--p-border-radius-wide` | `0.8rem` |
| `--p-border-radius-full` | `50%` |
| `--p-font-weight-regular` | `400` |
| `--p-font-weight-medium` | `500` |
| `--p-font-weight-semibold` | `600` |
| `--p-font-weight-bold` | `700` |
| `--p-card-shadow` | `0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)` |
| `--p-popover-shadow` | `-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)` |
| `--p-modal-shadow` | `0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)` |
Expand Down
2 changes: 1 addition & 1 deletion playground/DetailsPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ $top-bar-height: 56px;

.ShopName {
margin-left: 8px;
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
font-size: 14px;
color: var(--p-text);

Expand Down
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 @@ -78,7 +78,7 @@ h6,
p {
margin: 0;
font-size: 1em;
font-weight: 400;
font-weight: var(--p-font-weight-regular);
Copy link
Member

@alex-page alex-page Nov 19, 2021

Choose a reason for hiding this comment

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

The only thing I am unsure about is if we want to continue breaking apart variables fontWeightRegular as font-weight-regular. It would be good to quickly get some opinions before shipping. I personally would probably prefer less dashes but they are easy to find with the matching font-weight value.

Copy link
Contributor Author

@lgriffee lgriffee 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.

PR for fixing kebabcase tokens based on team discussion

}

button::-moz-focus-inner,
Expand Down
4 changes: 2 additions & 2 deletions src/components/Badge/Badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $pip-spacing: calc(#{$pip-size} / 2);
font-size: font-size(caption);
line-height: line-height(caption, large-screen);
color: var(--p-text);
font-weight: var(--p-badge-font-weight);
font-weight: var(--p-font-weight-regular);

@media print {
border: solid rem(0.1px) var(--p-border);
Expand Down Expand Up @@ -59,7 +59,7 @@ $pip-spacing: calc(#{$pip-size} / 2);
.statusNew {
background-color: var(--p-surface-neutral);
color: var(--p-text);
font-weight: 500;
font-weight: var(--p-font-weight-medium);
border: none;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ $stacking-order: (
color: var(--p-interactive);

> .Content {
font-weight: 400;
font-weight: var(--p-font-weight-regular);
@include focus-ring;
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/CheckableButton/CheckableButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ $chekbox-label-margin: rem(20px);

&.CheckableButton-measuring {
font-size: font-size(button);
font-weight: 700;
font-weight: var(--p-font-weight-bold);

// simulates measuring with an additional digit (e.g. 00 instead of 0)
&::before {
Expand Down Expand Up @@ -75,7 +75,7 @@ $chekbox-label-margin: rem(20px);

&.CheckableButton-selectMode {
@include text-emphasis-subdued;
font-weight: 500;
font-weight: var(--p-font-weight-medium);
}

&.CheckableButton-selected {
Expand Down
8 changes: 4 additions & 4 deletions src/components/DatePicker/DatePicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $range-end-border-radius: rem(30px);
}

.Month-current {
font-weight: 700;
font-weight: var(--p-font-weight-bold);
}

.DayCell {
Expand Down Expand Up @@ -75,7 +75,7 @@ $range-end-border-radius: rem(30px);
}

.Day-today {
font-weight: 700;
font-weight: var(--p-font-weight-bold);
}

.Day-inRange {
Expand Down Expand Up @@ -146,13 +146,13 @@ $range-end-border-radius: rem(30px);
padding: spacing(tight);
background: transparent;
font-size: $font-size;
font-weight: 400;
font-weight: var(--p-font-weight-regular);
color: var(--p-text-subdued);
text-align: center;
}

.Weekday-current {
font-weight: 700;
font-weight: var(--p-font-weight-bold);
color: var(--p-text);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/ExceptionList/ExceptionList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

.statusWarning &,
.statusCritical & {
font-weight: 500;
font-weight: var(--p-font-weight-medium);
}

.statusWarning & {
Expand Down
2 changes: 1 addition & 1 deletion src/components/IndexTable/IndexTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ $loading-panel-height: rem(53px);
.TableHeading {
padding: spacing();
text-align: left;
font-weight: 500;
font-weight: var(--p-font-weight-medium);
white-space: nowrap;
border: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/KeyboardKey/KeyboardKey.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $bottom-shadow-size: 2px;
border-radius: var(--p-border-radius-base);
font-family: font-family();
font-size: rem(12px);
font-weight: 500;
font-weight: var(--p-font-weight-medium);
line-height: $key-base-height;
color: var(--p-text-subdued);
text-align: center;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Navigation/Navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ $disabled-fade: 0.6;
}

.Item-selected {
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
color: var(--p-text-primary);
background-color: var(--p-background-selected);

Expand Down Expand Up @@ -254,7 +254,7 @@ $secondary-item-font-size: rem(15px);

.Item {
font-size: $secondary-item-font-size;
font-weight: 500;
font-weight: var(--p-font-weight-medium);
line-height: nav(item-line-height);
color: var(--p-text-subdued);
padding-left: nav(icon-size) + spacing(extra-loose) - spacing(extra-tight);
Expand Down Expand Up @@ -308,7 +308,7 @@ $secondary-item-font-size: rem(15px);
}
}
.Item-disabled {
font-weight: 500;
font-weight: var(--p-font-weight-medium);
color: var(--p-text-disabled);
}
}
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
Expand Up @@ -29,7 +29,7 @@ $nav-animation-variables: (
@mixin nav-item-attributes {
@include unstyled-button;
font-size: $item-font-size;
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
line-height: $item-line-height-large;
display: flex;
flex-grow: 1;
Expand Down Expand Up @@ -68,7 +68,7 @@ $nav-animation-variables: (

@include breakpoint-after(nav-min-window-corrected()) {
font-size: $item-font-size;
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
line-height: $item-line-height-small;
}
&::-moz-focus-inner {
Expand Down
2 changes: 1 addition & 1 deletion src/components/README.md
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/components/TopBar/components/UserMenu/UserMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
.Name {
@include truncate;
@include text-style-body;
font-weight: 500;
font-weight: var(--p-font-weight-medium);
line-height: line-height(subheading);
color: var(--p-text);
text-align: left;
Expand Down
26 changes: 13 additions & 13 deletions src/styles/shared/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ $typography-condensed: em(640px);

@mixin text-style-caption {
font-size: font-size(caption);
font-weight: 400;
font-weight: var(--p-font-weight-regular);
line-height: line-height(caption);

@include when-typography-not-condensed {
Expand All @@ -25,7 +25,7 @@ $typography-condensed: em(640px);

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

@include when-typography-not-condensed {
Expand All @@ -35,7 +35,7 @@ $typography-condensed: em(640px);

@mixin text-style-subheading {
font-size: font-size(subheading);
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
line-height: line-height(subheading);
text-transform: uppercase;

Expand All @@ -46,7 +46,7 @@ $typography-condensed: em(640px);

@mixin text-style-input {
font-size: font-size(input);
font-weight: 400;
font-weight: var(--p-font-weight-regular);
line-height: line-height(input);
border: none;

Expand All @@ -60,7 +60,7 @@ $typography-condensed: em(640px);

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

text-transform: initial;
Expand All @@ -73,7 +73,7 @@ $typography-condensed: em(640px);

@mixin text-style-button {
font-size: font-size(button);
font-weight: var(--p-button-font-weight);
font-weight: var(--p-font-weight-medium);
line-height: line-height(button);

text-transform: initial;
Expand All @@ -86,7 +86,7 @@ $typography-condensed: em(640px);

@mixin text-style-button-large {
font-size: font-size(button-large);
font-weight: var(--p-button-font-weight);
font-weight: var(--p-font-weight-medium);
line-height: line-height(button-large);

text-transform: initial;
Expand All @@ -99,7 +99,7 @@ $typography-condensed: em(640px);

@mixin text-style-display-x-large {
font-size: font-size(display-x-large);
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
line-height: line-height(display-x-large);

@include when-typography-not-condensed {
Expand All @@ -110,7 +110,7 @@ $typography-condensed: em(640px);

@mixin text-style-display-large {
font-size: font-size(display-large);
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
line-height: line-height(display-large);

@include when-typography-not-condensed {
Expand All @@ -121,7 +121,7 @@ $typography-condensed: em(640px);

@mixin text-style-display-medium {
font-size: font-size(display-medium);
font-weight: 400;
font-weight: var(--p-font-weight-regular);
line-height: line-height(display-medium);

@include when-typography-not-condensed {
Expand All @@ -132,7 +132,7 @@ $typography-condensed: em(640px);

@mixin text-style-display-small {
font-size: font-size(display-small);
font-weight: 400;
font-weight: var(--p-font-weight-regular);
line-height: line-height(display-small);

@include when-typography-not-condensed {
Expand All @@ -146,11 +146,11 @@ $typography-condensed: em(640px);
}

@mixin text-emphasis-strong {
font-weight: 600;
font-weight: var(--p-font-weight-semibold);
}

@mixin text-emphasis-normal($for-background: null) {
font-weight: 400;
font-weight: var(--p-font-weight-regular);
color: var(--p-text);
}

Expand Down
6 changes: 6 additions & 0 deletions src/utilities/theme/tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ export const Tokens = {
borderRadiusWide: rem('8px'),
borderRadiusFull: '50%',

// Font-Weights
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightSemibold: 600,
fontWeightBold: 700,

// Shadows
cardShadow:
'0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
Expand Down