<div dir="ltr">I don't know the internals of the JavaFX CSS parser but regarding the CSS variable spec itself we could start by simply supporting numeric values as well as colors. This would already allow developers to use variables anywhere which would simplify and make managing stylesheets easier.</div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Wed, Jul 10, 2024 at 6:24 PM Andy Goryachev <<a href="mailto:andy.goryachev@oracle.com">andy.goryachev@oracle.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div class="msg-3854036491193958189">





<div lang="EN-US" style="overflow-wrap: break-word;">
<div class="m_-3854036491193958189WordSection1">
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">I agree - having CSS variables will definitely help.  Personally, I would rather see a better way to create stylesheets programmatically, bypassing the whole parsing routine,
 but I am sure a lot of people would be more comfortable if things were similar to web css.<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">Enabling CSS variables seems to me like a lot of work though, but I could be mistaken.  Any ideas how to add support for CSS variables to JavaFX?<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">-andy<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""><u></u> <u></u></span></p>
<div id="m_-3854036491193958189mail-editor-reference-message-container">
<div>
<div style="border-right:none;border-bottom:none;border-left:none;border-top:1pt solid rgb(181,196,223);padding:3pt 0in 0in">
<p class="MsoNormal" style="margin-bottom:12pt"><b><span style="font-size:12pt;color:black">From:
</span></b><span style="font-size:12pt;color:black">Pedro Duque Vieira <<a href="mailto:pedro.duquevieira@gmail.com" target="_blank">pedro.duquevieira@gmail.com</a>><br>
<b>Date: </b>Tuesday, July 9, 2024 at 15:51<br>
<b>To: </b>Andy Goryachev <<a href="mailto:andy.goryachev@oracle.com" target="_blank">andy.goryachev@oracle.com</a>><br>
<b>Cc: </b><a href="mailto:openjfx-dev@openjdk.org" target="_blank">openjfx-dev@openjdk.org</a> <<a href="mailto:openjfx-dev@openjdk.org" target="_blank">openjfx-dev@openjdk.org</a>><br>
<b>Subject: </b>[External] : Re: UI elements sizing in Modena.css<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">.. one more reason to use the CSS variable spec that I forgot to mention: <u></u><u></u></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12pt"> 5 - It's a spec that has been thoroughly thought of before it was added to CSS and it has stood the test of time.<u></u><u></u></span></p>
</div>
</div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
<div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">On Tue, Jul 9, 2024 at 11:04</span><span style="font-size:12pt;font-family:Arial,sans-serif"> </span><span style="font-size:12pt">PM Pedro Duque Vieira <<a href="mailto:pedro.duquevieira@gmail.com" target="_blank">pedro.duquevieira@gmail.com</a>>
 wrote:<u></u><u></u></span></p>
</div>
<blockquote style="border-top:none;border-right:none;border-bottom:none;border-left:1pt solid rgb(204,204,204);padding:0in 0in 0in 6pt;margin-left:4.8pt;margin-right:0in">
<div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">Andy, if I understand the suggestion correctly, you want to set the Modena sizes using variables that can be easily overridden. To that effect variables must first be able to hold numeric values as, as it
 stands today<u></u><u></u></span></p>
</div>
<p class="MsoNormal"><span style="font-size:12pt">JavaFX only allows colors to be used for CSS variables. <u></u><u></u></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12pt">So, you're also suggesting adding the ability for CSS variables to define inset values, is that correct?<u></u><u></u></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">I think that's a good idea. I would, however, generalize that to allow CSS variables to hold numeric values that could be used anywhere. Or at least, starting to pave the ground for that.<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">I would go even further and start to pave ground to add the CSS variable spec into javafx css: <a href="https://urldefense.com/v3/__https:/codersblock.com/blog/what-can-you-put-in-a-css-variable/__;!!ACWV5N9M2RV99hQ!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TwUIZ99I$" target="_blank">https://codersblock.com/blog/what-can-you-put-in-a-css-variable/</a><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">Why use the css web spec? Because of the following reasons:<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">1 - Designers already know how to work with the css web spec<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">2 - there are already many tools available that work with the css web spec<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">3 - there are already many examples on the web using CSS so developers can just copy paste those examples<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">4 - Developers coming from the web can easily start using javafx css with no friction and no need to learn it<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">Thanks<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
</div>
</div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
<div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">On Tue, Jul 9, 2024 at 9:04</span><span style="font-size:12pt;font-family:Arial,sans-serif"> </span><span style="font-size:12pt">PM Andy Goryachev <<a href="mailto:andy.goryachev@oracle.com" target="_blank">andy.goryachev@oracle.com</a>>
 wrote:<u></u><u></u></span></p>
</div>
<blockquote style="border-top:none;border-right:none;border-bottom:none;border-left:1pt solid rgb(204,204,204);padding:0in 0in 0in 6pt;margin-left:4.8pt;margin-right:0in">
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">Since we touched the modena.css, I would like to ask the group's opinion on whether we should fix the way modena.css
 sizes UI elements.  Please see <a href="https://bugs.openjdk.org/browse/JDK-8314683" target="_blank">
