update buttons and links - change border

swisspost · Dec 19, 2024 · 56f5ea3 · 56f5ea3
1 parent d3f7f99
commit 56f5ea3
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 33 deletions.
diff --git a/packages/components/src/components/post-closebutton/post-closebutton.scss b/packages/components/src/components/post-closebutton/post-closebutton.scss
@@ -1,7 +1,12 @@
 @use '@swisspost/design-system-styles/mixins/utilities';
 
-post-closebutton button post-icon {
+post-closebutton button {
   @include utilities.high-contrast-mode() {
-    color: LinkText !important;
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+    border: 2px solid ButtonBorder !important;
+    &:hover {
+      border-color: Highlight !important;
+    }
   }
 }
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -13,9 +13,6 @@
   --global-header-minimal-height: 24px;
   --main-header-height: 56px;
   --header-height: calc(var(--global-header-height) + var(--main-header-height));
-  @include utilities.high-contrast-mode() {
-    display: block;
-  }
 
   @include media.min(lg) {
     display: block;
@@ -32,6 +29,11 @@
     --global-header-height: 64px;
     --main-header-height: 48px;
   }
+  .navigation {
+    @include utilities.high-contrast-mode() {
+      border-block-end: 3px solid ButtonBorder;
+    }
+  }
 }
 
 .d-flex {
@@ -115,6 +117,9 @@ slot[name='post-logo'] {
     inset-block-start: var(--global-header-height);
     padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
   }
+  @include media.max(lg) {
+    border-block-end: 1px solid ButtonBorder;
+  }
 }
 
 :host(:not(:has([slot='title']))) .title-header {

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
@@ -4,13 +4,17 @@
 :host {
   display: inline-block;
   width: fit-content;
-  @include utilities.high-contrast-mode() {
-    color: LinkText;
-  }
 }
 
 button {
   @include post.reset-button;
+  @include utilities.high-contrast-mode() {
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+    &:hover {
+      background-color: Highlight !important;
+    }
+  }
 }
 
 a {
@@ -39,7 +43,7 @@ a {
     background-color: #050400;
     color: #fff;
     @include utilities.high-contrast-mode() {
-      background-color: SelectedItem;
+      background-color: SelectedItem !important;
     }
   }
 }
@@ -53,7 +57,7 @@ a {
   &[aria-current='true'],
   &[aria-current='page'] {
     @include utilities.high-contrast-mode() {
-      background-color: SelectedItem;
+      background-color: SelectedItem !important;
     }
 
     &::after {

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,16 +23,19 @@ 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;
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+    border: 2px solid ButtonBorder;
+    &:hover {
+      border-color: Highlight !important;
+    }
   }
 }
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -12,14 +12,22 @@ $nav-height: var(--post-core-dimension-56);
 post-mainnavigation {
   // reset links and buttons;
   post-list-item {
-    > a {
+    a {
       text-decoration: none;
       border-radius: 0;
     }
 
-    post-megadropdown-trigger button {
-      @include button.reset-button;
-      text-align: start;
+    post-megadropdown-trigger {
+      @include utilities.high-contrast-mode() {
+        color: ButtonText !important;
+        background-color: ButtonFace !important;
+        border: 2px solid ButtonBorder;
+      }
+
+      button {
+        @include button.reset-button;
+        text-align: start;
+      }
     }
 
     > a,
@@ -31,18 +39,12 @@ 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;
-      }
     }
   }
 
@@ -76,7 +78,8 @@ post-mainnavigation {
         border-block: 0 solid transparent;
         border-block-end-color: currentColor;
         @include utilities.high-contrast-mode() {
-          border-block-end-color: LinkText;
+          color: ButtonText;
+          background-color: ButtonFace;
         }
         &:hover {
           border-block-width: var(--post-core-dimension-2);

diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 @keyframes slide-in {
   0% {
@@ -73,6 +74,15 @@ post-popovercontainer {
     grid-template-columns: repeat(auto-fit, minmax(min(15vw, 100%), 1fr));
     grid-auto-rows: 1fr auto;
     grid-auto-flow: dense;
+    @include utilities.high-contrast-mode() {
+      a {
+        text-decoration: underline !important;
+        text-decoration-thickness: 1px !important;
+        &:hover {
+          text-decoration-thickness: 2px !important;
+        }
+      }
+    }
 
     @include media.max(lg) {
       grid-template-columns: repeat(auto-fit, minmax(min(35vw, 100%), 1fr));

diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.scss b/packages/components/src/components/post-togglebutton/post-togglebutton.scss
@@ -3,9 +3,6 @@
 @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

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
@@ -96,8 +96,12 @@ tokens.$default-map: components.$post-button;
 .btn-tertiary {
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
-    color: linktext;
-    text-decoration: underline !important;
+    color: ButtonText;
+    background-color: ButtonFace;
+    border: 2px solid ButtonBorder;
+    &:hover {
+      border-color: Highlight !important;
+    }
   }
 }
 

diff --git a/packages/styles/src/components/header/index.scss b/packages/styles/src/components/header/index.scss
@@ -4,9 +4,6 @@
 @use 'mixins' as *;
 
 post-header {
-  @include utilities.high-contrast-mode() {
-    border-bottom: 2px solid LinkText !important;
-  }
   ul[slot='meta-navigation'] {
     gap: var(--post-core-dimension-4);
 
@@ -53,11 +50,47 @@ post-header {
     }
   }
 
+  post-togglebutton,
+  post-menu-trigger {
+    @include utilities.high-contrast-mode() {
+      background-color: ButtonFace !important;
+      color: ButtonText !important;
+      border: 2px solid ButtonBorder;
+      &:hover {
+        border-color: Highlight !important;
+      }
+    }
+  }
+
   a.selected,
   post-togglebutton[aria-pressed='true'] {
     &:not(post-mainnavigation *) {
       color: var(--post-core-color-brand-white);
       background: var(--post-core-color-sandgrey-100);
     }
   }
+  @include utilities.high-contrast-mode() {
+    > ul.list-inline {
+      li a {
+        color: LinkText !important;
+        text-decoration: underline !important;
+        text-decoration-thickness: 1px !important;
+        &:hover {
+          text-decoration-thickness: 2px !important;
+        }
+      }
+    }
+    button {
+      background-color: ButtonFace !important;
+      color: ButtonText !important;
+      border: 2px solid ButtonBorder;
+      &:hover {
+        border-color: Highlight !important;
+      }
+    }
+
+    .megadropdown {
+      border-block-end: 2px solid ButtonBorder;
+    }
+  }
 }