From 75bbab6b593dc552ac0017ee23ecfdf10dc695ac Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 23 Nov 2021 11:05:07 -0500 Subject: [PATCH 1/4] Remove js rem function --- documentation/Color system.md | 88 +++++++++++++++++------------------ src/utilities/theme/tokens.ts | 37 ++++++--------- 2 files changed, 59 insertions(+), 66 deletions(-) diff --git a/documentation/Color system.md b/documentation/Color system.md index 60acf505880..ce43175d618 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -255,47 +255,47 @@ Used to decorate elements where color does convey a specific meaning in componen ### UNSTABLE these may become @deprecated at any time -| CSS variable | Value | -| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| `--p-border-radius-slim` | `0.2rem` | -| `--p-border-radius-base` | `0.4rem` | -| `--p-border-radius-wide` | `0.8rem` | -| `--p-border-radius-full` | `50%` | -| `--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)` | -| `--p-top-bar-shadow` | `0 2px 2px -1px var(--p-shadow-from-direct-light)` | -| `--p-button-drop-shadow` | `0 1px 0 rgba(0, 0, 0, 0.05)` | -| `--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-none` | `none` | -| `--p-override-transparent` | `transparent` | -| `--p-override-one` | `1` | -| `--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` | -| `--p-choice-margin` | `0.1rem` | -| `--p-control-border-width` | `0.2rem` | -| `--p-banner-border-default` | `inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)` | -| `--p-banner-border-success` | `inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)` | -| `--p-banner-border-highlight` | `inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)` | -| `--p-banner-border-warning` | `inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)` | -| `--p-banner-border-critical` | `inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)` | -| `--p-badge-mix-blend-mode` | `luminosity` | -| `--p-thin-border-subdued` | `0.1rem solid var(--p-border-subdued)` | -| `--p-text-field-spinner-offset` | `0.2rem` | -| `--p-text-field-focus-ring-offset` | `-0.4rem` | -| `--p-text-field-focus-ring-border-radius` | `0.7rem` | -| `--p-button-group-item-spacing` | `-0.1rem` | -| `--p-duration-1-0-0` | `100ms` | -| `--p-duration-1-5-0` | `150ms` | -| `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` | -| `--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` | -| `--p-badge-font-weight` | `400` | +| CSS variable | Value | +| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- | +| `--p-border-radius-slim` | `0.2rem` | +| `--p-border-radius-base` | `0.4rem` | +| `--p-border-radius-wide` | `0.8rem` | +| `--p-border-radius-full` | `50%` | +| `--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)` | +| `--p-top-bar-shadow` | `0 2px 2px -1px var(--p-shadow-from-direct-light)` | +| `--p-button-drop-shadow` | `0 1px 0 rgba(0, 0, 0, 0.05)` | +| `--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-none` | `none` | +| `--p-override-transparent` | `transparent` | +| `--p-override-one` | `1` | +| `--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` | +| `--p-choice-margin` | `0.1rem` | +| `--p-control-border-width` | `0.2rem` | +| `--p-banner-border-default` | `inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem, var(--p-border-neutral-subdued)` | +| `--p-banner-border-success` | `inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem, var(--p-border-success-subdued)` | +| `--p-banner-border-highlight` | `inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem, var(--p-border-highlight-subdued)` | +| `--p-banner-border-warning` | `inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem, var(--p-border-warning-subdued)` | +| `--p-banner-border-critical` | `inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem, var(--p-border-critical-subdued)` | +| `--p-badge-mix-blend-mode` | `luminosity` | +| `--p-thin-border-subdued` | `0.1rem solid var(--p-border-subdued)` | +| `--p-text-field-spinner-offset` | `0.2rem` | +| `--p-text-field-focus-ring-offset` | `-0.4rem` | +| `--p-text-field-focus-ring-border-radius` | `0.7px` | +| `--p-button-group-item-spacing` | `-0.1rem` | +| `--p-duration-1-0-0` | `100ms` | +| `--p-duration-1-5-0` | `150ms` | +| `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` | +| `--p-ease` | `cubic-bezier(0.4, 0.22, 0.28, 1)` | +| `--p-range-slider-thumb-scale` | `1.5` | +| `--p-badge-font-weight` | `400` | +| `--p-range-slider-thumb-size-base` | `1.6rem` | +| `--p-range-slider-thumb-size-active` | `2.4rem` | diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index bf54642a951..917aad3d621 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -1,8 +1,8 @@ export const Tokens = { // Border Radiuses - borderRadiusSlim: rem('2px'), - borderRadiusBase: rem('4px'), - borderRadiusWide: rem('8px'), + borderRadiusSlim: '0.2rem', + borderRadiusBase: '0.4rem', + borderRadiusWide: '0.8rem', borderRadiusFull: '50%', // Shadows @@ -26,38 +26,31 @@ export const Tokens = { overrideLoadingZIndex: '514', buttonFontWeight: '500', nonNullContent: "''", - choiceSize: rem('20px'), - iconSize: rem('10px'), - choiceMargin: rem('1px'), - controlBorderWidth: rem('2px'), + choiceSize: '2rem', + iconSize: '1rem', + choiceMargin: '0.1rem', + controlBorderWidth: '0.2rem', bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'), bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'), bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'), bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'), bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'), badgeMixBlendMode: 'luminosity', - thinBorderSubdued: `${rem('1px')} solid var(--p-border-subdued)`, - textFieldSpinnerOffset: rem('2px'), - textFieldFocusRingOffset: rem('-4px'), - textFieldFocusRingBorderRadius: rem('7px'), - buttonGroupItemSpacing: rem('-1px'), + thinBorderSubdued: `${'0.1rem'} solid var(--p-border-subdued)`, + textFieldSpinnerOffset: '0.2rem', + textFieldFocusRingOffset: '-0.4rem', + textFieldFocusRingBorderRadius: '0.7px', + buttonGroupItemSpacing: '-0.1rem', duration100: '100ms', duration150: '150ms', easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)', ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', - rangeSliderThumbSizeBase: rem('16px'), - rangeSliderThumbSizeActive: rem('24px'), rangeSliderThumbScale: '1.5', badgeFontWeight: '400', + rangeSliderThumbSizeBase: '1.6rem', + rangeSliderThumbSizeActive: '2.4rem', }; -function rem(px: string) { - const baseFontSize = 10; - return `${parseInt(px, 10) / baseFontSize}rem`; -} - function buildBannerBorder(cssVar: string) { - return `inset 0 ${rem('1px')} 0 0 var(${cssVar}), inset 0 0 0 ${rem( - '1px', - )} var(${cssVar})`; + return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem, var(${cssVar})`; } From 0590ce6ded711b5f2002d5e1810711023521d73a Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 23 Nov 2021 11:11:47 -0500 Subject: [PATCH 2/4] Formatting --- documentation/Color system.md | 6 +++--- src/utilities/theme/tokens.ts | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/documentation/Color system.md b/documentation/Color system.md index ce43175d618..8c1411c45d0 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -289,13 +289,13 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-thin-border-subdued` | `0.1rem solid var(--p-border-subdued)` | | `--p-text-field-spinner-offset` | `0.2rem` | | `--p-text-field-focus-ring-offset` | `-0.4rem` | -| `--p-text-field-focus-ring-border-radius` | `0.7px` | +| `--p-text-field-focus-ring-border-radius` | `0.7rem` | | `--p-button-group-item-spacing` | `-0.1rem` | | `--p-duration-1-0-0` | `100ms` | | `--p-duration-1-5-0` | `150ms` | | `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` | | `--p-ease` | `cubic-bezier(0.4, 0.22, 0.28, 1)` | -| `--p-range-slider-thumb-scale` | `1.5` | -| `--p-badge-font-weight` | `400` | | `--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 917aad3d621..8699c79b5e1 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -36,19 +36,19 @@ export const Tokens = { bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'), bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'), badgeMixBlendMode: 'luminosity', - thinBorderSubdued: `${'0.1rem'} solid var(--p-border-subdued)`, + thinBorderSubdued: '0.1rem solid var(--p-border-subdued)', textFieldSpinnerOffset: '0.2rem', textFieldFocusRingOffset: '-0.4rem', - textFieldFocusRingBorderRadius: '0.7px', + textFieldFocusRingBorderRadius: '0.7rem', buttonGroupItemSpacing: '-0.1rem', duration100: '100ms', duration150: '150ms', easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)', ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', - rangeSliderThumbScale: '1.5', - badgeFontWeight: '400', rangeSliderThumbSizeBase: '1.6rem', rangeSliderThumbSizeActive: '2.4rem', + rangeSliderThumbScale: '1.5', + badgeFontWeight: '400', }; function buildBannerBorder(cssVar: string) { From 5a973bab271b5a7e6f67dd49c1ce9744bb42f1ad Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 23 Nov 2021 11:19:41 -0500 Subject: [PATCH 3/4] Remove comma --- documentation/Color system.md | 88 +++++++++++++++++------------------ src/utilities/theme/tokens.ts | 2 +- 2 files changed, 45 insertions(+), 45 deletions(-) diff --git a/documentation/Color system.md b/documentation/Color system.md index 8c1411c45d0..60acf505880 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -255,47 +255,47 @@ Used to decorate elements where color does convey a specific meaning in componen ### UNSTABLE these may become @deprecated at any time -| CSS variable | Value | -| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -| `--p-border-radius-slim` | `0.2rem` | -| `--p-border-radius-base` | `0.4rem` | -| `--p-border-radius-wide` | `0.8rem` | -| `--p-border-radius-full` | `50%` | -| `--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)` | -| `--p-top-bar-shadow` | `0 2px 2px -1px var(--p-shadow-from-direct-light)` | -| `--p-button-drop-shadow` | `0 1px 0 rgba(0, 0, 0, 0.05)` | -| `--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-none` | `none` | -| `--p-override-transparent` | `transparent` | -| `--p-override-one` | `1` | -| `--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` | -| `--p-choice-margin` | `0.1rem` | -| `--p-control-border-width` | `0.2rem` | -| `--p-banner-border-default` | `inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem, var(--p-border-neutral-subdued)` | -| `--p-banner-border-success` | `inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem, var(--p-border-success-subdued)` | -| `--p-banner-border-highlight` | `inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem, var(--p-border-highlight-subdued)` | -| `--p-banner-border-warning` | `inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem, var(--p-border-warning-subdued)` | -| `--p-banner-border-critical` | `inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem, var(--p-border-critical-subdued)` | -| `--p-badge-mix-blend-mode` | `luminosity` | -| `--p-thin-border-subdued` | `0.1rem solid var(--p-border-subdued)` | -| `--p-text-field-spinner-offset` | `0.2rem` | -| `--p-text-field-focus-ring-offset` | `-0.4rem` | -| `--p-text-field-focus-ring-border-radius` | `0.7rem` | -| `--p-button-group-item-spacing` | `-0.1rem` | -| `--p-duration-1-0-0` | `100ms` | -| `--p-duration-1-5-0` | `150ms` | -| `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` | -| `--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` | -| `--p-badge-font-weight` | `400` | +| CSS variable | Value | +| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------ | +| `--p-border-radius-slim` | `0.2rem` | +| `--p-border-radius-base` | `0.4rem` | +| `--p-border-radius-wide` | `0.8rem` | +| `--p-border-radius-full` | `50%` | +| `--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)` | +| `--p-top-bar-shadow` | `0 2px 2px -1px var(--p-shadow-from-direct-light)` | +| `--p-button-drop-shadow` | `0 1px 0 rgba(0, 0, 0, 0.05)` | +| `--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-none` | `none` | +| `--p-override-transparent` | `transparent` | +| `--p-override-one` | `1` | +| `--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` | +| `--p-choice-margin` | `0.1rem` | +| `--p-control-border-width` | `0.2rem` | +| `--p-banner-border-default` | `inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)` | +| `--p-banner-border-success` | `inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)` | +| `--p-banner-border-highlight` | `inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)` | +| `--p-banner-border-warning` | `inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)` | +| `--p-banner-border-critical` | `inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)` | +| `--p-badge-mix-blend-mode` | `luminosity` | +| `--p-thin-border-subdued` | `0.1rem solid var(--p-border-subdued)` | +| `--p-text-field-spinner-offset` | `0.2rem` | +| `--p-text-field-focus-ring-offset` | `-0.4rem` | +| `--p-text-field-focus-ring-border-radius` | `0.7rem` | +| `--p-button-group-item-spacing` | `-0.1rem` | +| `--p-duration-1-0-0` | `100ms` | +| `--p-duration-1-5-0` | `150ms` | +| `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` | +| `--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` | +| `--p-badge-font-weight` | `400` | diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index 8699c79b5e1..389b586c313 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -52,5 +52,5 @@ export const Tokens = { }; function buildBannerBorder(cssVar: string) { - return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem, var(${cssVar})`; + return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem var(${cssVar})`; } From 63b2ba547d60e79f2a8d2293efd0520d92181a73 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 23 Nov 2021 11:25:00 -0500 Subject: [PATCH 4/4] Add unreleased --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index acd3984ee67..07e39d1b6e2 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -38,6 +38,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - 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 `rem()` function from `tokens.ts` ([#4695](https://github.com/Shopify/polaris-react/pull/4695)) ### Deprecations