List Item caption color doesn't follow container color

[adam-iris]

What happened?

A q-item-label with caption attribute use a fixed text color, which may not match the text color of other parts of the q-item.

What did you expect to happen?

The caption element uses the same (or similar) text color as other elements of the item.

Reproduction URL

https://codepen.io/adam-earthscope/pen/pvgWpLe

How to reproduce?

1. Go to the provided reproduction link
2. There are two list items, one of which is active and styled using active-class
3. The caption on the active item is dark on a dark background, despite the item using text-white to use light text elsewhere

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Relevant log output

Additional context

I believe there's a similar issue with the side label in dark mode, visible in the docs at:
https://quasar.dev/vue-components/list-and-list-items#active-state
(the bottom item)

[IceIsFrozen]

Referencing your codepen reproduction, the caption for me on the active item is white as intended. Also if I change the active-class to let's say text-orange, the caption becomes orange too. Tried this both in Chrome and Firefox.

Now if I ignore the color situation and focus on what I think is happening, you're fighting with opacity which is changing your white. If not, perhaps provide a screenshot for further clarity of what you're seeing.

[adam-iris]

Shoot, I screwed up the codepen -- it included my attempt at addressing this issue, which was to add a CSS rule:

.q-item__label--caption {
  color: inherit;
  opacity: 0.54;
}

This inherits the text color and adds an opacity setting to match the existing color. However, this opacity applies to everything, not just the text.

I reverted the codepen and it now shows the issue. For clarity I'm also attaching a screenshot.

[adam-iris]

Also attaching a screenshot of the example in the docs. (The "Side" label is white on teal.)

[IceIsFrozen]

Ohh okay in that case I see what you mean now. I'm guessing this is intended for the quasar default style since this can be overridden by simple CSS rules. Not sure though so will need to wait for a maintainer to clarify.