From 38874a74c7dcd3bae67cd7c99f64346e7772ec77 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Wed, 13 Nov 2019 13:40:18 -0500
Subject: [PATCH] [MessageIndicator] Convert to use color system, improve
 contrast

---
 UNRELEASED.md                                         |  2 ++
 src/components/MessageIndicator/MessageIndicator.scss | 10 ++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 50fd0fdcc69..166ed4b9eaa 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -4,6 +4,8 @@
 
 ### Enhancements
 
+- Improved contrast of `MessageIndicator` with a border and converted from `color` Sass mixin to CSS variables ([#2428](https://github.com/Shopify/polaris-react/pull/2428))
+
 ### Bug fixes
 
 - Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of it's container ([#2412](https://github.com/Shopify/polaris-react/pull/2412))
diff --git a/src/components/MessageIndicator/MessageIndicator.scss b/src/components/MessageIndicator/MessageIndicator.scss
index cea41e49069..fcac54ed9c7 100644
--- a/src/components/MessageIndicator/MessageIndicator.scss
+++ b/src/components/MessageIndicator/MessageIndicator.scss
@@ -1,6 +1,7 @@
 @import '../../styles/common';
 
-$indicator-size: rem(8px);
+$indicator-size: 1.2rem;
+$indicator-position: rem(-3px);
 
 .MessageIndicatorWrapper {
   position: relative;
@@ -9,10 +10,11 @@ $indicator-size: rem(8px);
 .MessageIndicator {
   position: absolute;
   z-index: 1;
-  top: 0;
-  right: 0;
+  top: $indicator-position;
+  right: $indicator-position;
   width: $indicator-size;
   height: $indicator-size;
   border-radius: 100%;
-  background-color: color('teal');
+  background-color: var(--p-highlight-icon, color('teal'));
+  border: solid 2px var(--p-surface-background, var(--top-bar-background));
 }