Description
I am working an a medium scale web app that will allow the admin to customize the interface colors by setting 4 core theme colors. Those 4 colors map to variables which in turn control every color on the site. I ran into a very large issue where hsla() did not clamp "out of range" values and eventually I said something about it over here: #821 (comment)
However, while trying to figure it out on my own for quite a while I tried so many things. The one idea I had was to clamp the values myself via javascript like this:
@h: 380;
@s: 150%;
@l: -40%;
@a: 1.75;
@hx:`(function(){ var h=@{h}; return h>360?h-360:h<0?360+h:h })().toString()`;
@sx:`(function(){ var a=parseInt("@{s}"); return Math.max(Math.min(a,100),0)+"%" })()`;
@lx:`(function(){ var a=parseInt("@{l}"); return Math.max(Math.min(a,100),0)+"%" })()`;
@ax:`(function(){ var a=@{a}; return Math.max(Math.min(a,1),0) })().toString()`;
But I found that when I passed my 'x' variables to hsla() it told me that it only accepted numbers! Bummer. Well I spent the next 4-8 hours trying to figure out how to convert a damn string to a number. There is no way to do it!!! That's another issue entirely which I'll write up.
So I propose that the number function should be modified to something like this:
function number(n) {
if (n instanceof tree.Dimension) {
return parseFloat(n.unit == '%' ? n.value / 100 : n.value);
} else if (typeof(n) === 'number') {
return n;
} else if (n instanceof tree.Anonymous || n instanceof tree.Quoted) {
if(n.value.indexOf("%")>-1) return number(new tree.Dimension(parseFloat(n.value), "%"));
else return number(new tree.Dimension(parseFloat(n.value)));
} else {
throw {
error: "RuntimeError",
message: "color functions parameters not valid type (accepts numbers and strings)"
};
}
}
This only makes sense too, because the more developers use javascript within less the more likely they will have to pass the result of the javascript through another function which doesn't accept strings or anonymous.