fix: (CXSPA-8994) - Prevent forced colors from interfering with contr…

…ast themes (#19871)
SAP · Jan 16, 2025 · c25a38c · c25a38c
1 parent 605e54e
commit c25a38c
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 96 deletions.
diff --git a/feature-libs/cart/base/styles/components/_mini-cart.scss b/feature-libs/cart/base/styles/components/_mini-cart.scss
@@ -63,27 +63,9 @@
     }
   }
 
-  @mixin native-high-contrast-fix {
-    @media (forced-colors: active) {
-      a {
-        forced-color-adjust: none;
-        background: LinkText;
-        color: Canvas;
-
-        &:hover {
-          background: LinkText;
-          color: Canvas;
-        }
-      }
-    }
-  }
-
-  @include native-high-contrast-fix;
-
   @include cx-highContrastTheme {
     a {
       color: var(--cx-color-medium);
     }
-    @include native-high-contrast-fix;
   }
 }
diff --git a/feature-libs/pickup-in-store/styles/_pickup-options.scss b/feature-libs/pickup-in-store/styles/_pickup-options.scss
@@ -107,15 +107,6 @@
           color: var(--cx-color-text);
         }
       }
-
-      // native high contrast themes fix
-      @media (forced-colors: active) {
-        button.tab-btn.active {
-          &:after {
-            background-color: LinkText;
-          }
-        }
-      }
     }
   }
 }
diff --git a/projects/storefrontstyles/scss/components/layout/_storefront.scss b/projects/storefrontstyles/scss/components/layout/_storefront.scss
@@ -48,4 +48,13 @@
       background-color: var(--cx-color-background);
     }
   }
+
+  &.cx-theme-high-contrast-dark,
+  &.cx-theme-high-contrast-light {
+    @media (forced-colors: active) {
+      // Prevents forced colors from being applied while Spartacus contrast themes are active.
+      // This prevents interference with the contrast themes yet still allows the default one to be modified.
+      forced-color-adjust: none !important;
+    }
+  }
 }
diff --git a/projects/storefrontstyles/scss/components/product/carousel/_carousel.scss b/projects/storefrontstyles/scss/components/product/carousel/_carousel.scss
@@ -206,33 +206,6 @@
     }
   }
 
-  @mixin carousel-native-high-contrast {
-    @media (forced-colors: active) {
-      .indicators button .cx-icon {
-        forced-color-adjust: none;
-        background-color: Canvas;
-        border-color: CanvasText;
-        color: Canvas;
-      }
-
-      .indicators button[disabled] {
-        .cx-icon {
-          color: CanvasText;
-          background-color: Canvas;
-          padding: 2px;
-        }
-      }
-
-      .indicators button[aria-disabled='true'] {
-        .cx-icon {
-          color: CanvasText;
-          background-color: Canvas;
-          padding: 4px;
-        }
-      }
-    }
-  }
-
   @include cx-highContrastTheme {
     .indicators {
       button {
@@ -259,7 +232,5 @@
       background-color: var(--cx-color-dark);
       border: 3px solid var(--cx-color-dark);
     }
-
-    @include carousel-native-high-contrast;
   }
 }
diff --git a/projects/storefrontstyles/scss/components/product/list/_facet.scss b/projects/storefrontstyles/scss/components/product/list/_facet.scss
@@ -188,39 +188,4 @@ $intialExpandedFacetsLarge: 3 !default;
       }
     }
   }
-
-  @mixin native-high-contrast-fix {
-    @media (forced-colors: active) {
-      a,
-      button {
-        color: CanvasText;
-        &.value:hover {
-          color: LinkText;
-        }
-      }
-
-      &.multi-select a.value {
-        forced-color-adjust: none;
-        &:hover {
-          &:not(.selected)::before {
-            border-color: LinkText;
-          }
-        }
-        &::before {
-          border: solid 2px CanvasText;
-        }
-        &.selected::before {
-          background-color: Canvas;
-          border-color: CanvasText;
-          color: CanvasText;
-        }
-      }
-    }
-  }
-
-  @include native-high-contrast-fix;
-
-  @include cx-highContrastTheme {
-    @include native-high-contrast-fix;
-  }
 }
diff --git a/projects/storefrontstyles/scss/components/product/search/_searchbox.scss b/projects/storefrontstyles/scss/components/product/search/_searchbox.scss
@@ -939,10 +939,5 @@
         border: 1px solid var(--cx-color-text);
       }
     }
-
-    // native high contrast themes fix
-    @media (forced-colors: active) {
-      border-color: Canvas;
-    }
   }
 }