PF cleanup: remove hardcoded CSS values

[nicolethoen]

In custom CSS files, colors should never be hardcoded (some examples of non-recommended practices are here and here.

Alternatively, it'd be better to use PF semantic tokens (this will keep the styles dark theme compatible).
I am absolutely happy to help you find the correct semantic tokens. They all live in this css file. Any by default, a semantic token is one with NO number at the end of the token name.

i.e. --pf-t--global--color--brand--100 is NOT a semantic token and should not be used.
Instead --pf-t--global--color--brand--default is a semantic token and would be better to use when trying to use the brand color.

Some semantic tokens I think you'll use often based on looking at your code:

• instead of white for a background color use var(--pf-t--global--background--color--primary--default)
• instead of white for an inverse text color, use var(--pf-t--global--text--color--inverse)
• instead of black for an inverse background color, use var(--pf-t--global--background--color--inverse--default)
• instead of red for a text color, use var(--pf-t--global--text--color--required)

It's also easy to identify code that is overriding the PF API's colors incorrectly is to add class="pf-v6-theme-dark" to the html or root element. Anything that does not flip to dark mode correctly is something to investigate.

[aalemayhu]

Is this still relevant? I would love to take a look at this to get familiar with the code base. I see there are several pull requests open and not sure if anyone else has started on it.