CSS Color functions

[John Hendrikx]

It would be nice to support something like LESS (https://lesscss.org/).

I've integrated a LESS parser in my personal project that takes .less 
files and converts them to CSS before giving them to JavaFX.  This 
allows me to use functions like "fade" and "lighten":

     -fx-background-color: fade(black, 40%);
     -fx-background-color: lighten(@glass-color, 20%, relative);

It supports variables, and the & operator to repeat parent selectors, 
here a bigger example:

     .group-heading {
       @c1: rgba(255, 255, 255, 85%);
       @c2: fade(@text-accent-highlight, 70%);

       &.horizontal {
         -fx-background-color: linear-gradient(to right, transparent 0%, 
@c2 18%, transparent 48%, transparent),
                               linear-gradient(to right, transparent 0%, 
@c2 6%, @c2 35%, transparent 98%, transparent);
         -fx-border-color: linear-gradient(to right, transparent 0%, 
transparent 50%, @c1 93%, @c1 99%, transparent);
       }

       &.vertical {
         -fx-background-color: linear-gradient(to top, transparent 0%, 
@c2 18%, transparent 48%, transparent),
                               linear-gradient(to top, transparent 0%, 
@c2 6%, @c2 35%, transparent 98%, transparent);
         -fx-border-color: linear-gradient(to top, transparent 0%, 
transparent 50%, @c1 93%, @c1 99%, transparent);
       }
     }

It integrates relatively easily. I let it statically compile the less 
files and generate regular CSS file URL's:

     private static final String ROOT_STYLES_URL = 
LessLoader.compile(RootNodeFactory.class, "root.less");
     private static final String PROGRESS_STYLES_URL = 
LessLoader.compile(RootNodeFactory.class, "progress-pane.less");
     private static final String CLOCK_STYLES_URL = 
LessLoader.compile(RootNodeFactory.class, "clock-pane.less");
     private static final String LOGO_STYLES_URL = 
LessLoader.compile(RootNodeFactory.class, "logo-pane.less");
     private static final String FPS_STYLES_URL = 
LessLoader.compile(RootNodeFactory.class, "fps-pane.less");

Then you can use it like any other stylesheet on a component:

     clockPane.getStylesheets().add(CLOCK_STYLES_URL);


--John


On 15/01/2023 01:31, Scott Palmer wrote:
> I was looking at Modena.css and came across this:
>
>     /* A bright blue for the focus indicator of objects. Typically 
> used as the
>      * first color in -fx-background-color for the "focused" 
> pseudo-class. Also
>      * typically used with insets of -1.4 to provide a glowing effect.
>      */
>     -fx-focus-color: #039ED3;
>     -fx-faint-focus-color: #039ED322;
>
> I noticed two things pertaining to -fx-faint-focus-color. Although 
> I've used this form to specify colors myself, the JavaFX CSS Reference 
> Guide at 
> https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html#typecolor does 
> not mention being able to use an 8-digit form of #rrggbbaa when using 
> hex digits. Only the 3- and 6-digit forms of hexadecimal RGB are 
> mentioned. RGB + Alpha colors are only documented in the form of 
> rgba(#,#,#,#) and rgba(#%,#%,#%,#).
>
> More importantly, this is a copy of -fx-focus-color with an added 
> alpha channel, but it's created by repeating the literal color value 
> and appending the alpha component, rather than somehow deriving it 
> from -fx-focus-color.  Similar repetition is needed for the 
> semi-transparent chart colors.
>
> Would it make sense to add support for something similar to derive( 
> <color> , <number>% ) to specify a color based on an existing color 
> with a new value for the alpha channel (or any other) value? Maybe a 
> color-transform method that would do for an RGBA color vector what 
> other transforms do for spatial coordinates?*
>
> Regards,
>
> Scott
>
> * Note: It seems future CSS standards are looking for ways to do 
> similar things.  A color-modfunction was proposed in 
> https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod 
> but removed in the next revision 
> https://www.w3.org/TR/2022/CRD-css-color-4-20221101/#changes-from-20160705. 
> I'm not following CSS development closely, but some googling suggests 
> the next proposal is based on a new keyword 'from' to create derived 
> colors.  E.g rgb(from skyblue, 255 g b) to get a color based on 
> skyblue with a red component of 255. This is mentioned here 
> https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198 
>  I'm skeptical that it is worth waiting for the dust to settle on the 
> CSS standard, but supporting whatever they come up with is a possibility.
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://mail.openjdk.org/pipermail/openjfx-dev/attachments/20230117/c35410de/attachment-0001.htm>