css: referencing theme constants in css itself?

[kutoman]

Is this currently possible? My sample below doesn't work for me (assuming that it's possible and I'm referencing the specific constant properly):

#Constants {
    myColor: rgb(35, 31, 32);
}

BooksView {
  background: myColor;
}

the error when recompiling:

CSS> Compile of /Users/SoftwareDev/Development/projects/IGMGhuApp/css/theme.css failed
CSS> java.lang.IllegalArgumentException: Invalid color specification
CSS> 	at javafx.scene.paint.Color.web(Color.java:455)
CSS> 	at javafx.scene.paint.Color.web(Color.java:636)
CSS> 	at com.codename1.designer.css.CSSTheme.getColorString(CSSTheme.java:6042)
CSS> 	at com.codename1.designer.css.CSSTheme$Element.getThemeBgColor(CSSTheme.java:3389)
CSS> 	at com.codename1.designer.css.CSSTheme.updateResources(CSSTheme.java:1442)
CSS> 	at com.codename1.designer.css.CN1CSSCLI.compile(CN1CSSCLI.java:364)
CSS> 	at com.codename1.designer.css.CN1CSSCLI.access$000(CN1CSSCLI.java:59)
CSS> 	at com.codename1.designer.css.CN1CSSCLI$2.run(CN1CSSCLI.java:195)

[jsfan3]

No, the code you wrote is invalid.

The #Constants selector allows you to specify theme constants recognized by Codename One. A list of available costants are in the "Table 1. Theme Constants" at the page: https://www.codenameone.com/manual/advanced-theming.html
However, I guess that this list of available theme constants is not exhaustive.

Maybe your code should be something like:

MyFunColor {
    background-color: #231f20;
} 

BooksView {
  cn1-derive: MyFunColor;
}

See the manual page about CSS: https://www.codenameone.com/manual/css.html

[kutoman]

yeah, I've already been using derivation and I'm aware of theme constants being retrievable over the CN1 api, but I was curious if the constants can be used in the css itself. Derivation is an option but imho in this case the more sharing of common styles (e.g. color or image) exist the more it's turning out to an inheritance hell.

[shannah]

I have just committed support for CSS variables following the spec here.

I have also added an example to the SampleRunner

And I added a section to the manual describing its usage.

This will be available in the next update.

[jsfan3]

Thank you!

[jsfan3]

In the #Constants { section I added:

/* Colors */
    --about-orange: #e3926c;
    --about-green: #99d0a5;
    --about-black: black;
    --about-gray: gray;

but when I compile I get:

Lock obtained
CSS Error: encountered "-". Was expecting one of: "}" ";" <IDENT>  on line 21 col: 17 of file file:/home/francesco/Projects/SimpleFronted/css/Basic.css
CSS Warning: Skipping: --about-green: #99d0a5; on line 22 col: 29 of file file:/home/francesco/Projects/SimpleFronted/css/Basic.css
CSS Warning: Skipping: --about-black: black; on line 23 col: 28 of file file:/home/francesco/Projects/SimpleFronted/css/Basic.css
CSS Warning: Skipping: --about-gray: gray; on line 24 col: 26 of file file:/home/francesco/Projects/SimpleFronted/css/Basic.css
CSS Warning: Skipping: } on line 25 col: 24 of file file:/home/francesco/Projects/SimpleFronted/css/Basic.css
Releasing lock

The same error can be reproduced also on a new project.
According to the example in the manual https://github.com/codenameone/CodenameOne/wiki/css#css-variables, I suppose that my syntax is correct.

[shannah]

It looks like you're still using the older version.

@codenameone Has da47a49 made it into the wild yet? (Commits in CodenameOneDesigner from 12 days ago).

[codenameone]

We pushed an update two weeks ago if I remember correctly. You made another change which still isn't there. We'll push another update soon.