diff --git a/UNRELEASED.md b/UNRELEASED.md index 20eba85708d..01506d7381b 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -10,6 +10,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Enhancements +- Changed border color of `Drop zone` to have better contrast from the background and to be lighter when disabled ([#2119](https://github.com/Shopify/polaris-react/pull/2119)) - Adjusted search results overlay to take up 100% height of the screen on small screens and to match the width of the search bar on large screens. ([#2103](https://github.com/Shopify/polaris-react/pull/2103)) - Added skipToContentTarget prop to Frame component ([#2080](https://github.com/Shopify/polaris-react/pull/2080)) diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss index 697f38361e6..d475aae0712 100755 --- a/src/components/DropZone/DropZone.scss +++ b/src/components/DropZone/DropZone.scss @@ -2,7 +2,8 @@ $dropzone-padding: rem(15px); $dropzone-border-style: dashed; -$dropzone-border-color: color('sky'); +$dropzone-border-color: color('ink', 'lightest'); +$dropzone-border-color-disabled: color('sky'); $dropzone-border-radius: border-radius(); $dropzone-background: color('white'); $dropzone-min-height-extra-large: rem(205px); @@ -90,6 +91,10 @@ $dropzone-stacking-order: ( .isDisabled { cursor: not-allowed; + + &::after { + border-color: $dropzone-border-color-disabled; + } } .sizeExtraLarge {