From d03486530606d195d60d7d3502e8da11abb6bc17 Mon Sep 17 00:00:00 2001 From: "Adrian D. Alvarez" Date: Fri, 26 Apr 2024 15:58:41 -0400 Subject: [PATCH 1/5] fix(VSwitch): render in forced-colors mode fixes #19702 --- .../src/components/VSwitch/VSwitch.sass | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass index 394a83d2387..7de1ee70d49 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.sass +++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass @@ -133,3 +133,58 @@ .v-selection-control__wrapper transform: $switch-thumb-vertical-transform + +@media (forced-colors: active) + .v-switch + .v-switch__loader + .v-progress-circular + color: currentColor + + .v-switch__thumb + background-color: buttontext + + .v-switch__track, + .v-switch__thumb + border: 1px solid + color: buttontext + + &:not(.v-switch--loading):not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__thumb + background-color: highlight !important + + &:not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__track + background-color: highlight !important + + .v-switch__track, + .v-switch__thumb + color: highlight !important + + &.v-switch--inset + .v-switch__track + border-width: 2px + + &:not(.v-switch--loading):not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__thumb + background-color: highlighttext !important + color: highlighttext !important + + &.v-input--disabled + .v-switch__thumb + background-color: graytext + + .v-switch__track, + .v-switch__thumb + color: graytext + + &.v-switch--loading + .v-switch__thumb + background-color: canvas + + &.v-switch--inset, + &.v-switch--indeterminate + .v-switch__thumb + border-width: 0 \ No newline at end of file From 0ea2996788ec6f4bc06b703c3896d431ef0dc7ce Mon Sep 17 00:00:00 2001 From: "Adrian D. Alvarez" Date: Tue, 7 May 2024 18:25:29 -0400 Subject: [PATCH 2/5] refactor(VSwitch): Reduce !important counts but account for color prop --- .../src/components/VSwitch/VSwitch.sass | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass index 7de1ee70d49..efe11057705 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.sass +++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass @@ -151,16 +151,25 @@ &:not(.v-switch--loading):not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb - background-color: highlight !important + background-color: highlight + + &[class*='bg-'] + background-color: highlight !important &:not(.v-input--disabled) .v-selection-control--dirty .v-switch__track - background-color: highlight !important + background-color: highlight + + &[class*='bg-'] + background-color: highlight !important .v-switch__track, .v-switch__thumb - color: highlight !important + color: highlight + + &[class*='bg-'] + color: highlight !important &.v-switch--inset .v-switch__track @@ -169,8 +178,8 @@ &:not(.v-switch--loading):not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb - background-color: highlighttext !important - color: highlighttext !important + background-color: highlighttext + color: highlighttext &.v-input--disabled .v-switch__thumb From a38b9c461b61e0c4ad1cd93b5a34dbc2e07da04f Mon Sep 17 00:00:00 2001 From: "Adrian D. Alvarez" Date: Wed, 8 May 2024 17:35:33 -0400 Subject: [PATCH 3/5] refactor(VSwitch): Apply color when not in forced-colors mode --- packages/vuetify/src/components/VSwitch/VSwitch.sass | 9 --------- packages/vuetify/src/components/VSwitch/VSwitch.tsx | 5 +++-- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass index efe11057705..08012bed1cf 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.sass +++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass @@ -153,24 +153,15 @@ .v-switch__thumb background-color: highlight - &[class*='bg-'] - background-color: highlight !important - &:not(.v-input--disabled) .v-selection-control--dirty .v-switch__track background-color: highlight - &[class*='bg-'] - background-color: highlight !important - .v-switch__track, .v-switch__thumb color: highlight - &[class*='bg-'] - color: highlight !important - &.v-switch--inset .v-switch__track border-width: 2px diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx index 5e72e86a3b4..66df2a87e59 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx +++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx @@ -79,6 +79,7 @@ export const VSwitch = genericComponent( const { loaderClasses } = useLoader(props) const { isFocused, focus, blur } = useFocus(props) const control = ref() + const isForcedColorsModeActive = matchMedia('(forced-colors: active)').matches const loaderColor = computed(() => { return typeof props.loading === 'string' && props.loading !== '' @@ -158,7 +159,7 @@ export const VSwitch = genericComponent(
( class={[ 'v-switch__thumb', { 'v-switch__thumb--filled': icon || props.loading }, - props.inset ? undefined : backgroundColorClasses.value, + props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value, ]} style={ props.inset ? undefined : backgroundColorStyles.value } > From 33ac690a48ecd0fe2cd87e70840b7ea2af6b6483 Mon Sep 17 00:00:00 2001 From: "Adrian D. Alvarez" Date: Thu, 9 May 2024 16:31:38 -0400 Subject: [PATCH 4/5] refactor(VSwitch): IN_BROWSER & window.matchMedia check --- packages/vuetify/src/components/VSwitch/VSwitch.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx index 66df2a87e59..7a4e20cdf78 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx +++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx @@ -16,7 +16,7 @@ import { useProxiedModel } from '@/composables/proxiedModel' // Utilities import { computed, ref } from 'vue' -import { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util' +import { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from '@/util' // Types import type { ComputedRef, Ref } from 'vue' @@ -79,7 +79,7 @@ export const VSwitch = genericComponent( const { loaderClasses } = useLoader(props) const { isFocused, focus, blur } = useFocus(props) const control = ref() - const isForcedColorsModeActive = matchMedia('(forced-colors: active)').matches + const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches const loaderColor = computed(() => { return typeof props.loading === 'string' && props.loading !== '' From 70c7ae7fbdfe8a64f3c8392e181ebf6a87ce4232 Mon Sep 17 00:00:00 2001 From: "Adrian D. Alvarez" Date: Fri, 10 May 2024 18:52:25 -0400 Subject: [PATCH 5/5] refactor(VSwitch): remove spread from backgroundColorClasses --- packages/vuetify/src/components/VSwitch/VSwitch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx index 7a4e20cdf78..ec2abafda44 100644 --- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx +++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx @@ -159,7 +159,7 @@ export const VSwitch = genericComponent(