@wordpress/components 22.0.0 → 22.1.0

package/src/utils/colors-values.js

@@ -31,12 +31,14 @@ const ALERT = {
 
 // Matches @wordpress/base-styles
 const ADMIN = {
-	theme: 'var( --wp-admin-theme-color, #007cba)',
-	themeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	themeDark10:
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
 };
 
 const UI = {
 	theme: ADMIN.theme,
+	themeDark10: ADMIN.themeDark10,
 	background: white,
 	backgroundDisabled: GRAY[ 100 ],
 	border: GRAY[ 700 ],

package/src/utils/hooks/stories/use-cx.js

@@ -32,9 +32,9 @@ const Example = ( { serializedStyles, children } ) => {
 const ExampleWithUseMemoWrong = ( { serializedStyles, children } ) => {
 	const cx = useCx();
 	// Wrong: using 'useMemo' without adding 'cx' to the dependency list.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const classes = useMemo(
 		() => cx( serializedStyles ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ serializedStyles ]
 	);
 	return <span className={ classes }>{ children }</span>;

package/src/utils/input/base.js

@@ -19,10 +19,10 @@ export const inputStyleNeutral = css`
 `;
 
 export const inputStyleFocus = css`
-	border-color: var( --wp-admin-theme-color );
+	border-color: ${ COLORS.ui.theme };
 	box-shadow: 0 0 0
 		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		var( --wp-admin-theme-color );
+		${ COLORS.ui.theme };
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;