Remove: Tinycolor usage from component color utils (#35553)

WordPress · Oct 12, 2021 · 17bdf97 · 17bdf97
1 parent 286856e
commit 17bdf97
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/packages/components/src/ui/utils/colors.js b/packages/components/src/ui/utils/colors.js
@@ -2,11 +2,14 @@
  * External dependencies
  */
 import memoize from 'memize';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /** @type {HTMLDivElement} */
 let colorComputationNode;
 
+extend( [ namesPlugin ] );
+
 /**
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
@@ -32,7 +35,7 @@ function getColorComputationNode() {
  */
 function isColor( value ) {
 	if ( typeof value !== 'string' ) return false;
-	const test = tinycolor( value );
+	const test = colord( value );
 
 	return test.isValid();
 }
@@ -77,12 +80,8 @@ const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
  */
 export function getOptimalTextColor( backgroundColor ) {
 	const background = getComputedBackgroundColor( backgroundColor );
-	const isReadableWithBlackText = tinycolor.isReadable(
-		background,
-		'#000000'
-	);
 
-	return isReadableWithBlackText ? '#000000' : '#ffffff';
+	return colord( background ).isLight() ? '#000000' : '#ffffff';
 }
 
 /**

diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js
@@ -1,7 +1,10 @@
 /**
  * External dependencies
  */
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+
+extend( [ namesPlugin ] );
 
 /**
  * Generating a CSS compliant rgba() color value.
@@ -15,6 +18,5 @@ import tinycolor from 'tinycolor2';
  * // rgba(0, 0, 0, 0.5)
  */
 export function rgba( hexValue = '', alpha = 1 ) {
-	const { r, g, b } = tinycolor( hexValue ).toRgb();
-	return `rgba(${ r }, ${ g }, ${ b }, ${ alpha })`;
+	return colord( hexValue ).alpha( alpha ).toRgbString();
 }
diff --git a/packages/components/src/utils/test/colors.js b/packages/components/src/utils/test/colors.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import { rgba } from '../colors';
+
+describe( 'rbga', () => {
+	it( 'should output the expected string', () => {
+		expect( rgba( '#000000', 0.5 ) ).toBe( 'rgba(0, 0, 0, 0.5)' );
+		expect( rgba( '#f00', 0.2 ) ).toBe( 'rgba(255, 0, 0, 0.2)' );
+	} );
+} );