From 251963dd888ebc8650323ade4c3849d0e3364687 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Mon, 16 Dec 2024 17:46:46 +0100 Subject: [PATCH 1/3] fix(styles): HCM card control checkbox text color --- packages/styles/src/components/card-control.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss index 049fad2671..325b319bd6 100644 --- a/packages/styles/src/components/card-control.scss +++ b/packages/styles/src/components/card-control.scss @@ -173,7 +173,7 @@ fieldset { &:where(:has(input:checked), .checked) { --post-card-control-border-color: FieldText; --post-card-control-bg: SelectedItem; - --post-card-control-color: SelectedItemText; + --post-card-control-color: FieldText; --post-card-control-input-border-color: FieldText; input.form-check-input[type] { From cdb47f7bb95c148bfc4f324dc6bfcfd98eea3983 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 17 Dec 2024 15:16:24 +0100 Subject: [PATCH 2/3] wip --- packages/styles/src/components/card-control.scss | 2 +- packages/styles/src/components/segmented-button.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss index 325b319bd6..049fad2671 100644 --- a/packages/styles/src/components/card-control.scss +++ b/packages/styles/src/components/card-control.scss @@ -173,7 +173,7 @@ fieldset { &:where(:has(input:checked), .checked) { --post-card-control-border-color: FieldText; --post-card-control-bg: SelectedItem; - --post-card-control-color: FieldText; + --post-card-control-color: SelectedItemText; --post-card-control-input-border-color: FieldText; input.form-check-input[type] { diff --git a/packages/styles/src/components/segmented-button.scss b/packages/styles/src/components/segmented-button.scss index 8eeceee911..d3feb8b25d 100644 --- a/packages/styles/src/components/segmented-button.scss +++ b/packages/styles/src/components/segmented-button.scss @@ -91,6 +91,10 @@ $post-segmented-button-max-count: 8; tokens.get('button-segmented-selected-border'); border-radius: inherit; transition: transform 0.4s cubic-bezier(0.25, 1.4, 0.5, 0.9); + + @include utilities.high-contrast-mode() { + background-color: SelectedItem; + } } } From 1001a2dc77091fd4d8c4749c32c32926d26e3024 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 19 Dec 2024 17:30:07 +0100 Subject: [PATCH 3/3] fix border width of segmented button in hcm --- .changeset/stale-months-dance.md | 5 +++++ packages/styles/src/components/segmented-button.scss | 8 ++++++++ 2 files changed, 13 insertions(+) create mode 100644 .changeset/stale-months-dance.md diff --git a/.changeset/stale-months-dance.md b/.changeset/stale-months-dance.md new file mode 100644 index 0000000000..ae078fd05b --- /dev/null +++ b/.changeset/stale-months-dance.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed segmented button style in HCM. diff --git a/packages/styles/src/components/segmented-button.scss b/packages/styles/src/components/segmented-button.scss index d3feb8b25d..5dd30e1d79 100644 --- a/packages/styles/src/components/segmented-button.scss +++ b/packages/styles/src/components/segmented-button.scss @@ -110,6 +110,10 @@ $post-segmented-button-max-count: 8; transform: translateX(calc($i * -100% - $i * tokens.get('button-segmented-gap-inline'))); } } + + &:last-child():has(input:checked) ~ label:hover { + z-index: 3; + } } } @@ -177,6 +181,10 @@ $post-segmented-button-max-count: 8; &:hover { input { border-color: tokens.get('button-segmented-hover-border'); + + @include utilities.high-contrast-mode() { + border-color: Highlight; + } } }