fix(badge): split badge color into separate modes

make it so they can use a different badge by default per mode

references #5222

Author: brandyscarney

ionic/components/badge/badge.ios.scss

@@ -4,10 +4,13 @@
 // --------------------------------------------------
 
 $badge-ios-border-radius:             10px !default;
+$badge-ios-background-color:          map-get($colors-ios, primary) !default;
 
 
 ion-badge {
   border-radius: $badge-ios-border-radius;
+  background-color: $badge-ios-background-color;
+  color: inverse($badge-ios-background-color);
 }
 
 

ionic/components/badge/badge.md.scss

@@ -3,11 +3,14 @@
 // Material Design Badge
 // --------------------------------------------------
 
-$badge-md-border-radius:             4px !default;
+$badge-md-border-radius:            4px !default;
+$badge-md-background-color:         map-get($colors-md, primary) !default;
 
 
 ion-badge {
   border-radius: $badge-md-border-radius;
+  background-color: $badge-md-background-color;
+  color: inverse($badge-md-background-color);
 }
 
 

ionic/components/badge/badge.scss

@@ -5,7 +5,6 @@
 
 $badge-font-size:                 1.3rem !default;
 $badge-font-weight:               bold !default;
-$badge-background-color:          map-get($colors, primary);
 
 
 ion-badge {
@@ -22,9 +21,6 @@ ion-badge {
   font-weight: $badge-font-weight;
   line-height: 1;
 
-  background-color: $badge-background-color;
-  color: inverse($badge-background-color);
-
   &:empty {
     display: none;
   }