feat(theme): Support alpha values in hexa theme colors

[craigrileyuk]

Resolves #19961
Resolves #10299

Description

Presently, when using hexa colors in the Vuetify themes configuration, the alpha channel values are discarded when creating CSS variables. This PR passes them through if present.

So a configuration of:

export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          surface: '#EEEEEEAA',
        },
      },
    },
  },
})

generates the variable --v-theme-surface: 238,238,238,0.66 which is compatible with the rgb CSS function. See MDN rgba() -> comma-separated values

Markup:

Follow standard Vuetify dev setup

<template>
  <v-app>
    <v-container>
      <v-text-field label="Test" variant="outlined" />
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: "Playground",
  setup() {
    return {
      //
    };
  },
};
</script>

[J-Sek]

Simply adding opacity to surface introduces side-effects. Skeleton loader lost animation, list subheaders suddenly look different because of a solid background. There are 19 more components that depend on surface and might look off.

demo

<template>
  <v-app>
	<!-- assuming `surface` was set with transparency - e.g. `#eeea` -->
    <v-container max-width="400" style="background: linear-gradient(to right, transparent, transparent 50%, #888 50%, #888);">
      <v-sheet class="pa-3">
        <v-text-field label="Test" variant="outlined" />
      </v-sheet>
      <br>

      <v-list>
        <v-list-subheader title="Subheader" />
        <v-divider />
        <v-list-item title="List item #1" />
        <v-divider />
        <v-list-item title="List item #2" />
        <v-divider />
        <v-list-item title="List item #3" />
      </v-list>
      <br>

      <v-skeleton-loader type="article" />
    </v-container>
  </v-app>
</template>

[KaelWD]

rgb(r,g,b,a) might work but rgba(r,g,b,a,a) doesn't: https://github.com/search?q=repo%3Avuetifyjs%2Fvuetify+rgba%28var+path%3A%2F%5Epackages%5C%2Fvuetify%5C%2Fsrc%5C%2F%2F&type=code

[J-Sek]

Another idea with color-mix() and variables.