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

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

Hide file tree

Showing 18 changed files with 109 additions and 104 deletions.
diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss
@@ -31,7 +31,7 @@ $alert-md-input-text-color:                   #000 !default;
 
 $alert-md-input-border-width-focused:         2px !default;
 $alert-md-input-border-style-focused:         $alert-md-input-border-style !default;
-$alert-md-input-border-color-focused:         map-get($colors-md, primary) !default;
+$alert-md-input-border-color-focused:         color($colors-md, primary) !default;
 
 $alert-md-input-margin-top:                   5px !default;
 $alert-md-input-margin-right:                 0 !default;
@@ -45,7 +45,7 @@ $alert-md-button-group-justify-content:       flex-end !default;
 $alert-md-button-padding:                     10px !default;
 $alert-md-button-margin:                      0 8px 0 0 !default;
 $alert-md-button-font-weight:                 500 !default;
-$alert-md-button-text-color:                  map-get($colors-md, primary) !default;
+$alert-md-button-text-color:                  color($colors-md, primary) !default;
 $alert-md-button-background-color:            transparent !default;
 $alert-md-button-background-color-activated:  rgba(158, 158, 158, .2) !default;
 $alert-md-button-border-radius:               2px !default;
@@ -94,9 +94,9 @@ $alert-md-checkbox-icon-width:                6px !default;
 $alert-md-checkbox-icon-height:               10px !default;
 $alert-md-checkbox-icon-border-width:         2px !default;
 $alert-md-checkbox-icon-border-style:         solid !default;
+$alert-md-checkbox-icon-border-color:         color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default;
 $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
-
 .alert-wrapper {
   max-width: $alert-md-max-width;
 
@@ -304,7 +304,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   border-top-width: 0;
   border-left-width: 0;
   border-style: $alert-md-checkbox-icon-border-style;
-  border-color: $alert-md-background-color;
+  border-color: $alert-md-checkbox-icon-border-color;
   transform: $alert-md-checkbox-icon-transform;
 }
 

diff --git a/ionic/components/app/app.ios.scss b/ionic/components/app/app.ios.scss
@@ -25,7 +25,6 @@ hr {
 }
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-
   h1,
   h2,
   h3,

diff --git a/ionic/components/app/app.md.scss b/ionic/components/app/app.md.scss
@@ -19,7 +19,7 @@ hr {
   background-color: rgba(0, 0, 0, .08);
 }
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   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.md.scss b/ionic/components/badge/badge.md.scss
@@ -4,24 +4,25 @@
 // --------------------------------------------------
 
 $badge-md-border-radius:            4px !default;
-$badge-md-background-color:         map-get($colors-md, primary) !default;
+$badge-md-background-color:         color($colors-md, primary) !default;
+$badge-md-text-color:               color-contrast($colors-md, $badge-md-background-color) !default;
 
 
 ion-badge {
   border-radius: $badge-md-border-radius;
-  color: color-inverse($badge-md-background-color);
+  color: $badge-md-text-color;
   background-color: $badge-md-background-color;
 }
 
 
 // Generate Material Design Badge Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   .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.md.scss b/ionic/components/button/button.md.scss
@@ -22,9 +22,9 @@ $button-md-clear-ripple-background-color:  #999 !default;
 $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
 
-$button-md-color:                          map-get($colors-md, primary) !default;
+$button-md-color:                          color($colors-md, primary) !default;
 $button-md-color-activated:                color-shade($button-md-color) !default;
-$button-md-text-color:                     color-inverse($button-md-color) !default;
+$button-md-text-color:                     color-contrast($colors-md, $button-md-color) !default;
 $button-md-hover-opacity:                  .8 !default;
 
 $button-md-large-font-size:                2rem !default;
@@ -77,12 +77,12 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Material Design Default Button Color Mixin
 // --------------------------------------------------
 
