From 490ab2aa21b1b892232d2416eac1c762567f3256 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Wed, 2 Feb 2022 09:34:07 -0500 Subject: [PATCH] Fix hard coded px tokens --- UNRELEASED.md | 1 + documentation/Color system.md | 88 +++++++++++++++++------------------ src/components/README.md | 2 +- src/utilities/theme/tokens.ts | 35 ++++++++------ 4 files changed, 68 insertions(+), 58 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 2009fb22ec3..c62c1fd9fcf 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -29,6 +29,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Fixed a bug where the `Listbox.Action` was not treated like an action when used outside `Autocomplete` ([#4893](https://github.com/Shopify/polaris-react/pull/4893)) - Fixed a bug where the `Checkbox` in a `Combobox` with `allowMultiple` would steal focus and close the `Popover` when clicked ([#4895](https://github.com/Shopify/polaris-react/pull/4895)) - Fixed an issue where `TextField` was the wrong height on initial render ([#4903](https://github.com/Shopify/polaris-react/pull/4903)) +- Fixed an issue where token values in px weren't converted to rems ([#5000](https://github.com/Shopify/polaris-react/pull/5000)) ### Documentation diff --git a/documentation/Color system.md b/documentation/Color system.md index 60acf505880..935c5980bf9 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.125rem` | +| `--p-border-radius-base` | `0.25rem` | +| `--p-border-radius-wide` | `0.5rem` | +| `--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` | `1.25rem` | +| `--p-icon-size` | `0.625rem` | +| `--p-choice-margin` | `0.0625rem` | +| `--p-control-border-width` | `0.125rem` | +| `--p-banner-border-default` | `inset 0 1px 0 0 var(--p-border-neutral-subdued), inset 0 0 0 1px var(--p-border-neutral-subdued)` | +| `--p-banner-border-success` | `inset 0 1px 0 0 var(--p-border-success-subdued), inset 0 0 0 1px var(--p-border-success-subdued)` | +| `--p-banner-border-highlight` | `inset 0 1px 0 0 var(--p-border-highlight-subdued), inset 0 0 0 1px var(--p-border-highlight-subdued)` | +| `--p-banner-border-warning` | `inset 0 1px 0 0 var(--p-border-warning-subdued), inset 0 0 0 1px var(--p-border-warning-subdued)` | +| `--p-banner-border-critical` | `inset 0 1px 0 0 var(--p-border-critical-subdued), inset 0 0 0 1px var(--p-border-critical-subdued)` | +| `--p-badge-mix-blend-mode` | `luminosity` | +| `--p-thin-border-subdued` | `1px solid var(--p-border-subdued)` | +| `--p-text-field-spinner-offset` | `0.125rem` | +| `--p-text-field-focus-ring-offset` | `-0.25rem` | +| `--p-text-field-focus-ring-border-radi` | `0.4375rem` | +| `--p-button-group-item-spacing` | `-0.0625rem` | +| `--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` | `1rem` | +| `--p-range-slider-thumb-size-active` | `1.5rem` | +| `--p-range-slider-thumb-scale` | `1.5` | +| `--p-badge-font-weight` | `400` | diff --git a/src/components/README.md b/src/components/README.md index b90f184e633..810d4ae2a94 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -108,7 +108,7 @@ Polaris components rely on CSS custom properties generated by the ThemeProvider. ```html
``` diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index 73c475f2e14..6020b1ea372 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -1,8 +1,10 @@ +const BASE_FONT_SIZE = 16; + export const Tokens = { // Border Radiuses - borderRadiusSlim: '2px', - borderRadiusBase: '4px', - borderRadiusWide: '8px', + borderRadiusSlim: rem('2px'), + borderRadiusBase: rem('4px'), + borderRadiusWide: rem('8px'), borderRadiusFull: '50%', // Shadows @@ -26,10 +28,10 @@ export const Tokens = { overrideLoadingZIndex: '514', buttonFontWeight: '500', nonNullContent: "''", - choiceSize: '20px', - iconSize: '10px', - choiceMargin: '1px', - controlBorderWidth: '2px', + choiceSize: rem('20px'), + iconSize: rem('10px'), + choiceMargin: rem('1px'), + controlBorderWidth: rem('2px'), bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'), bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'), bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'), @@ -37,16 +39,16 @@ export const Tokens = { bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'), badgeMixBlendMode: 'luminosity', thinBorderSubdued: '1px solid var(--p-border-subdued)', - textFieldSpinnerOffset: '2px', - textFieldFocusRingOffset: '-4px', - textFieldFocusRingBorderRadi: '7px', - buttonGroupItemSpacing: '-1px', + textFieldSpinnerOffset: rem('2px'), + textFieldFocusRingOffset: rem('-4px'), + textFieldFocusRingBorderRadi: rem('7px'), + buttonGroupItemSpacing: rem('-1px'), duration100: '100ms', duration150: '150ms', easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)', ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', - rangeSliderThumbSizeBase: '16px', - rangeSliderThumbSizeActive: '24px', + rangeSliderThumbSizeBase: rem('16px'), + rangeSliderThumbSizeActive: rem('24px'), rangeSliderThumbScale: '1.5', badgeFontWeight: '400', }; @@ -54,3 +56,10 @@ export const Tokens = { function buildBannerBorder(cssVar: string) { return `inset 0 1px 0 0 var(${cssVar}), inset 0 0 0 1px var(${cssVar})`; } + +function rem(value: string) { + return value.replace( + /\d+(?:\.\d+|\d*)px/g, + (px: string) => `${parseInt(px, 10) / BASE_FONT_SIZE}rem`, + ); +}