diff --git a/.changeset/four-jokes-tease.md b/.changeset/four-jokes-tease.md new file mode 100644 index 0000000000..8d7bcdf701 --- /dev/null +++ b/.changeset/four-jokes-tease.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Added hover styles in high contrast mode for the css components `Button`, `Chip`, `Form Search` and `Button Close`. diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index 0eaed65339..e19b8f19a2 100644 --- a/packages/styles/src/components/button.scss +++ b/packages/styles/src/components/button.scss @@ -57,17 +57,19 @@ tokens.$default-map: components.$post-button; // Styles to improve accessibility in high contrast mode @include utilities.high-contrast-mode() { - border-color: ButtonBorder; - background-color: ButtonFace; - - &:not(:disabled, .disabled) { - &:hover { - border-color: highlight; + &[class] { + border-color: ButtonBorder; + background-color: ButtonFace; + + &:not(:disabled, .disabled) { + &:hover { + border-color: highlight; + } } - } - &:disabled { - border-color: GrayText !important; + &:disabled { + border-color: GrayText !important; + } } } } diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index 11e0c62038..9808a681ba 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -118,6 +118,10 @@ color: chip.$chip-hover-color; background-color: chip.$chip-hover-bg; + @include utilities.high-contrast-mode() { + border-color: highlight; + } + > .badge { background-color: chip.$chip-bg; } diff --git a/packages/styles/src/components/form-search-input.scss b/packages/styles/src/components/form-search-input.scss index f852b09a3c..8a0de94436 100644 --- a/packages/styles/src/components/form-search-input.scss +++ b/packages/styles/src/components/form-search-input.scss @@ -42,6 +42,9 @@ tokens.$default-map: components.$post-search-input; .search-button { post-icon { color: tokens.get('input-color-hover-fg', components.$post-text-input); + @include utilities.high-contrast-mode() { + color: Highlight; + } } } } diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss index 8cf04ff0c1..1b0dbfcb30 100644 --- a/packages/styles/src/components/icon-close-button.scss +++ b/packages/styles/src/components/icon-close-button.scss @@ -15,6 +15,14 @@ tokens.$default-map: components.$post-close; background-color: tokens.get('close-enabled-bg'); color: tokens.get('close-enabled-fg'); + &:hover { + > post-icon { + @include utilities.high-contrast-mode() { + color: Highlight; + } + } + } + > post-icon { min-width: tokens.get('close-icon-size'); width: tokens.get('close-icon-size');