-@mixin md-button-default($color-name, $color-value) {
+@mixin md-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;
@@ -177,10 +177,10 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Material Design Outline Button Color Mixin
 // --------------------------------------------------
 
-@mixin md-button-outline($color-name, $color-value) {
+@mixin md-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;
     background-color: transparent;
@@ -229,10 +229,10 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Material Design Clear Button Color Mixin
 // --------------------------------------------------
 
-@mixin md-button-clear($color-name, $color-value) {
+@mixin md-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;
@@ -304,10 +304,10 @@ ion-button-effect {
 // Generate Material Design Button Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include md-button-default($color-name, $color-value);
-  @include md-button-outline($color-name, $color-value);
-  @include md-button-clear($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include md-button-default($color-name, $color-base, $color-contrast);
+  @include md-button-outline($color-name, $color-base, $color-contrast);
+  @include md-button-clear($color-name, $color-base, $color-contrast);
 }
 
 

diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss
@@ -12,18 +12,18 @@ $checkbox-md-media-margin:               $item-md-padding-media-top 36px $item-m
 $checkbox-md-disabled-opacity:           .3 !default;
 
 $checkbox-md-icon-background-color-off:  $list-md-background-color !default;
-$checkbox-md-icon-background-color-on:   map-get($colors-md, primary) !default;
+$checkbox-md-icon-background-color-on:   color($colors-md, primary) !default;
 $checkbox-md-icon-size:                  16px !default;
 
 $checkbox-md-icon-checkmark-width:       2px !default;
 $checkbox-md-icon-checkmark-style:       solid !default;
-$checkbox-md-icon-checkmark-color:       $background-md-color !default;
+$checkbox-md-icon-checkmark-color:       color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default;
 
 $checkbox-md-icon-border-width:          2px !default;
 $checkbox-md-icon-border-style:          solid !default;
 $checkbox-md-icon-border-radius:         2px !default;
 $checkbox-md-icon-border-color-off:      darken($list-md-border-color, 40%) !default;
-$checkbox-md-icon-border-color-on:       map-get($colors-md, primary) !default;
+$checkbox-md-icon-border-color-on:       color($colors-md, primary) !default;
 
 $checkbox-md-transition-duration:        280ms !default;
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
@@ -114,14 +114,14 @@ ion-checkbox + .item-inner ion-label {
 // Material Design Checkbox Color Mixin
 // --------------------------------------------------
 
-@mixin checkbox-theme-md($color-name, $bg-on) {
+@mixin checkbox-theme-md($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;
     }
   }
 
@@ -131,6 +131,6 @@ ion-checkbox + .item-inner ion-label {
 // Generate Material Design Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include checkbox-theme-md($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include checkbox-theme-md($color-name, $color-base, $color-contrast);
 }
diff --git a/ionic/components/chip/chip.md.scss b/ionic/components/chip/chip.md.scss
@@ -7,12 +7,12 @@
 // Generate Material Design Chip Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   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.md.scss b/ionic/components/input/input.md.scss
@@ -5,9 +5,9 @@
 // --------------------------------------------------
 
 $text-input-md-background-color:            $list-md-background-color !default;
-$text-input-md-highlight-color:             map-get($colors-md, primary) !default;
-$text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !default;
-$text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
+$text-input-md-highlight-color:             color($colors-md, primary) !default;
+$text-input-md-hightlight-color-valid:      color($colors-md, secondary) !default;
+$text-input-md-hightlight-color-invalid:    color($colors-md, danger) !default;
 
 $text-input-md-margin-top:                  $item-md-padding-top !default;
 $text-input-md-margin-right:                ($item-md-padding-right / 2) !default;

diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss
@@ -168,10 +168,10 @@ ion-item-divider {
 // Generate Material Design Item Divider Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   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.md.scss b/ionic/components/label/label.md.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 $label-md-text-color:                 #999 !default;
-$label-md-text-color-focused:         map-get($colors-md, primary) !default;
+$label-md-text-color-focused:         color($colors-md, primary) !default;
 $label-md-margin:                     $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
 
 
@@ -69,10 +69,10 @@ ion-label[floating] {
 // Generate Material Design Label colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   ion-label[#{$color-name}] {
-    color: $color-value;
+    color: $color-base;
   }
 
 }
diff --git a/ionic/components/radio/radio.md.scss b/ionic/components/radio/radio.md.scss
@@ -3,7 +3,7 @@
 // Material Design Radio
 // --------------------------------------------------
 
-$radio-md-color-on:               map-get($colors-md, primary) !default;
+$radio-md-color-on:               color($colors-md, primary) !default;
 $radio-md-color-off:              darken($list-md-border-color, 40%) !default;
 
 $radio-md-icon-width:             16px !default;
@@ -116,16 +116,16 @@ ion-radio {
 // Material Design Radio Color Mixin
 // --------------------------------------------------
 
-@mixin radio-theme-md($color-name, $color-value) {
+@mixin radio-theme-md($color-name, $color-base, $color-contrast) {
 
   ion-radio[#{$color-name}] {
 
     .radio-checked {
-      border-color: $color-value;
+      border-color: $color-base;
     }
 
     .radio-inner {
-      background-color: $color-value;
+      background-color: $color-base;
     }
 
   }
@@ -136,8 +136,8 @@ ion-radio {
 // Generate Material Design Radio Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  @include radio-theme-md($color-name, $color-value);
+  @include radio-theme-md($color-name, $color-base, $color-contrast);
 
 }
diff --git a/ionic/components/segment/segment.md.scss b/ionic/components/segment/segment.md.scss
@@ -47,6 +47,7 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
   &.activated,
   &.segment-activated {
+    opacity: 1;    
     border-color: $segment-button-md-border-color-activated;
   }
 }
@@ -68,15 +69,15 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 // Material Design Segment Button Mixin
 // --------------------------------------------------
 
-@mixin md-segment-button($color-name, $color-value) {
+@mixin md-segment-button($color-name, $color-base, $color-contrast) {
 
   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: 1;
     }
   }
@@ -87,6 +88,6 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 // Material Design Segment Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include md-segment-button($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include md-segment-button($color-name, $color-base, $color-contrast);
 }
diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss
@@ -99,22 +99,22 @@ tab-highlight {
 // Material Design  Tabbar Color Mixin
 // --------------------------------------------------
 
-@mixin tabbar-md($color-name, $color-value) {
+@mixin tabbar-md($color-name, $color-base, $color-contrast) {
 
   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] {
-      color: color-inverse($color-value);
+      color: $color-contrast;
     }
 
     tab-highlight {
-      background: color-inverse($color-value);
+      background: $color-contrast;
     }
   }
 
@@ -124,6 +124,6 @@ tab-highlight {
 // Material Design Tabbar Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include tabbar-md($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include tabbar-md($color-name, $color-base, $color-contrast);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,6 @@ hr { @@
     }
     @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
       h1,
       h2,
       h3,
@@ Expand Down @@