From 622a521b11ede8be8930b438aa4ed9d6bfb376d9 Mon Sep 17 00:00:00 2001
From: Bass Jobsen <bass@w3masters.nl>
Date: Sun, 15 Mar 2015 00:12:47 +0100
Subject: [PATCH] optional relative amounts for color functions, see#975

---
 lib/less/functions/color.js | 54 ++++++++++++++++++++++++++++---------
 test/css/functions.css      |  8 ++++++
 test/less/functions.less    | 12 +++++++--
 3 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/lib/less/functions/color.js b/lib/less/functions/color.js
index 1c4de53d6..367281f94 100644
--- a/lib/less/functions/color.js
+++ b/lib/less/functions/color.js
@@ -141,7 +141,7 @@ colorFunctions = {
 
         return new Dimension(luminance * color.alpha * 100, '%');
     },
-    saturate: function (color, amount) {
+    saturate: function (color, amount, method) {
         // filter: saturate(3.2);
         // should be kept as is, so check for color
         if (!color.rgb) {
@@ -149,42 +149,72 @@ colorFunctions = {
         }
         var hsl = color.toHSL();
 
-        hsl.s += amount.value / 100;
+        if (typeof method !== "undefined" && method.value === "relative") {
+            hsl.s +=  hsl.s * amount.value / 100;
+        }
+        else {
+            hsl.s += amount.value / 100;
+        }
         hsl.s = clamp(hsl.s);
         return hsla(hsl);
     },
-    desaturate: function (color, amount) {
+    desaturate: function (color, amount, method) {
         var hsl = color.toHSL();
 
-        hsl.s -= amount.value / 100;
+        if (typeof method !== "undefined" && method.value === "relative") {
+            hsl.s -=  hsl.s * amount.value / 100;
+        }
+        else {
+            hsl.s -= amount.value / 100;
+        }
         hsl.s = clamp(hsl.s);
         return hsla(hsl);
     },
-    lighten: function (color, amount) {
+    lighten: function (color, amount, method) {
         var hsl = color.toHSL();
 
-        hsl.l += amount.value / 100;
+        if (typeof method !== "undefined" && method.value === "relative") {
+            hsl.l +=  hsl.l * amount.value / 100;
+        }
+        else {
+            hsl.l += amount.value / 100;
+        }
         hsl.l = clamp(hsl.l);
         return hsla(hsl);
     },
-    darken: function (color, amount) {
+    darken: function (color, amount, method) {
         var hsl = color.toHSL();
 
-        hsl.l -= amount.value / 100;
+        if (typeof method !== "undefined" && method.value === "relative") {
+            hsl.l -=  hsl.l * amount.value / 100;
+        }
+        else {
+            hsl.l -= amount.value / 100;
+        }
         hsl.l = clamp(hsl.l);
         return hsla(hsl);
     },
-    fadein: function (color, amount) {
+    fadein: function (color, amount, method) {
         var hsl = color.toHSL();
 
-        hsl.a += amount.value / 100;
+        if (typeof method !== "undefined" && method.value === "relative") {
+            hsl.a +=  hsl.a * amount.value / 100;
+        }
+        else {
+            hsl.a += amount.value / 100;
+        }
         hsl.a = clamp(hsl.a);
         return hsla(hsl);
     },
-    fadeout: function (color, amount) {
+    fadeout: function (color, amount, method) {
         var hsl = color.toHSL();
 
-        hsl.a -= amount.value / 100;
+        if (typeof method !== "undefined" && method.value === "relative") {
+            hsl.a -=  hsl.a * amount.value / 100;
+        }
+        else {
+            hsl.a -= amount.value / 100;
+        }
         hsl.a = clamp(hsl.a);
         return hsla(hsl);
     },
diff --git a/test/css/functions.css b/test/css/functions.css
index b78abdc7b..3b5d6e24e 100644
--- a/test/css/functions.css
+++ b/test/css/functions.css
@@ -9,9 +9,13 @@
 #built-in {
   escaped: -Some::weird(#thing, y);
   lighten: #ffcccc;
+  lighten-relative: #ff6666;
   darken: #330000;
+  darken-relative: #990000;
   saturate: #203c31;
+  saturate-relative: #28342f;
   desaturate: #29332f;
+  desaturate-relative: #233930;
   greyscale: #2e2e2e;
   hsl-clamp: #ffffff;
   spin-p: #bf6a40;
@@ -118,6 +122,10 @@
   shade-negative: #868686;
   fade-out: rgba(255, 0, 0, 0.95);
   fade-in: rgba(255, 0, 0, 0.95);
+  fade-out-relative: rgba(255, 0, 0, 0.95);
+  fade-in-relative: rgba(255, 0, 0, 0.945);
+  fade-out2: rgba(255, 0, 0, 0);
+  fade-out2-relative: rgba(255, 0, 0, 0.25);
   hsv: #4d2926;
   hsva: rgba(77, 40, 38, 0.2);
   mix: #ff3300;
diff --git a/test/less/functions.less b/test/less/functions.less
index 29d5f9db5..6beb1d946 100644
--- a/test/less/functions.less
+++ b/test/less/functions.less
@@ -13,9 +13,13 @@
   @r: 32;
   escaped: e("-Some::weird(#thing, y)");
   lighten: lighten(#ff0000, 40%);
+  lighten-relative: lighten(#ff0000, 40%, relative);
   darken: darken(#ff0000, 40%);
+  darken-relative: darken(#ff0000, 40%, relative);
   saturate: saturate(#29332f, 20%);
+  saturate-relative: saturate(#29332f, 20%, relative);
   desaturate: desaturate(#203c31, 20%);
+  desaturate-relative: desaturate(#203c31, 20%, relative);
   greyscale: greyscale(#203c31);
   hsl-clamp: hsl(380, 150%, 150%);
   spin-p: spin(hsl(340, 50%, 50%), 40);
@@ -124,9 +128,13 @@
   shade-percent: shade(#777777, 13%);
   shade-negative: shade(#777777, -13%);
 
-  fade-out: fadeOut(red, 5%); // support fadeOut and fadeout
+  fade-out: fadeout(red, 5%); // support fadeOut and fadeout
   fade-in: fadein(fadeout(red, 10%), 5%);
-
+  fade-out-relative: fadeout(red, 5%,relative); 
+  fade-in-relative: fadein(fadeout(red, 10%, relative), 5%, relative);
+  fade-out2:  fadeout(fadeout(red, 50%), 50%); 
+  fade-out2-relative: fadeout(fadeout(red, 50%, relative), 50%, relative);
+  
   hsv: hsv(5, 50%, 30%);
   hsva: hsva(3, 50%, 30%, 0.2);