feat(sass): add support for contrast in color map for wp mode

BREAKING CHANGE: Can now pass contrast to the colors map: ``` $colors-wp: ( primary: ( base: #327eff, contrast: yellow ), secondary: ( base: #32db64, contrast: hotpink ), danger: #d91e18, light: #f4f4f4, dark: #222 ) !default; ``` references #5445
ionic-team · Mar 22, 2016 · 5f2e737 · 5f2e737
1 parent 9efa3ea
commit 5f2e737
Show file tree

Hide file tree

Showing 17 changed files with 109 additions and 107 deletions.
diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss
@@ -10,7 +10,7 @@ $alert-wp-width:                               100% !default;
 $alert-wp-max-width:                           520px !default;
 $alert-wp-border-width:                        1px !default;
 $alert-wp-border-style:                        solid !default;
-$alert-wp-border-color:                        map-get($colors-wp, primary) !default;
+$alert-wp-border-color:                        color($colors-wp, primary) !default;
 $alert-wp-border-radius:                       0 !default;
 $alert-wp-background:                          #e6e6e6 !default;
 
@@ -34,7 +34,7 @@ $alert-wp-input-padding:                       0 8px !default;
 $alert-wp-input-border-width:                  2px !default;
 $alert-wp-input-border-style:                  $alert-wp-border-style !default;
 $alert-wp-input-border-color:                  $input-wp-border-color !default;
-$alert-wp-input-border-color-focused:          map-get($colors-wp, primary) !default;
+$alert-wp-input-border-color-focused:          color($colors-wp, primary) !default;
 $alert-wp-input-line-height:                   3rem !default;
 $alert-wp-input-text-color:                    #000 !default;
 
@@ -54,7 +54,7 @@ $alert-wp-button-group-flex-wrap:              wrap-reverse !default;
 $alert-wp-button-group-vertical-width:         100% !default;
 $alert-wp-button-group-vertical-margin-top:    5px !default;
 
-$alert-wp-radio-background:                    map-get($colors-wp, primary) !default;
+$alert-wp-radio-background:                    color($colors-wp, primary) !default;
 $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 
 $alert-wp-radio-label-padding:                 13px 26px !default;
@@ -85,15 +85,15 @@ $alert-wp-checkbox-border-style:               solid !default;
 $alert-wp-checkbox-border-radius:              0 !default;
 $alert-wp-checkbox-border-color:               $input-wp-border-color !default;
 $alert-wp-checkbox-background-off:             transparent !default;
-$alert-wp-checkbox-background-on:              map-get($colors-wp, primary) !default;
+$alert-wp-checkbox-background-on:              color($colors-wp, primary) !default;
 
 $alert-wp-checkbox-icon-top:                   -2px !default;
 $alert-wp-checkbox-icon-left:                  3px !default;
 $alert-wp-checkbox-icon-width:                 6px !default;
 $alert-wp-checkbox-icon-height:                12px !default;
 $alert-wp-checkbox-icon-border-width:          1px !default;
 $alert-wp-checkbox-icon-border-style:          solid !default;
-$alert-wp-checkbox-icon-border-color:          $alert-wp-background !default;
+$alert-wp-checkbox-icon-border-color:          color-contrast($colors-wp, $alert-wp-checkbox-background-on) !default;
 $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
 

diff --git a/ionic/components/app/app.wp.scss b/ionic/components/app/app.wp.scss
@@ -19,7 +19,7 @@ hr {
   background-color: rgba(0, 0, 0, .08);
 }
 
