update size small badge and status new badge for better readability i…

…n navigation

UNRELEASED.md

@@ -13,6 +13,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Fixed `Action`s selector in `Page`'s `Header` component ([#2487](https://github.com/Shopify/polaris-react/pull/2487))
 - Fixed `Card` spacing in small devices ([#608](https://github.com/shopify/polaris-react/pull/608))
+- Improved readability of `Badge` with `size` small and `status` new for navigation ([#633](https://github.com/shopify/polaris-react/pull/633))
 
 ### Documentation
 

src/components/Badge/Badge.scss

@@ -1,4 +1,5 @@
 $height: rem(20px);
+$small-height: rem(18px);
 $horizontal-padding: spacing(tight);
 
 $pip-size: rem(10px);
@@ -25,9 +26,7 @@ $pip-spacing: ($height - $pip-size) / 2;
 
 .sizeSmall {
   font-size: font-size(caption, large-screen);
-  line-height: line-height(caption, large-screen);
-  padding: 0 rem(5px);
-  border: 0;
+  line-height: $small-height;
 }
 
 .statusSuccess {
@@ -55,8 +54,8 @@ $pip-spacing: ($height - $pip-size) / 2;
 }
 
 .statusNew {
-  background-color: color('teal');
-  color: color('teal', 'darker');
+  background-color: color('sky', 'dark');
+  color: color('ink');
   font-weight: 500;
 }