feat(sass): add the ability to pass a contrast color in the colors ma…

…p to iOS

this adds the functions necessary for the other modes as well

BREAKING CHANGE:

Can now pass contrast to the colors map:

```
$colors-ios: (

  primary: (
    base: #327eff,
    contrast: yellow
  ),
  secondary: (
    base: #32db64,
    contrast: hotpink
  ),
  danger: #d91e18,
  light: #f4f4f4,
  dark: #222
) !default;
```

references #5445

ionic/components/alert/alert.ios.scss

@@ -41,7 +41,7 @@ $alert-ios-button-margin:                       0 !default;
 $alert-ios-button-min-width:                    50% !default;
 $alert-ios-button-min-height:                   44px !default;
 $alert-ios-button-font-size:                    17px !default;
-$alert-ios-button-text-color:                   map-get($colors-ios, primary) !default;
+$alert-ios-button-text-color:                   color($colors-ios, primary) !default;
 $alert-ios-button-background-color:             transparent !default;
 $alert-ios-button-background-color-activated:   #e9e9e9 !default;
 
@@ -75,9 +75,9 @@ $alert-ios-checkbox-border-width:               1px !default;
 $alert-ios-checkbox-border-style:               solid !default;
 $alert-ios-checkbox-border-radius:              50% !default;
 $alert-ios-checkbox-border-color-off:           $list-ios-border-color !default;
-$alert-ios-checkbox-border-color-on:            map-get($colors-ios, primary) !default;
+$alert-ios-checkbox-border-color-on:            color($colors-ios, primary) !default;
 $alert-ios-checkbox-background-color-off:       $list-ios-background-color !default;
-$alert-ios-checkbox-background-color-on:        map-get($colors-ios, primary) !default;
+$alert-ios-checkbox-background-color-on:        color($colors-ios, primary) !default;
 
 $alert-ios-checkbox-icon-top:                   4px !default;
 $alert-ios-checkbox-icon-left:                  7px !default;

ionic/components/app/app.ios.scss

@@ -24,7 +24,8 @@ hr {
   height: $hairlines-width;
 }
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
   h1,
   h2,
   h3,
@@ -43,7 +44,7 @@ hr {
   sup,
   ion-icon {
     &[#{$color-name}] {
-      color: $color-value;
+      color: $color-base;
     }
   }
 }

ionic/components/badge/badge.ios.scss

@@ -3,25 +3,26 @@
 // iOS Badge
 // --------------------------------------------------
 
-$badge-ios-border-radius:             10px !default;
-$badge-ios-background-color:          map-get($colors-ios, primary) !default;
+$badge-ios-border-radius:      10px !default;
+$badge-ios-background-color:   color($colors-ios, primary) !default;
+$badge-ios-text-color:         color-contrast($colors-ios, $badge-ios-background-color) !default;
 
 
 ion-badge {
   border-radius: $badge-ios-border-radius;
-  color: color-inverse($badge-ios-background-color);
+  color: $badge-ios-text-color;
   background-color: $badge-ios-background-color;
 }
 
 
 // Generate iOS Badge Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
   .badge-#{$color-name} {
-    color: color-inverse($color-value);
-    background-color: $color-value;
+    color: $color-contrast;
+    background-color: $color-base;
   }
 
 }

ionic/components/button/button.ios.scss

@@ -8,9 +8,9 @@ $button-ios-margin:                   .4rem .2rem !default;
 $button-ios-padding:                  0 1em !default;
 $button-ios-font-size:                1.6rem !default;
 $button-ios-height:                   2.8em !default;
-$button-ios-color:                    map-get($colors-ios, primary) !default;
+$button-ios-color:                    color($colors-ios, primary) !default;
 $button-ios-color-activated:          color-shade($button-ios-color) !default;
-$button-ios-text-color:               color-inverse($button-ios-color) !default;
+$button-ios-text-color:               color-contrast($colors-ios, $button-ios-color) !default;
 $button-ios-hover-opacity:            .8 !default;
 $button-ios-border-radius:            4px !default;
 
@@ -53,12 +53,12 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // iOS Default Button Color Mixin
 // --------------------------------------------------
 
