Revert "Components: Complete WPDS token migration for remaining borders (#79003)" (#79243)

This reverts commit dbe78ce.

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

Author: 3 people

packages/components/CHANGELOG.md

@@ -5,7 +5,6 @@
 ### Enhancements
 
 -   `BaseControl`: Apply `text-wrap: pretty` to help text to avoid typographic widows ([#79112](https://github.com/WordPress/gutenberg/pull/79112)).
--   `Button`, `DropdownMenu`, `FormToggle`, `Modal`, `Panel`, `RadioControl`, `Toolbar`: Migrate hardcoded border and stroke colors to WPDS tokens ([#79003](https://github.com/WordPress/gutenberg/pull/79003)).
 
 ### Bug Fixes
 

packages/components/src/border-control/styles.ts

@@ -84,7 +84,6 @@ export const colorIndicatorBorder = ( border?: Border ) => {
 	const { color, style } = border || {};
 
 	const fallbackColor =
-		// TODO: should use the `--wpds-color-stroke-interactive-neutral` token when refactored to SCSS modules
 		!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;
 
 	return css`

packages/components/src/button/style.scss

@@ -153,7 +153,7 @@
 		&:disabled:not(:focus),
 		&[aria-disabled="true"]:not(:focus),
 		&[aria-disabled="true"]:hover:not(:focus) {
-			box-shadow: inset 0 0 0 $border-width var(--wpds-color-stroke-interactive-neutral-disabled);
+			box-shadow: inset 0 0 0 $border-width $gray-300;
 		}
 
 		&:focus:not(:active) {

packages/components/src/dropdown-menu/style.scss

@@ -30,7 +30,7 @@
 			display: block;
 			content: "";
 			box-sizing: content-box;
-			background-color: var(--wpds-color-stroke-surface-neutral);
+			background-color: $gray-300;
 			position: absolute;
 			top: -3px;
 			left: 0;

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

@@ -106,7 +106,7 @@ $transition-duration: 0.2s;
 	.components-disabled & {
 		.components-form-toggle__track {
 			background-color: $components-color-gray-100;
-			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
+			border-color: $components-color-gray-300;
 
 			@media ( forced-colors: active ) {
 				border-color: GrayText;

packages/components/src/menu/styles.ts

@@ -22,9 +22,7 @@ const ITEM_PADDING_INLINE = space( 3 );
 // - border color and divider color are different from COLORS.theme variables
 // - lighter text color is not defined in COLORS.theme, should it be?
 // - lighter background color is not defined in COLORS.theme, should it be?
-// TODO: should use the `--wpds-color-stroke-surface-neutral` token when refactored to SCSS modules
 const DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];
-// TODO: should use the `--wpds-color-stroke-surface-neutral-weak` token when refactored to SCSS modules
 const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
 const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
 const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];

packages/components/src/modal/style.scss

@@ -217,7 +217,7 @@
 	}
 
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
-		border-bottom-color: var(--wpds-color-stroke-surface-neutral);
+		border-bottom-color: $gray-300;
 	}
 
 	& + p {

packages/components/src/panel/style.scss

@@ -40,7 +40,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
-	border-bottom: $border-width solid var(--wpds-color-stroke-surface-neutral);
+	border-bottom: $border-width solid $gray-300;
 
 	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
 	box-sizing: content-box;

packages/components/src/radio-control/style.scss

@@ -56,7 +56,7 @@
 
 	&:disabled {
 		background: $components-color-gray-100;
-		border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled);
+		border: 1px solid $components-color-gray-300;
 		opacity: 1; // Override style from wp-admin forms.css.
 
 		&:checked::before {

packages/components/src/spinner/styles.ts

@@ -35,7 +35,6 @@ const commonPathProps = css`
 	stroke-width: 1.5px;
 `;
 
-// TODO: should use the `--wpds-color-stroke-surface-neutral` token when refactored to SCSS modules
 export const SpinnerTrack = styled.circle`
 	${ commonPathProps };
 	stroke: ${ COLORS.gray[ 300 ] };