From 0ebe0b4b5b067e4628e1deef267dcfb4e34e3cb4 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Wed, 18 Dec 2024 16:56:40 +0100 Subject: [PATCH 1/6] fix(styles): added focus styles for nested post-avatar, added color change on hover for nested avatar component in HCM --- packages/styles/src/components/avatar.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/styles/src/components/avatar.scss b/packages/styles/src/components/avatar.scss index 63adea6c1c..d12873dbb9 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,26 @@ button { text-decoration: none; } + post-avatar { + @include utilities.high-contrast-mode() { + border-color: CanvasText !important; + } + } + &:hover { post-avatar { --post-avatar-bg: #{tokens.get('avatar-hover-bg')}; --post-avatar-fg: #{tokens.get('avatar-hover-fg')}; + @include utilities.high-contrast-mode() { + border-color: Highlight !important; + } + &::after { background-color: tokens.get('avatar-image-hover-opacity'); } } } + + @include utilities.focus-style; } From b44a8892db077773416b03e44e5d75bbc2a9bd0c Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Wed, 18 Dec 2024 16:59:09 +0100 Subject: [PATCH 2/6] chore(changeset): added a changeset --- .changeset/sweet-cherries-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sweet-cherries-drop.md 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. From 5794857bcedfd6825978b936eee65e62f8e5f722 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Wed, 18 Dec 2024 17:19:23 +0100 Subject: [PATCH 3/6] chore(styles): removed redundant important --- packages/styles/src/components/avatar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/avatar.scss b/packages/styles/src/components/avatar.scss index d12873dbb9..4789e199e6 100644 --- a/packages/styles/src/components/avatar.scss +++ b/packages/styles/src/components/avatar.scss @@ -17,7 +17,7 @@ button { post-avatar { @include utilities.high-contrast-mode() { - border-color: CanvasText !important; + border-color: CanvasText; } } From b800c53b66ab22d6699e8d62d731d442f001fbfd Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Fri, 3 Jan 2025 10:29:34 +0100 Subject: [PATCH 4/6] chore(styles): added border on hover for avatar nested inside an anchor tag or a buton --- packages/styles/src/components/avatar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles/src/components/avatar.scss b/packages/styles/src/components/avatar.scss index 4789e199e6..9a214b388f 100644 --- a/packages/styles/src/components/avatar.scss +++ b/packages/styles/src/components/avatar.scss @@ -25,6 +25,7 @@ button { 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; From 5b8c1dd1e14b219c8f28c22675d7639f17a99192 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Fri, 31 Jan 2025 08:54:08 +0100 Subject: [PATCH 5/6] fix(styles): adjusted styles for button and link which has nested post-avatar in HCM --- packages/styles/src/components/avatar.scss | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/styles/src/components/avatar.scss b/packages/styles/src/components/avatar.scss index 9a214b388f..5ebe547760 100644 --- a/packages/styles/src/components/avatar.scss +++ b/packages/styles/src/components/avatar.scss @@ -15,22 +15,12 @@ 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'); } @@ -39,3 +29,14 @@ button { @include utilities.focus-style; } + +button { + &:where(:has(post-avatar:only-child)):hover { + @include utilities.high-contrast-mode() { + post-avatar { + border-color: Highlight !important; + --post-avatar-fg: Highlight !important; + } + } + } +} From 7c8910453794adaeaa60da5c8bde5d589439d7c7 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Fri, 31 Jan 2025 20:15:28 +0100 Subject: [PATCH 6/6] Update packages/styles/src/components/avatar.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/styles/src/components/avatar.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/styles/src/components/avatar.scss b/packages/styles/src/components/avatar.scss index 5ebe547760..9fef856ae2 100644 --- a/packages/styles/src/components/avatar.scss +++ b/packages/styles/src/components/avatar.scss @@ -34,8 +34,7 @@ button { &:where(:has(post-avatar:only-child)):hover { @include utilities.high-contrast-mode() { post-avatar { - border-color: Highlight !important; - --post-avatar-fg: Highlight !important; + --post-avatar-bg: Highlight !important; } } }