Q-chip text-color not working on outline option

[Zorin95670]

trafficstars

What happened?

On this example, present on https://quasar.dev/vue-components/chip#example--outline:

<q-chip outline square color="deep-orange" text-color="white" icon="directions">
      Get directions
</q-chip>

We specify the text-color to white but it still deep-orange

What did you expect to happen?

The text have to be white as specify in attribute.

Reproduction URL

https://quasar.dev/vue-components/chip#example--outline

How to reproduce?

Look at the Outline example, the bug is present :)

Flavour

Vue CLI Plugin (vue-cli-plugin-quasar)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System        Linux(5.15.0-70-generic) - linux/x64
NodeJs                  18.16.0

Global packages
  NPM                   8.19.3
  yarn                  Not installed
  @quasar/cli           1.3.2
  @quasar/icongenie     Not installed
  cordova               Not installed

Networking
  Host                  vmoittie-ThinkStation-P340-Tiny
  eno2                  192.168.1.13

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @Zorin95670! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[SilvanFux]

use this as valid reproduction URL: https://codepen.io/pen?&editors=101&prefill_data_id=0a1b95b8-b4e0-441c-978e-b8cea0765322

[pdanpdan]

I cannot open it - can you?

[SilvanFux]

Sorry just find out that the "edit in codepen" liks are dynamicly generated with the template instread of a static link. Here is my fork: https://codepen.io/Silinator/pen/GRzYpgM

[pdanpdan]

Yes, for outlined there is only one color used (color if provided, else text-color). The question is what would you expect/want to colors to do:

• what prop for text
• what prop for outline
• what prop for bg
• how should the colors fall back when one is missing

[SilvanFux]

I would expect the following (would also expect this from the outline button):

• color for the outline because it's the button color
• text-color for the text color
• bg color should be stay at transparent by default
• when text-color is missing the color prop value should be used.

the bg color can be set like this by default:

.q-chip--outline {
	background: unset;
	...
}

without !important. so it overwrites the .q-chip background but also can be overwritten by own styles.