Fixes Tint, Shade, and Contrast Alpha Interference Issue

lib/adjusters.js

@@ -36,9 +36,18 @@ exports.blackness = exports.b = hslwbAdjuster('blackness');
  */
 
 exports.blend = function (color, args) {
+  var targetAlpha = color.alpha();
+
+  // Reset the alpha value to one. This is required because color.mix mixes
+  // the alpha value as well as rgb values. For blend() purposes, that's not
+  // what we want.
+  color.alpha(1);
+
   var other = new Color(args[0].value);
   var percentage = 1 - parseInt(args[1].value, 10) / 100;
-  color.mix(other, percentage);
+
+  // Finally set the alpha value of the mixed color to the target value.
+  color.mix(other, percentage).alpha(targetAlpha);
 };
 
 /**
@@ -79,7 +88,11 @@ exports.contrast = function (color, args) {
   var minRatio = 4.5;
   if (color.contrast(max) > minRatio) {
     var min = binarySearchBWContrast(minRatio, color, max);
-    min.mix(max, percentage);
+    var targetMinAlpha = min.alpha();
+    // Set the alpha to 1 to avoid mix()-ing the alpha value.
+    min.alpha(1);
+    // mixes the colors then sets the alpha back to the target alpha.
+    min.mix(max, percentage).alpha(targetMinAlpha);
   }
   color.hwb(min.hwb());
 };

test/convert.js

@@ -275,12 +275,32 @@ describe('#convert', function () {
     });
   });
 
+  describe('tint with alpha', function () {
+    it('should blend a color with white and adjust the alpha', function () {
+      convert('red a(40%) tint(50%)', 'rgba(255, 128, 128, 0.4)');
+    });
+
+    it('should blend a color with white and adjust the alpha', function () {
+      convert('red tint(50%) a(20%)', 'rgba(255, 128, 128, 0.2)');
+    });
+  });
+
   describe('shade', function () {
     it('should blend a color with black', function () {
       convert('red shade(50%)', 'rgb(128, 0, 0)');
     });
   });
 
+  describe('shade with alpha', function () {
+    it('should blend a color with black and adjust the alpha', function () {
+      convert('red a(40%) shade(50%)', 'rgba(128, 0, 0, 0.4)');
+    });
+
+    it('should blend a color with black and adjust the alpha', function () {
+      convert('red shade(50%) a(25%)', 'rgba(128, 0, 0, 0.25)');
+    });
+  });
+
   describe('contrast', function () {
     it('should darken the same hue with a light color', function () {
       convert('hwb(180, 10%, 0%) contrast(0%)', 'rgb(13, 115, 115)'); // hwb(180, 5%, 55%)
@@ -299,6 +319,16 @@ describe('#convert', function () {
     });
   });
 
+  describe('contrast with alpha', function () {
+    it('should go to white with a dark color and the given alpha', function() {
+      convert('black a(40%) contrast(99%)', 'rgba(255, 255, 255, 0.4)');
+    });
+
+    it('should go to black with a light color and the given alpha', function() {
+      convert('white a(50%) contrast(99%)', 'rgba(0, 0, 0, 0.5)');
+    });
+  });
+
   describe('nested color functions', function () {
     it('should convert nested color functions', function () {
       convert('color(rebeccapurple a(- 10%)) a(- 10%)', 'rgba(102, 51, 153, 0.81)');