fix(sass): rename brightness/inverse sass functions

Prefix custom sass color functions with color- Closes #5542
ionic-team · Feb 21, 2016 · 892b007 · 892b007
1 parent 27eacd4
commit 892b007
Show file tree

Hide file tree

Showing 17 changed files with 39 additions and 39 deletions.
diff --git a/ionic/components/badge/badge.ios.scss b/ionic/components/badge/badge.ios.scss
@@ -10,7 +10,7 @@ $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);
+  color: color-inverse($badge-ios-background-color);
 }
 
 
@@ -21,7 +21,7 @@ ion-badge {
 
   .badge-#{$color-name} {
     background-color: $color-value;
-    color: inverse($color-value);
+    color: color-inverse($color-value);
   }
 
 }
diff --git a/ionic/components/badge/badge.md.scss b/ionic/components/badge/badge.md.scss
@@ -10,7 +10,7 @@ $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);
+  color: color-inverse($badge-md-background-color);
 }
 
 
@@ -21,7 +21,7 @@ ion-badge {
 
   .badge-#{$color-name} {
     background-color: $color-value;
-    color: inverse($color-value);
+    color: color-inverse($color-value);
   }
 
 }
diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss
@@ -10,7 +10,7 @@ $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-activated:          color-shade($button-ios-color) !default;
-$button-ios-text-color:               inverse($button-ios-color) !default;
+$button-ios-text-color:               color-inverse($button-ios-color) !default;
 $button-ios-hover-opacity:            0.8 !default;
 $button-ios-border-radius:            4px !default;
 
@@ -57,7 +57,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
   .button-#{$color-name} {
     $bg-color: $color-value;
     $bg-color-activated: color-shade($bg-color);
-    $fg-color: inverse($bg-color);
+    $fg-color: color-inverse($bg-color);
 
     color: $fg-color;
     background-color: $bg-color;

diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss
@@ -23,7 +23,7 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
 
 $button-md-color:                          map-get($colors-md, primary) !default;
 $button-md-color-activated:                color-shade($button-md-color) !default;
-$button-md-text-color:                     inverse($button-md-color) !default;
+$button-md-text-color:                     color-inverse($button-md-color) !default;
 $button-md-hover-opacity:                  0.8 !default;
 
 $button-md-large-font-size:                2rem !default;
@@ -80,7 +80,7 @@ $button-md-small-icon-font-size:           1.4em !default;
   .button-#{$color-name} {
     $bg-color: $color-value;
     $bg-color-activated: color-shade($bg-color);
-    $fg-color: inverse($bg-color);
+    $fg-color: color-inverse($bg-color);
 
     color: $fg-color;
     background-color: $bg-color;

diff --git a/ionic/components/checkbox/checkbox.ios.scss b/ionic/components/checkbox/checkbox.ios.scss
@@ -100,7 +100,7 @@ ion-checkbox {
     border-color: $bg-on;
 
     .checkbox-inner {
-      border-color: inverse($bg-on);
+      border-color: color-inverse($bg-on);
     }
   }
 

diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss
@@ -115,7 +115,7 @@ ion-checkbox + .item-inner ion-label {
     border-color: $bg-on;
 
     .checkbox-inner {
-      border-color: inverse($bg-on);
+      border-color: color-inverse($bg-on);
     }
   }
 

