From ed404104a00356a1d090702dbc7c7ba9d2648684 Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 21 Aug 2024 11:00:51 +0200 Subject: [PATCH 1/3] bug: Show Switch in forced colors mode --- packages/css/src/components/switch/switch.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss index 88816cac2f..24ce419a11 100644 --- a/packages/css/src/components/switch/switch.scss +++ b/packages/css/src/components/switch/switch.scss @@ -19,13 +19,14 @@ --ams-switch-track-padding: 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-padding) 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: ButtonText; + } } .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-padding))); } .ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before { From 5844f9f91fbbc40db5354727ed262a082e586b1d Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 21 Aug 2024 11:07:04 +0200 Subject: [PATCH 2/3] Use correct name --- packages/css/src/components/switch/switch.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss index 24ce419a11..82c860b09a 100644 --- a/packages/css/src/components/switch/switch.scss +++ b/packages/css/src/components/switch/switch.scss @@ -16,12 +16,12 @@ } .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-padding) solid transparent; + border: var(--ams-switch-track-border-width) solid transparent; border-radius: calc(var(--ams-switch-thumb-inline-size) * 2); cursor: pointer; display: inline-block; @@ -58,7 +58,7 @@ } .ams-switch__input:checked + .ams-switch__label::before { - transform: translate(calc(100% - 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 { From 65b6900ed7d645fccc79aca0ca5a0311d8fbaf47 Mon Sep 17 00:00:00 2001 From: alimpens Date: Wed, 21 Aug 2024 11:12:28 +0200 Subject: [PATCH 3/3] Use same system color as we do for radio's and checkboxes --- packages/css/src/components/switch/switch.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss index 82c860b09a..d86fcd8001 100644 --- a/packages/css/src/components/switch/switch.scss +++ b/packages/css/src/components/switch/switch.scss @@ -44,7 +44,7 @@ transition-timing-function: ease-in-out; @media (forced-colors: active) { - background-color: ButtonText; + background-color: FieldText; } }