From cddb04629216056789e268e100793c7e30120667 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 28 Sep 2021 17:50:54 +0100 Subject: [PATCH] Replace tinycolor2 with colord on some components. (#35185) --- package-lock.json | 8 ++ .../test/__snapshots__/control.js.snap | 2 +- packages/components/package.json | 1 + .../components/src/color-palette/index.js | 73 +++++++++++-------- .../test/__snapshots__/index.js.snap | 12 +-- .../src/custom-gradient-picker/utils.js | 7 +- .../components/src/duotone-picker/utils.js | 7 +- 7 files changed, 67 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 297e1c5bcb8923..f9784f50162f40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18229,6 +18229,7 @@ "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/warning", "classnames": "^2.3.1", + "colord": "^2.7.0", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", "framer-motion": "^4.1.17", @@ -18246,6 +18247,13 @@ "rememo": "^3.0.0", "tinycolor2": "^1.4.2", "uuid": "^8.3.0" + }, + "dependencies": { + "colord": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.8.0.tgz", + "integrity": "sha512-kNkVV4KFta3TYQv0bzs4xNwLaeag261pxgzGQSh4cQ1rEhYjcTJfFRP0SDlbhLONg0eSoLzrDd79PosjbltufA==" + } } }, "@wordpress/compose": { diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 06de8f83938cab..dc65ab06e65512 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -71,7 +71,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` /> onChange( undefined ), [ onChange ] ); const colorOptions = useMemo( () => { - return map( colors, ( { color, name } ) => ( - onChange( color ) - } - aria-label={ - name - ? // translators: %s: The name of the color e.g: "vivid red". - sprintf( __( 'Color: %s' ), name ) - : // translators: %s: color hex code e.g: "#f00". - sprintf( __( 'Color code: %s' ), color ) - } - /> - ) ); + return map( colors, ( { color, name } ) => { + const colordColor = colord( color ); + return ( + + colordColor.contrast( '#000' ) + ? '#fff' + : '#000', + } + : {} + } + tooltipText={ + name || + // translators: %s: color hex code e.g: "#f00". + sprintf( __( 'Color code: %s' ), color ) + } + style={ { backgroundColor: color, color } } + onClick={ + value === color ? clearColor : () => onChange( color ) + } + aria-label={ + name + ? // translators: %s: The name of the color e.g: "vivid red". + sprintf( __( 'Color: %s' ), name ) + : // translators: %s: color hex code e.g: "#f00". + sprintf( __( 'Color code: %s' ), color ) + } + /> + ); + } ); }, [ colors, value, onChange, clearColor ] ); const renderCustomColorPicker = () => ( { - const { r, g, b, a } = tinycolor( color ).toRgb(); + const { r, g, b, a } = colord( color ).toRgb(); return { length: { type: '%', diff --git a/packages/components/src/duotone-picker/utils.js b/packages/components/src/duotone-picker/utils.js index 72c607072e8c6a..f33aff4f965d52 100644 --- a/packages/components/src/duotone-picker/utils.js +++ b/packages/components/src/duotone-picker/utils.js @@ -1,7 +1,10 @@ /** * External dependencies */ -import tinycolor from 'tinycolor2'; +import { colord, extend } from 'colord'; +import namesPlugin from 'colord/plugins/names'; + +extend( [ namesPlugin ] ); /** * Object representation for a color. @@ -26,7 +29,7 @@ export function getDefaultColors( palette ) { return palette .map( ( { color } ) => ( { color, - brightness: tinycolor( color ).getBrightness() / 255, + brightness: colord( color ).brightness(), } ) ) .reduce( ( [ min, max ], current ) => {