github/less.js
1
1
Fork 0
mirror of https://github.com/less/less.js.git synced 2026-01-23 06:07:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add contrast function following the same format as sass. Added tests.

Browse Source 
Added luma calculation.
This commit is contained in:
Marcus Bointon
2011-11-24 16:46:23 +01:00
committed by Luke Page
parent 7fc6275ba8
commit bb0886fcc9
3 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
lib/less/functions.js
View File

@@ -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);
},

22
test/css/functions.css
View File

@@ -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";

22
test/less/functions.less
View File

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