diff --git a/UNRELEASED.md b/UNRELEASED.md index 01e9ded40e7..95ac5dd846a 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -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 diff --git a/documentation/Color system.md b/documentation/Color system.md index c9f1af9104c..6f6f79099d5 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -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)` | diff --git a/playground/DetailsPage.scss b/playground/DetailsPage.scss index 0bffa539a9e..871f0604d8f 100644 --- a/playground/DetailsPage.scss +++ b/playground/DetailsPage.scss @@ -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); diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index 512dadbe76e..fec5833736c 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -78,7 +78,7 @@ h6, p { margin: 0; font-size: 1em; - font-weight: 400; + font-weight: var(--p-font-weight-regular); } button::-moz-focus-inner, diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index 102820d83aa..5e75e730a62 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -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); @@ -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; } diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 023cb215218..e19ab14da46 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -201,7 +201,7 @@ $stacking-order: ( color: var(--p-interactive); > .Content { - font-weight: 400; + font-weight: var(--p-font-weight-regular); @include focus-ring; } diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss index 37067114e7d..d9b5c1c597c 100644 --- a/src/components/CheckableButton/CheckableButton.scss +++ b/src/components/CheckableButton/CheckableButton.scss @@ -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 { @@ -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 { diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index 7e0244b4441..59dcee27b2b 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -31,7 +31,7 @@ $range-end-border-radius: rem(30px); } .Month-current { - font-weight: 700; + font-weight: var(--p-font-weight-bold); } .DayCell { @@ -75,7 +75,7 @@ $range-end-border-radius: rem(30px); } .Day-today { - font-weight: 700; + font-weight: var(--p-font-weight-bold); } .Day-inRange { @@ -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); } diff --git a/src/components/ExceptionList/ExceptionList.scss b/src/components/ExceptionList/ExceptionList.scss index bc91f0429b2..818fd9132b4 100644 --- a/src/components/ExceptionList/ExceptionList.scss +++ b/src/components/ExceptionList/ExceptionList.scss @@ -61,7 +61,7 @@ .statusWarning &, .statusCritical & { - font-weight: 500; + font-weight: var(--p-font-weight-medium); } .statusWarning & { diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index 7499d22546c..f7eee44b105 100644 --- a/src/components/IndexTable/IndexTable.scss +++ b/src/components/IndexTable/IndexTable.scss @@ -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; } diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss index f20cc4fb54f..f2444a1429a 100644 --- a/src/components/KeyboardKey/KeyboardKey.scss +++ b/src/components/KeyboardKey/KeyboardKey.scss @@ -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; diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 6c8f21029dd..987dd732e69 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -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); @@ -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); @@ -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); } } diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index 1a02eef61d3..6a3003df86d 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -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; @@ -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 { diff --git a/src/components/README.md b/src/components/README.md index 5fae1f03463..3415347f388 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -108,7 +108,7 @@ Wrap your application in a div that contains the Polaris CSS variables. This is ```html
``` diff --git a/src/components/TopBar/components/UserMenu/UserMenu.scss b/src/components/TopBar/components/UserMenu/UserMenu.scss index 1a565751649..079f5df3156 100644 --- a/src/components/TopBar/components/UserMenu/UserMenu.scss +++ b/src/components/TopBar/components/UserMenu/UserMenu.scss @@ -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; diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss index 9d61cb3ba47..a8dfdcdb99e 100644 --- a/src/styles/shared/_typography.scss +++ b/src/styles/shared/_typography.scss @@ -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 { @@ -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 { @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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); } diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index bf54642a951..723a727327c 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -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)',