diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss index eed49ac7d7..8adadb14cf 100644 --- a/packages/components/src/components/post-card-control/post-card-control.scss +++ b/packages/components/src/components/post-card-control/post-card-control.scss @@ -30,9 +30,7 @@ border: post.$size-line solid var(--post-card-control-border-color); border-radius: post.$border-radius; color: var(--post-card-control-color); - cursor: pointer; - transition: background-color 100ms linear, border-color 100ms linear; .card-control--input { grid-area: input; @@ -41,7 +39,7 @@ border-color: var(--post-card-control-input-border-color) !important; color: var(--post-card-control-input-border-color) !important; cursor: inherit; - transition: border-color 100ms ease-in-out; + transition: none; &:focus, &:focus-visible { @@ -90,7 +88,19 @@ --post-card-control-bg: #{post.$yellow}; @include post.high-contrast-mode() { + --post-card-control-border-color: FieldText; --post-card-control-bg: SelectedItem; + --post-card-control-color: SelectedItemText; + --post-card-control-input-border-color: SelectedItemText; + --post-card-control-input-bg: SelectedItem; + + .card-control--input { + &::after { + forced-color-adjust: none; + border-color: transparent; + color: SelectedItemText; + } + } } } @@ -108,7 +118,16 @@ @include post.high-contrast-mode() { --post-card-control-border-color: Highlight; + --post-card-control-bg: Field; + --post-card-control-color: FieldText; --post-card-control-input-border-color: Highlight; + --post-card-control-input-bg: Field; + + .card-control--input { + &::after { + color: FieldText; + } + } } } } diff --git a/packages/styles/src/components/choice-control-card.scss b/packages/styles/src/components/choice-control-card.scss index eccfd85c95..293e26e3ad 100644 --- a/packages/styles/src/components/choice-control-card.scss +++ b/packages/styles/src/components/choice-control-card.scss @@ -32,9 +32,6 @@ fieldset { border-radius: commons.$border-radius; color: var(--post-card-control-color); cursor: pointer; - transition: - background-color 100ms linear, - border-color 100ms linear; input.form-check-input { grid-area: input; @@ -45,7 +42,7 @@ fieldset { border-color: var(--post-card-control-input-border-color) !important; color: var(--post-card-control-input-border-color) !important; cursor: inherit; - transition: border-color 100ms ease-in-out; + transition: none; &:focus, &:focus-visible { @@ -97,7 +94,19 @@ fieldset { --post-card-control-bg: #{color.$yellow}; @include utilities.high-contrast-mode() { + --post-card-control-border-color: FieldText; --post-card-control-bg: SelectedItem; + --post-card-control-color: SelectedItemText; + --post-card-control-input-border-color: SelectedItemText; + --post-card-control-input-bg: SelectedItem; + + input.form-check-input { + &::after { + forced-color-adjust: none; + border-color: transparent; + color: SelectedItemText; + } + } } } @@ -115,7 +124,16 @@ fieldset { @include utilities.high-contrast-mode() { --post-card-control-border-color: Highlight; + --post-card-control-bg: Field; + --post-card-control-color: FieldText; --post-card-control-input-border-color: Highlight; + --post-card-control-input-bg: Field; + + input.form-check-input { + &::after { + color: FieldText; + } + } } } @@ -161,7 +179,11 @@ fieldset { --post-card-control-input-bg: #{color.$white}; @include utilities.high-contrast-mode() { + --post-card-control-border-color: FieldText; --post-card-control-bg: SelectedItem; + --post-card-control-color: SelectedItemText; + --post-card-control-input-border-color: SelectedItemText; + --post-card-control-input-bg: SelectedItem; } } @@ -181,7 +203,11 @@ fieldset { --post-card-control-bg: #{color.$yellow}; @include utilities.high-contrast-mode() { + --post-card-control-border-color: FieldText; --post-card-control-bg: SelectedItem; + --post-card-control-color: SelectedItemText; + --post-card-control-input-border-color: SelectedItemText; + --post-card-control-input-bg: SelectedItem; } } } @@ -195,7 +221,10 @@ fieldset { @include utilities.high-contrast-mode() { --post-card-control-border-color: Highlight; + --post-card-control-bg: Field; + --post-card-control-color: FieldText; --post-card-control-input-border-color: Highlight; + --post-card-control-input-bg: Field; } }