chore:(components): header hcm

swisspost · Dec 13, 2024 · 23c7e3d · 23c7e3d
1 parent 8d4a5aa
commit 23c7e3d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 7 deletions.
diff --git a/packages/components/src/components/post-closebutton/post-closebutton.scss b/packages/components/src/components/post-closebutton/post-closebutton.scss
@@ -0,0 +1,7 @@
+@use '@swisspost/design-system-styles/mixins/utilities';
+
+post-closebutton button post-icon {
+  @include utilities.high-contrast-mode() {
+    color: LinkText !important;
+  }
+}
diff --git a/packages/components/src/components/post-language-option/post-language-option.scss b/packages/components/src/components/post-language-option/post-language-option.scss
@@ -1,8 +1,12 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 :host {
   display: inline-block;
   width: fit-content;
+  @include utilities.high-contrast-mode() {
+    color: LinkText;
+  }
 }
 
 button {
@@ -34,6 +38,9 @@ a {
   &[aria-current='page'] {
     background-color: #050400;
     color: #fff;
+    @include utilities.high-contrast-mode() {
+      background-color: SelectedItem;
+    }
   }
 }
 
@@ -45,6 +52,10 @@ a {
 
   &[aria-current='true'],
   &[aria-current='page'] {
+    @include utilities.high-contrast-mode() {
+      background-color: SelectedItem;
+    }
+
     &::after {
       content: '';
       left: -2px;

diff --git a/packages/components/src/components/post-language-switch/post-language-switch.scss b/packages/components/src/components/post-language-switch/post-language-switch.scss
@@ -23,10 +23,16 @@ tokens.$default-map: components.$post-button;
   @include utilities-mx.focus-style;
   @include utilities-mx.not-disabled-hover() {
     @include button-mx.button-variant-def('hover', 'tertiary');
+    @include utilities-mx.high-contrast-mode() {
+      color: LinkText;
+    }
   }
 
   post-icon {
     height: var(--post-core-dimension-16);
     width: var(--post-core-dimension-16);
   }
+  @include utilities-mx.high-contrast-mode() {
+    color: LinkText;
+  }
 }
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -5,11 +5,12 @@
 @use '@swisspost/design-system-styles/tokens/elements';
 @use '@swisspost/design-system-styles/variables/animation';
 @use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 $nav-height: var(--post-core-dimension-56);
 
 post-mainnavigation {
-  // reset links and buttons
+  // reset links and buttons;
   post-list-item {
     > a {
       text-decoration: none;
@@ -30,12 +31,18 @@ post-mainnavigation {
 
       &:hover {
         color: tokens.get('post-link-hover-fg', elements.$post-link);
+        @include utilities.high-contrast-mode() {
+          color: LinkText;
+        }
       }
 
       &:focus-visible {
         border-radius: var(--post-core-dimension-4);
         z-index: 1;
       }
+      @include utilities.high-contrast-mode() {
+        color: LinkText;
+      }
     }
   }
 
@@ -68,7 +75,9 @@ post-mainnavigation {
         font-size: var(--post-core-font-size-16);
         border-block: 0 solid transparent;
         border-block-end-color: currentColor;
-
+        @include utilities.high-contrast-mode() {
+          border-block-end-color: LinkText;
+        }
         &:hover {
           border-block-width: var(--post-core-dimension-2);
         }

diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.scss b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
@@ -3,10 +3,13 @@
 @use '@swisspost/design-system-styles/tokens/helpers';
 
 :host {
+  @include utilities.high-contrast-mode() {
+    color: LinkText !important;
+  }
   cursor: pointer;
   outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important;
   outline: tokens.get('focus-outline-color', helpers.$post-focus) none
-  tokens.get('focus-outline-width', helpers.$post-focus) !important;
+    tokens.get('focus-outline-width', helpers.$post-focus) !important;
 }
 
 :host(:focus-visible) {
@@ -17,14 +20,14 @@
   }
 }
 
-:host([aria-pressed="true"]) {
-  ::slotted([data-showwhen="untoggled"]) {
+:host([aria-pressed='true']) {
+  ::slotted([data-showwhen='untoggled']) {
     display: none;
   }
 }
 
-:host([aria-pressed="false"]) {
-  ::slotted([data-showwhen="toggled"]) {
+:host([aria-pressed='false']) {
+  ::slotted([data-showwhen='toggled']) {
     display: none;
   }
 }