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

packages/vuetify/src/components/VBtn/VBtn.tsx

@@ -137,9 +137,15 @@ export const VBtn = genericComponent<VBtnSlots>()({
       return ({
         color: showColor ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant,
+        bgColor: props.bgColor,
       })
     })
-    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses,
+      backgroundColorClasses,
+      backgroundColorStyles, } = useVariant(variantProps)
 
     const isDisabled = computed(() => group?.disabled.value || props.disabled)
     const isElevated = toRef(() => {
@@ -209,6 +215,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
             themeClasses.value,
             borderClasses.value,
             colorClasses.value,
+            backgroundColorClasses.value,
             densityClasses.value,
             elevationClasses.value,
             loaderClasses.value,

packages/vuetify/src/components/VChip/VChip.tsx

@@ -168,11 +168,18 @@ export const VChip = genericComponent<VChipSlots>()({
       }
     })
 
-    const { colorClasses, colorStyles, variantClasses } = useVariant(() => {
+    const { 
+      colorClasses,
+      colorStyles,
+      backgroundColorClasses,
+      backgroundColorStyles,
+      variantClasses 
+    } = useVariant(() => {
       const showColor = !group || group.isSelected.value
       return ({
         color: showColor ? props.color ?? props.baseColor : props.baseColor,
         variant: props.variant,
+        bgColor: showColor ? props.bgColor : undefined,
       })
     })
 
@@ -217,6 +224,7 @@ export const VChip = genericComponent<VChipSlots>()({
             themeClasses.value,
             borderClasses.value,
             colorClasses.value,
+            backgroundColorClasses.value,
             densityClasses.value,
             elevationClasses.value,
             roundedClasses.value,

packages/vuetify/src/composables/variant.tsx

@@ -1,5 +1,5 @@
 // Composables
-import { useColor } from '@/composables/color'
+import { useBackgroundColor, useColor } from '@/composables/color'
 
 // Utilities
 import { toRef, toValue } from 'vue'
@@ -22,6 +22,7 @@ export type Variant = typeof allowedVariants[number]
 export interface VariantProps {
   color?: string
   variant: Variant
+  bgColor?: string
 }
 
 export function genOverlays (isClickable: boolean, name: string) {
@@ -41,23 +42,26 @@ export const makeVariantProps = propsFactory({
     default: 'elevated',
     validator: (v: any) => allowedVariants.includes(v),
   },
+  bgColor: String,
 }, 'variant')
 
 export function useVariant (
   props: MaybeRefOrGetter<VariantProps>,
   name = getCurrentInstanceName(),
 ) {
+  const {variant, color, bgColor} = toValue(props)
+
   const variantClasses = toRef(() => {
-    const { variant } = toValue(props)
     return `${name}--variant-${variant}`
   })
 
   const { colorClasses, colorStyles } = useColor(() => {
-    const { variant, color } = toValue(props)
     return {
-      [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color,
+      [['elevated'].includes(variant) ? 'background' : 'text']: color,
     }
   })
 
-  return { colorClasses, colorStyles, variantClasses }
+  const {backgroundColorClasses, backgroundColorStyles} = useBackgroundColor(bgColor)
+
+  return { colorClasses, colorStyles, backgroundColorClasses, backgroundColorStyles, variantClasses }
 }