fix(VSlider): correctly apply thumb-color (#21833)

fixes #21832

Author: J-Sek

packages/vuetify/src/components/VSlider/VSliderThumb.sass

@@ -18,8 +18,8 @@
     background: rgba(var(--v-theme-surface-variant), .7)
     color: rgb(var(--v-theme-on-surface-variant))
 
-    &::before
-      color: rgba(var(--v-theme-surface-variant), .7)
+    > .v-slider-thumb__label-wedge
+      background: inherit
 
   // Block
   .v-slider-thumb
@@ -78,10 +78,9 @@
     user-select: none
     transition: $slider-thumb-label-transition
 
-    &::before
-      content: ''
-      width: 0
-      height: 0
+    > .v-slider-thumb__label-wedge
+      width: $slider-thumb-label-wedge-size * 2
+      height: $slider-thumb-label-wedge-size * 2
       position: absolute
 
   .v-slider-thumb__ripple
@@ -111,10 +110,8 @@
       @include tools.rtl()
         transform: translateX(50%)
 
-      &::before
-        border-left: $slider-thumb-label-wedge-size solid transparent
-        border-right: $slider-thumb-label-wedge-size solid transparent
-        border-top: $slider-thumb-label-wedge-size solid currentColor
+      > .v-slider-thumb__label-wedge
+        clip-path: polygon(50% 100%, 0 50%, 100% 50%)
         bottom: -$slider-thumb-label-wedge-size
 
   // Vertical
@@ -130,10 +127,8 @@
       top: math.div($slider-thumb-label-height, -2)
       left: $slider-thumb-label-offset
 
-      &::before
-        border-right: $slider-thumb-label-wedge-size solid currentColor
-        border-top: $slider-thumb-label-wedge-size solid transparent
-        border-bottom: $slider-thumb-label-wedge-size solid transparent
+      > .v-slider-thumb__label-wedge
+        clip-path: polygon(0 50%, 50% 0, 50% 100%)
         left: -$slider-thumb-label-wedge-size
 
   // Modifiers

packages/vuetify/src/components/VSlider/VSliderThumb.tsx

@@ -6,7 +6,7 @@ import { VSliderSymbol } from './slider'
 import { VScaleTransition } from '../transitions'
 
 // Composables
-import { useTextColor } from '@/composables/color'
+import { useBackgroundColor, useTextColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
 import { useElevation } from '@/composables/elevation'
 import { useRtl } from '@/composables/locale'
@@ -74,6 +74,7 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
       min,
       max,
       thumbColor,
+      thumbLabelColor,
       step,
       disabled,
       thumbSize,
@@ -91,6 +92,7 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
     const elevationProps = computed(() => !disabled.value ? elevation.value : undefined)
     const { elevationClasses } = useElevation(elevationProps)
     const { textColorClasses, textColorStyles } = useTextColor(thumbColor)
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(thumbLabelColor)
 
     const { pageup, pagedown, end, home, left, right, down, up } = keyValues
     const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]
@@ -175,9 +177,7 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
               textColorClasses.value,
               elevationClasses.value,
             ]}
-            style={{
-              ...textColorStyles.value,
-            }}
+            style={ textColorStyles.value }
           />
           <div
             class={[
@@ -195,12 +195,14 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
               <div
                 class={[
                   'v-slider-thumb__label',
-                  textColorClasses.value,
+                  backgroundColorClasses.value,
                 ]}
+                style={ backgroundColorStyles.value }
               >
                 <div>
                   { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }
                 </div>
+                <div class="v-slider-thumb__label-wedge" />
               </div>
             </div>
           </VScaleTransition>

packages/vuetify/src/components/VSlider/slider.ts

@@ -43,6 +43,7 @@ type SliderProvide = {
   step: Ref<number>
   thumbSize: Ref<number>
   thumbColor: Ref<string | undefined>
+  thumbLabelColor: Ref<string | undefined>
   trackColor: Ref<string | undefined>
   trackFillColor: Ref<string | undefined>
   trackSize: Ref<number>
@@ -202,6 +203,7 @@ export const useSlider = ({
   const disabled = toRef(() => props.disabled)
 
   const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color)
+  const thumbLabelColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor)
   const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color)
   const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color)
 
@@ -368,6 +370,7 @@ export const useSlider = ({
     step,
     thumbSize,
     thumbColor,
+    thumbLabelColor,
     thumbLabel: toRef(() => props.thumbLabel),
     ticks: toRef(() => props.ticks),
     tickSize,