That's an interesting approach, however I think that the readability suffers greatly.
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. --John On 03/12/2024 17:08, Andy Goryachev wrote: > > My approach is to create a single stylesheet, see for example > > > > https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/mp3player/Styles.java > > > > and this little guy allows to (re-)regenerate and (re-)load the > stylesheet dynamically > > > > https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/fx/internal/CssLoader.java > > > > 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. > > > > -andy > > > > > > > > *From: *openjfx-dev <openjfx-dev-r...@openjdk.org> on behalf of John > Hendrikx <john.hendr...@gmail.com> > *Date: *Tuesday, December 3, 2024 at 03:17 > *To: *openjfx-dev@openjdk.org <openjfx-dev@openjdk.org> > *Subject: *Less in FX (was Re: CSS Media Queries) > > I've been using LESS for ages in combination with FX. I adapted this > project: https://github.com/i-net-software/jlessc > > In FX I use it with this helper class: > > https://github.com/hjohn/MediaSystem-v2/blob/master/mediasystem-runner/src/main/java/hs/mediasystem/runner/util/LessLoader.java > > Then to use a stylesheet with a control, you do something like this: > > *final*String CLOCK_STYLES_URL= > LessLoader./compile/(RootNodeFactory.*class*, "clock-pane.less") > > Where "RootNodeFactory.class" is just a reference class as my .less > files are located in the same package as the controls. > > The resulting URL can then simply be set on a control or scene: > > clockPane.getStylesheets().add(CLOCK_STYLES_URL); > > This allows me to use all kinds of handy features from LESS. Here is > the clock-pane.less file for example: > > @import"hs/mediasystem/runner/properties.less"; > > .clock-pane > > { > > -fx-alignment: bottom-right; > > _-__fx__-__padding_: 5; > > .clock-box > > { > > _-__fx__-__padding_: 515515; > > -fx-alignment: center; > > .clock > > { > > .style-p1-extra-light; > > } > > .date > > { > > .style-p3; > > } > > } > > } > > 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: > > @tinted-glass: fade(@theme-primary, 60%); > > @glass-color: rgba(0, 0, 0, 0.6); > > @shape-disc: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 > 248-248S393 8 256 8z"; > > @text-primary: lighten(@theme-primary, 5%, relative); > > I'm probably only scratching the surface of what you can do with LESS, > as I'm hardly a CSS designer :) > > The LessLoader class I wrote has one more handy feature; it allows > suffixes on your CSS files to allow for > > customization per platform. I use this to select appropriate fonts per > platform (as their names can > > vary apparently!). See here the Windows file. The Linux variant has > slightly different font family names > > but map to the same LESS variables so I don't need to fix this > everywhere. > > /* > > * The Noto Sans font supports many variations. To get the correct > variation > > * in JavaFX, select them as follows: > > * > > * - Black = Noto Sans Blk > > * - Bold = Noto Sans + font-weight: bold > > * - Semi Bold = Noto Sans SemBd > > * - Medium = Noto Sans Med > > * - Regular = Noto Sans + font-weight: normal > > * - Light = Noto Sans Light > > * > > * Note that these names are for Windows. Other platforms can use > > * slightly different names. > > */ > > .light{ > > _-__fx__-__font-family_: "Noto Sans Light"; > > _-__fx__-__font-weight_: normal; > > } > > .regular{ > > _-__fx__-__font-family_: "Noto Sans"; > > _-__fx__-__font-weight_: normal; > > } > > .medium{ > > _-__fx__-__font-family_: "Noto Sans Med"; > > _-__fx__-__font-weight_: bold; > > } > > .semi-bold{ > > _-__fx__-__font-family_: "Noto Sans SemBd"; > > _-__fx__-__font-weight_: bold; > > } > > .bold{ > > _-__fx__-__font-family_: "Noto Sans"; > > _-__fx__-__font-weight_: bold; > > } > > .black{ > > _-__fx__-__font-family_: "Noto Sans Blk"; > > _-__fx__-__font-weight_: bold; > > } > > --John > > > > On 03/12/2024 01:08, Michael Strauß wrote: > > 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... > > > > Custom variables would undoubtedly be a great feature. This is > > orthogonal to media queries, though: at some point, even when using > > custom variables, you have to ask "the medium" about things like the > > color scheme or user preferences. >
