From 7cfb8c83cf408aaa8bce092c956346d069a76747 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 20 Feb 2024 09:30:06 +0100
Subject: [PATCH] fix(styles,documentation): Improved rendering of the home
 page for HCM (#2653)

---
 .changeset/sixty-dots-run.md                        | 5 +++++
 .changeset/thick-dolphins-argue.md                  | 5 +++++
 packages/documentation/src/stories/home.styles.scss | 5 +++++
 packages/styles/src/mixins/_notification.scss       | 3 +--
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/sixty-dots-run.md
 create mode 100644 .changeset/thick-dolphins-argue.md

diff --git a/.changeset/sixty-dots-run.md b/.changeset/sixty-dots-run.md
new file mode 100644
index 0000000000..c3020795f6
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..d73b43c221
--- /dev/null
+++ 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
index 0e760dd441..c253526a9e 100644
--- 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
index a19c69ffc0..c861a4509b 100644
--- 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;
   }
 }