gwt gss lighten() and darken()

Question

i was trying to use lighten() and darken() in GSS (i'm gwt 2.8 version and material-design rc4) like so:

@def MAIN_COLOR #64b5f6;
@def LIGHTER_COLOR lighter(MAIN_COLOR, 0.5);

.lighter {
color: LIGHTER_COLOR;
}

but the result is

.lighter {
color: lighter(#64b5f6,0.5)
}

i cannot find any sample of using those functions anywhere.. https://github.com/google/closure-stylesheets

i was expecting that those work like in SASS

$primary-color: #64b5f6;
$darken: darken($primary-color, 7%);
$lighten: lighten($primary-color, 20%);

thanks.

Answer 1

I can't reproduce your exact behaviour, but I have managed to get a working example and found the following:

• The function name is lighten
• The lighten function takes an integer number between 0 and 100 as the amount to lighten by. This is documented directly in the code on GitHub.

I've tried modifying your example as follows and it is working fine:

@def MAIN_COLOR #64b5f6;
@def LIGHTER_COLOR lighten(MAIN_COLOR, 5);

.lighter {
color: LIGHTER_COLOR;
}

This is evaluated, using the latest version of Closure Stylesheets (right now, v1.4.0) to become the following:

.lighter{color:#7cc1f7}

I expect the number is a percentage lightness increase - that's the method I use in my own color software and is generally what other CSS preprocessor lightening/darkening functions use too - so you might need to play around to get the exact shade you're looking for.

I hope it works for you.