From 5a22383c86d699e95aa8c3ba267e5722f53a8c58 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 31 Jan 2022 14:51:24 -0700 Subject: [PATCH 1/5] Update UNRELEASED-v9.md --- UNRELEASED-v9.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED-v9.md b/UNRELEASED-v9.md index 7dc0e14acef..f2732df9cc0 100644 --- a/UNRELEASED-v9.md +++ b/UNRELEASED-v9.md @@ -42,6 +42,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed the `unstyled-list()` mixin and replaced any instances with values ([#4960](https://github.com/Shopify/polaris-react/pull/4960)) - Removed `high-contrast-outline()` and `high-contrast-border()` mixins and replaced any instances with tokens and values ([#4962](https://github.com/Shopify/polaris-react/pull/4962)) - Removed the `map-extend` scss function ([#4970](https://github.com/Shopify/polaris-react/pull/4970)) +- Removed the `state()` scss mixin ([#](https://github.com/Shopify/polaris-react/pull/)) ### New components From 237d2ecd68c96b4a6c1c767247852b11626283c5 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 31 Jan 2022 14:58:31 -0700 Subject: [PATCH 2/5] Update UNRELEASED-v9.md --- UNRELEASED-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED-v9.md b/UNRELEASED-v9.md index f2732df9cc0..aa3cc831c9b 100644 --- a/UNRELEASED-v9.md +++ b/UNRELEASED-v9.md @@ -42,7 +42,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed the `unstyled-list()` mixin and replaced any instances with values ([#4960](https://github.com/Shopify/polaris-react/pull/4960)) - Removed `high-contrast-outline()` and `high-contrast-border()` mixins and replaced any instances with tokens and values ([#4962](https://github.com/Shopify/polaris-react/pull/4962)) - Removed the `map-extend` scss function ([#4970](https://github.com/Shopify/polaris-react/pull/4970)) -- Removed the `state()` scss mixin ([#](https://github.com/Shopify/polaris-react/pull/)) +- Removed the `state()` scss mixin ([#4989](https://github.com/Shopify/polaris-react/pull/4989)) ### New components From d76cb3e53f0ac4f0743434de25f96e869bfcbc41 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 31 Jan 2022 15:27:12 -0700 Subject: [PATCH 3/5] Replace state(focused) with value --- src/components/VideoThumbnail/VideoThumbnail.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index 72d6cd3f76a..faa8388e8f9 100644 --- a/src/components/VideoThumbnail/VideoThumbnail.scss +++ b/src/components/VideoThumbnail/VideoThumbnail.scss @@ -43,7 +43,11 @@ $progress-bar-height: 6px; &:focus { outline: none; - @include state(focused); + box-shadow: inset 2px 0 0 var(--p-focused); + background-image: linear-gradient( + rgba(223, 227, 232, 0.3), + rgba(223, 227, 232, 0.3) + ); } } From 4df294e36ca7691c812ad4e207aefa0b02bc32a1 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 31 Jan 2022 16:15:44 -0700 Subject: [PATCH 4/5] Create --pc- custom property for one off rgba value --- src/components/VideoThumbnail/VideoThumbnail.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index faa8388e8f9..57068d18e9b 100644 --- a/src/components/VideoThumbnail/VideoThumbnail.scss +++ b/src/components/VideoThumbnail/VideoThumbnail.scss @@ -24,6 +24,7 @@ $progress-bar-height: 6px; } .PlayButton { + --pc-play-button-focused-state-overlay: rgba(223, 227, 232, 0.3); position: absolute; top: 0; left: 0; @@ -45,8 +46,8 @@ $progress-bar-height: 6px; outline: none; box-shadow: inset 2px 0 0 var(--p-focused); background-image: linear-gradient( - rgba(223, 227, 232, 0.3), - rgba(223, 227, 232, 0.3) + var(--pc-play-button-focused-state-overlay), + var(--pc-play-button-focused-state-overlay) ); } } From e980e840e6ef39a8f3905ea9fbb899d0c7b416e8 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 31 Jan 2022 16:20:13 -0700 Subject: [PATCH 5/5] Remove state() mixin --- src/styles/shared/_interaction-state.scss | 27 ----------------------- 1 file changed, 27 deletions(-) diff --git a/src/styles/shared/_interaction-state.scss b/src/styles/shared/_interaction-state.scss index 049de01c0da..31469515f8e 100644 --- a/src/styles/shared/_interaction-state.scss +++ b/src/styles/shared/_interaction-state.scss @@ -1,30 +1,3 @@ -/// Sets the background-image and box-shadow for single or multiple given -/// interaction states. -/// -/// @param {argList} $interaction-states... - Accepts single or multiple -/// interactions states. -@mixin state($interaction-states...) { - $backgrounds: (); - - @each $state in $interaction-states { - $colors: color(state, $state); - $backgrounds: append( - $backgrounds, - linear-gradient($colors, $colors), - comma - ); - - @if $state == 'focused' { - box-shadow: inset 2px 0 0 var(--p-focused); - } - - @if $state == 'focused-destructive' { - box-shadow: inset 2px 0 0 var(--p-focused); - } - } - background-image: $backgrounds; -} - @mixin list-selected-indicator { content: ''; background-color: var(--p-interactive);