Replace tinycolor2 with colord on the bocks package. (#35165)

packages/blocks/package.json

@@ -42,12 +42,12 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/shortcode": "file:../shortcode",
+		"colord": "^2.7.0",
 		"hpq": "^1.3.0",
 		"lodash": "^4.17.21",
 		"rememo": "^3.0.0",
 		"showdown": "^1.9.1",
 		"simple-html-tokenizer": "^0.5.7",
-		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"
 	},
 	"publishConfig": {

packages/blocks/src/api/utils.js

@@ -1,8 +1,10 @@
 /**
  * External dependencies
  */
-import { every, has, isFunction, isString, reduce } from 'lodash';
-import { default as tinycolor, mostReadable } from 'tinycolor2';
+import { every, has, isFunction, isString, reduce, maxBy } from 'lodash';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
@@ -18,6 +20,8 @@ import { BLOCK_ICON_DEFAULT } from './constants';
 import { getBlockType, getDefaultBlockName } from './registration';
 import { createBlock } from './factory';
 
+extend( [ namesPlugin, a11yPlugin ] );
+
 /**
  * Array of icon colors containing a color to be used if the icon color
  * was not explicitly set but the icon background color was.
@@ -96,18 +100,16 @@ export function normalizeIconObject( icon ) {
 	}
 
 	if ( has( icon, [ 'background' ] ) ) {
-		const tinyBgColor = tinycolor( icon.background );
+		const colordBgColor = colord( icon.background );
 
 		return {
 			...icon,
 			foreground: icon.foreground
 				? icon.foreground
-				: mostReadable( tinyBgColor, ICON_COLORS, {
-						includeFallbackColors: true,
-						level: 'AA',
-						size: 'large',
-				  } ).toHexString(),
-			shadowColor: tinyBgColor.setAlpha( 0.3 ).toRgbString(),
+				: maxBy( ICON_COLORS, ( iconColor ) =>
+						colordBgColor.contrast( iconColor )
+				  ),
+			shadowColor: colordBgColor.alpha( 0.3 ).toRgbString(),
 		};
 	}