<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>That's an interesting approach, however I think that the
readability suffers greatly. </p>
<p>Also, I'd like to give users the opportunity to modify
stylesheets in a convenient way (ie. modifying one of the base
colors or base fonts) so I package them separately; stylesheets
are something that most users understand or can be told to modify
in a certain way easily enough.</p>
<p>--John<br>
</p>
<div class="moz-cite-prefix">On 03/12/2024 17:08, Andy Goryachev
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:BYAPR10MB30139449119784403DCC0948E5362@BYAPR10MB3013.namprd10.prod.outlook.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator"
content="Microsoft Word 15 (filtered medium)">
<style>@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;}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;}div.WordSection1
{page:WordSection1;}</style>
<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"
moz-do-not-send="true" class="moz-txt-link-freetext">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"
moz-do-not-send="true" class="moz-txt-link-freetext">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
<a class="moz-txt-link-rfc2396E" href="mailto:openjfx-dev-retn@openjdk.org"><openjfx-dev-retn@openjdk.org></a> on behalf of
John Hendrikx <a class="moz-txt-link-rfc2396E" href="mailto:john.hendrikx@gmail.com"><john.hendrikx@gmail.com></a><br>
<b>Date: </b>Tuesday, December 3, 2024 at 03:17<br>
<b>To: </b><a class="moz-txt-link-abbreviated" href="mailto:openjfx-dev@openjdk.org">openjfx-dev@openjdk.org</a>
<a class="moz-txt-link-rfc2396E" href="mailto:openjfx-dev@openjdk.org"><openjfx-dev@openjdk.org></a><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"
moz-do-not-send="true" class="moz-txt-link-freetext">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"
moz-do-not-send="true" class="moz-txt-link-freetext">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>
</blockquote>
</body>
</html>