fix(styles,documentation): Improved rendering of the home page for HCM (

#2653)
swisspost · Feb 20, 2024 · 7cfb8c8 · 7cfb8c8
1 parent 401ed2d
commit 7cfb8c8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/.changeset/sixty-dots-run.md b/.changeset/sixty-dots-run.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Removed transparent background for notification in high-contrast mode.
diff --git a/.changeset/thick-dolphins-argue.md b/.changeset/thick-dolphins-argue.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Improved rendering of the home page for high-contrast mode.
diff --git a/packages/documentation/src/stories/home.styles.scss b/packages/documentation/src/stories/home.styles.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '@swisspost/design-system-styles/core.scss' as post;
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 .bg-fullwidth {
   position: relative;
@@ -48,6 +49,10 @@ $tile-rg-size: 100px;
   box-shadow: 0 2px 5px 0 rgba(post.$aubergine-dark, 0.3);
   text-decoration: none;
 
+  @include utilities.high-contrast-mode() {
+    border: 2px solid transparent;
+  }
+
   .tile--title {
     display: flex;
     justify-content: center;

diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
@@ -72,8 +72,7 @@
 
   @include utilities-mx.high-contrast-mode {
     filter: none !important;
-    background-color: transparent !important;
-    border: 2px solid WindowText;
+    border: 2px solid CanvasText;
   }
 }