From 4806112d0689765ca55b288f1a592cd834167abd Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 18 Nov 2021 15:58:53 -0500 Subject: [PATCH] Revert "Remove custom and unnecessary font weight properties (#4648)" This reverts commit 281f1739f4941f4d8e4a50df22c1c32190a9aef7. --- UNRELEASED.md | 1 - documentation/Color system.md | 2 ++ src/components/Badge/Badge.scss | 2 +- src/components/README.md | 2 +- src/components/TextField/TextField.scss | 4 +++- src/styles/shared/_typography.scss | 4 ++-- src/utilities/theme/tokens.ts | 2 ++ 7 files changed, 11 insertions(+), 6 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index d4bf4f87137..e7838d417b9 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -36,7 +36,6 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - 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 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 6c2960b3701..ea033ea8106 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -269,6 +269,7 @@ 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` | @@ -289,3 +290,4 @@ 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 4d7d98b6ecf..102820d83aa 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: 400; + font-weight: var(--p-badge-font-weight); @media print { border: solid rem(0.1px) var(--p-border); diff --git a/src/components/README.md b/src/components/README.md index cf1c395037d..5fae1f03463 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 6197e8f03b3..f33244610c3 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -100,7 +100,9 @@ $stacking-order: ( padding: control-vertical-padding() $backdrop-horizontal-spacing; background: none; border: border(transparent); - font-family: font-family(); + font-family: inherit; + font-size: inherit; + font-weight: inherit; 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 f1fb83bf3d4..9d61cb3ba47 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: 500; + font-weight: var(--p-button-font-weight); 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: 500; + font-weight: var(--p-button-font-weight); line-height: line-height(button-large); text-transform: initial; diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index bbad019ff68..99d60c4013e 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -19,6 +19,7 @@ export const Tokens = { // Overrides overrideLoadingZIndex: '514', + buttonFontWeight: '500', choiceSize: rem('20px'), iconSize: rem('10px'), choiceMargin: rem('1px'), @@ -39,6 +40,7 @@ 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) {