<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>It would be nice to support something like LESS
(<a class="moz-txt-link-freetext" href="https://lesscss.org/">https://lesscss.org/</a>).</p>
<p>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":</p>
<p> -fx-background-color: fade(black, 40%); <br>
-fx-background-color: lighten(@glass-color, 20%, relative);<br>
</p>
<p>It supports variables, and the & operator to repeat parent
selectors, here a bigger example:<br>
</p>
<p> .group-heading {<br>
@c1: rgba(255, 255, 255, 85%);<br>
@c2: fade(@text-accent-highlight, 70%);<br>
<br>
&.horizontal {<br>
-fx-background-color: linear-gradient(to right,
transparent 0%, @c2 18%, transparent 48%, transparent),<br>
linear-gradient(to right,
transparent 0%, @c2 6%, @c2 35%, transparent 98%, transparent);<br>
-fx-border-color: linear-gradient(to right, transparent
0%, transparent 50%, @c1 93%, @c1 99%, transparent);<br>
}<br>
<br>
&.vertical {<br>
-fx-background-color: linear-gradient(to top, transparent
0%, @c2 18%, transparent 48%, transparent),<br>
linear-gradient(to top, transparent
0%, @c2 6%, @c2 35%, transparent 98%, transparent);<br>
-fx-border-color: linear-gradient(to top, transparent 0%,
transparent 50%, @c1 93%, @c1 99%, transparent);<br>
}<br>
}</p>
<p>It integrates relatively easily. I let it statically compile the
less files and generate regular CSS file URL's:</p>
<p> private static final String ROOT_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "root.less");<br>
private static final String PROGRESS_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "progress-pane.less");<br>
private static final String CLOCK_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "clock-pane.less");<br>
private static final String LOGO_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "logo-pane.less");<br>
private static final String FPS_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "fps-pane.less");</p>
<p>Then you can use it like any other stylesheet on a component:</p>
<p> clockPane.getStylesheets().add(CLOCK_STYLES_URL);<br>
</p>
<p><br>
--John</p>
<p><br>
</p>
<div class="moz-cite-prefix">On 15/01/2023 01:31, Scott Palmer
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:CAL3e5iHJg0ntJRFtL08jPwgh53CYm_bQ7_j3Sw7i2RmPZ27Eqg@mail.gmail.com">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<div dir="ltr">I was looking at Modena.css and came across this:
<div><br>
</div>
<div><font face="monospace"> /* A bright blue for the focus
indicator of objects. Typically used as the<br>
* first color in -fx-background-color for the "focused"
pseudo-class. Also<br>
* typically used with insets of -1.4 to provide a
glowing effect.<br>
*/<br>
-fx-focus-color: #039ED3;<br>
-fx-faint-focus-color: #039ED322;</font><br>
</div>
<div><br>
</div>
<div>I noticed two things pertaining to <font face="monospace">-fx-faint-focus-color</font>.
Although I've used this form to specify colors myself, the
JavaFX CSS Reference Guide at <a
href="https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html#typecolor"
moz-do-not-send="true" class="moz-txt-link-freetext">https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html#typecolor</a> 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 <font face="monospace">rgba(#,#,#,#)</font>
and <font face="monospace">rgba(#%,#%,#%,#)</font>.</div>
<div><br>
</div>
<div>More importantly, this is a copy of <font face="monospace">-fx-focus-color</font>
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.</div>
<div><br>
</div>
<div>Would it make sense to add support for something similar
to <font face="monospace">derive( <color> ,
<number>% )</font> 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?*</div>
<div><br>
</div>
<div>Regards,<br>
</div>
<div><br>
</div>
<div>Scott</div>
<div><br>
</div>
<div>
<div>* Note: It seems future CSS standards are looking for
ways to do similar things. A <font face="monospace">color-mod</font><span
class="gmail-Apple-converted-space"> </span>function was
proposed in <a
href="https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod"
moz-do-not-send="true" class="moz-txt-link-freetext">https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod</a>
but removed in the next revision <a
href="https://www.w3.org/TR/2022/CRD-css-color-4-20221101/#changes-from-20160705"
moz-do-not-send="true" class="moz-txt-link-freetext">https://www.w3.org/TR/2022/CRD-css-color-4-20221101/#changes-from-20160705</a>.
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 <a
href="https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198"
moz-do-not-send="true" class="moz-txt-link-freetext">https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198</a>
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.<br>
</div>
<div><br>
</div>
</div>
</div>
</blockquote>
</body>
</html>