Components: Extract spinner size as base variable

Allow for reuse in computing dimensions in other stylesheets

packages/base-styles/_variables.scss

@@ -48,12 +48,8 @@ $content-width: 580px; // This is optimized for 70 characters.
 // Block UI
 $border-width: 1px;
 $block-controls-height: 36px;
-$icon-button-size: 36px;
-$icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: $block-controls-height + $border-width;
-$resize-handler-size: 15px;
-$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
 $block-left-border-width: $border-width * 3;
@@ -80,6 +76,11 @@ $block-media-container-to-content: $block-selected-child-margin + $block-selecte
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
 $radius-round: 50%;
+$icon-button-size: 36px;
+$icon-button-size-small: 24px;
+$resize-handler-size: 15px;
+$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
+$spinner-size: 18px;
 
 // Widgets screen
 $widget-area-width: 700px;

packages/components/src/spinner/style.scss

@@ -1,8 +1,8 @@
 .components-spinner {
 	display: inline-block;
 	background-color: $dark-gray-200;
-	width: 18px;
-	height: 18px;
+	width: $spinner-size;
+	height: $spinner-size;
 	opacity: 0.7;
 	margin: 5px 11px 0;
 	border-radius: 100%;
@@ -13,12 +13,12 @@
 		content: "";
 		position: absolute;
 		background-color: $white;
-		top: 3px;
-		left: 3px;
-		width: 4px;
-		height: 4px;
+		top: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2;
+		left: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2;
+		width: ( $spinner-size / 4.5 );
+		height: ( $spinner-size / 4.5 );
 		border-radius: 100%;
-		transform-origin: 6px 6px;
+		transform-origin: ( $spinner-size / 3 ) ( $spinner-size / 3 );
 		animation: components-spinner__animation 1s infinite linear;
 		/* rtl:end:ignore */
 	}