diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss index 88816cac2f..d86fcd8001 100644 --- a/packages/css/src/components/switch/switch.scss +++ b/packages/css/src/components/switch/switch.scss @@ -16,16 +16,17 @@ } .ams-switch__label { - --ams-switch-track-padding: 0.0625rem; + --ams-switch-track-border-width: 0.0625rem; background-color: var(--ams-switch-background-color); + + // Using a transparent border to make sure the component is visible in forced colors mode. + border: var(--ams-switch-track-border-width) solid transparent; border-radius: calc(var(--ams-switch-thumb-inline-size) * 2); cursor: pointer; display: inline-block; inline-size: var(--ams-switch-inline-size); outline-offset: var(--ams-switch-outline-offset); - padding-block: var(--ams-switch-track-padding); - padding-inline: var(--ams-switch-track-padding); transition: background-color 0.2s ease-in-out; @include reset; @@ -41,6 +42,10 @@ transition-duration: 0.1s; transition-property: box-shadow, transform; transition-timing-function: ease-in-out; + + @media (forced-colors: active) { + background-color: FieldText; + } } .ams-switch__input:checked + .ams-switch__label { @@ -53,9 +58,7 @@ } .ams-switch__input:checked + .ams-switch__label::before { - transform: translate( - calc(var(--ams-switch-inline-size) - var(--ams-switch-thumb-inline-size) - 2 * var(--ams-switch-track-padding)) - ); + transform: translate(calc(100% - 2 * var(--ams-switch-track-border-width))); } .ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {