diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss index b557ef2570..915150595d 100644 --- a/packages/styles/src/components/form-select.scss +++ b/packages/styles/src/components/form-select.scss @@ -52,6 +52,10 @@ tokens.$default-map: components.$post-select; @include utilities.high-contrast-mode { border-color: FieldText; } + + @include utilities.high-contrast-mode-dark() { + @include forms.select-bg-image('selected-hcm', $mode: dark); + } } &:hover { @@ -79,6 +83,15 @@ tokens.$default-map: components.$post-select; } } + + @include utilities.high-contrast-mode-light() { + @include forms.select-bg-image('enabled-hcm', $mode: light); + } + + @include utilities.high-contrast-mode-dark() { + @include forms.select-bg-image('enabled-hcm', $mode: dark); + } + &.is-valid, &.is-invalid { &:not(:disabled) { diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 0854d6adf0..1003563f09 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -41,6 +41,9 @@ 'selected-dark': #fff, 'disabled-light': #696864, 'disabled-dark': #fff, + 'enabled-hcm-light': #050400, + 'enabled-hcm-dark': #fff, + 'selected-hcm-dark': #fff, ); @if ($validation == 'valid') {