[Bug Report][3.6.8] Custom colors transparency/opacity is ignored

simionato-mobisec commented 2 months ago

Environment

Vuetify Version: 3.6.8 Vue Version: 3.4.27 Browsers: Firefox 126.0 OS: Ubuntu undefined

Steps to reproduce

Create a custom theme.
Create a color named "test" with a value of "#ff000014".
Change VTextField defaults and set its color prop to "test".

Expected Behavior

The focused text field should have a transparent red color.

Actual Behavior

The focused text field has a red color, transparency is ignored.

Reproduction Link

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

walter-0 commented 2 months ago

Haven't confirmed yet, but I think this line is the culprit:

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/theme.ts#L418

function genCssVariables (theme: InternalThemeDefinition) {
// ...
  for (const [key, value] of Object.entries(theme.colors)) {
    const rgb = parseColor(value)
    variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`) // this line is not using the alpha value
    if (!key.startsWith('on-')) {
      variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`)
    }
  }
// ...
}

From doing a little bit of testing, parseColor() calls HexToRGB() which appears to be correctly converting to rgba but the value rgb.a is not being used in the string.

Should L418 be updated to this?

variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b},${rgb.a}`)

davior commented 1 month ago

Haven't confirmed yet, but I think this line is the culprit:

I am glad you opened this request as I too was about to ask the same thing (as I am fond of using transparency in my templates).

I thin what you have suggested is correct in the first instance but there are many places where the alpha component of colors declared in the theme (even after the method you found) are being ignored. For example the CSS styles being generated, prefixed with --v-theme-... such as --v-theme-primary in the method you mentioned, are passed directly into CSS attributes like in the following example:

background-color: rgb(var(--v-theme-primary));

Due to the declaration of the color being rgb( and not rgba( the alpha component will be stripped from the color declared in the theme even if we made the changes you suggested.

Based on this it appears that the overall update would require updates in at least 500 places throughout the project based on a global search for the syntax rgb(var(--v-theme. These would need to be updated to rgba(var(--v-theme.

I'd be happy to open a pull request to try this out if no-one has any objections...

vuetifyjs / vuetify