Retire CSS variable for now.

WordPress · Mar 27, 2020 · 6d5ea59 · 6d5ea59
1 parent 9948524
commit 6d5ea59
Show file tree

Hide file tree

Showing 18 changed files with 0 additions and 32 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -119,7 +119,6 @@
 
 @mixin block-toolbar-button-style__focus() {
 	box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 4px $white;
-	box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 0 4px $white;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
@@ -134,12 +133,10 @@
 	@include reduce-motion("transition");
 }
 
-$input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
 
 @mixin input-style__focus() {
 	border-color: color($theme-color);
 	box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;
-	box-shadow: 0 0 0 $input-focus-width $theme-color;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -19,10 +19,6 @@ $border-width: 1px;
 $border-width-focus: 1.5px;
 $border-width-tab: 4px;
 
-:root {
-	--border-width-focus: 1.5px;
-}
-
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -38,7 +38,6 @@
 		bottom: $border-width;
 		left: $border-width;
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 	}
 }
 

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -76,13 +76,11 @@
 
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
-			box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus;
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
 
 			// Show a light color for dark themes.
 			.is-dark-theme & {
 				box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
-				box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus-dark;
 			}
 		}
 	}
@@ -144,7 +142,6 @@
 		&::after { // Everything else.
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
-			box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus;
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
 			transition: box-shadow 0.2s ease-out;
 			@include reduce-motion("transition");
@@ -155,7 +152,6 @@
 			// Show a lighter color for dark themes.
 			.is-dark-theme & {
 				box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
-				box-shadow: 0 0 0 var(--border-width-focus) $blue-medium-focus-dark;
 			}
 		}
 
@@ -330,7 +326,6 @@
 	position: absolute;
 	top: calc(50% - #{ $border-width });
 	height: $border-width-focus;
-	height: var(--border-width-focus);
 	left: 0;
 	right: 0;
 	background: theme(primary);
@@ -556,7 +551,6 @@
 			// When button is focused, it receives a box-shadow instead of the border.
 			&:focus {
 				box-shadow: 0 0 0 $border-width-focus $theme-color;
-				box-shadow: 0 0 0 var(--border-width-focus) $theme-color;
 			}
 		}
 

diff --git a/packages/block-editor/src/components/block-patterns/style.scss b/packages/block-editor/src/components/block-patterns/style.scss
@@ -17,7 +17,6 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -17,7 +17,6 @@
 
 	&:focus {
 		box-shadow: 0 0 0 $border-width-focus $theme-color;
-		box-shadow: 0 0 0 var(--border-width-focus) $theme-color;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -31,7 +31,6 @@
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
 		box-shadow: 0 0 0 $border-width-focus $theme-color;
-		box-shadow: 0 0 0 var(--border-width-focus) $theme-color;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 1px solid transparent;
@@ -61,7 +60,6 @@
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 1px solid transparent;

diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
@@ -8,8 +8,6 @@
 	margin-bottom: 5px;
 }
 
-$input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
-
 .components-custom-select-control__button {
 	border: 1px solid $medium-gray-text;
 	border-radius: $radius-block-ui;
@@ -22,7 +20,6 @@ $input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
 	&:focus:not(:disabled) {
 		border-color: $theme-color;
 		box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;
-		box-shadow: 0 0 0 $input-focus-width $theme-color;
 	}
 
 	&-icon {

diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
@@ -78,7 +78,6 @@ $toggle-border-width: 2px;
 
 	&__input:focus + .components-form-toggle__track {
 		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $theme-color;
-		box-shadow: 0 0 0 2px $white, 0 0 0 calc(2px + var(--border-width-focus)) $theme-color;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
@@ -90,7 +90,6 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		border-radius: 0;
 	}
 

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -24,7 +24,6 @@
 
 		&:focus {
 			box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 ($border-width-focus + 1px) $white;
-			box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 0 calc(var(--border-width-focus) + 1px) $white;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -83,7 +83,6 @@
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;

diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
@@ -11,7 +11,6 @@
 
 	&:focus:not(:disabled) {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--border-width-focus) $theme-color;
 	}
 
 	svg {

diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -57,12 +57,10 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		transition: none;
 	}
 
 	&.is-active:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color;
 	}
 }
diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
@@ -24,7 +24,6 @@
 
 		&:focus {
 			box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 3px $white;
-			box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color, inset 0 0 0 3px $white;
 		}
 	}
 }
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
@@ -59,7 +59,6 @@
 
 	&:focus {
 		box-shadow: 0 0 0 $border-width-focus $theme-color;
-		box-shadow: 0 0 0 var(--border-width-focus) $theme-color;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss
@@ -18,7 +18,6 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-		box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 		border-radius: 0;
 	}
 }
diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss
@@ -30,7 +30,6 @@
 	bottom: 0;
 	left: 0;
 	box-shadow: inset 0 0 0 $border-width-focus $theme-color;
-	box-shadow: inset 0 0 0 var(--border-width-focus) $theme-color;
 }
 
 .table-of-contents__counts {