https://bugs.openjdk.org/browse/JDK-8314683</a> for reference, where changing the font size also unexpectedly changed the scrollbar.</span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""> </span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">What do you think about introducing a set of variables similar to -fx-base but for sizing/padding, placing them early
 on to depend on the font size in the .root selector instead of the font in the actual control?  Something along the lines of</span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""> </span><span style="font-size:12pt"><u></u><u></u></span></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">.root {</span><u></u><u></u></p>
<p style="margin:0in;text-indent:0.5in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">-fx-size-3px: 0.25em;</span><u></u><u></u></p>
<p style="margin:0in;text-indent:0.5in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">...</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">}</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black"> </span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:rgb(147,161,161)">.scroll-bar</span><span style="font-family:"Iosevka Fixed SS16";color:black">:horizontal
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(133,153,0)">></span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(147,161,161)">.increment-button</span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(133,153,0)">></span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(147,161,161)">.increment-arrow</span><span style="font-family:"Iosevka Fixed SS16";color:black"> {</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">    -fx-padding:
<span style="background:rgb(204,204,204)">-fx-size-3px</span> <span style="background:rgb(204,204,204)">
-fx-size-3px</span> <span style="background:rgb(204,204,204)">-fx-size-3px</span> <span style="background:rgb(204,204,204)">
-fx-size-3px</span>;</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">}</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black"> </span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">instead of
</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black"> </span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:rgb(147,161,161)">.scroll-bar</span><span style="font-family:"Iosevka Fixed SS16";color:black">:horizontal
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(133,153,0)">></span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(147,161,161)">.increment-button</span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(133,153,0)">></span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(147,161,161)">.increment-arrow</span><span style="font-family:"Iosevka Fixed SS16";color:black"> {</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">    -fx-padding:
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(211,54,130);background:rgb(204,204,204)">0.333</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(203,75,22);background:rgb(204,204,204)">em</span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(211,54,130);background:rgb(204,204,204)">0.167</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(203,75,22);background:rgb(204,204,204)">em</span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(211,54,130);background:rgb(204,204,204)">0.333</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(203,75,22);background:rgb(204,204,204)">em</span><span style="font-family:"Iosevka Fixed SS16";color:black">
</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(211,54,130);background:rgb(204,204,204)">0.167</span><span style="font-family:"Iosevka Fixed SS16";color:rgb(203,75,22);background:rgb(204,204,204)">em</span><span style="font-family:"Iosevka Fixed SS16";color:black">;<span style="background:rgb(255,204,204)">
</span></span><span style="font-family:"Iosevka Fixed SS16";color:rgb(147,161,161);background:rgb(255,204,204)">/* 4 2 4 2 */</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">}</span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black"> </span><u></u><u></u></p>
<p style="margin:0in;background:white"><span style="font-family:"Iosevka Fixed SS16";color:black">This way we still permit the UI components resize with the main font, while keeping the sizes of all the control surfaces consistent?</span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""> </span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">This will require a trivial change in InsetsConverter.</span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""> </span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">What do you think?</span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16""> </span><span style="font-size:12pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Iosevka Fixed SS16"">-andy</span><span style="font-size:12pt"><u></u><u></u></span></p>
</div>
</div>
</div>
</blockquote>
</div>
<p class="MsoNormal"><span style="font-size:12pt"><br clear="all">
<u></u><u></u></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<p class="MsoNormal"><span class="m_-3854036491193958189gmailsignatureprefix"><span style="font-size:12pt">--
</span></span><span style="font-size:12pt"><u></u><u></u></span></p>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">Pedro Duque Vieira (Duke) - <a href="https://urldefense.com/v3/__https:/www.pixelduke.com__;!!ACWV5N9M2RV99hQ!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TjKYj490$" target="_blank">
https://www.pixelduke.com</a><u></u><u></u></span></p>
</div>
</div>
</div>
</blockquote>
</div>
<p class="MsoNormal"><span style="font-size:12pt"><br clear="all">
<u></u><u></u></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12pt"><u></u> <u></u></span></p>
</div>
<p class="MsoNormal"><span class="m_-3854036491193958189gmailsignatureprefix"><span style="font-size:12pt">--
</span></span><span style="font-size:12pt"><u></u><u></u></span></p>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:12pt">Pedro Duque Vieira (Duke) - <a href="https://urldefense.com/v3/__https:/www.pixelduke.com__;!!ACWV5N9M2RV99hQ!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TjKYj490$" target="_blank">
https://www.pixelduke.com</a><u></u><u></u></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div></blockquote></div><br clear="all"><div><br></div><span class="gmail_signature_prefix">-- </span><br><div dir="ltr" class="gmail_signature"><div dir="ltr"><div>Pedro Duque Vieira (Duke) - <a href="https://www.pixelduke.com" target="_blank">https://www.pixelduke.com</a></div></div></div>