FormToggle: Match Switch colors across states

packages/components/CHANGELOG.md

@@ -13,6 +13,7 @@
 
 -   `RadioControl`: Match the `@wordpress/ui` Radio colors ([#83270](https://github.com/WordPress/gutenberg/pull/83270)).
 -   `CheckboxControl`: Keep the default checkbox at 16px on narrow screens while retaining a 24px click target ([#83612](https://github.com/WordPress/gutenberg/pull/83612)).
+-   `FormToggle`: Match the `@wordpress/ui` `Switch` track, thumb, and border colors across unchecked, checked, hover, and disabled states ([#83773](https://github.com/WordPress/gutenberg/pull/83773)).
 -   `InputControl`, `SelectControl`, `CustomSelectControl`: Darken the field border on hover to the active stroke color used by `@wordpress/ui`. Disabled and borderless fields keep their resting border ([#83306](https://github.com/WordPress/gutenberg/pull/83306)).
 -   `TextControl`: Use the `@wordpress/ui` disabled text, placeholder, and border colors, and keep the field background instead of the gray disabled fill from wp-admin ([#83307](https://github.com/WordPress/gutenberg/pull/83307)).
 -   `ItemGroup`: Use design system's outline focus ring instead of previous box-shadow implementation ([#83764](https://github.com/WordPress/gutenberg/pull/83764)).

packages/components/src/form-toggle/style.scss

@@ -1,8 +1,6 @@
 @use "sass:math";
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
 
 $toggle-width: $grid-unit-40;
 $toggle-height: $grid-unit-20;
@@ -19,13 +17,12 @@ $transition-duration: 0.2s;
 
 	// Unchecked state.
 	.components-form-toggle__track {
-		position: relative;
 		content: "";
 		display: inline-block;
 		box-sizing: border-box;
 		vertical-align: top;
-		background-color: $white;
-		border: $toggle-border-width solid $gray-600;
+		background-color: var(--wpds-color-background-interactive-neutral-weak);
+		border: $toggle-border-width solid var(--wpds-color-stroke-interactive-neutral);
 		width: $toggle-width;
 		height: $toggle-height;
 		border-radius: math.div($toggle-height, 2);
@@ -35,24 +32,6 @@ $transition-duration: 0.2s;
 				$transition-duration background-color ease,
 				$transition-duration border-color ease;
 		}
-
-		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;
-
-			@media not (prefers-reduced-motion) {
-				transition: $transition-duration opacity ease;
-			}
-
-			opacity: 0;
-		}
 	}
 
 	.components-form-toggle__thumb {
@@ -71,41 +50,52 @@ $transition-duration: 0.2s;
 				$transition-duration background-color ease-out;
 		}
 
-		background-color: $gray-900;
+		background-color: var(--wpds-color-foreground-interactive-neutral);
 		box-shadow: $elevation-x-small;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
 		border: math.div($toggle-thumb-size, 2) solid transparent;
+
+		@media ( forced-colors: active ) {
+			background-color: ButtonText;
+		}
+	}
+
+	&:not(.is-checked, .is-disabled):hover .components-form-toggle__track {
+		border-color: var(--wpds-color-stroke-interactive-neutral-active);
 	}
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
-		background-color: $components-color-accent;
-		border-color: $components-color-accent;
+		background-color: var(--wpds-color-background-interactive-brand-strong);
+		border-color: transparent;
 
-		// Windows High Contrast Mode
-		&::after {
-			opacity: 1;
+		@media ( forced-colors: active ) {
+			background-color: Highlight;
 		}
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		@include button-style-outset__focus($components-color-accent);
+		@include button-style-outset__focus(var(--wpds-color-stroke-focus));
 	}
 
 	&.is-checked {
 		.components-form-toggle__thumb {
-			background-color: $white;
+			background-color: var(--wpds-color-foreground-interactive-brand-strong);
 			border-width: 0; // Zero out the border color to make the thumb invisible in Windows High Contrast Mode.
 			transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4)));
+
+			@media ( forced-colors: active ) {
+				background-color: HighlightText;
+			}
 		}
 	}
 
 	// Disabled state:
 	&.is-disabled,
 	[inert] & {
 		.components-form-toggle__track {
-			background-color: $components-color-gray-100;
+			background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
 			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
 
 			@media ( forced-colors: active ) {
@@ -114,29 +104,30 @@ $transition-duration: 0.2s;
 		}
 
 		.components-form-toggle__thumb {
-			background-color: $components-color-gray-400;
+			background-color: var(--wpds-color-foreground-interactive-neutral-disabled);
 			box-shadow: none;
 
 			@media ( forced-colors: active ) {
+				background-color: GrayText;
 				border-color: GrayText;
 			}
 		}
 
 		&.is-checked .components-form-toggle__track {
-			background-color: $components-color-gray-400;
-			border-color: $components-color-gray-400;
+			background-color: var(--wpds-color-background-interactive-brand-strong-disabled);
+			border-color: transparent;
 
 			@media ( forced-colors: active ) {
-				border-color: GrayText;
-
-				&::after {
-					border-top-color: GrayText;
-				}
+				background-color: GrayText;
 			}
 		}
 
 		&.is-checked .components-form-toggle__thumb {
-			background-color: $white;
+			background-color: var(--wpds-color-foreground-interactive-brand-strong-disabled);
+
+			@media ( forced-colors: active ) {
+				background-color: Canvas;
+			}
 		}
 	}
 }