-@each $color-name, $color-value in $colors-wp {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
   h1,
   h2,
   h3,
@@ -38,7 +38,7 @@ hr {
   sup,
   ion-icon {
     &[#{$color-name}] {
-      color: $color-value;
+      color: $color-base;
     }
   }
 }
diff --git a/ionic/components/badge/badge.wp.scss b/ionic/components/badge/badge.wp.scss
@@ -4,24 +4,25 @@
 // --------------------------------------------------
 
 $badge-wp-border-radius:            0 !default;
-$badge-wp-background-color:         map-get($colors-wp, primary) !default;
+$badge-wp-background-color:         color($colors-wp, primary) !default;
+$badge-wp-text-color:               color-contrast($colors-wp, $badge-wp-background-color) !default;
 
 
 ion-badge {
   border-radius: $badge-wp-border-radius;
-  color: color-inverse($badge-wp-background-color);
+  color: $badge-wp-text-color;
   background-color: $badge-wp-background-color;
 }
 
 
 // Generate Windows Badge Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
   .badge-#{$color-name} {
-    color: color-inverse($color-value);
-    background-color: $color-value;
+    color: $color-contrast;
+    background-color: $color-base;
   }
 
 }
diff --git a/ionic/components/button/button.wp.scss b/ionic/components/button/button.wp.scss
@@ -13,9 +13,9 @@ $button-wp-border-width:                              3px !default;
 $button-wp-border-radius:                             0 !default;
 
 // Regular button
-$button-wp-background-color:                          map-get($colors-wp, primary) !default;
+$button-wp-background-color:                          color($colors-wp, primary) !default;
 $button-wp-background-color-activated:                color-shade($button-wp-background-color) !default;
-$button-wp-text-color:                                color-inverse($button-wp-background-color) !default;
+$button-wp-text-color:                                color-contrast($colors-wp, $button-wp-background-color) !default;
 
 // Clear button
 $button-wp-clear-background-color-hover:              rgba(158, 158, 158, .1) !default;
@@ -76,12 +76,12 @@ $button-wp-fab-border-radius:                         50% !default;
 // Windows Default Button Color Mixin
 // --------------------------------------------------
 
