Spiner: Use CSS-in-JS

packages/components/src/spinner/index.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { StyledSpinner } from './styles/spinner-styles';
+
 export default function Spinner() {
-	return <span className="components-spinner" />;
+	return <StyledSpinner className="components-spinner" />;
 }

packages/components/src/spinner/styles/spinner-styles.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/core';
+
+/**
+ * Internal dependencies
+ */
+import { color, config } from '../../utils';
+
+const spinAnimation = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+`;
+
+const topLeft = `calc( ( ${ config( 'spinnerSize' ) } - ${ config(
+	'spinnerSize'
+) } * ( 2 / 3 ) ) / 2 )`;
+
+export const StyledSpinner = styled.span`
+	display: inline-block;
+	background-color: ${ color( 'gray.600' ) };
+	width: ${ config( 'spinnerSize' ) };
+	height: ${ config( 'spinnerSize' ) };
+	opacity: 0.7;
+	margin: 5px 11px 0;
+	border-radius: 100%;
+	position: relative;
+
+	&::before {
+		content: '';
+		position: absolute;
+		background-color: ${ color( 'white' ) };
+		top: ${ topLeft };
+		left: ${ topLeft };
+		width: calc( ${ config( 'spinnerSize' ) } / 4.5 );
+		height: calc( ${ config( 'spinnerSize' ) } / 4.5 );
+		border-radius: 100%;
+		transform-origin: calc( ${ config( 'spinnerSize' ) } / 3 )
+			calc( ${ config( 'spinnerSize' ) } / 3 );
+		animation: ${ spinAnimation } 1s infinite linear;
+	}
+`;

packages/components/src/style.scss

@@ -36,7 +36,6 @@
 @import "./scroll-lock/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
-@import "./spinner/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";

packages/components/src/utils/colors-values.js

@@ -169,6 +169,7 @@ export const COLORS = {
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
 	mediumGray: G2.mediumGray,
+	gray: G2.gray,
 	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
 	lightGrayLight: LIGHT_OPACITY_LIGHT,
 	blue: merge( {}, BLUE, G2.blue ),

packages/components/src/utils/config-values.js

@@ -3,4 +3,5 @@ export default {
 	borderWidth: '1px',
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
+	spinnerSize: '18px',
 };