diff --git a/ionic/components/chip/chip.ios.scss b/ionic/components/chip/chip.ios.scss
@@ -15,7 +15,7 @@ ion-chip {
   ion-chip {
     > ion-icon[#{$color-name}] {
       background-color: $color-value;
-      color: inverse($color-value) !important;
+      color: color-inverse($color-value) !important;
     }
   }
 

diff --git a/ionic/components/chip/chip.md.scss b/ionic/components/chip/chip.md.scss
@@ -15,7 +15,7 @@ ion-chip {
   ion-chip {
     > ion-icon [#{$color-name}] {
       background-color: $color-value;
-      color: inverse($color-value) !important;
+      color: color-inverse($color-value) !important;
     }
   }
 

diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss
@@ -198,7 +198,7 @@ ion-item-divider {
 @each $color-name, $color-value in $colors-ios {
   ion-item-divider[#{$color-name}] {
     background-color: $color-value;
-    color: inverse($color-value);
+    color: color-inverse($color-value);
   }
 }
 

diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss
@@ -165,7 +165,7 @@ ion-item-divider {
 @each $color-name, $color-value in $colors-md {
   ion-item-divider[#{$color-name}] {
     background-color: $color-value;
-    color: inverse($color-value);
+    color: color-inverse($color-value);
   }
 }
 

diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss
@@ -196,7 +196,7 @@ ion-searchbar {
 
   .toolbar[#{$color-name}] ion-searchbar {
     .searchbar-ios-cancel {
-      color: inverse($color-value);
+      color: color-inverse($color-value);
     }
   }
 

diff --git a/ionic/components/segment/segment.ios.scss b/ionic/components/segment/segment.ios.scss
@@ -7,7 +7,7 @@
 $segment-button-ios-bg-color:                   transparent !default;
 $segment-button-ios-bg-color-activated:         $toolbar-ios-active-color !default;
 
-$segment-button-ios-text-color:                 inverse($segment-button-ios-bg-color-activated) !default;
+$segment-button-ios-text-color:                 color-inverse($segment-button-ios-bg-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;
@@ -122,7 +122,7 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
     }
 
     &.segment-activated {
-      color: inverse($color-value);
+      color: color-inverse($color-value);
       background-color: $color-value;
     }
   }

diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss
@@ -117,12 +117,12 @@ ion-tabs[tabbarPlacement=top] tabbar {
     background-color: $color-value;
 
     .tab-button {
-      color: inverse($color-value);
+      color: color-inverse($color-value);
     }
 
     .tab-button:hover:not(.disable-hover),
     .tab-button[aria-selected=true] {
-      color: inverse($color-value);
+      color: color-inverse($color-value);
     }
   }
 

diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss
@@ -98,16 +98,16 @@ tab-highlight {
     background-color: $color-value;
 
     .tab-button {
-      color: inverse($color-value);
+      color: color-inverse($color-value);
     }
 
     .tab-button:hover:not(.disable-hover),
     .tab-button[aria-selected=true] {
-      color: inverse($color-value);
+      color: color-inverse($color-value);
     }
 
     tab-highlight {
-      background: inverse($color-value);
+      background: color-inverse($color-value);
     }
   }
 

diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss
@@ -88,7 +88,7 @@ ion-title {
 
     .toolbar-title,
     .bar-button-default {
-      color: inverse($color-value);
+      color: color-inverse($color-value);
     }
   }
 }
@@ -163,7 +163,7 @@ ion-buttons[right] {
   }
 
   &.activated {
-    color: inverse($bar-button-ios-color);
+    color: color-inverse($bar-button-ios-color);
     background-color: $bar-button-ios-color;
   }
 }
@@ -177,7 +177,7 @@ ion-buttons[right] {
     background-color: transparent;
 
     &.activated {
-      color: inverse($fg-color);
+      color: color-inverse($fg-color);
       background-color: $fg-color;
     }
   }
@@ -189,25 +189,25 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-solid {
-  color: inverse($bar-button-ios-color);
+  color: color-inverse($bar-button-ios-color);
   background-color: $bar-button-ios-color;
 
   &:hover:not(.disable-hover) {
     opacity: 0.4;
-    color: inverse($bar-button-ios-color);
+    color: color-inverse($bar-button-ios-color);
   }
 
   &.activated {
     opacity: 0.4;
-    color: inverse($bar-button-ios-color);
+    color: color-inverse($bar-button-ios-color);
     background-color: color-shade($bar-button-ios-color);
   }
 }
 
 @mixin ios-bar-button-solid($color-name, $color-value) {
 
   .bar-button-solid-#{$color-name} {
-    color: inverse($color-value);
+    color: color-inverse($color-value);
     background-color: $color-value;
 
     &.activated {

diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
@@ -174,7 +174,7 @@ ion-buttons[right] {
   }
 
   &.activated {
-    color: inverse($bar-button-md-color);
+    color: color-inverse($bar-button-md-color);
     background-color: $bar-button-md-color;
   }
 }
@@ -188,7 +188,7 @@ ion-buttons[right] {
     background-color: transparent;
 
     &.activated {
-      color: inverse($fg-color);
+      color: color-inverse($fg-color);
       background-color: $fg-color;
     }
   }
@@ -200,23 +200,23 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-solid {
-  color: inverse($bar-button-md-color);
+  color: color-inverse($bar-button-md-color);
   background-color: $bar-button-md-color;
 
   &:hover:not(.disable-hover) {
-    color: inverse($bar-button-md-color);
+    color: color-inverse($bar-button-md-color);
   }
 
   &.activated {
-    color: inverse($bar-button-md-color);
+    color: color-inverse($bar-button-md-color);
     background-color: color-shade($bar-button-md-color);
   }
 }
 
 @mixin md-bar-button-solid($color-name, $color-value) {
 
   .bar-button-solid-#{$color-name} {
-    color: inverse($color-value);
+    color: color-inverse($color-value);
     background-color: $color-value;
 
     &.activated {

diff --git a/ionic/util/functions.scss b/ionic/util/functions.scss
@@ -2,13 +2,13 @@
 // Color Functions
 // --------------------------------------------------
 
-@function brightness($color-value) {
+@function color-brightness($color-value) {
   @return (red($color-value) * 0.299 + green($color-value) * 0.587 + blue($color-value) * 0.114) / 255 * 100%;
 }
 
 
-@function inverse($color-value, $dark: black, $light: white) {
-  $brightness: brightness($color-value);
+@function color-inverse($color-value, $dark: black, $light: white) {
+  $brightness: color-brightness($color-value);
   $red: red($color-value);
   $green: green($color-value);
 
@@ -29,7 +29,7 @@
 
 
 @function toolbar-button-inverse($color-value) {
-  @return inverse($color-value, $dark: $toolbar-md-button-color, $light: white);
+  @return color-inverse($color-value, $dark: $toolbar-md-button-color, $light: white);
 }