-@mixin wp-button-default($color-name, $color-value) {
+@mixin wp-button-default($color-name, $color-base, $color-contrast) {
 
   .button-#{$color-name} {
-    $bg-color: $color-value;
+    $bg-color: $color-base;
     $bg-color-activated: color-shade($bg-color);
-    $fg-color: color-inverse($bg-color);
+    $fg-color: $color-contrast;
 
     color: $fg-color;
     background-color: $bg-color;
@@ -165,10 +165,10 @@ $button-wp-fab-border-radius:                         50% !default;
 // Windows Outline Button Color Mixin
 // --------------------------------------------------
 
-@mixin wp-button-outline($color-name, $color-value) {
+@mixin wp-button-outline($color-name, $color-base, $color-contrast) {
 
   .button-outline-#{$color-name} {
-    $fg-color: color-shade($color-value, 5%);
+    $fg-color: color-shade($color-base, 5%);
     border-color: $fg-color;
     color: $fg-color;
 
@@ -205,10 +205,10 @@ $button-wp-fab-border-radius:                         50% !default;
 // Windows Clear Button Color Mixin
 // --------------------------------------------------
 
-@mixin wp-button-clear($color-name, $color-value) {
+@mixin wp-button-clear($color-name, $color-base, $color-contrast) {
 
   .button-clear-#{$color-name} {
-    $fg-color: $color-value;
+    $fg-color: $color-base;
     color: $fg-color;
 
     &.activated {
@@ -251,10 +251,10 @@ ion-button-effect {
 // Generate Windows Button Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
-  @include wp-button-default($color-name, $color-value);
-  @include wp-button-outline($color-name, $color-value);
-  @include wp-button-clear($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  @include wp-button-default($color-name, $color-base, $color-contrast);
+  @include wp-button-outline($color-name, $color-base, $color-contrast);
+  @include wp-button-clear($color-name, $color-base, $color-contrast);
 }
 
 

diff --git a/ionic/components/checkbox/checkbox.wp.scss b/ionic/components/checkbox/checkbox.wp.scss
@@ -12,18 +12,18 @@ $checkbox-wp-media-margin:               $item-wp-padding-media-top $item-wp-pad
 $checkbox-wp-disabled-opacity:           .3 !default;
 
 $checkbox-wp-icon-background-color-off:  $list-wp-background-color !default;
-$checkbox-wp-icon-background-color-on:   map-get($colors-wp, primary) !default;
+$checkbox-wp-icon-background-color-on:   color($colors-wp, primary) !default;
 $checkbox-wp-icon-size:                  16px !default;
 
 $checkbox-wp-icon-checkmark-width:       1px !default;
 $checkbox-wp-icon-checkmark-style:       solid !default;
-$checkbox-wp-icon-checkmark-color:       $background-wp-color !default;
+$checkbox-wp-icon-checkmark-color:       color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) !default;
 
 $checkbox-wp-icon-border-width:          2px !default;
 $checkbox-wp-icon-border-style:          solid !default;
 $checkbox-wp-icon-border-radius:         0 !default;
 $checkbox-wp-icon-border-color-off:      #333 !default;
-$checkbox-wp-icon-border-color-on:       map-get($colors-wp, primary) !default;
+$checkbox-wp-icon-border-color-on:       color($colors-wp, primary) !default;
 
 
 ion-checkbox {
@@ -107,14 +107,14 @@ ion-checkbox + .item-inner ion-label {
 // Windows Checkbox Color Mixin
 // --------------------------------------------------
 
-@mixin checkbox-theme-wp($color-name, $bg-on) {
+@mixin checkbox-theme-wp($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;
     }
   }
 
@@ -124,6 +124,6 @@ ion-checkbox + .item-inner ion-label {
 // Generate Windows Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
-  @include checkbox-theme-wp($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  @include checkbox-theme-wp($color-name, $color-base, $color-contrast);
 }
diff --git a/ionic/components/chip/chip.wp.scss b/ionic/components/chip/chip.wp.scss
@@ -7,12 +7,12 @@
 // Generate Windows Chip Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
   ion-chip {
     ion-icon[#{$color-name}] {
-      color: color-inverse($color-value);
-      background-color: $color-value;
+      color: $color-contrast;
+      background-color: $color-base;
     }
   }
 

diff --git a/ionic/components/input/input.wp.scss b/ionic/components/input/input.wp.scss
@@ -16,9 +16,9 @@ $text-input-wp-padding-vertical:            0 !default;
 $text-input-wp-padding-horizontal:          8px !default;
 $text-input-wp-line-height:                 3rem !default;
 
-$text-input-wp-highlight-color:             map-get($colors-wp, primary) !default;
-$text-input-wp-hightlight-color-valid:      map-get($colors-wp, secondary) !default;
-$text-input-wp-hightlight-color-invalid:    map-get($colors-wp, danger) !default;
+$text-input-wp-highlight-color:             color($colors-wp, primary) !default;
+$text-input-wp-hightlight-color-valid:      color($colors-wp, secondary) !default;
+$text-input-wp-hightlight-color-invalid:    color($colors-wp, danger) !default;
 
 $text-input-wp-input-clear-icon-width:      30px !default;
 $text-input-wp-input-clear-icon-color:      $input-wp-border-color !default;

diff --git a/ionic/components/item/item.wp.scss b/ionic/components/item/item.wp.scss
@@ -174,10 +174,10 @@ ion-item-divider {
 // Generate Windows Item Divider Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
   ion-item-divider[#{$color-name}] {
-    color: color-inverse($color-value);
-    background-color: $color-value;
+    color: $color-contrast;
+    background-color: $color-base;
   }
 }
 

diff --git a/ionic/components/label/label.wp.scss b/ionic/components/label/label.wp.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 $label-wp-text-color:                 #999 !default;
-$label-wp-text-color-focused:         map-get($colors-wp, primary) !default;
+$label-wp-text-color-focused:         color($colors-wp, primary) !default;
 
 
 // Windows Default Label
@@ -63,10 +63,10 @@ ion-label[floating] {
 // Generate Windows Label colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
   ion-label[#{$color-name}] {
-    color: $color-value;
+    color: $color-base;
   }
 
 }
diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss
@@ -3,7 +3,7 @@
 // Windows Radio
 // --------------------------------------------------
 
-$radio-wp-color-on:               map-get($colors-wp, primary) !default;
+$radio-wp-color-on:               color($colors-wp, primary) !default;
 $radio-wp-color-off:              #333 !default;
 
 // Places radio icon on the left of the item
@@ -110,12 +110,12 @@ ion-radio {
 // Windows Radio Color Mixin
 // --------------------------------------------------
 
-@mixin radio-theme-wp($color-name, $color-value) {
+@mixin radio-theme-wp($color-name, $color-base) {
 
   ion-radio[#{$color-name}] {
 
     .radio-checked {
-      border-color: $color-value;
+      border-color: $color-base;
     }
 
   }
@@ -126,8 +126,8 @@ ion-radio {
 // Generate Windows Radio Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  @include radio-theme-wp($color-name, $color-value);
+  @include radio-theme-wp($color-name, $color-base);
 
 }
diff --git a/ionic/components/searchbar/searchbar.wp.scss b/ionic/components/searchbar/searchbar.wp.scss
@@ -8,7 +8,7 @@ $searchbar-wp-padding:                   0 !default;
 $searchbar-wp-background-color:          transparent !default;
 $searchbar-wp-border-width:              2px !default;
 $searchbar-wp-border-color:              $input-wp-border-color !default;
-$searchbar-wp-border-color-focused:      map-get($colors-wp, primary) !default;
+$searchbar-wp-border-color-focused:      color($colors-wp, primary) !default;
 
 $searchbar-wp-input-search-icon-color:   #858585 !default;
 $searchbar-wp-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-wp-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
@@ -145,10 +145,10 @@ ion-searchbar {
 // Generate Default Windows Search Bar Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
   ion-searchbar[#{$color-name}].searchbar-focused {
-    border-color: $color-value;
+    border-color: $color-base;
   }
 
 }
diff --git a/ionic/components/segment/segment.wp.scss b/ionic/components/segment/segment.wp.scss
@@ -63,15 +63,15 @@ ion-segment {
 // Windows Segment Button Mixin
 // --------------------------------------------------
 
-@mixin wp-segment-button($color-name, $color-value) {
+@mixin wp-segment-button($color-name, $color-base) {
 
   ion-segment[#{$color-name}] .segment-button {
-    color: $color-value;
+    color: $color-base;
 
     &.activated,
     &.segment-activated {
-      border-color: $color-value;
-      color: $color-value;
+      border-color: $color-base;
+      color: $color-base;
       opacity: $segment-button-wp-opacity-activated;
     }
   }
@@ -82,6 +82,6 @@ ion-segment {
 // Windows Segment Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
-  @include wp-segment-button($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  @include wp-segment-button($color-name, $color-base);
 }
diff --git a/ionic/components/tabs/tabs.wp.scss b/ionic/components/tabs/tabs.wp.scss
@@ -79,19 +79,19 @@ tabbar {
 // Windows Tabbar Color Mixin
 // --------------------------------------------------
 
-@mixin tabbar-wp($color-name, $color-value) {
+@mixin tabbar-wp($color-name, $color-base) {
 
   ion-tabs[#{$color-name}] tabbar {
-    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] {
-      border-color: color-inverse($color-value);
-      color: color-inverse($color-value);
+      border-color: $color-contrast;
+      color: $color-contrast;
     }
   }
 
@@ -101,6 +101,6 @@ tabbar {
 // Windows Tabbar Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-wp {
-  @include tabbar-wp($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  @include tabbar-wp($color-name, $color-base);
 }