diff --git a/.changeset/violet-geckos-shave.md b/.changeset/violet-geckos-shave.md new file mode 100644 index 0000000000..eccb818090 --- /dev/null +++ b/.changeset/violet-geckos-shave.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Added hover color to `post-accordion` in high contrast mode. diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.scss b/packages/components/src/components/post-accordion-item/post-accordion-item.scss index 0e4bc8249e..e5c7319221 100644 --- a/packages/components/src/components/post-accordion-item/post-accordion-item.scss +++ b/packages/components/src/components/post-accordion-item/post-accordion-item.scss @@ -21,6 +21,9 @@ tokens.$default-map: components.$post-accordion; } &:has(.accordion-button:hover)::after { border-color: tokens.get('accordion-hover-border'); + @include utility-mx.high-contrast-mode() { + border-color: Highlight; + } } } @@ -47,7 +50,6 @@ tokens.$default-map: components.$post-accordion; calc( tokens.get('accordion-header-padding-inline') + tokens.get('accordion-border-bottom-width') ); - transition: accordion.$accordion-button-transition; cursor: pointer; &::before { @@ -100,13 +102,7 @@ tokens.$default-map: components.$post-accordion; @include utility-mx.high-contrast-mode() { &:hover, &:focus-visible { - &:not(:disabled) { - outline: tokens.get('accordion-border-bottom-width') solid Highlight; - } - } - - &:disabled { - opacity: 1 !important; + color: Highlight; } } }