From 1f513a97f7a9e4baf9805c091a592e385294b43b Mon Sep 17 00:00:00 2001 From: Marcus Bointon Date: Thu, 24 Nov 2011 16:46:23 +0100 Subject: [PATCH 1/6] Add contrast function --- lib/less/functions.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/lib/less/functions.js b/lib/less/functions.js index 96dcc8c4c..2406eb514 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -124,6 +124,14 @@ tree.functions = { greyscale: function (color) { return this.desaturate(color, new(tree.Dimension)(100)); }, + contrast: function (color) { + var hsl = color.toHSL(); + if (hsl.l > 0.5) { + return this.rgba(0, 0, 0, 1.0); + } else { + return this.rgba(255, 255, 255, 1.0); + } + }, e: function (str) { return new(tree.Anonymous)(str instanceof tree.JavaScript ? str.evaluated : str); }, From 4a081ad6fb358ac17f62ebe55e85c094bda49942 Mon Sep 17 00:00:00 2001 From: Marcus Bointon Date: Thu, 24 Nov 2011 23:14:15 +0100 Subject: [PATCH 2/6] Add LESS tests for contrast --- test/less/functions.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/less/functions.less b/test/less/functions.less index 1af78bc80..d37e47537 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -17,6 +17,8 @@ greyscale: greyscale(#203c31); spin-p: spin(hsl(340, 50%, 50%), 40); spin-n: spin(hsl(30, 50%, 50%), -40); + contrast-white: contrast(#fff); + contrast-black: contrast(#000); format: %("rgb(%d, %d, %d)", @r, 128, 64); format-string: %("hello %s", "world"); format-multiple: %("hello %s %d", "earth", 2); From 5f593b5857dc533985681327f96e7891b58fed3b Mon Sep 17 00:00:00 2001 From: Marcus Bointon Date: Thu, 24 Nov 2011 23:16:12 +0100 Subject: [PATCH 3/6] Add CSS test results for contrast --- test/css/functions.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/css/functions.css b/test/css/functions.css index f33b9869b..1024dff98 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -14,6 +14,8 @@ greyscale: #2e2e2e; spin-p: #bf6a40; spin-n: #bf4055; + contrast-white: #000000; + contrast-black: #ffffff; format: "rgb(32, 128, 64)"; format-string: "hello world"; format-multiple: "hello earth 2"; From 32e41896a6c4a303d0608a9f87279d2e7b160559 Mon Sep 17 00:00:00 2001 From: Marcus Bointon Date: Tue, 10 Jan 2012 23:49:13 +0100 Subject: [PATCH 4/6] Add optional light and dark parameters Merged latest from upstream and updated tests too, all pass. --- lib/less/functions.js | 18 +++++++++++++----- test/css/functions.css | 2 ++ test/less/functions.less | 2 ++ 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/lib/less/functions.js b/lib/less/functions.js index 83175378e..98a4517f5 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -124,12 +124,20 @@ tree.functions = { greyscale: function (color) { return this.desaturate(color, new(tree.Dimension)(100)); }, - contrast: function (color) { + contrast: function (color, light, dark) { var hsl = color.toHSL(); - if (hsl.l > 0.5) { - return this.rgba(0, 0, 0, 1.0); - } else { - return this.rgba(255, 255, 255, 1.0); + if (arguments.length == 1) { + if (hsl.l > 0.5) { + return this.rgba(0, 0, 0, 1.0); + } else { + return this.rgba(255, 255, 255, 1.0); + } + } else if (arguments.length == 3) { + if (hsl.l > 0.5) { + return dark; + } else { + return light; + } } }, e: function (str) { diff --git a/test/css/functions.css b/test/css/functions.css index 1a92bef63..1d3873746 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -16,6 +16,8 @@ spin-n: #bf4055; contrast-white: #000000; contrast-black: #ffffff; + contrast-light: #111111; + contrast-dark: #eeeeee; format: "rgb(32, 128, 64)"; format-string: "hello world"; format-multiple: "hello earth 2"; diff --git a/test/less/functions.less b/test/less/functions.less index 0ad85374c..097adcf70 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -19,6 +19,8 @@ spin-n: spin(hsl(30, 50%, 50%), -40); contrast-white: contrast(#fff); contrast-black: contrast(#000); + contrast-light: contrast(#fff, #eeeeee, #111111); + contrast-dark: contrast(#000, #eeeeee, #111111); format: %("rgb(%d, %d, %d)", @r, 128, 64); format-string: %("hello %s", "world"); format-multiple: %("hello %s %d", "earth", 2); From 658fc2543396adedea7e67594fff3a21ac28fb6f Mon Sep 17 00:00:00 2001 From: Marcus Bointon Date: Thu, 22 Mar 2012 13:20:44 +0100 Subject: [PATCH 5/6] Rewrite function so it works the same way the SASS function does Update tests to match --- lib/less/functions.js | 29 ++++++++++++++++------------- test/css/functions.css | 4 ++++ test/less/functions.less | 8 ++++++-- 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/lib/less/functions.js b/lib/less/functions.js index 98a4517f5..c9257b368 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -124,20 +124,23 @@ tree.functions = { greyscale: function (color) { return this.desaturate(color, new(tree.Dimension)(100)); }, - contrast: function (color, light, dark) { + contrast: function (color, dark, light, threshold) { var hsl = color.toHSL(); - if (arguments.length == 1) { - if (hsl.l > 0.5) { - return this.rgba(0, 0, 0, 1.0); - } else { - return this.rgba(255, 255, 255, 1.0); - } - } else if (arguments.length == 3) { - if (hsl.l > 0.5) { - return dark; - } else { - return light; - } + if (typeof light === 'undefined') { + light = this.rgba(255, 255, 255, 1.0); + } + if (typeof dark === 'undefined') { + dark = this.rgba(0, 0, 0, 1.0); + } + if (typeof threshold === 'undefined') { + threshold = 0.3; + } else { + threshold = threshold.value; + } + if (hsl.l < threshold) { + return light; + } else { + return dark; } }, e: function (str) { diff --git a/test/css/functions.css b/test/css/functions.css index 1d3873746..a931f6dc0 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -18,6 +18,10 @@ contrast-black: #ffffff; contrast-light: #111111; contrast-dark: #eeeeee; + contrast-light-thresh: #111111; + contrast-dark-thresh: #eeeeee; + contrast-high-thresh: #eeeeee; + contrast-low-thresh: #111111; format: "rgb(32, 128, 64)"; format-string: "hello world"; format-multiple: "hello earth 2"; diff --git a/test/less/functions.less b/test/less/functions.less index 097adcf70..932a0d02a 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -19,8 +19,12 @@ spin-n: spin(hsl(30, 50%, 50%), -40); contrast-white: contrast(#fff); contrast-black: contrast(#000); - contrast-light: contrast(#fff, #eeeeee, #111111); - contrast-dark: contrast(#000, #eeeeee, #111111); + contrast-light: contrast(#fff, #111111, #eeeeee); + contrast-dark: contrast(#000, #111111, #eeeeee); + contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5); + contrast-dark-thresh: contrast(#000, #111111, #eeeeee, 0.5); + contrast-high-thresh: contrast(#555, #111111, #eeeeee, 0.6); + contrast-low-thresh: contrast(#555, #111111, #eeeeee, 0.1); format: %("rgb(%d, %d, %d)", @r, 128, 64); format-string: %("hello %s", "world"); format-multiple: %("hello %s %d", "earth", 2); From 484925b4a380c3fe68f4be2c256cf4172d1a6a7a Mon Sep 17 00:00:00 2001 From: Synchro Date: Fri, 23 Mar 2012 23:59:34 +0100 Subject: [PATCH 6/6] Implement a luma calculation function Use same luma calc for contrast calculation --- lib/less/functions.js | 11 ++++++++--- test/css/functions.css | 13 +++++++++++++ test/less/functions.less | 14 ++++++++++++++ 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/lib/less/functions.js b/lib/less/functions.js index c9257b368..9b237a88d 100644 --- a/lib/less/functions.js +++ b/lib/less/functions.js @@ -44,6 +44,12 @@ tree.functions = { alpha: function (color) { return new(tree.Dimension)(color.toHSL().a); }, + luma: function (color) { + return new(tree.Dimension)(Math.round((0.2126 * (color.rgb[0]/255) + + 0.7152 * (color.rgb[1]/255) + + 0.0722 * (color.rgb[2]/255)) + * color.alpha * 100), '%'); + }, saturate: function (color, amount) { var hsl = color.toHSL(); @@ -125,7 +131,6 @@ tree.functions = { return this.desaturate(color, new(tree.Dimension)(100)); }, contrast: function (color, dark, light, threshold) { - var hsl = color.toHSL(); if (typeof light === 'undefined') { light = this.rgba(255, 255, 255, 1.0); } @@ -133,11 +138,11 @@ tree.functions = { dark = this.rgba(0, 0, 0, 1.0); } if (typeof threshold === 'undefined') { - threshold = 0.3; + threshold = 0.43; } else { threshold = threshold.value; } - if (hsl.l < threshold) { + if (((0.2126 * (color.rgb[0]/255) + 0.7152 * (color.rgb[1]/255) + 0.0722 * (color.rgb[2]/255)) * color.alpha) < threshold) { return light; } else { return dark; diff --git a/test/css/functions.css b/test/css/functions.css index a931f6dc0..12c1377cd 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -14,8 +14,21 @@ greyscale: #2e2e2e; spin-p: #bf6a40; spin-n: #bf4055; + luma-white: 100%; + luma-black: 0%; + luma-red: 21%; + luma-green: 72%; + luma-blue: 7%; + luma-yellow: 93%; + luma-cyan: 79%; + luma-white-alpha: 50%; contrast-white: #000000; contrast-black: #ffffff; + contrast-red: #ffffff; + contrast-green: #000000; + contrast-blue: #ffffff; + contrast-yellow: #000000; + contrast-cyan: #000000; contrast-light: #111111; contrast-dark: #eeeeee; contrast-light-thresh: #111111; diff --git a/test/less/functions.less b/test/less/functions.less index 932a0d02a..3f049bcd1 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -17,8 +17,22 @@ greyscale: greyscale(#203c31); spin-p: spin(hsl(340, 50%, 50%), 40); spin-n: spin(hsl(30, 50%, 50%), -40); + luma-white: luma(#fff); + luma-black: luma(#000); + luma-black-alpha: luma(rgba(0,0,0,0.5)); + luma-red: luma(#ff0000); + luma-green: luma(#00ff00); + luma-blue: luma(#0000ff); + luma-yellow: luma(#ffff00); + luma-cyan: luma(#00ffff); + luma-white-alpha: luma(rgba(255,255,255,0.5)); contrast-white: contrast(#fff); contrast-black: contrast(#000); + contrast-red: contrast(#ff0000); + contrast-green: contrast(#00ff00); + contrast-blue: contrast(#0000ff); + contrast-yellow: contrast(#ffff00); + contrast-cyan: contrast(#00ffff); contrast-light: contrast(#fff, #111111, #eeeeee); contrast-dark: contrast(#000, #111111, #eeeeee); contrast-light-thresh: contrast(#fff, #111111, #eeeeee, 0.5);