fix(VProgressLinear) render in forced-colors mode

fixes vuetifyjs#20111
06b · Jul 5, 2024 · e8613dd · e8613dd
1 parent 7037107
commit e8613dd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass
@@ -13,6 +13,9 @@
     &--rounded
       @include tools.rounded($progress-linear-border-radius)
 
+    @media (forced-colors: active)
+      border: thin solid buttontext
+
   // Elements
   .v-progress-linear__background,
   .v-progress-linear__buffer
@@ -25,6 +28,11 @@
     width: 100%
     transition-property: width, left, right
     transition: inherit
+
+  @media (forced-colors: active)
+    .v-progress-linear__buffer
+      background-color: highlight
+      opacity: $progress-linear-stream-opacity
 
   .v-progress-linear__content
     align-items: center
@@ -41,6 +49,9 @@
   .v-progress-linear__indeterminate
     background: $progress-linear-background
 
+    @media (forced-colors: active)
+      background-color: highlight
+
   .v-progress-linear__determinate
     height: inherit
     left: 0

diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
@@ -14,7 +14,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
 import { computed, Transition } from 'vue'
-import { clamp, convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
+import { clamp, convertToUnit, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'
 
 type VProgressLinearSlots = {
   default: { value: number, buffer: number }
@@ -98,6 +98,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
     const normalizedValue = computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100))
     const isReversed = computed(() => isRtl.value !== props.reverse)
     const transition = computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition')
+    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches
 
     function handleClick (e: MouseEvent) {
       if (!intersectionRef.value) return
@@ -165,7 +166,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
         <div
           class={[
             'v-progress-linear__background',
-            backgroundColorClasses.value,
+            !isForcedColorsModeActive ? backgroundColorClasses.value : undefined,
           ]}
           style={[
             backgroundColorStyles.value,
@@ -179,7 +180,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
         <div
           class={[
             'v-progress-linear__buffer',
-            bufferColorClasses.value,
+            !isForcedColorsModeActive ? bufferColorClasses.value : undefined,
           ]}
           style={[
             bufferColorStyles.value,
@@ -195,7 +196,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
             <div
               class={[
                 'v-progress-linear__determinate',
-                barColorClasses.value,
+                !isForcedColorsModeActive ? barColorClasses.value : undefined,
               ]}
               style={[
                 barColorStyles.value,
@@ -210,7 +211,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
                   class={[
                     'v-progress-linear__indeterminate',
                     bar,
-                    barColorClasses.value,
+                    !isForcedColorsModeActive ? barColorClasses.value : undefined,
                   ]}
                   style={ barColorStyles.value }
                 />