Updated drop zone border to have better contrast and to be lighter wh…

…en disabled
Shopify · Sep 11, 2019 · 2a259a9 · 2a259a9
1 parent cda89db
commit 2a259a9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -10,6 +10,8 @@ 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))
+
 ### Bug fixes
 
 ### Documentation

diff --git 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 {