CSS best practice: don't hard code font-weights

Development
1

Good morning!

Context

When discussing @tkrieck 's proposal, I noticed that our CSS codestyle didn’t say to not hardcode values in CSS, but just: don't hard code colors in properties - use ColorTheme variables (use the up to date Flamingo ColoTheme variables). In my opinion, our policy should be a bit larger than that.

Proposal

A. Replace the CSS best practice on https://dev.xwiki.org/xwiki/bin/view/Community/CodeStyle/XhtmlCssCodeStyle/#HCSS

don’t hard code colors in properties - use ColorTheme variables (use the up to date Flamingo ColorTheme variables)

with an updated best practice:

Some properties must not be hardcoded. Instead they must use ColorTheme variables (use the up to date Flamingo ColorTheme variables). Those properties are:

  • Colors
  • Font weights

AND
B. Add three LESS variables to the Flamingo ColorTheme: @font-weight-regular, @font-weight-semibold and @font-weight-bold.

Conclusion

Here’s my +1 for these changes.

Do you agree with this proposal?

Lucas C.

2

Why LESS variables? Wouldn’t it make more sense to use CSS variables (only) for any new properties we introduce?

+1 for the proposal in general. Thank you!

3

+1 for the proposal
Also +1 to move from less variables to CSS variables (but that’s another proposal).

4

For consistency with our current system. All of the other colorTheme variables are LESS. Both types of variables are not transposable unfortunately so I’d rather keep things consistent.

:+1:
It’s a broader discussion and moving from LESS to CSS variables comes with complications. None of the LESS utility functions work with CSS variables so we’d break a lot of user SSX if we switched without a proper migration or at least keeping a LESS fallback (which would come at a performance cost).

5

Hey Lucas!

+1 on both the proposal and eventually moving our properties to CSS ones (even if this is not done right now).

One resource that I really liked is Shoelace’s definitions, you can see the typography section starting on line 374.

1 Like
6

@CharpentierLucas what’s the status on this proposal? :slight_smile: Thx!

7

Thanks for the reminder.
The proposal only received positive opinions, so I updated our best practices as described.
Just started a PR with the changes at Misc: Font weight variables by Sereza7 · Pull Request #3873 · xwiki/xwiki-platform · GitHub .

Closing the discussion as it’s mostly resolved.