<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:"Yu Gothic";
panose-1:2 11 4 0 0 0 0 0 0 0;}
@font-face
{font-family:Aptos;
panose-1:2 11 0 4 2 2 2 2 2 4;}
@font-face
{font-family:"Iosevka Fixed SS16";
panose-1:2 0 5 9 3 0 0 0 0 4;}
@font-face
{font-family:"Times New Roman \(Body CS\)";
panose-1:2 11 6 4 2 2 2 2 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
@font-face
{font-family:"\@Yu Gothic";
panose-1:2 11 4 0 0 0 0 0 0 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
font-size:10.0pt;
font-family:"Aptos",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0in;
font-size:10.0pt;
font-family:"Courier New";}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:Consolas;}
span.EmailStyle21
{mso-style-type:personal-reply;
font-family:"Iosevka Fixed SS16";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;
mso-ligatures:none;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style>
</head>
<body lang="EN-US" link="blue" vlink="purple" style="word-wrap:break-word">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">My approach is to create a single stylesheet, see for example<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><a href="https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/mp3player/Styles.java">https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/mp3player/Styles.java</a><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">and this little guy allows to (re-)regenerate and (re-)load the stylesheet dynamically<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><a href="https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/fx/internal/CssLoader.java">https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/fx/internal/CssLoader.java</a><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">since the stylesheet is being generated by a java class, I have all the tools I need - platform preferences, proper color mixing logic, lookups, and so on. The only downside
is that JavaFX does not allow programmatic creation of CSS, so the process ends up with overhead of creating a string, data url encoding, decoding, and parsing.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">-andy<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<div id="mail-editor-reference-message-container">
<div>
<div>
<div style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal" style="margin-bottom:12.0pt"><b><span style="font-size:12.0pt;color:black">From:
</span></b><span style="font-size:12.0pt;color:black">openjfx-dev <openjfx-dev-retn@openjdk.org> on behalf of John Hendrikx <john.hendrikx@gmail.com><br>
<b>Date: </b>Tuesday, December 3, 2024 at 03:17<br>
<b>To: </b>openjfx-dev@openjdk.org <openjfx-dev@openjdk.org><br>
<b>Subject: </b>Less in FX (was Re: CSS Media Queries)<o:p></o:p></span></p>
</div>
<p>I've been using LESS for ages in combination with FX. I adapted this project:
<a href="https://github.com/i-net-software/jlessc">https://github.com/i-net-software/jlessc</a><o:p></o:p></p>
<p>In FX I use it with this helper class:<o:p></o:p></p>
<p><a href="https://github.com/hjohn/MediaSystem-v2/blob/master/mediasystem-runner/src/main/java/hs/mediasystem/runner/util/LessLoader.java">https://github.com/hjohn/MediaSystem-v2/blob/master/mediasystem-runner/src/main/java/hs/mediasystem/runner/util/LessLoader.java</a><o:p></o:p></p>
<p>Then to use a stylesheet with a control, you do something like this:<o:p></o:p></p>
<p><b><span style="font-size:11.0pt;font-family:Consolas;color:#0000A0;background:white">final</span></b><span style="font-size:11.0pt;font-family:Consolas;color:black;background:white"> String
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0000C0;background:white">CLOCK_STYLES_URL</span><span style="font-size:11.0pt;font-family:Consolas;color:black;background:white"> = LessLoader.</span><i><span style="font-size:11.0pt;font-family:Consolas;color:black;background:#D4D4D4">compile</span></i><span style="font-size:11.0pt;font-family:Consolas;color:black;background:white">(RootNodeFactory.</span><b><span style="font-size:11.0pt;font-family:Consolas;color:#0000A0;background:white">class</span></b><span style="font-size:11.0pt;font-family:Consolas;color:black;background:white">,
</span><span style="font-size:11.0pt;font-family:Consolas;color:#2A00FF;background:white">"clock-pane.less"</span><span style="font-size:11.0pt;font-family:Consolas;color:black;background:white">)</span><o:p></o:p></p>
<p>Where "RootNodeFactory.class" is just a reference class as my .less files are located in the same package as the controls.<o:p></o:p></p>
<p>The resulting URL can then simply be set on a control or scene:<o:p></o:p></p>
<p><span style="font-size:11.0pt;font-family:Consolas;color:black;background:white">clockPane.getStylesheets().add(</span><span style="font-size:11.0pt;font-family:Consolas;color:#0000C0;background:#D4D4D4">CLOCK_STYLES_URL</span><span style="font-size:11.0pt;font-family:Consolas;color:black;background:white">);</span><o:p></o:p></p>
<p>This allows me to use all kinds of handy features from LESS. Here is the clock-pane.less file for example:<o:p></o:p></p>
<div>
<div>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:maroon;background:#D4D4D4">@import</span><span style="font-size:11.0pt;font-family:Consolas;color:black;background:#D4D4D4">
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515;background:#D4D4D4">"hs/mediasystem/runner/properties.less"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.clock-pane</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">alignment:
bottom-right</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">padding</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">5</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.clock-box</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">padding</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">5</span><span style="font-size:11.0pt;font-family:Consolas;color:black">
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">15</span><span style="font-size:11.0pt;font-family:Consolas;color:black">
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">5</span><span style="font-size:11.0pt;font-family:Consolas;color:black">
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">15</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">alignment:
center</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.clock</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.style-p1-extra-light</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.date</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.style-p3</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
</div>
</div>
<p>As you can see, it uses imports, style nesting and references to groups of other styles (like ".style-p3"). In properties.less we find many custom variables, like:<o:p></o:p></p>
<div>
<div>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:#001080;background:#F0D8A8">@</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5;background:#F0D8A8">tinted-glass</span><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">fade</span><span style="font-size:11.0pt;font-family:Consolas;color:black">(</span><span style="font-size:11.0pt;font-family:Consolas;color:#001080">@</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">theme-primary</span><span style="font-size:11.0pt;font-family:Consolas;color:black">,
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">60%</span><span style="font-size:11.0pt;font-family:Consolas;color:black">);<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:#001080">@</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">glass-color</span><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">rgba</span><span style="font-size:11.0pt;font-family:Consolas;color:black">(</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">0</span><span style="font-size:11.0pt;font-family:Consolas;color:black">,
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">0</span><span style="font-size:11.0pt;font-family:Consolas;color:black">,
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">0</span><span style="font-size:11.0pt;font-family:Consolas;color:black">,
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">0.6</span><span style="font-size:11.0pt;font-family:Consolas;color:black">);<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:#001080">@</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">shape-disc</span><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515">"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:#001080">@</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">text-primary</span><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">lighten</span><span style="font-size:11.0pt;font-family:Consolas;color:black">(</span><span style="font-size:11.0pt;font-family:Consolas;color:#001080">@</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">theme-primary</span><span style="font-size:11.0pt;font-family:Consolas;color:black">,
</span><span style="font-size:11.0pt;font-family:Consolas;color:#09885A">5%</span><span style="font-size:11.0pt;font-family:Consolas;color:black">,
</span><span style="font-size:11.0pt;font-family:Consolas;color:blue">relative</span><span style="font-size:11.0pt;font-family:Consolas;color:black">);<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">I'm probably only scratching the surface of what you can do with LESS, as I'm hardly a CSS designer :)<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">The LessLoader class I wrote has one more handy feature; it allows suffixes on your CSS files to allow for
<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">customization per platform. I use this to select appropriate fonts per platform (as their names can
<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">vary apparently!). See here the Windows file. The Linux variant has slightly different font family names<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">but map to the same LESS variables so I don't need to fix this everywhere.
<o:p></o:p></span></p>
<div>
<div>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">/*</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* The Noto Sans font supports many variations. To get the correct variation</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* in JavaFX, select them as follows:</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">*
</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* - Black = Noto Sans Blk</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* - Bold = Noto Sans + font-weight: bold</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* - Semi Bold = Noto Sans SemBd</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* - Medium = Noto Sans Med</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* - Regular = Noto Sans + font-weight: normal</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* - Light = Noto Sans Light</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">*</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* Note that these names are for Windows. Other platforms can use</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">* slightly different names.</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:green">*/</span><span style="font-size:11.0pt;font-family:Consolas;color:black"><o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.light</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">
</span><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-family</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515">"Noto Sans Light"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-weight</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">normal</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.regular</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">
</span><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-family</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515">"Noto Sans"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-weight</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">normal</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.medium</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">
</span><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-family</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515">"Noto Sans Med"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-weight</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">bold</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.semi-bold</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">
</span><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-family</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515">"Noto Sans SemBd"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-weight</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">bold</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.bold</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">
</span><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-family</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515">"Noto Sans"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-weight</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">bold</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:red">.black</span><span style="font-size:11.0pt;font-family:Consolas;color:maroon">
</span><span style="font-size:11.0pt;font-family:Consolas;color:black">{<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-family</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#A31515">"Noto Sans Blk"</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">fx</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:black">-</span></u><u><span style="font-size:11.0pt;font-family:Consolas;color:red">font-weight</span></u><span style="font-size:11.0pt;font-family:Consolas;color:black">:
</span><span style="font-size:11.0pt;font-family:Consolas;color:#0451A5">bold</span><span style="font-size:11.0pt;font-family:Consolas;color:black">;<o:p></o:p></span></p>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">}<o:p></o:p></span></p>
</div>
</div>
<p style="margin:0in;background:white"><span style="font-size:11.0pt;font-family:Consolas;color:black">--John
<o:p></o:p></span></p>
</div>
</div>
<p><o:p> </o:p></p>
<div>
<p class="MsoNormal"><span style="font-size:12.0pt">On 03/12/2024 01:08, Michael Strauß wrote:<o:p></o:p></span></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<pre>I wish there was a simpler way to introduce variables - I think the variables might be a better solution from the stylesheet maintainability point of view, and to help with supporting light/dark, compact/roomy variants and simple things like updating the base font size. Doing a different CSS parser is definitely a much larger project than we can afford, probably. On the other hand, if it enables programmatic creation of style sheets...<o:p></o:p></pre>
</blockquote>
<pre><o:p> </o:p></pre>
<pre>Custom variables would undoubtedly be a great feature. This is<o:p></o:p></pre>
<pre>orthogonal to media queries, though: at some point, even when using<o:p></o:p></pre>
<pre>custom variables, you have to ask "the medium" about things like the<o:p></o:p></pre>
<pre>color scheme or user preferences.<o:p></o:p></pre>
</blockquote>
</div>
</div>
</div>
</div>
</body>
</html>