diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index afd14a36ea7..1285815f0db 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -11,6 +11,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed custom and unnecessary font weight properties ([#4687](https://github.com/Shopify/polaris-react/pull/4687)) - Removed miscellaneous css custom properties ([#4686](https://github.com/Shopify/polaris-react/pull/4686)) - Removed `skeleton-shimmer` mixin ([#4462](https://github.com/Shopify/polaris-react/pull/4462)) +- Remove `color-multiply` function ([#4714](https://github.com/Shopify/polaris-react/pull/4714)) +- Remove `$color-palette-data` global variable ([#4714](https://github.com/Shopify/polaris-react/pull/4714)) ### New components diff --git a/src/styles/foundation/_colors.scss b/src/styles/foundation/_colors.scss index 7b7bf87b1d9..ad49d437a21 100644 --- a/src/styles/foundation/_colors.scss +++ b/src/styles/foundation/_colors.scss @@ -1,62 +1,3 @@ -// stylelint-disable-next-line scss/partial-no-import -@import '../polaris-tokens/colors.color-map'; - -/// -/// Color data -/// -/// Shopify color palette, extended specifically for polaris-react. -/// -/// @type map -$color-palette-data: $polaris-colors; - -// Add state colors to the palette -$color-palette-data: map-extend( - $color-palette-data, - ( - 'state': ( - 'hover': rgba(223, 227, 232, 0.3), - 'focused': rgba(223, 227, 232, 0.3), - 'active': rgba(179, 188, 245, 0.1), - 'selected': rgba(179, 188, 245, 0.15), - 'subdued': rgba(249, 250, 251, 1), - 'disabled': rgba(249, 250, 251, 1), - 'hover-destructive': rgba(251, 234, 229, 0.4), - 'focused-destructive': rgba(251, 234, 229, 0.4), - 'active-destructive': rgba(220, 56, 37, 0.03), - ), - ) -); - -/// Darkens the foreground color by the background color. This is the same as -/// the "multiply" filter in graphics apps. -/// -/// @param {Color} $foreground - The color to darken. -/// @param {Color} $background - The background to base darkening on. -/// @return {Color} The modified color. - -@function color-multiply($foreground, $background: null) { - @if $background { - $background: rgb(255, 255, 255); - } - - $red: red($background) * red($foreground) / 255; - $green: green($background) * green($foreground) / 255; - $blue: blue($background) * blue($foreground) / 255; - - $opacity: opacity($foreground); - $background-opacity: opacity($background); - - // calculate opacity - $bm-red: $red * $opacity + red($background) * $background-opacity * - (1 - $opacity); - $bm-green: $green * $opacity + green($background) * $background-opacity * - (1 - $opacity); - $bm-blue: $blue * $opacity + blue($background) * $background-opacity * - (1 - $opacity); - - @return rgb($bm-red, $bm-green, $bm-blue); -} - /// /// Color palette for Windows high-contrast mode /// See https://bit.ly/2vN9aGO