Skip to content

Let color functions accept Anonymous and Quoted types #1215

Closed
@timkindberg

Description

@timkindberg

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions