fix: (CXSPA-8771) HCT Windows adjustments

* closes https://jira.tools.sap/browse/CXSPA-8771
SAP · Nov 5, 2024 · d2d7e5a · d2d7e5a
1 parent aa02ff8
commit d2d7e5a
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 3 deletions.
diff --git a/feature-libs/cart/base/styles/components/_item-counter.scss b/feature-libs/cart/base/styles/components/_item-counter.scss
@@ -92,7 +92,7 @@
     }
 
     @include forFeature('a11yImproveContrast') {
-      font-size: var(--cx-font-size, 2rem);
+      font-size: var(--cx-font-size, 1.7rem);
       line-height: 0;
       color: var(--cx-color-text);
       padding-inline-start: 0;

diff --git a/feature-libs/cart/base/styles/components/_mini-cart.scss b/feature-libs/cart/base/styles/components/_mini-cart.scss
@@ -51,9 +51,27 @@
     }
   }
 
-  @include cx-highContrastTheme-dark {
+  @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/projects/storefrontstyles/scss/components/content/navigation/_navigation-ui.scss b/projects/storefrontstyles/scss/components/content/navigation/_navigation-ui.scss
@@ -477,7 +477,7 @@
       color: var(--cx-color-text);
       background-color: var(--cx-color-background);
       nav ul li > cx-generic-link + button {
-        border-inline-start: 1px solid var(--cx-color-background);
+        border-style: none;
       }
       button:hover {
         outline-color: var(--cx-color-dark);

diff --git a/projects/storefrontstyles/scss/components/product/carousel/_carousel.scss b/projects/storefrontstyles/scss/components/product/carousel/_carousel.scss
@@ -202,6 +202,33 @@
     }
   }
 
+  @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 {
@@ -216,5 +243,7 @@
     .indicators button .cx-icon {
       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
@@ -183,4 +183,39 @@ $intialExpandedFacetsLarge: 3 !default;
       color: var(--cx-color-inverse);
     }
   }
+
+  @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/cxbase/blocks/buttons.scss b/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss
@@ -176,6 +176,7 @@ button {
     text-decoration: underline;
     cursor: pointer;
     display: inline-block;
+    border-style: none;
 
     &:focus {
       border-radius: 4px;