Avoid hard-coded (text) colors

[tvkit]

Is your feature request related to a problem? Please describe.
Unable to uniformly change text color in default "light" theme

Describe the solution you'd like
Use css vars instead of hard-coded color values within all Quasar components

Describe alternatives you've considered
Currently setting preferred color locally via class/style attributes

Additional context
Generally, the documented .body--light class is working well

.body--light {
  color: var(--light-text);
  background-color: var(--light-background);
}

Here's an example of a hard-coded text color within the QTable component

quasar/ui/src/components/table/QTable.sass

Line 39 in e45f30a

color: #000

[rstoenescu]

Hi,

Those are the "default" colors, cause we actually need some colors, whatever they may be. When Dark mode is applied, it has some other default ones to match it.

However, when other colors are needed or customizing like you do, the developers should use class/style attributes and apply their necessary classes/style.

When it comes to "why don't we use .body--light/dark selectors" for these colors, then the answer is simple. If we use a more complex selector (.body--light .q-table__card) then it's harder to override the colors (you need an equivalent CSS rule instead of directly targeting .q-table__card). Furthermore, "bg-" and "text-" will stop working because their selectors are less specific than the .body--light ... ones.