-@mixin ios-button-default($color-name, $color-value) {
+@mixin ios-button-default($color-name, $color-base, $color-contrast) {
 
   .button-#{$color-name} {
-    $background-color: $color-value;
+    $background-color: $color-base;
     $background-color-activated: color-shade($background-color);
-    $fg-color: color-inverse($background-color);
+    $fg-color: $color-contrast;
 
     color: $fg-color;
     background-color: $background-color;
@@ -126,7 +126,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
   background-color: transparent;
 
   &.activated {
-    color: $background-ios-color;
+    color: color-contrast($colors-ios, $button-ios-color);
     background-color: $button-ios-color;
     opacity: 1;
   }
@@ -139,17 +139,16 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // iOS Outline Button Color Mixin
 // --------------------------------------------------
 
-@mixin ios-button-outline($color-name, $color-value) {
+@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
 
   .button-outline-#{$color-name} {
-    $fg-color: color-shade($color-value, 5%);
-    border-color: $fg-color;
-    color: $fg-color;
+    border-color: $color-base;
+    color: $color-base;
     background-color: transparent;
 
     &.activated {
-      color: $background-ios-color;
-      background-color: $fg-color;
+      color: $color-contrast;
+      background-color: $color-base;
     }
   }
 
@@ -179,10 +178,10 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // iOS Clear Button Color Mixin
 // --------------------------------------------------
 
-@mixin ios-button-clear($color-name, $color-value) {
+@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
 
   .button-clear-#{$color-name} {
-    $fg-color: $color-value;
+    $fg-color: $color-base;
     border-color: transparent;
     color: $fg-color;
     background-color: transparent;
@@ -217,10 +216,10 @@ ion-button-effect {
 // Generate iOS Button Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
-  @include ios-button-default($color-name, $color-value);
-  @include ios-button-outline($color-name, $color-value);
-  @include ios-button-clear($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+  @include ios-button-default($color-name, $color-base, $color-contrast);
+  @include ios-button-outline($color-name, $color-base, $color-contrast);
+  @include ios-button-clear($color-name, $color-base, $color-contrast);
 }
 
 

ionic/components/checkbox/checkbox.ios.scss

@@ -4,18 +4,18 @@
 // --------------------------------------------------
 
 $checkbox-ios-background-color-off:       $list-ios-background-color !default;
-$checkbox-ios-background-color-on:        map-get($colors-ios, primary) !default;
+$checkbox-ios-background-color-on:        color($colors-ios, primary) !default;
 
 $checkbox-ios-icon-size:                  21px !default;
-$checkbox-ios-icon-border-color-on:       map-get($colors-ios, primary) !default;
 $checkbox-ios-icon-border-color-off:      $list-ios-border-color !default;
+$checkbox-ios-icon-border-color-on:       $checkbox-ios-background-color-on !default;
 $checkbox-ios-icon-border-width:          1px !default;
 $checkbox-ios-icon-border-style:          solid !default;
 $checkbox-ios-icon-border-radius:         50% !default;
 
 $checkbox-ios-icon-checkmark-width:       1px !default;
 $checkbox-ios-icon-checkmark-style:       solid !default;
-$checkbox-ios-icon-checkmark-color:       $background-ios-color !default;
+$checkbox-ios-icon-checkmark-color:       color-contrast($colors-ios, $checkbox-ios-background-color-on) !default;
 
 $checkbox-ios-media-margin:               $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
 
@@ -99,14 +99,14 @@ ion-checkbox {
 // iOS Checkbox Color Mixin
 // --------------------------------------------------
 
-@mixin checkbox-theme-ios($color-name, $bg-on) {
+@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
 
   ion-checkbox[#{$color-name}] .checkbox-checked {
-    border-color: $bg-on;
-    background-color: $bg-on;
+    border-color: $color-base;
+    background-color: $color-base;
 
     .checkbox-inner {
-      border-color: color-inverse($bg-on);
+      border-color: $color-contrast;
     }
   }
 
@@ -116,6 +116,6 @@ ion-checkbox {
 // Generate iOS Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
-  @include checkbox-theme-ios($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+  @include checkbox-theme-ios($color-name, $color-base, $color-contrast);
 }

ionic/components/chip/chip.ios.scss

@@ -1,18 +1,18 @@
 @import "./chip";
 
-// Material Design Chip
+// iOS Chip
 // --------------------------------------------------
 
 
-// Generate Material Design Chip Colors
+// Generate iOS Chip Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
   ion-chip {
     ion-icon[#{$color-name}] {
-      color: color-inverse($color-value);
-      background-color: $color-value;
+      color: $color-contrast;
+      background-color: $color-base;
     }
   }
 

ionic/components/item/item.ios.scss

@@ -207,10 +207,10 @@ ion-item-divider {
 // Generate iOS Item Divider Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
   ion-item-divider[#{$color-name}] {
-    color: color-inverse($color-value);
-    background-color: $color-value;
+    color: $color-contrast;
+    background-color: $color-base;
   }
 }
 

ionic/components/label/label.ios.scss

@@ -64,10 +64,10 @@ ion-label[floating] {
 // Generate iOS Label colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
   ion-label[#{$color-name}] {
-    color: $color-value;
+    color: $color-base;
   }
 
 }

ionic/components/radio/radio.ios.scss

@@ -3,7 +3,7 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-color-on:               map-get($colors-ios, primary) !default;
+$radio-ios-color-on:               color($colors-ios, primary) !default;
 
 $radio-ios-icon-width:             16px !default;
 $radio-ios-icon-height:            21px !default;
@@ -88,13 +88,13 @@ ion-radio {
 // iOS Radio Color Mixin
 // --------------------------------------------------
 
-@mixin radio-theme-ios($color-name, $color-value) {
+@mixin radio-theme-ios($color-name, $color-base) {
 
   ion-radio[#{$color-name}] .radio-checked {
-    color: $color-value;
+    color: $color-base;
 
     .radio-inner {
-      border-color: $color-value;
+      border-color: $color-base;
     }
 
   }
@@ -105,8 +105,8 @@ ion-radio {
 // Generate iOS Radio Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  @include radio-theme-ios($color-name, $color-value);
+  @include radio-theme-ios($color-name, $color-base);
 
 }

ionic/components/searchbar/searchbar.ios.scss

@@ -194,21 +194,21 @@ ion-searchbar {
 // Generate Default Search Bar Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
   ion-searchbar[#{$color-name}] {
     .searchbar-ios-cancel {
-      color: $color-value;
+      color: $color-base;
 
       &:hover:not(.disable-hover) {
-        color: color-shade($color-value);
+        color: color-shade($color-base);
       }
     }
   }
 
   .toolbar[#{$color-name}] ion-searchbar {
     .searchbar-ios-cancel {
-      color: color-inverse($color-value);
+      color: $color-contrast;
     }
   }
 

ionic/components/segment/segment.ios.scss

@@ -7,7 +7,7 @@
 $segment-button-ios-background-color:           transparent !default;
 $segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
 
-$segment-button-ios-text-color:                 color-inverse($segment-button-ios-background-color-activated) !default;
+$segment-button-ios-text-color:                 color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
 $segment-button-ios-activated-transition:       100ms all linear !default;
 $segment-button-ios-hover-transition:           100ms all linear !default;
 $segment-button-ios-active-transition:          100ms all linear !default;
@@ -115,23 +115,23 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 // iOS Segment Button Mixin
 // --------------------------------------------------
 
-@mixin ios-segment-button($color-name, $color-value) {
+@mixin ios-segment-button($color-name, $color-base, $color-contrast) {
 
   ion-segment[#{$color-name}] .segment-button {
-    border-color: $color-value;
-    color: $color-value;
+    border-color: $color-base;
+    color: $color-base;
 
     &:hover:not(.segment-activated) {
-      background-color: rgba($color-value, $segment-button-ios-hover-opacity);
+      background-color: rgba($color-base, $segment-button-ios-hover-opacity);
     }
 
     &:active:not(.segment-activated) {
-      background-color: rgba($color-value, $segment-button-ios-active-opacity);
+      background-color: rgba($color-base, $segment-button-ios-active-opacity);
     }
 
     &.segment-activated {
-      color: color-inverse($color-value);
-      background-color: $color-value;
+      color: $color-contrast;
+      background-color: $color-base;
     }
   }
 
@@ -141,10 +141,11 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 // iOS Segment Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
-  @include ios-segment-button($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  @include ios-segment-button($color-name, $color-base, $color-contrast);
 
   .toolbar[#{$color-name}] .segment-button.segment-activated {
-    color: $color-value;
+    color: $color-base;
   }
 }