From 56f5ea3b7ab5b868221c3af89c16ce50c54dd156 Mon Sep 17 00:00:00 2001 From: Myrta Sakellariou Date: Thu, 19 Dec 2024 15:43:50 +0100 Subject: [PATCH] update buttons and links - change border --- .../post-closebutton/post-closebutton.scss | 9 ++++- .../components/post-header/post-header.scss | 11 ++++-- .../post-language-option.scss | 14 ++++--- .../post-language-switch.scss | 11 ++++-- .../post-mainnavigation.scss | 25 ++++++------ .../post-megadropdown/post-megadropdown.scss | 10 +++++ .../post-togglebutton/post-togglebutton.scss | 3 -- packages/styles/src/components/button.scss | 8 +++- .../styles/src/components/header/index.scss | 39 +++++++++++++++++-- 9 files changed, 97 insertions(+), 33 deletions(-) diff --git a/packages/components/src/components/post-closebutton/post-closebutton.scss b/packages/components/src/components/post-closebutton/post-closebutton.scss index dcfa44a3c5..3cea8c96d9 100644 --- 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 index e807b353a6..27a43cc857 100644 --- 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 index 6e8f3a2167..11f0561586 100644 --- 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 index 1907a16285..9794bd17c4 100644 --- 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 index 45055f07e7..ff4d6939e6 100644 --- 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 index ba5e0d7465..d3129064c4 100644 --- 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 index 8c4e80a59e..004697dc5e 100644 --- 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 index 0eaed65339..955cb52ccc 100644 --- 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 index aedddcee07..d5627c4b9c 100644 --- 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,6 +50,18 @@ 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 *) { @@ -60,4 +69,28 @@ post-header { 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; + } + } }