feat(sass): add the ability to pass a contrast color in the colors map 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

@@ -4,12 +4,13 @@
 // --------------------------------------------------
 
 $badge-ios-border-radius:      10px !default;
-$badge-ios-background-color:          map-get($colors-ios, primary) !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;
 }
 
@@ -17,11 +18,11 @@ ion-badge {
 // 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);
+    color: $color-contrast;
-    background-color: $color-value;
+    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: $color-base;
-    border-color: $fg-color;
+    color: $color-base;
-    color: $fg-color;
     background-color: transparent;
 
     &.activated {
-      color: $background-ios-color;
+      color: $color-contrast;
-      background-color: $fg-color;
+      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 {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-  @include ios-button-default($color-name, $color-value);
+  @include ios-button-default($color-name, $color-base, $color-contrast);
-  @include ios-button-outline($color-name, $color-value);
+  @include ios-button-outline($color-name, $color-base, $color-contrast);
-  @include ios-button-clear($color-name, $color-value);
+  @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;
+    border-color: $color-base;
-    background-color: $bg-on;
+    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 {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-  @include checkbox-theme-ios($color-name, $color-value);
+  @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);
+      color: $color-contrast;
-      background-color: $color-value;
+      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);
+    color: $color-contrast;
-    background-color: $color-value;
+    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;
+    border-color: $color-base;
-    color: $color-value;
+    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);
+      color: $color-contrast;
-      background-color: $color-value;
+      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 {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-  @include ios-segment-button($color-name, $color-value);
+
+  @include ios-segment-button($color-name, $color-base, $color-contrast);
 
   .toolbar[#{$color-name}] .segment-button.segment-activated {
-    color: $color-value;
+    color: $color-base;
   }
 }

ionic/components/tabs/tabs.ios.scss

@@ -114,19 +114,19 @@ ion-tabs[tabbarPlacement=top] tabbar {
 // iOS Tabbar Color Mixin
 // --------------------------------------------------
 
-@mixin tabbar-ios($color-name, $color-value) {
+@mixin tabbar-ios($color-name, $color-base, $color-contrast) {
 
   ion-tabs[#{$color-name}] tabbar {
-    border-color: darken($color-value, 10%);
+    border-color: darken($color-base, 10%);
-    background-color: $color-value;
+    background-color: $color-base;
 
     .tab-button {
-      color: color-inverse($color-value);
+      color: $color-contrast;
     }
 
     .tab-button:hover:not(.disable-hover),
     .tab-button[aria-selected=true] {
-      color: color-inverse($color-value);
+      color: $color-contrast;
     }
   }
 
@@ -136,6 +136,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
 // iOS Tabbar Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-  @include tabbar-ios($color-name, $color-value);
+
+  @include tabbar-ios($color-name, $color-base, $color-contrast);
 }

ionic/components/tabs/test/colors/e2e.ts

@@ -0,0 +1 @@
+

ionic/components/tabs/test/colors/index.ts

@@ -0,0 +1,17 @@
+import {App, Page} from 'ionic-angular';
+
+
+@Page({template:'hi'})
+class E2EPage{}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}
+
+document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

ionic/components/tabs/test/colors/main.html

@@ -0,0 +1,71 @@
+
+<!-- Default -->
+<ion-tabs no-navbar>
+  <ion-tab tabTitle="Recents" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons -->
+<ion-tabs no-navbar selectedIndex="1" primary>
+  <ion-tab tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons on top of text -->
+<ion-tabs no-navbar selectedIndex="2" secondary>
+  <ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons below text -->
+<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1" dark>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons right of text -->
+<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0" danger>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons left of text -->
+<ion-tabs tabbarLayout="icon-left" no-navbar light>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- No icons -->
+<ion-tabs tabbarLayout="icon-hide" no-navbar primary>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- No title -->
+<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- No overflow text -->
+<ion-tabs no-navbar danger>
+  <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
+</ion-tabs>

ionic/components/tabs/test/colors/styles.css

@@ -0,0 +1,12 @@
+
+ion-tabs {
+  position: relative;
+  top: auto;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+ion-navbar-section,
+ion-content-section {
+  display: none !important;
+}

ionic/components/toggle/toggle.ios.scss

@@ -11,7 +11,7 @@ $toggle-ios-border-radius:             $toggle-ios-height / 2 !default;
 $toggle-ios-background-color-off:      $list-ios-background-color !default;
 $toggle-ios-border-color-off:          grayscale(lighten($list-ios-border-color, 11%)) !default;
 
-$toggle-ios-background-color-on:       map-get($colors-ios, primary) !default;
+$toggle-ios-background-color-on:       color($colors-ios, primary) !default;
 
 $toggle-ios-handle-width:              $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
 $toggle-ios-handle-height:             $toggle-ios-handle-width !default;
@@ -171,10 +171,10 @@ ion-toggle {
 // iOS Toggle Color Mixin
 // --------------------------------------------------
 
-@mixin ios-toggle-theme($color-name, $color-value) {
+@mixin ios-toggle-theme($color-name, $color-base) {
 
   ion-toggle[#{$color-name}] .toggle-checked {
-    background-color: $color-value;
+    background-color: $color-base;
   }
 
 }
@@ -183,8 +183,8 @@ ion-toggle {
 // Generate iOS Toggle Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  @include ios-toggle-theme($color-name, $color-value);
+  @include ios-toggle-theme($color-name, $color-base);
 
 }

ionic/components/toolbar/test/colors/main.html

@@ -147,6 +147,35 @@
   <ion-title>Danger</ion-title>
 </ion-toolbar>
 
+<ion-toolbar light>
+  <ion-buttons start>
+    <button>
+      <ion-icon name="contact"></ion-icon>
+      Clear
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button>
+      Edit
+      <ion-icon name="create"></ion-icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Light</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar light>
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-buttons start>
+    <button>
+      <ion-icon name="star"></ion-icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Light</ion-title>
+</ion-toolbar>
+
 
 <ion-toolbar transparent>
   <ion-buttons end>

ionic/components/toolbar/toolbar.ios.scss

@@ -86,17 +86,17 @@ ion-title {
   pointer-events: none;
 }
 
-@mixin ios-toolbar-theme($color-name, $color-value) {
+@mixin ios-toolbar-theme($color-name, $color-base, $color-contrast) {
   .toolbar[#{$color-name}] {
 
     .toolbar-background {
-      border-color: darken($color-value, 10%);
+      border-color: darken($color-base, 10%);
-      background: $color-value;
+      background: $color-base;
     }
 
     .toolbar-title,
     .bar-button-default {
-      color: color-inverse($color-value);
+      color: $color-contrast;
     }
   }
 }
@@ -142,15 +142,14 @@ ion-buttons[right] {
   font-size: $toolbar-ios-button-font-size;
 }
 
-@mixin ios-bar-button-default($color-name, $color-value) {
+@mixin ios-bar-button-default($color-name, $color-base, $color-contrast) {
 
   .bar-button-#{$color-name} {
-    $fg-color: $color-value;
+    color: $color-base;
-    color: $fg-color;
     background-color: transparent;
 
     &:hover:not(.disable-hover) {
-      color: $fg-color;
+      color: $color-base;
     }
 
     &.activated {
@@ -176,21 +175,21 @@ ion-buttons[right] {
   }
 
   &.activated {
-    color: color-inverse($bar-button-ios-color);
+    color: color-contrast($colors-ios, $bar-button-ios-color);
     background-color: $bar-button-ios-color;
   }
 }
 
-@mixin ios-bar-button-outline($color-name, $color-value) {
+@mixin ios-bar-button-outline($color-name, $color-base, $color-contrast) {
 
   .bar-button-outline-#{$color-name} {
-    $fg-color: color-shade($color-value);
+    $fg-color: color-shade($color-base);
     border-color: $fg-color;
     color: $fg-color;
     background-color: transparent;
 
     &.activated {
-      color: color-inverse($fg-color);
+      color: $color-contrast;
       background-color: $fg-color;
     }
   }
@@ -202,29 +201,30 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-solid {
-  color: color-inverse($bar-button-ios-color);
+  color: color-contrast($colors-ios, $bar-button-ios-color);
   background-color: $bar-button-ios-color;
 
   &:hover:not(.disable-hover) {
-    color: color-inverse($bar-button-ios-color);
+    color: color-contrast($colors-ios, $bar-button-ios-color);
     opacity: .4;
   }
 
   &.activated {
-    color: color-inverse($bar-button-ios-color);
+    color: color-contrast($colors-ios, $bar-button-ios-color);
     background-color: color-shade($bar-button-ios-color);
     opacity: .4;
   }
 }
 
-@mixin ios-bar-button-solid($color-name, $color-value) {
+@mixin ios-bar-button-solid($color-name, $color-base, $color-contrast) {
 
   .bar-button-solid-#{$color-name} {
-    color: color-inverse($color-value);
+    color: $color-contrast;
-    background-color: $color-value;
+    background-color: $color-base;
 
     &.activated {
-      background-color: color-shade($color-value);
+      color: $color-contrast;
+      background-color: color-shade($color-base);
     }
   }
 
@@ -327,11 +327,11 @@ ion-buttons[right] {
 // iOS Toolbar Color Generation
 // --------------------------------------------------
 
-@include ios-bar-button-default(default, $bar-button-ios-color);
+@include ios-bar-button-default(default, $bar-button-ios-color, color-contrast($colors-ios, $bar-button-ios-color));
 
-@each $color-name, $color-value in $colors-ios {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-  @include ios-toolbar-theme($color-name, $color-value);
+  @include ios-toolbar-theme($color-name, $color-base, $color-contrast);
-  @include ios-bar-button-default($color-name, $color-value);
+  @include ios-bar-button-default($color-name, $color-base, $color-contrast);
-  @include ios-bar-button-outline($color-name, $color-value);
+  @include ios-bar-button-outline($color-name, $color-base, $color-contrast);
-  @include ios-bar-button-solid($color-name, $color-value);
+  @include ios-bar-button-solid($color-name, $color-base, $color-contrast);
 }

ionic/themes/dark.ios.scss

@@ -3,30 +3,34 @@
 // iOS Dark Theme
 // ----------------------------------
 
-$colors-ios: map-merge($colors, ()) !default;
+$colors-ios: copy-colors($colors) !default;
 
 $text-ios-color:                       $text-color !default;
 $paragraph-ios-color:                  $paragraph-color !default;
-$link-ios-color:                       map-get($colors-ios, primary) !default;
+$link-ios-color:                       color($colors-ios, primary) !default;
 $background-ios-color:                 $background-color !default;
 $subdued-text-ios-color:               $subdued-text-color !default;
 
 $font-family-ios-base:                 $font-family-base !default;
 $font-size-ios-base:                   $font-size-base !default;
 
+
 // iOS Outer content
 // --------------------------------------------------
-$outer-content-ios-background-color:   $background-color !default;
+$content-ios-outer-background:         $background-color !default;
+
 
 // iOS Card
 // --------------------------------------------------
 
 $card-ios-header-color:                #ddd !default;
 
+
 // iOS Note
 // --------------------------------------------------
 
-$item-ios-note-color:                  map-get($colors-ios, light) !default;
+$item-ios-note-color:                  color($colors-ios, light) !default;
+
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -46,15 +50,13 @@ $list-ios-border-color:                $list-border-color !default;
 $list-ios-background-color:            $list-background-color !default;
 $list-ios-activated-background-color:  #d9d9d9 !default;
 
+
 // iOS List header
 // --------------------------------------------------
 $list-ios-header-color:                $text-color !default;
 $item-ios-divider-background:          #151515 !default;
 $item-ios-divider-color:               $text-color !default;
 
-ion-list-header {
-  background-color: $item-ios-divider-background;
-}
 
 // iOS Item
 // --------------------------------------------------
@@ -68,10 +70,12 @@ $item-ios-padding-media-bottom:       10px !default;
 $item-ios-padding-icon-top:           10px !default;
 $item-ios-padding-icon-bottom:        9px !default;
 
+
 // iOS Toggle
 // --------------------------------------------------
 
-$toggle-ios-handle-background-color:  map-get($colors-ios, light) !default;
+$toggle-ios-handle-background-color:  color($colors-ios, light) !default;
+
 
 // iOS Icon
 // --------------------------------------------------

ionic/themes/default.ios.scss

@@ -8,7 +8,7 @@ $colors-ios: copy-colors($colors) !default;
 
 $text-ios-color:                       $text-color !default;
 $paragraph-ios-color:                  $paragraph-color !default;
-$link-ios-color:                       map-get($colors-ios, primary) !default;
+$link-ios-color:                       color($colors-ios, primary) !default;
 $background-ios-color:                 $background-color !default;
 $subdued-text-ios-color:               $subdued-text-color !default;
 

ionic/util/functions.scss

@@ -74,3 +74,123 @@
 @function url-encode($val) {
   @return str-replace($val, " ", "%20");
 }
+
+
+// Fetch nested keys
+// @param {Map} $map - Map
+// @param {Arglist} $keys - Keys to fetch
+// @return {*}
+// --------------------------------------------------
+
+@function map-fetch($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}
+
+
+// Fetch map color value
+// @param {Map} $map - Map
+// @param {String} $color-name - Color name to get
+// @param {String} $color-key - Color key (optional), default base
+// @return {Color}
+// --------------------------------------------------
+
+@function color($map, $color-name, $color-key:null) {
+  // Get the value from $color-name in the map
+  // this can be of type color or a map
+  $color-value: map-get($map, $color-name);
+
+  // If we were given a map we need to grab the value
+  // of the key that is passed or the base key
+  @if(type-of($color-value) == map) {
+    @if($color-key) {
+      $color-value: map-fetch($map, $color-name, $color-key);
+    } @else {
+      $color-value: map-fetch($map, $color-name, base);
+    }
+  }
+
+  // If it isn't a map then return the value
+  @return $color-value;
+}
+
+// Get the color map key based on the value
+// if it doesn't exist then return the value
+// --------------------------------------------------
+@function color-key($colors, $value) {
+  @each $color-name, $color-value in $colors {
+    $base-value: color($colors, $color-name);
+    @if ($base-value == $value) {
+      @return map-get($colors, $color-name);
+    }
+  }
+
+  @return $value;
+}
+
+// Fetch map color contrast
+// @param {Map} $colors - colors map
+// @param {String} $value - color value or color name
+//
+// Example values
+// --------------------------------------------------
+// primary | #327eff   | #444
+// map key | map value | hex color not in map
+// --------------------------------------------------
+//
+// @return {Color}
+// --------------------------------------------------
+@function color-contrast($colors, $value) {
+  $color-value: null;
+
+  // If the value is a color (i.e. #fff)
+  // we need to call color-key to see if
+  // it exists in the color map or not
+  @if(type-of($value) == color) {
+    $color-value: color-key($colors, $value);
+
+  // If the value is a string (i.e. primary)
+  // we want to get the value from the map
+  // where it is the key
+  } @else {
+    $color-value: map-get($colors, $value);
+  }
+
+  // If the value is a map
+  @if(type-of($color-value) == map) {
+    $color-value: map-get($color-value, contrast);
+  } @else {
+    $color-value: color-inverse($color-value);
+  }
+
+  @return $color-value;
+}
+
+
+// Create a list using the colors map
+// @param {Map} $colors - colors map
+// @return {List} $color-name, $color-base, $color-contrast
+// ----------------------------------------------------------
+@function get-colors($colors) {
+  $colors-list: ();
+
+  @each $color-name, $color-value in $colors {
+    $color-base: null;
+    $color-contrast: null;
+
+    @if(type-of($color-value) == map) {
+      $color-base: map-get($color-value, base);
+      $color-contrast: map-get($color-value, contrast);
+    } @else {
+      $color-base: $color-value;
+      $color-contrast: color-inverse($color-value);
+    }
+
+    $colors-list: append($colors-list, ( $color-name, $color-base, $color-contrast ), comma);
+  }
+
+  @return $colors-list;
+}