diff --git a/UNRELEASED.md b/UNRELEASED.md index b3b0e821eab..19a9acbbc39 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -6,8 +6,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Enhancements -- Update `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)). -- Added `PlainAction` type to `ComplexAction`. ([#4489](https://github.com/Shopify/polaris-react/pull/4489) +- Updated `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)). +- Added `PlainAction` type to `ComplexAction`. ([#4489](https://github.com/Shopify/polaris-react/pull/4489)) ### Bug fixes @@ -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 miscellaneous css custom properties ([#4620](https://github.com/Shopify/polaris-react/pull/4620)) ### Deprecations diff --git a/documentation/Color system.md b/documentation/Color system.md index 60acf505880..ea033ea8106 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -268,14 +268,8 @@ Used to decorate elements where color does convey a specific meaning in componen | `--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` | @@ -285,7 +279,6 @@ Used to decorate elements where color does convey a specific meaning in componen | `--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` | @@ -297,5 +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-range-slider-thumb-scale` | `1.5` | | `--p-badge-font-weight` | `400` | diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index 1ff0553070f..fdd32e9b67d 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -15,7 +15,6 @@ $pip-spacing: ($height - $pip-size) / 2; align-items: center; padding: $vertical-padding $horizontal-padding; background-color: var(--p-surface-neutral); - border: var(--p-override-zero); border-radius: $height; font-size: rem(13px); line-height: $extra-small-height; diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index eb7b6ffb38b..5747e0f22e3 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -214,7 +214,6 @@ $spinner-size: rem(20px); } .Heading { - padding-top: var(--p-override-none); word-break: break-word; } diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss index 516ff89e9a3..d8169db93b2 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.scss +++ b/src/components/Breadcrumbs/Breadcrumbs.scss @@ -9,7 +9,9 @@ $icon-size: rem(20px); position: relative; display: flex; align-items: center; + justify-content: center; min-height: control-height(); + min-width: control-height(); color: var(--p-text-subdued); text-decoration: none; margin: 0; @@ -24,10 +26,6 @@ $icon-size: rem(20px); &:active { background-color: var(--p-surface-pressed); - - .ContentWrapper { - background: var(--p-override-transparent); - } } &:hover, @@ -42,9 +40,6 @@ $icon-size: rem(20px); // stylelint-disable selector-max-specificity &:focus { outline: none; - .ContentWrapper { - background: var(--p-override-transparent); - } } &:focus:not(:active) { @@ -53,21 +48,6 @@ $icon-size: rem(20px); // stylelint-enable selector-max-specificity } -.ContentWrapper { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - margin-left: 0; - background: transparent; - height: control-slim-height(); - width: control-slim-height(); - border-radius: var(--p-border-radius-wide); - will-change: background; - transition: background duration() easing(); -} - .Content { @include truncate; position: relative; diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index f2c706dbaee..6401d34a770 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -23,12 +23,12 @@ export function Breadcrumbs({breadcrumbs}: BreadcrumbsProps) { const {content} = breadcrumb; const contentMarkup = ( - + <> {content} - + ); const breadcrumbMarkup = diff --git a/src/components/Choice/Choice.scss b/src/components/Choice/Choice.scss index 35605775718..c21658aa71a 100644 --- a/src/components/Choice/Choice.scss +++ b/src/components/Choice/Choice.scss @@ -48,7 +48,6 @@ $control-vertical-adjustment: rem(2px); align-items: stretch; width: var(--p-choice-size); height: var(--p-choice-size); - margin-top: var(--p-override-none); margin-right: spacing(tight); > * { diff --git a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss index ff3bfe5f638..af21a0df250 100644 --- a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss +++ b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss @@ -90,10 +90,6 @@ $stacking-order: ( } .MoreFiltersButtonContainer { - > div { - margin-left: var(--p-override-none); - } - .Item > div > button { white-space: nowrap; border-top-left-radius: 0; diff --git a/src/components/FooterHelp/FooterHelp.scss b/src/components/FooterHelp/FooterHelp.scss index 92f7a896d58..e1b11f3f0d5 100644 --- a/src/components/FooterHelp/FooterHelp.scss +++ b/src/components/FooterHelp/FooterHelp.scss @@ -19,15 +19,11 @@ $border-radius: 999px; display: inline-flex; align-items: center; padding: spacing(loose) spacing(loose) spacing(loose) spacing(); - border-top: var(--p-override-none); - border-bottom: var(--p-override-none); width: 100%; justify-content: center; @include page-content-when-not-fully-condensed { width: auto; - border: var(--p-override-none); - border-radius: var(--p-override-none); } } diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss index 0517bcd3b6e..46ca0e7b560 100644 --- a/src/components/Frame/Frame.scss +++ b/src/components/Frame/Frame.scss @@ -217,7 +217,6 @@ $skip-vertical-offset: rem(10px); } .hasTopBar & { - top: var(--p-override-zero); z-index: var( --p-override-loading-z-index, z-index(loading-bar, $fixed-element-stacking-order) diff --git a/src/components/Frame/components/Toast/Toast.scss b/src/components/Frame/components/Toast/Toast.scss index c2f67ade556..ba623b1668a 100644 --- a/src/components/Frame/components/Toast/Toast.scss +++ b/src/components/Frame/components/Toast/Toast.scss @@ -10,7 +10,6 @@ $Backdrop-opacity: 0.88; padding: spacing(tight) spacing(); border-radius: var(--p-border-radius-wide); background: var(--p-surface); - box-shadow: var(--p-override-none); color: var(--p-text); margin-bottom: spacing(loose); diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss index caf22990280..d88d181c378 100644 --- a/src/components/Link/Link.scss +++ b/src/components/Link/Link.scss @@ -17,11 +17,6 @@ text-decoration: none; } - &:focus { - $chrome-default-outline: rgba(0, 103, 244, 0.247) auto rem(4.5px); - outline: var(--p-override-none); - } - &:focus:not(:active) { outline: var(--p-focused) auto 1px; } diff --git a/src/components/Modal/components/CloseButton/CloseButton.scss b/src/components/Modal/components/CloseButton/CloseButton.scss index 601e49926f5..aa0c3d2c41c 100644 --- a/src/components/Modal/components/CloseButton/CloseButton.scss +++ b/src/components/Modal/components/CloseButton/CloseButton.scss @@ -13,10 +13,6 @@ @include recolor-icon(var(--p-icon-hovered)); } - &:focus { - background: var(--p-override-transparent); - } - &:active { background: var(--p-surface-pressed); } diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index dcd3f19f48c..43553095ac3 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -207,7 +207,7 @@ $disabled-fade: 0.6; &:active { @include recolor-icon( var(--p-icon-hovered), - var(--p-override-transparent), + transparent, $filter-color: filter('action') ); background: var(--p-background-hovered); @@ -375,10 +375,7 @@ $secondary-item-font-size: rem(15px); &:hover, &:focus { background: var(--p-background-hovered); - @include recolor-icon( - var(--p-icon-hovered), - var(--p-override-transparent) - ); + @include recolor-icon(var(--p-icon-hovered), transparent); @media (-ms-high-contrast: active) { @include recolor-icon( diff --git a/src/components/README.md b/src/components/README.md index 3e1a6580eb9..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/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index 72d7963a869..2713bb2dcef 100644 --- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss +++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss @@ -38,7 +38,7 @@ $range-thumb-border-error: rem(2px) solid color('red'); height: $range-track-height; border-radius: $range-thumb-size; - --unselected-range: #{var(--p-override-transparent)}; + --unselected-range: transparent; --selected-range: #{var(--p-interactive)}; --gradient-colors: var(--unselected-range) 0%, var(--unselected-range) var(--Polaris-RangeSlider-progress-lower), @@ -91,7 +91,7 @@ $range-thumb-border-error: rem(2px) solid color('red'); } &:active { - transform: scale(var(--p-range-slider-thumb-scale)); + transform: scale(1.5); } &:focus { @@ -133,11 +133,6 @@ $range-output-spacing: rem(16px); transition-timing-function: var(--p-ease); transform: translateX(calc(-50% + #{$range-thumb-size / 2})); - .Thumbs:hover + &, - .Thumbs:focus + & { - opacity: var(--p-override-zero); - } - .Thumbs:active + & { $range-thumb-size-difference: var(--p-range-slider-thumb-size-active) - var(--p-range-slider-thumb-size-base); diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index 00c9d6b5442..6a5de7d8d95 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -51,7 +51,7 @@ $stacking-order: ( .Input { --progress-lower: #{var(--p-interactive)}; - --progress-upper: #{var(--p-override-transparent)}; + --progress-upper: transparent; // create-react-app v2 leverages postcss-preset-env to transpile modern CSS // into something kinda supported by older browsers. Unfortunately its // custom properties transpiler has a bug that means it doesn't like multiple @@ -120,7 +120,7 @@ $stacking-order: ( &:active { @include range-thumb-selectors { - transform: scale(var(--p-range-slider-thumb-scale)); + transform: scale(1.5); } } @@ -136,10 +136,6 @@ $stacking-order: ( .error & { --progress-lower: #{var(--p-action-critical)}; - @include range-track-selectors { - background-color: var(--p-override-none); - } - @include range-thumb-selectors { border-color: var(--p-action-critical); background: var(--p-action-critical); @@ -182,11 +178,6 @@ $range-output-spacing: rem(16px); transition-duration: duration(); transition-timing-function: easing(); - .Input:hover + &, - .Input:focus + & { - opacity: var(--p-override-zero); - } - .Input:active + & { $range-thumb-size-difference: var(--p-range-slider-thumb-size-active) - var(--p-range-slider-thumb-size-base); diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index ddffa575321..eeefbf8a759 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -41,21 +41,6 @@ $stacking-order: ( } } -.placeholder { - // stylelint-disable-next-line selector-max-class - &.error .Input { - // This is the only place this color is used. - // stylelint-disable-next-line color-no-hex - color: #9c9798; - } - - // stylelint-disable-next-line selector-max-class, selector-max-specificity - &.error .Input:-moz-focusring { - color: transparent; - text-shadow: var(--p-override-none); - } -} - .Content { @include text-style-input; position: relative; diff --git a/src/components/ThemeProvider/tests/ThemeProvider.test.tsx b/src/components/ThemeProvider/tests/ThemeProvider.test.tsx index d5cda351ab5..b5d50420cdd 100644 --- a/src/components/ThemeProvider/tests/ThemeProvider.test.tsx +++ b/src/components/ThemeProvider/tests/ThemeProvider.test.tsx @@ -50,7 +50,6 @@ describe('', () => { expect(themeProvider.find('div')).toHaveReactProps({ style: expect.objectContaining({ - '--p-override-zero': expect.any(String), '--p-background': expect.any(String), '--p-text': expect.any(String), '--p-interactive': expect.any(String), diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss index 96cf5e688f5..e8b93ac41b7 100644 --- a/src/components/TopBar/TopBar.scss +++ b/src/components/TopBar/TopBar.scss @@ -70,9 +70,6 @@ $context-control-expand-after: 1400px; fill: var(--p-icon); // Icon will inherit this fill transition: (duration() - 33ms) fill easing() 33ms; - &.focused { - background-color: var(--p-override-transparent); - } &.focused:active { background-color: var(--p-surface-pressed); } diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index 256d4035652..0521c91e939 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -36,10 +36,7 @@ $activator-variables: ( &:focus { @include focus-ring($style: 'focused'); - background-color: var( - --top-bar-background-lighter, - var(--p-override-transparent) - ); + background-color: var(--top-bar-background-lighter); outline: none; } diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index bf54642a951..99d60c4013e 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -18,14 +18,8 @@ export const Tokens = { buttonPressedInnerShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)', // Overrides - overrideNone: 'none', - overrideTransparent: 'transparent', - overrideOne: '1', - overrideVisible: 'visible', - overrideZero: '0', overrideLoadingZIndex: '514', buttonFontWeight: '500', - nonNullContent: "''", choiceSize: rem('20px'), iconSize: rem('10px'), choiceMargin: rem('1px'), @@ -35,7 +29,6 @@ export const Tokens = { 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'), @@ -47,7 +40,6 @@ export const Tokens = { ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', rangeSliderThumbSizeBase: rem('16px'), rangeSliderThumbSizeActive: rem('24px'), - rangeSliderThumbScale: '1.5', badgeFontWeight: '400', };