2

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.

auri.borealis
  • 61
  • 1
  • 5

1 Answers1

0

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.

Mark Embling
  • 12,605
  • 8
  • 39
  • 53
  • thank you for comment, unfortunately it is not rendered in my case.. it looks like this anyway https://pasteboard.co/aarbivgpU.png – auri.borealis May 24 '17 at 14:54
  • it seems that GssFunctions in gwt does not contain lighten and darken functions yet.. :/ – auri.borealis May 24 '17 at 15:44
  • Is all the GSS stuff turned on? I've just looked through the release notes for GWT releases and it looks like it might not be enabled by default. See [here](http://www.gwtproject.org/release-notes.html#Release_Notes_2_8_0_BETA1) and [here for migration details](http://www.gwtproject.org/articles/gss_migration.html) - including enabling the GSS config property. – Mark Embling May 24 '17 at 16:11