Components: remove config() utility function, use values directly (#…

…31646) * Remove config utility function in favour of using the values directly * changelog * Remove changelog entry Co-authored-by: Ella van Durpe <[email protected]>
WordPress · May 12, 2021 · 2a33806 · 2a33806
1 parent f1f63ab
commit 2a33806
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 25 deletions.
diff --git a/packages/components/src/spinner/styles/spinner-styles.js b/packages/components/src/spinner/styles/spinner-styles.js
@@ -7,7 +7,7 @@ import { keyframes } from '@emotion/core';
 /**
  * Internal dependencies
  */
-import { COLORS, config } from '../../utils';
+import { COLORS, CONFIG } from '../../utils';
 
 const spinAnimation = keyframes`
 	from {
@@ -19,15 +19,13 @@ const spinAnimation = keyframes`
 	}
 `;
 
-const topLeft = `calc( ( ${ config( 'spinnerSize' ) } - ${ config(
-	'spinnerSize'
-) } * ( 2 / 3 ) ) / 2 )`;
+const topLeft = `calc( ( ${ CONFIG.spinnerSize } - ${ CONFIG.spinnerSize } * ( 2 / 3 ) ) / 2 )`;
 
 export const StyledSpinner = styled.span`
 	display: inline-block;
 	background-color: ${ COLORS.gray[ 600 ] };
-	width: ${ config( 'spinnerSize' ) };
-	height: ${ config( 'spinnerSize' ) };
+	width: ${ CONFIG.spinnerSize };
+	height: ${ CONFIG.spinnerSize };
 	opacity: 0.7;
 	margin: 5px 11px 0;
 	border-radius: 100%;
@@ -39,11 +37,11 @@ export const StyledSpinner = styled.span`
 		background-color: ${ COLORS.white };
 		top: ${ topLeft };
 		left: ${ topLeft };
-		width: calc( ${ config( 'spinnerSize' ) } / 4.5 );
-		height: calc( ${ config( 'spinnerSize' ) } / 4.5 );
+		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 );
+		transform-origin: calc( ${ CONFIG.spinnerSize } / 3 )
+			calc( ${ CONFIG.spinnerSize } / 3 );
 		animation: ${ spinAnimation } 1s infinite linear;
 	}
 `;
diff --git a/packages/components/src/utils/config.js b/packages/components/src/utils/config.js
diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
@@ -7,21 +7,21 @@ import { css } from '@emotion/core';
  * Internal dependencies
  */
 import { reduceMotion } from '../reduce-motion';
-import { config } from '../config';
 import { COLORS } from '../colors-values';
+import { CONFIG } from '../';
 
 export const inputStyleNeutral = css`
 	box-shadow: 0 0 0 transparent;
 	transition: box-shadow 0.1s linear;
-	border-radius: ${ config( 'radiusBlockUi' ) };
-	border: ${ config( 'borderWidth' ) } solid ${ COLORS.ui.border };
+	border-radius: ${ CONFIG.radiusBlockUi };
+	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border } };
 	${ reduceMotion( 'transition' ) }
 `;
 
 export const inputStyleFocus = css`
 	border-color: var( --wp-admin-theme-color );
 	box-shadow: 0 0 0
-		calc( ${ config( 'borderWidthFocus' ) } - ${ config( 'borderWidth' ) } )
+		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
 		var( --wp-admin-theme-color );
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.

diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
@@ -4,6 +4,5 @@ export { rtl } from './rtl';
 export { space } from './space';
 export { font } from './font';
 export { breakpoint } from './breakpoint';
-export { config } from './config';
 export { default as CONFIG } from './config-values';
 export { COLORS } from './colors-values';