Adopt Stylelint rules to prevent manual overrides of colors and fonts #11693
Description
As we grow our app and team it becomes more difficult to ensure design consistency within the app.
It's crucial that we use the same colors, fonts and font sizes for things with the same semantic. For example, when something resembles code (also applies to a search query etc), it should use the <code> element or .code class, which has a monoface font. If it is not code, it should not manually override the font to be monospace.
Similarly, the colors of e.g. borders, focused elements, links etc should be consistent in the app and set with global styles and predefined variables. Individual components should not set them with hard-coded color overrides, as we can't easily update them and make sure the same semantic elements share the same colors. We already have variables for these defined, but we don't enforce they are used.
We should slowly replace all existing uses of hardcoded fonts, font sizes and colors, then adapt a rule like https://github.com/sh-waqar/stylelint-declaration-use-variable to enforce no hardcoded values for these.
cc @rrhyne