Merge pull request #50 from IBM-Design/hotfix/color-tint-shade

Hotfix/color tint shade

README.md

@@ -80,8 +80,6 @@ Returns the specified color from the specified color palette
 //////////////////////////////////////////////////
 
 background: color('blue', 80);     // #1d3649
-background: color('blue', 8);      // #1d3649
-background: color('blue', 'core'); // #4178be
 background: color('blue');         // #4178be
 -- with an alpha
 background: color('blue', 80, $alpha: 0.5); // rgba(29, 54, 73, 0.5)
@@ -106,7 +104,6 @@ Returns a color the specified amount of steps lighter than the given color in th
 //////////////////////////////////////////////////
 
 background: color-tint(color('blue', 80), 20);     // #325c80
-background: color-tint(color('blue', 80), 2);      // #325c80
 background: color-tint(color('blue', 80), 23);     // #325c80
 background: color-tint(color('blue', 80), 25);     // #4178be
 background: color-tint(color('blue', 80), 100);    // #c0e6ff
@@ -129,7 +126,6 @@ Returns a color the specified amount of steps darker than the given color in the
 //////////////////////////////////////////////////
 
 background: color-shade(color('blue', 30), 20);     // #4178be
-background: color-shade(color('blue', 30), 2);      // #4178be
 background: color-shade(color('blue', 30), 23);     // #4178be
 background: color-shade(color('blue', 30), 25);     // #325c80
 background: color-shade(color('blue', 30), 100);    // #010205

_ibm-colors.scss

@@ -47,24 +47,34 @@
     @return rgba($grd, $alpha);
   }
 
-  @warn 'Color palette "#{$palette}" not found';
+  $error-message: 'Color palette "#{$palette}" not found';
+  @if not $found-index {
+    @if feature-exists(at-error) {
+      @error $error-message;
+    }
+    @else {
+      @warn $error-message;
+    }
+  }
+
   @return false;
 }
 
 //////////////////////////////
 // Tint and Shade Functions
 //////////////////////////////
+$singles: 'neutral-white', 'cool-white', 'warm-white';
 // Internal helper: finds the palette and key of a color
 @function _ibm-find-color($color) {
   $found-index: false;
   $found-palette: false;
   @each $palette, $vals in $__ibm-color-palettes {
     @if not $found-index {
       @each $key, $clr in $vals {
-	@if $color == $clr and $key != 'core' {
-	  $found-index: $key;
-	  $found-palette: $palette;
-	}
+      	@if $color == $clr and $key != 'core' {
+      	  $found-index: $key;
+      	  $found-palette: $palette;
+      	}
       }
     }
   }
@@ -84,7 +94,7 @@
 
 // Internal helper: transforms amount into base 10, rounding
 @function _ibm-round-tint-shade($amount) {
-  @if $amount < 10 {
+  @if $amount < 1 {
     $amount: $amount * 10;
   }
 
@@ -110,9 +120,23 @@
   $palette: map-get($key, 'palette');
   $move: _ibm-round-tint-shade($amount);
 
-  $index: $index - $move;
-  @if ($index < 10) {
-    $index: 10;
+  @if index($singles, $palette) {
+    $index: $index - ($move / 10);
+    @if $index < 1 {
+      $index: 1;
+    }
+  }
+  @else if $palette == 'black' {
+    $index: 100;
+  }
+  @else if $palette == 'white' {
+    $index: 0;
+  }
+  @else {
+    $index: $index - $move;
+    @if $index < 10 {
+      $index: 1;
+    }
   }
 
   @return color($palette, $index);
@@ -130,10 +154,24 @@
   $palette: map-get($key, 'palette');
   $move: _ibm-round-tint-shade($amount);
 
-  $index: $index + $move;
-  @if ($index > 100) {
+  @if index($singles, $palette) {
+    $index: $index - ($move / 10);
+    @if $index > 4 {
+      $index: 4;
+    }
+  }
+  @else if $palette == 'black' {
     $index: 100;
   }
+  @else if $palette == 'white' {
+    $index: 0;
+  }
+  @else {
+    $index: $index + $move;
+    @if ($index > 90) {
+      $index: 90;
+    }
+  }
 
   @return color($palette, $index);
 }

gulpfile.js

@@ -147,5 +147,7 @@ gulp.task('templates', ['partials'], () =>
 
 gulp.task('build', [ 'package', 'ase', 'clr', 'sketchpalette' ]);
 
+gulp.task('test', ['build']);
+
 /*--- default task ----------------------------------------------------------*/
 gulp.task('default', [ 'build' ]);

package.json

@@ -39,4 +39,4 @@
     "through2-spy": "^2.0.0"
   },
   "version": "2.0.2"
-}
+}

source/templates/partials/color-functions.scss

@@ -40,24 +40,34 @@
     @return rgba($grd, $alpha);
   }
 
-  @warn 'Color palette "#{$palette}" not found';
+  $error-message: 'Color palette "#{$palette}" not found';
+  @if not $found-index {
+    @if feature-exists(at-error) {
+      @error $error-message;
+    }
+    @else {
+      @warn $error-message;
+    }
+  }
+
   @return false;
 }
 
 //////////////////////////////
 // Tint and Shade Functions
 //////////////////////////////
+$singles: 'neutral-white', 'cool-white', 'warm-white';
 // Internal helper: finds the palette and key of a color
 @function _ibm-find-color($color) {
   $found-index: false;
   $found-palette: false;
   @each $palette, $vals in $__ibm-color-palettes {
     @if not $found-index {
       @each $key, $clr in $vals {
-	@if $color == $clr and $key != 'core' {
-	  $found-index: $key;
-	  $found-palette: $palette;
-	}
+      	@if $color == $clr and $key != 'core' {
+      	  $found-index: $key;
+      	  $found-palette: $palette;
+      	}
       }
     }
   }
@@ -77,7 +87,7 @@
 
 // Internal helper: transforms amount into base 10, rounding
 @function _ibm-round-tint-shade($amount) {
-  @if $amount < 10 {
+  @if $amount < 1 {
     $amount: $amount * 10;
   }
 
@@ -103,9 +113,23 @@
   $palette: map-get($key, 'palette');
   $move: _ibm-round-tint-shade($amount);
 
-  $index: $index - $move;
-  @if ($index < 10) {
-    $index: 10;
+  @if index($singles, $palette) {
+    $index: $index - ($move / 10);
+    @if $index < 1 {
+      $index: 1;
+    }
+  }
+  @else if $palette == 'black' {
+    $index: 100;
+  }
+  @else if $palette == 'white' {
+    $index: 0;
+  }
+  @else {
+    $index: $index - $move;
+    @if $index < 10 {
+      $index: 1;
+    }
   }
 
   @return color($palette, $index);
@@ -123,10 +147,24 @@
   $palette: map-get($key, 'palette');
   $move: _ibm-round-tint-shade($amount);
 
-  $index: $index + $move;
-  @if ($index > 100) {
+  @if index($singles, $palette) {
+    $index: $index - ($move / 10);
+    @if $index > 4 {
+      $index: 4;
+    }
+  }
+  @else if $palette == 'black' {
     $index: 100;
   }
+  @else if $palette == 'white' {
+    $index: 0;
+  }
+  @else {
+    $index: $index + $move;
+    @if ($index > 90) {
+      $index: 90;
+    }
+  }
 
   @return color($palette, $index);
 }