FLUID-6754: add system-ui font option to UIO

[jobara]

Adds the system-ui font to UIO

https://issues.fluidproject.org/browse/FLUID-6754

[jobara]

@cindyli, @amb26: I've left this as a draft because we need to get the option name translated. Before we do that, want to make sure you're happy with the changes and calling the option "System Font".

[cindyli]

This PR looks good to me. "System font" is also the best name I can come up with. Let's see what @amb26 thinks. He's much better at naming.

[jobara]

We had a good discussion about naming today. The suggestion is to change "System Font" to "Device Font" as it is more understandable and descriptive about where that font is originating from. Another point raised is that "Default" is now ambiguous, we've landed on changing the name to "No Preference" to indicate that it isn't based on a font that is being applied by UIO. We should also change the "default" option in contrast to be called "No Preference".

[amb26]

To avoid confusing ourselves in future, should we rename all these uses of "system" to "device" also?

[jobara]

Good question. The actual generic font-family is called system-ui. So the right hand side can't be changed. We could change the name of the class to device if that's preferred. I'm fine either way, I guess we need to decide if we want the class name to reflect the font family or the name exposed via the adjuster.

[jobara]

@amb26 and @cindyli we have the translations in place now. Ready for more review.

[cindyli]

The translation should be in Farsi instead of English.

The same comment applies to translation of "No Preferences" in contrast_fr.json, contrast_pt_BR.json.

[jobara]

Thanks for catching this. I had forgotten that those files were updated as well. Interesting thing I had missed before is that the localization preferences already used "No Preference" instead of "Default".

[cindyli]

Steps to produce an issue using the code in this pull request:

1. Use a browser to open examples/framework/preferences/localizationPreference/urlPath/fa/. Note that the languauge is set to Farsi;
2. Open another browser tab to open demos/prefsFramework/;
3. Open UIO, locate "text style" panel, open its drop down, choices are

Note that "No preference" and "device font" are translated to Farsi but not other choices. Shall all choices be translated to Farsi?

This issue happens for all language translations.

[jobara]

Note that "No preference" and "device font" are translated to Farsi but not other choices. Shall all choices be translated to Farsi?

This issue happens for all language translations.

I believe in this case it is the correct behaviour. When we originally sent these off for translation they were sent the whole file, and those font names weren't translated. I believe it's because they are proper names so there isn't a translation, and/or they are more commonly known in their English name.

[jobara]

@amb26 did you have more thoughts on this PR? Should we talk more about the naming changes you were asking about before?