From bb0886fcc966563a0d79bf8ee3ec68397e8bfc27 Mon Sep 17 00:00:00 2001 From: Marcus Bointon Date: Thu, 24 Nov 2011 16:46:23 +0100 Subject: [PATCH] Add contrast function following the same format as sass. Added tests. Added luma calculation. --- lib/less/functions.js | 24 ++++++++++++++++++++++++ test/css/functions.css | 22 ++++++++++++++++++++++ test/less/functions.less | 22 ++++++++++++++++++++++ 3 files changed, 68 insertions(+) diff --git a/lib/less/functions.js b/lib/less/functions.js index d9c4a563..8e95a065 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(); @@ -127,6 +133,24 @@ tree.functions = { greyscale: function (color) { return this.desaturate(color, new(tree.Dimension)(100)); }, + contrast: function (color, dark, light, threshold) { + 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.43; + } else { + threshold = threshold.value; + } + 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; + } + }, e: function (str) { return new(tree.Anonymous)(str instanceof tree.JavaScript ? str.evaluated : str); }, diff --git a/test/css/functions.css b/test/css/functions.css index 00ef2b3e..3b16647a 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -14,6 +14,28 @@ greyscale: #2e2e2e; spin-p: #bf6a40; spin-n: #bf4055; + luma-white: 100%; + luma-black: 0%; + luma-black-alpha: 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; + 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 e43d2615..638b79e1 100644 --- a/test/less/functions.less +++ b/test/less/functions.less @@ -17,6 +17,28 @@ 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); + 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);