Declaring multiple custom css properties in :root causes error-CodePudding

I've been trying to create multiple custom properties to use in my CSS files, after searching I discovered they should be prefixed with a double-dash and usually go inside of :root, like so:

:root {
    --server-primary:    #c38c00;
    --server-secondary:  #9d7100;
}

However doing this immediately gives me an error: javafx.css.CssParser parse WARNING: CSS Error parsing file:/[redacted]/ColorPalette.css: Expected RBRACE at [3,4].

I've tried finicking with this in every way I can imagine, but the only solution I have found is abandoning the use of these double-dash variables in place of the following:

.root {
    -server-primary:    #c38c00;
    -server-secondary:  #9d7100;
}

The reason I want to use the first one with double-dashes is to be able to reference these using var(--variable-name-here), which has the added benefit of actually displaying the color in my IDE, whereas just calling -variable-name-here does not show which color was used:

CodePudding user response：

Using supported JavaFX CSS constructs

I don't think the : in var notation is supported for JavaFX CSS (I don't even know what it is, to be honest).

See the JavaFX CSS reference:

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html.

The likely equivalent for JavaFX is:

named colors, looked up colors and color functions

Named Colors <named-color>

CSS supports a bunch of named constant colors. Named colors can be specified with just their unquoted name for example:
.button {
    -fx-background-color: red; 
}
Looked-up Colors <looked-up-color>

With looked-up colors you can refer to any other color property that is set on the current node or any of its parents. This is a very powerful feature, as it allows a generic palette of colors to be specified on the scene then used thoughout the application. If you want to change one of those palette colors you can do so at any level in the scene tree and it will affect that node and all its decendents. Looked-up colors are not looked up until they are applied, so they are live and react to any style changes that might occur, such as replacing a palette color at runtime with the "style" property on a node.

In the following example, all background color of all buttons uses the looked up color "ABC".
.root { abc: #f00 } 
.button { -fx-background-color: abc }
Color Functions <color-function>

JavaFX supports some color computation functions. These compute new colors from input colors at the time the color style is applied. This enables a color theme to be specified using a single base color and to have variant colors computed from that base color. There are two color functions: derive() and ladder().

<derive> | <ladder>

Derive
derive( <color> , <number>% )
The derive function takes a color and computes a brighter or darker version of that color. The second parameter is the brightness offset, representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors and negative percentages indicate darker colors. A value of -100% means completely black, 0% means no change in brightness, and 100% means completely white.

Ladder
ladder(<color> , <color-stop> [, <color-stop>] )
The ladder function interpolates between colors. The effect is as if a gradient is created using the stops provided, and then the brightness of the provided <color> is used to index a color value within that gradient. At 0% brightness, the color at the 0.0 end of the gradient is used; at 100% brightness, the color at the 1.0 end of the gradient is used; and at 50% brightness, the color at 0.5, the midway point of the gradient, is used. Note that no gradient is actually rendered. This is merely an interpolation function that results in a single color.

I suggest you use these supported and documented features of JavaFX instead.

There are many examples of their use in the modena.css file which can be found inside your JavaFX installation packages (in Idea search for the file modena.css in your project libraries).

On IDE support (specifically IntelliJ Idea)

With regard specifically to the support for displaying colors parsed from CSS in an IDE, it will of course vary by IDE.

For IntelliJ Idea, which I think you are using, I think support varies depending on the version used. I think the free community edition may have limited or no support for CSS parsing and color display for CSS files. The paid (called Ultimate) version does provide support for CSS parsing and color display for CSS files.

As of 2022.1 Ultimate Edition, for JavaFX CSS, it will accurately display direct assignments of named colors as well as RGB and HSB-defined colors and some of the JavaFX color derivation functions.

It will NOT display colors that are assigned via JavaFX looked-up colors or some of the JavaFX color derivation functions. It will display stops in gradients as long as they are not looked up, but won't display the gradients themselves. Enhancement requests for the IDE could be raised for the IDE to add color display support for the looked up and derived colors and additional support for displaying gradients.