From c3cbf2e02379b0e005982722e9c9be32f049463c Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Nov 2021 09:14:44 -0500 Subject: [PATCH 1/7] Remove --p-button-font-weight token --- src/components/README.md | 2 +- src/styles/shared/_typography.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/README.md b/src/components/README.md index 3e1a6580eb9..e1516376327 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/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; From 1704f1b0c1ee21091d6a679420095b3bc8585529 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Nov 2021 09:16:27 -0500 Subject: [PATCH 2/7] Remove --p-badge-font-weight token --- src/components/Badge/Badge.scss | 2 +- src/components/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index 1ff0553070f..10a65f49b08 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -20,7 +20,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 e1516376327..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
``` From 16b824b84bf0585ef6245ff8ecb62d8500a538c3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Nov 2021 09:41:57 -0500 Subject: [PATCH 3/7] Remove unnecessary global font-weight value from TextField --- src/components/TextField/TextField.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index f33244610c3..a9d699b303a 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -102,7 +102,6 @@ $stacking-order: ( border: border(transparent); font-family: inherit; font-size: inherit; - font-weight: inherit; appearance: none; caret-color: var(--p-text); color: var(--p-text); From 420c916441952db2844da2dd4a8655fd93db46d4 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Nov 2021 09:46:11 -0500 Subject: [PATCH 4/7] Update UNRELEASED.md --- UNRELEASED.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index b3b0e821eab..9575b49dbca 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -23,6 +23,7 @@ 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)) +- Cleaned up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635)) +- Removed custom and unnecessary font weight properties ([#4648](https://github.com/Shopify/polaris-react/pull/4648)) ### Deprecations From 3c64ae41413d9f9ce32375b1ecdab1bc12188c3f Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Nov 2021 13:50:31 -0500 Subject: [PATCH 5/7] Remove unnecessary properties TextField Removed font-family and font-size since they are set in the mixin. Replaced font-family: inherit with explicit font-family() function for clarity. Co-Authored-By: Kyle Durand <6844391+kyledurand@users.noreply.github.com> --- src/components/TextField/TextField.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index a9d699b303a..6197e8f03b3 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -100,8 +100,7 @@ $stacking-order: ( padding: control-vertical-padding() $backdrop-horizontal-spacing; background: none; border: border(transparent); - font-family: inherit; - font-size: inherit; + font-family: font-family(); appearance: none; caret-color: var(--p-text); color: var(--p-text); From ba206981522fdd539c227716c19ec80fc0fefd04 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Nov 2021 13:59:58 -0500 Subject: [PATCH 6/7] Remove unnecessary tokens --- documentation/Color system.md | 2 -- src/utilities/theme/tokens.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/documentation/Color system.md b/documentation/Color system.md index 60acf505880..fc503e0339d 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -274,7 +274,6 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-override-visible` | `visible` | | `--p-override-zero` | `0` | | `--p-override-loading-z-index` | `514` | -| `--p-button-font-weight` | `500` | | `--p-non-null-content` | `''` | | `--p-choice-size` | `2rem` | | `--p-icon-size` | `1rem` | @@ -298,4 +297,3 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-range-slider-thumb-size-base` | `1.6rem` | | `--p-range-slider-thumb-size-active` | `2.4rem` | | `--p-range-slider-thumb-scale` | `1.5` | -| `--p-badge-font-weight` | `400` | diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index bf54642a951..fe72d4d94eb 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -24,7 +24,6 @@ export const Tokens = { overrideVisible: 'visible', overrideZero: '0', overrideLoadingZIndex: '514', - buttonFontWeight: '500', nonNullContent: "''", choiceSize: rem('20px'), iconSize: rem('10px'), @@ -48,7 +47,6 @@ export const Tokens = { rangeSliderThumbSizeBase: rem('16px'), rangeSliderThumbSizeActive: rem('24px'), rangeSliderThumbScale: '1.5', - badgeFontWeight: '400', }; function rem(px: string) { From 01d6b96412667c34ee0afe71aa66f0a421077050 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Nov 2021 14:39:15 -0500 Subject: [PATCH 7/7] Fix merging mistake with tokens --- documentation/Color system.md | 2 -- src/utilities/theme/tokens.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/documentation/Color system.md b/documentation/Color system.md index fc503e0339d..bf32f12bd5f 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -274,7 +274,6 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-override-visible` | `visible` | | `--p-override-zero` | `0` | | `--p-override-loading-z-index` | `514` | -| `--p-non-null-content` | `''` | | `--p-choice-size` | `2rem` | | `--p-icon-size` | `1rem` | | `--p-choice-margin` | `0.1rem` | @@ -296,4 +295,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-range-slider-thumb-scale` | `1.5` | diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index fe72d4d94eb..c0c3c73aa2b 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -24,7 +24,6 @@ export const Tokens = { overrideVisible: 'visible', overrideZero: '0', overrideLoadingZIndex: '514', - nonNullContent: "''", choiceSize: rem('20px'), iconSize: rem('10px'), choiceMargin: rem('1px'), @@ -46,7 +45,6 @@ export const Tokens = { ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', rangeSliderThumbSizeBase: rem('16px'), rangeSliderThumbSizeActive: rem('24px'), - rangeSliderThumbScale: '1.5', }; function rem(px: string) {