diff --git a/UNRELEASED.md b/UNRELEASED.md index e8e82312ebf..be400b08524 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -25,5 +25,6 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - 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 custom and unnecessary font weight properties ([#4648](https://github.com/Shopify/polaris-react/pull/4648)) ### Deprecations diff --git a/documentation/Color system.md b/documentation/Color system.md index ea033ea8106..6c2960b3701 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -269,7 +269,6 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-button-inner-shadow` | `inset 0 -1px 0 rgba(0, 0, 0, 0.2)` | | `--p-button-pressed-inner-shadow` | `inset 0 1px 0 rgba(0, 0, 0, 0.15)` | | `--p-override-loading-z-index` | `514` | -| `--p-button-font-weight` | `500` | | `--p-choice-size` | `2rem` | | `--p-icon-size` | `1rem` | | `--p-choice-margin` | `0.1rem` | @@ -290,4 +289,3 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-ease` | `cubic-bezier(0.4, 0.22, 0.28, 1)` | | `--p-range-slider-thumb-size-base` | `1.6rem` | | `--p-range-slider-thumb-size-active` | `2.4rem` | -| `--p-badge-font-weight` | `400` | diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index fdd32e9b67d..33c6d8687fa 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -19,7 +19,7 @@ $pip-spacing: ($height - $pip-size) / 2; font-size: rem(13px); line-height: $extra-small-height; color: var(--p-text); - font-weight: var(--p-badge-font-weight); + font-weight: 400; @media print { border: solid rem(0.1px) var(--p-border); diff --git a/src/components/README.md b/src/components/README.md index 5fae1f03463..cf1c395037d 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/TextField/TextField.scss b/src/components/TextField/TextField.scss index f33244610c3..6197e8f03b3 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -100,9 +100,7 @@ $stacking-order: ( padding: control-vertical-padding() $backdrop-horizontal-spacing; background: none; border: border(transparent); - font-family: inherit; - font-size: inherit; - font-weight: inherit; + font-family: font-family(); appearance: none; caret-color: var(--p-text); color: var(--p-text); diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss index 9d61cb3ba47..f1fb83bf3d4 100644 --- a/src/styles/shared/_typography.scss +++ b/src/styles/shared/_typography.scss @@ -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: 500; 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: 500; line-height: line-height(button-large); text-transform: initial; diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index 99d60c4013e..bbad019ff68 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -19,7 +19,6 @@ export const Tokens = { // Overrides overrideLoadingZIndex: '514', - buttonFontWeight: '500', choiceSize: rem('20px'), iconSize: rem('10px'), choiceMargin: rem('1px'), @@ -40,7 +39,6 @@ export const Tokens = { ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', rangeSliderThumbSizeBase: rem('16px'), rangeSliderThumbSizeActive: rem('24px'), - badgeFontWeight: '400', }; function rem(px: string) {