From dafdd2853c456c186f9eb88b34aa23e6b0d330b5 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 24 Nov 2023 17:11:40 +0100 Subject: [PATCH 1/3] ToggleForm: refine animation --- .../components/src/form-toggle/style.scss | 45 ++++++++++++++++--- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 25edaed072712..90dd3ee505a0f 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -1,6 +1,10 @@ $toggle-width: 36px; $toggle-height: 18px; $toggle-border-width: 1px; +$thumb-size: $toggle-height - ($toggle-border-width * 6); + +$transition-duration-color: 0.2s; +$transition-duration-position: 0.1s; .components-form-toggle { position: relative; @@ -8,6 +12,7 @@ $toggle-border-width: 1px; // Unchecked state. .components-form-toggle__track { + position: relative; content: ""; display: inline-block; box-sizing: border-box; @@ -17,8 +22,26 @@ $toggle-border-width: 1px; width: $toggle-width; height: $toggle-height; border-radius: $toggle-height * 0.5; - transition: 0.2s background ease; + transition: + $transition-duration-color background-color ease, + $transition-duration-color border-color ease; @include reduce-motion("transition"); + overflow: hidden; + + // Windows High Contrast Mode + &::after { + content: ""; + position: absolute; + inset: 0; + box-sizing: border-box; + // Expand the border to fake a solid in Windows High Contrast Mode. + border-top: #{ $toggle-height } solid transparent; + + transition: $transition-duration-color opacity ease; + @include reduce-motion("transition"); + + opacity: 0; + } } .components-form-toggle__thumb { @@ -27,20 +50,28 @@ $toggle-border-width: 1px; box-sizing: border-box; top: $toggle-border-width * 3; left: $toggle-border-width * 3; - width: $toggle-height - ($toggle-border-width * 6); - height: $toggle-height - ($toggle-border-width * 6); + width: $thumb-size; + height: $thumb-size; border-radius: 50%; - transition: 0.1s transform ease; + transition: + $transition-duration-position transform ease, + $transition-duration-color background-color ease-out; @include reduce-motion("transition"); background-color: $gray-900; - border: 5px solid $gray-900; // Has explicit border to act as a fill in Windows High Contrast Mode. + + // Transparent border acts as a fill in Windows High Contrast Mode. + border: $thumb-size / 2 solid transparent; } // Checked state. &.is-checked .components-form-toggle__track { background-color: $components-color-accent; - border: $toggle-border-width solid $components-color-accent; - border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode. + border-color: $components-color-accent; + + // Windows High Contrast Mode + &::after { + opacity: 1; + } } .components-form-toggle__input:focus + .components-form-toggle__track { From f8a275fb924ba33a121759a53752099bd37ed06b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 24 Nov 2023 17:33:41 +0100 Subject: [PATCH 2/3] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 08082f99a00b9..3fe8fcd0d0df2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ ### Enhancements +- `FormToggle`: refine animation and improve high contrast styles ([#56515](https://github.com/WordPress/gutenberg/pull/56515)). - `Button`: Add focus rings to focusable disabled buttons ([#56383](https://github.com/WordPress/gutenberg/pull/56383)). ### Bug Fix From aa823966d7907cb6d6bfb2a98129359ec4c7b8d9 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 29 Nov 2023 16:04:41 +0100 Subject: [PATCH 3/3] Use same transition duration for both color and position-based styles --- packages/components/src/form-toggle/style.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 90dd3ee505a0f..314f6fa36d12f 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -3,8 +3,7 @@ $toggle-height: 18px; $toggle-border-width: 1px; $thumb-size: $toggle-height - ($toggle-border-width * 6); -$transition-duration-color: 0.2s; -$transition-duration-position: 0.1s; +$transition-duration: 0.2s; .components-form-toggle { position: relative; @@ -23,8 +22,8 @@ $transition-duration-position: 0.1s; height: $toggle-height; border-radius: $toggle-height * 0.5; transition: - $transition-duration-color background-color ease, - $transition-duration-color border-color ease; + $transition-duration background-color ease, + $transition-duration border-color ease; @include reduce-motion("transition"); overflow: hidden; @@ -37,7 +36,7 @@ $transition-duration-position: 0.1s; // Expand the border to fake a solid in Windows High Contrast Mode. border-top: #{ $toggle-height } solid transparent; - transition: $transition-duration-color opacity ease; + transition: $transition-duration opacity ease; @include reduce-motion("transition"); opacity: 0; @@ -54,8 +53,8 @@ $transition-duration-position: 0.1s; height: $thumb-size; border-radius: 50%; transition: - $transition-duration-position transform ease, - $transition-duration-color background-color ease-out; + $transition-duration transform ease, + $transition-duration background-color ease-out; @include reduce-motion("transition"); background-color: $gray-900;