fix(VListItem): properly display active-color when active

packages/vuetify/src/components/VAlert/VAlert.tsx

@@ -18,7 +18,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { useTextColor } from '@/composables/color'
 
 // Utilities
-import { computed, reactive, toRef } from 'vue'
+import { computed } from 'vue'
 import { defineComponent } from '@/util'
 
 // Types
@@ -94,11 +94,11 @@ export default defineComponent({
 
       return props.icon ?? `$${props.type}`
     })
-    const variantProps = reactive({
-      color: computed(() => (props.color ?? props.type)),
-      textColor: toRef(props, 'textColor'),
-      variant: toRef(props, 'variant'),
-    })
+    const variantProps = computed(() => ({
+      color: props.color ?? props.type,
+      textColor: props.textColor,
+      variant: props.variant,
+    }))
 
     const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(borderProps.value, 'v-alert')
@@ -108,7 +108,7 @@ export default defineComponent({
     const { positionClasses, positionStyles } = usePosition(props, 'v-alert')
     const { roundedClasses } = useRounded(props, 'v-alert')
     const { textColorClasses, textColorStyles } = useTextColor(computed(() => {
-      return props.borderColor ?? (props.tip ? variantProps.color : undefined)
+      return props.borderColor ?? (props.tip ? variantProps.value.color : undefined)
     }))
 
     function onCloseClick (e: MouseEvent) {

packages/vuetify/src/components/VList/VListItem.tsx

@@ -23,7 +23,7 @@ import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant
 import { Ripple } from '@/directives/ripple'
 
 // Utilities
-import { computed, reactive, toRef } from 'vue'
+import { computed } from 'vue'
 import { defineComponent } from '@/util'
 
 export default defineComponent({
@@ -61,11 +61,11 @@ export default defineComponent({
       return props.active || link.isExactActive?.value
     })
     const activeColor = props.activeColor ?? props.color
-    const variantProps = reactive({
-      color: computed(() => (isActive.value ? activeColor : props.color)),
-      textColor: toRef(props, 'textColor'),
-      variant: toRef(props, 'variant'),
-    })
+    const variantProps = computed(() => ({
+      color: isActive.value ? activeColor : props.color,
+      textColor: props.textColor,
+      variant: props.variant,
+    }))
 
     const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-list-item')

packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx

@@ -1,5 +1,6 @@
 /// <reference types="../../../../types/cypress" />
 
+import { ref } from 'vue'
 import { CenteredGrid } from '@/../cypress/templates'
 import { VListItem } from '../..'
 
@@ -20,4 +21,21 @@ describe('VListItem', () => {
     wrapper.get('.v-list-item-title').contains('foo')
     wrapper.get('.v-list-item-subtitle').contains('bar')
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/13893
+  it('should use active-color for active item', () => {
+    cy.mount({
+      setup () {
+        const model = ref<boolean>(false)
+        const onClick = () => model.value = !model.value
+
+        return () => (
+          <CenteredGrid width="200px">
+            <VListItem title="foo" subtitle="bar" active-color="success" active={model.value} onClick={onClick} />
+            <VListItem title="foo" subtitle="bar" active-color="success" active={!model.value} onClick={onClick} />
+          </CenteredGrid>
+        )
+      },
+    }).get('.v-list-item').eq(0).click().should('have.class', 'text-success')
+  })
 })

packages/vuetify/src/composables/variant.tsx

@@ -2,11 +2,12 @@
 import { useColor } from '@/composables/color'
 
 // Utilities
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { propsFactory } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
+import type { MaybeRef } from '@/util'
 
 export const allowedVariants = ['contained', 'outlined', 'plain', 'text', 'contained-text'] as const
 
@@ -38,15 +39,19 @@ export const makeVariantProps = propsFactory({
   },
 }, 'variant')
 
-export function useVariant (props: VariantProps, name: string) {
+export function useVariant (props: MaybeRef<VariantProps>, name: string) {
   const variantClasses = computed(() => {
-    return `${name}--variant-${props.variant}`
+    const { variant } = unref(props)
+    return `${name}--variant-${variant}`
   })
 
-  const { colorClasses, colorStyles } = useColor(computed(() => ({
-    text: props.textColor,
-    [props.variant === 'contained' ? 'background' : 'text']: props.color,
-  })))
+  const { colorClasses, colorStyles } = useColor(computed(() => {
+    const { textColor, variant, color } = unref(props)
+    return {
+      text: textColor,
+      [variant === 'contained' ? 'background' : 'text']: color,
+    }
+  }))
 
   return { colorClasses, colorStyles, variantClasses }
 }