feat(variants): support custom background colors for btn and chip

[BaptisteCoua]

Description

This PR adds support for custom background colors in the variant system "tonal" of v-btn and v-chip components. Users can now specify a background color directly via the variant prop, enabling more flexible and dynamic styling.

Motivation

Previously, customizing the background color of buttons and chips required manual CSS overrides or custom classes. This feature simplifies the process by integrating background color support natively into the variant system, making it consistent with Vuetify's design principles.

Implementation Details

• Added a new backgroundColor property to the variant configuration for v-btn and v-chip.
• Updated the variant system to apply the specified background color dynamically.
• Ensured backward compatibility with existing variants.

Testing

• Tested with various color formats (hex, rgb, named colors).
• Verified compatibility with existing themes and variants.
• Confirmed no regression in existing functionality.

Example Usage

<template>
  <v-btn bg-color="primary" color="blue">Button</v-btn>
  <v-chip variant="tonal" bg-color="seconday" color="red">Chip</v-chip>
</template>

[J-Sek]

Could you share some design or real-life problem that this change is going to solve?
Also I don't think it is "consistent with Vuetify's design principles". Rather it gives devs an easy way to override tonal.

Did you consider having regular variants, where you can easily override text color (e.g. color="blue" class="text-red") supplemented by a custom bg-opacity-tonal that sets background opacity to .12 scratch this, you'd need classes with color opacity baked in. demo

[BaptisteCoua]

indeed you are right, I will rather do with exemple : bg-primary or bg-warning, in my class. Do u think it's better way than create class bg-blue-tonal ?

[J-Sek]

Sorry, I don't understand the question.