Reduce active tab accent weight (#40998)

Reduces the weight of the accent on active tabs from 4px to 1.5px.
WordPress · May 16, 2022 · 3a2a555 · 3a2a555
1 parent 1e2f974
commit 3a2a555
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -84,7 +84,7 @@ $widget-area-width: 700px;
 $block-toolbar-height: $grid-unit-60;
 $border-width: 1px;
 $border-width-focus: 2px; // This exists as a fallback, and is ideally overridden by var(--wp-admin-border-width-focus) unless in some SASS math cases.
-$border-width-tab: 4px;
+$border-width-tab: 1.5px;
 $helptext-font-size: 12px;
 $radius-round: 50%;
 $radius-block-ui: 2px;

diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
@@ -59,6 +59,6 @@
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 - #{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
 	}
 }
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -48,6 +48,6 @@
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 - #{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
 	}
 }