Change --font-weight-bold to --font-weight-semibold and 600 value, introduce new font weight variables

[silverwind]

There was some recent discussion about this in Discord ui-design channel and the conclusion was that #24305 should have fixed their OS font installation to have semibold weights.

I have now tested this 601 weight on a Windows 10 machine on Firefox myself, and I immediately noticed that bold was excessivly bold and rendering as 700 because browsers are biased towards bolder fonts. So revert this back to the previous value.

[wxiaoguang]

Comment could be left there (and be improved), then some Linux users without correct font environment could know the details, and it could save contributors time if similar issue comes.

And I think it needs to be backported?

[silverwind]

Hmm, I don't feel like commenting this, 600 is a pretty standard weight. Backport will be done, yes.

[wxiaoguang]

We have spent a lot of time on this problem.

Maybe in the future some other users would also report similar problems, then some new maintainers without this knowledge would waste time on this problem again.

[wxiaoguang]

Well, a new issue ... Bold text no longer displayed as bold #24835

[silverwind]

We have spent a lot of time on this problem.

Maybe in the future some other users would also report similar problems, then some new maintainers without this knowledge would waste time on this problem again.

What should we write into that comment? 601 was a "odd" value that caused issues and in some cases renders as 700 which we do not want from a design perspective. Multiples of 100 seem to generally work best.

For clarity, I would like to rename the variable. As per MDN:

400 | Normal
500 | Medium
600 | Semi Bold
700 | Bold

So we could make:

--font-weight-normal
--font-weight-medium
--font-weight-semibold
--font-weight-bold

That will satisfy all future use cases. I would not comment any of these, they are standard values.

[wxiaoguang]

I think the "situation" could be documented:

// "bold" can't be used because it's too bold for most cases
// some fonts (eg: Segoe UI on Linux) do not provide "bolding" for weight 600, end users should fix their font library

The key information:

1. Why not use "bold", it has been asked not just one time, I also asked similar question before, the latest question see Bold text no longer displayed as bold #24835 (comment)
2. If any user doesn't see "bold" font, that's their system's problem, not Gitea's problem.

It would save a lot of time for future developers.

[wxiaoguang]

If you wouldn't like to write comment or remove unused variable, I could do it in next PR, I won't block for nits.

[silverwind]

Will do a bit more refactor to use variables everywhere.

[silverwind]

Refactor done, now all CSS uses these variables, enforced by a linter rule, and there are tailwind-matching helper classes as well for them.

[silverwind]

Oh, and there is one more change. Issue title went from 300 to 400, which matches GH:

Before:

After:

I think we should always use weights between 400 and 600, but I have kept the 300 weights for asian fonts for now as I can not really judge those.

[belzecue]

There was some recent discussion about this in Discord ui-design channel and the conclusion was that #24305 should have fixed their OS font installation to have semibold weights.

This is correct. I am the submitter of #24305. On the still affected device (MX Linux), i just now downloaded a Linux version of Segoe-UI from here, installed it and restarted my browser, and this device is now displaying the bold/semibold text correctly.