search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.64k stars 6.95k forks source link

[Bug Report][3.7.0] v-text-field label color should be theme-on-background by default #20392

Open Maxim-Mazurok opened 2 weeks ago

Maxim-Mazurok commented 2 weeks ago

Environment

Vuetify Version: 3.7.0 Vue Version: 3.4.38 Browsers: Chrome 127.0.0.0 OS: Windows 10

Steps to reproduce

Open repro

Expected Behavior

Both Label - default and Label - bg-white should be the same colour. rgba(var(--v-theme-on-background)) seems the most appropriate.

Actual Behavior

Label - default uses color from v-application, which is this: $application-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default; So it adds high-emphasis-opacity to it, which is 0.87. On top of that, .v-label also has opacity: var(--v-medium-emphasis-opacity); So I think that high-emphasis-opacity is not needed in this case, and label shouldn't be using v-application color. Otherwise we'd have to add bg-white to all elements, or alter v-application color in theme which will affect regular text.

Reproduction Link

https://play.vuetifyjs.com/#...

b-maslennikov commented 2 weeks ago

use bg-color prop play.vuetify.com

Maxim-Mazurok commented 2 weeks ago

Thanks, @b-maslennikov, that works, but the core issue is that the label text color shouldn't be as transparent by default. I have checked MUI and https://github.com/material-components/material-web, both have opacity of the label set to 0.6 with black color. But in Vuetify we get 0.6 opacity of color (alpha channel) plus 0.87 opacity of the element on top of that. Does this make sense?