diff --git a/lib/less/functions.js b/lib/less/functions.js index 6eb34bac8..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(); @@ -124,6 +130,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 823281457..12c1377cd 100644 --- a/test/css/functions.css +++ b/test/css/functions.css @@ -14,6 +14,27 @@ 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; + 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 535d2efde..3f049bcd1 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);