(new) Additions & improvements to color functions.

- Added spin() to change hue.
- Fixed darken/lighten to be additive.
- Added color extraction functions.

lib/less/functions.js

@@ -13,11 +13,9 @@ tree.functions = {
         return this.hsla(h, s, l, 1.0);
     },
     hsla: function (h, s, l, a) {
-        h = (((number(h) % 360) + 360) % 360) / 360;
+        h = (number(h) % 360) / 360;
         s = number(s); l = number(l); a = number(a);
 
-        //require('sys').puts(h, s, l)
-
         var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
         var m1 = l * 2 - m2;
 
@@ -34,6 +32,18 @@ tree.functions = {
             else                return m1;
         }
     },
+    hue: function (color) {
+        return new(tree.Dimension)(Math.round(color.toHSL().h));
+    },
+    saturation: function (color) {
+        return new(tree.Dimension)(Math.round(color.toHSL().s * 100), '%');
+    },
+    lightness: function (color) {
+        return new(tree.Dimension)(Math.round(color.toHSL().l * 100), '%');
+    },
+    alpha: function (color) {
+        return new(tree.Dimension)(color.toHSL().a);
+    },
     saturate: function (color, amount) {
         var hsl = color.toHSL();
 
@@ -51,18 +61,26 @@ tree.functions = {
     lighten: function (color, amount) {
         var hsl = color.toHSL();
 
-        hsl.l *= (1 + amount.value / 100);
+        hsl.l += amount.value / 100;
         hsl.l = clamp(hsl.l);
         return this.hsl(hsl.h, hsl.s, hsl.l);
     },
     darken: function (color, amount) {
         var hsl = color.toHSL();
 
-        hsl.l *= (1 - amount.value / 100);
+        hsl.l -= amount.value / 100;
         hsl.l = clamp(hsl.l);
         return this.hsl(hsl.h, hsl.s, hsl.l);
     },
-    greyscale: function (color, amount) {
+    spin: function (color, amount) {
+        var hsl = color.toHSL();
+        var hue = (hsl.h + amount.value) % 360;
+
+        hsl.h = hue < 0 ? 360 + hue : hue;
+
+        return this.hsl(hsl.h, hsl.s, hsl.l);
+    },
+    greyscale: function (color) {
         return this.desaturate(color, new(tree.Dimension)(100));
     },
     e: function (str) {

test/css/functions.css

@@ -7,12 +7,17 @@
 }
 #built-in {
   escaped: -Some::weird(#thing, y);
-  lighten: #ff8080;
-  darken: #800000;
+  lighten: #ffcccc;
+  darken: #330000;
   saturate: #203c31;
   desaturate: #29332f;
   greyscale: #2e2e2e;
+  spin-p: #bf6a40;
+  spin-n: #bf4055;
   format: "rgb(32, 128, 64)";
   format-string: "hello world";
   eformat: rgb(32, 128, 64);
+  hue: 98;
+  saturation: 12%;
+  lightness: 95%;
 }

test/less/functions.less

@@ -10,12 +10,18 @@
 #built-in {
   @r: 32;
   escaped: e("-Some::weird(#thing, y)");
-  lighten: lighten(#ff0000, 50%);
-  darken: darken(#ff0000, 50%);
+  lighten: lighten(#ff0000, 40%);
+  darken: darken(#ff0000, 40%);
   saturate: saturate(#29332f, 20%);
   desaturate: desaturate(#203c31, 20%);
   greyscale: greyscale(#203c31);
+  spin-p: spin(hsl(340, 50%, 50%), 40);
+  spin-n: spin(hsl(30, 50%, 50%), -40);
   format: %("rgb(%d, %d, %d)", @r, 128, 64);
   format-string: %("hello %s", "world");
   eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));
+
+  hue: hue(hsl(98, 12%, 95%));
+  saturation: saturation(hsl(98, 12%, 95%));
+  lightness: lightness(hsl(98, 12%, 95%));
 }