diff --git a/.changeset/sweet-cherries-drop.md b/.changeset/sweet-cherries-drop.md new file mode 100644 index 0000000000..67d1f2088c --- /dev/null +++ b/.changeset/sweet-cherries-drop.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed high contrast mode hover and focus styles for `post-avatar` component in anchor and button contexts. diff --git a/packages/styles/src/components/avatar.scss b/packages/styles/src/components/avatar.scss index 63adea6c1c..9a214b388f 100644 --- a/packages/styles/src/components/avatar.scss +++ b/packages/styles/src/components/avatar.scss @@ -1,5 +1,6 @@ @use '../tokens/components'; @use '../functions/tokens'; +@use './../mixins/utilities'; tokens.$default-map: components.$post-avatar; @@ -14,14 +15,27 @@ button { text-decoration: none; } + post-avatar { + @include utilities.high-contrast-mode() { + border-color: CanvasText; + } + } + &:hover { post-avatar { --post-avatar-bg: #{tokens.get('avatar-hover-bg')}; --post-avatar-fg: #{tokens.get('avatar-hover-fg')}; + border-color: tokens.get('avatar-hover-bg'); + + @include utilities.high-contrast-mode() { + border-color: Highlight !important; + } &::after { background-color: tokens.get('avatar-image-hover-opacity'); } } } + + @include utilities.focus-style; }