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);