Try: Add a subtle animation to the is-active indicator for sidebar ta…

…bs (WordPress#13956)

* Add subtle animation to the is-active indicator for sidebar tabs

* Re-instate the empty border, to prevent browser defaults from kicking in.

* Remove extra 1px of empty space

* Focus state cleanup for tab buttons

Allow them to inherit the box shadow (used for the active tab)

Use the usual standard dotted outline instead of a solid one.

* Add a pseudoclass to ensure the active border appears in Windows High Contrast Mode.

* Fix typo.

This should match the value from `/packages/edit-post/src/components/sidebar/settings-header/style.scss`

assets/stylesheets/_mixins.scss

@@ -195,8 +195,8 @@
 
 @mixin square-style__focus() {
 	color: $dark-gray-900;
-	outline: 1px solid $dark-gray-300;
-	box-shadow: none;
+	outline-offset: -1px;
+	outline: 1px dotted $dark-gray-500;
 }
 
 // Menu items.

packages/edit-post/src/components/sidebar/settings-header/style.scss

@@ -18,14 +18,14 @@
 .edit-post-sidebar__panel-tab {
 	background: transparent;
 	border: none;
-	border-radius: 0;
+	box-shadow: none;
 	cursor: pointer;
-	height: $grid-size * 6;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
 	color: $dark-gray-900;
 	@include square-style__neutral;
+	transition: box-shadow 0.1s linear;
 
 	// This pseudo-element "duplicates" the tab label and sets the text to bold.
 	// This ensures that the tab doesn't change width when selected.
@@ -41,9 +41,20 @@
 	}
 
 	&.is-active {
-		padding-bottom: 0;
-		border-bottom: 3px solid theme(primary);
+		box-shadow: inset 0 -3px theme(outlines);
 		font-weight: 600;
+		position: relative;
+
+		// This border appears in Windows High Contrast mode instead of the box-shadow.
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			bottom: 1px;
+			right: 0;
+			left: 0;
+			border-bottom: 3px solid transparent;
+		}
 	}
 
 	&:focus {

packages/edit-post/src/components/sidebar/style.scss

@@ -163,18 +163,30 @@
 .edit-post-sidebar__panel-tab {
 	background: transparent;
 	border: none;
-	border-radius: 0;
+	box-shadow: none;
 	cursor: pointer;
 	height: 50px;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
 	@include square-style__neutral;
+	transition: box-shadow 0.1s linear;
 
 	&.is-active {
-		padding-bottom: 0;
-		border-bottom: 3px solid theme(primary);
+		box-shadow: inset 0 -3px theme(outlines);
 		font-weight: 600;
+		position: relative;
+
+		// This border appears in Windows High Contrast mode instead of the box-shadow.
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			bottom: 1px;
+			right: 0;
+			left: 0;
+			border-bottom: 3px solid transparent;
+		}
 	}
 
 	&:focus {