Quasar: Caption in QExpansionItem does not respect colors used in `header-class`

[hawkeye64]

Describe the bug
In code, create a QExpansionItem component. Add header-class with text and background colors.
Example:

        <q-expansion-item
          expand-separator
          default-opened
          group="somegroup"
          icon="fas fa-cogs"
          label="The Label"
          caption="The Caption"
          header-class="text-white bg-primary"
        >

In this case, the background is blue, the label text and icon are white, but the caption is black.

It is caused by this in quasar.styl:

    &--caption
      color rgba(0, 0, 0, .54)

Of course, someone can override this with CSS, but the expected result would be the caption would adhere to the passed color in header-class property.

[rstoenescu]

<q-expansion-item dark

[hawkeye64]

ugh, of course.

[mickey58github]

Has this really been fixed? I still get expansion items that have captions in black when labels are white, with Quasar 1.5.11.

[rstoenescu]

@mickey58github if you're asking this then something is misunderstood. pls supply a codepen

[mickey58github]

@rstoenescu - please have a look here: https://codepen.io/mickey58/pen/XWJVdoa

[hawkeye64]

@mickey58github Add property 'dark'
https://codepen.io/Hawkeye64/pen/KKwZMpa

You can do something like this to make it reactive to Dark mode:

:dark="$q.dark.isActive"

[mickey58github]

Thanks - sorry, I misunderstood that one needs to specify "dark" as a prop to get it.

It would be worth to mention in the API doc for q-expansion-item that "dark" has this intended "side-effect" on the caption color, https://quasar.dev/vue-components/expansion-item#QExpansionItem-API

[rstoenescu]

@hawkeye64 :dark="$q.dark.isActive" is implicit