{
abbreviation="B"
value={ b }
onChange={ ( nextB: number ) =>
- onChange( colorize( { r, g, b: nextB, a } ).toHsl() )
+ onChange( colord( { r, g, b: nextB, a } ) )
}
/>
{ enableAlpha && (
@@ -58,12 +58,12 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
value={ Math.trunc( a * 100 ) }
onChange={ ( nextA: number ) =>
onChange(
- colorize( {
+ colord( {
r,
g,
b,
a: nextA / 100,
- } ).toHsl()
+ } )
)
}
/>
diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
index 1ee9baa7d5be8..e5b9d41ff42af 100644
--- a/packages/components/src/color-picker/stories/index.js
+++ b/packages/components/src/color-picker/stories/index.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import { boolean, select } from '@storybook/addon-knobs';
-import colorize from 'tinycolor2';
+import { colord } from 'colord';
/**
* WordPress dependencies
@@ -49,7 +49,7 @@ const Example = () => {
>
- { colorize( color ).toHslString() }
+ { colord( color ).toHslString() }
diff --git a/packages/components/src/color-picker/test/index.js b/packages/components/src/color-picker/test/index.js
index 503d5ffa66e8f..493d184594cfd 100644
--- a/packages/components/src/color-picker/test/index.js
+++ b/packages/components/src/color-picker/test/index.js
@@ -47,12 +47,6 @@ const sleep = ( ms ) => {
return promise;
};
-const hslMatcher = expect.objectContaining( {
- h: expect.any( Number ),
- s: expect.any( Number ),
- l: expect.any( Number ),
-} );
-
const hslaMatcher = expect.objectContaining( {
h: expect.any( Number ),
s: expect.any( Number ),
@@ -61,7 +55,6 @@ const hslaMatcher = expect.objectContaining( {
} );
const legacyColorMatcher = {
- color: expect.anything(),
hex: expect.any( String ),
hsl: hslaMatcher,
hsv: expect.objectContaining( {
@@ -109,14 +102,9 @@ describe( 'ColorPicker', () => {
} );
} );
- it( 'should fire onChange with the HSLA value', async () => {
+ it( 'should fire onChange with the string value', async () => {
const onChange = jest.fn();
- const color = {
- h: 125,
- s: 0.2,
- l: 0.5,
- a: 0.5,
- };
+ const color = 'rgba(1, 1, 1, 0.5)';
const { container } = render(
@@ -132,7 +120,9 @@ describe( 'ColorPicker', () => {
// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
await sleep( 1 );
- expect( onChange ).toHaveBeenCalledWith( hslaMatcher );
+ expect( onChange ).toHaveBeenCalledWith(
+ expect.stringContaining( 'rgba' )
+ );
} );
it( 'should fire onChange with the HSL value', async () => {
@@ -163,6 +153,8 @@ describe( 'ColorPicker', () => {
// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
await sleep( 1 );
- expect( onChange ).toHaveBeenCalledWith( hslMatcher );
+ expect( onChange ).toHaveBeenCalledWith(
+ expect.stringContaining( '#' )
+ );
} );
} );
diff --git a/packages/components/src/color-picker/use-deprecated-props.ts b/packages/components/src/color-picker/use-deprecated-props.ts
index a4ab085704e60..d8c9223d26586 100644
--- a/packages/components/src/color-picker/use-deprecated-props.ts
+++ b/packages/components/src/color-picker/use-deprecated-props.ts
@@ -1,7 +1,15 @@
/**
* External dependencies
*/
-import colorize, { ColorFormats } from 'tinycolor2';
+import {
+ colord,
+ HslColor,
+ HslaColor,
+ HsvColor,
+ HsvaColor,
+ RgbColor,
+ RgbaColor,
+} from 'colord';
// eslint-disable-next-line no-restricted-imports
import type { ComponentProps } from 'react';
import memoize from 'memize';
@@ -24,11 +32,10 @@ type ColorPickerProps = ComponentProps< typeof ColorPicker >;
type LegacyColor =
| string
| {
- color: colorize.Instance;
hex: string;
- hsl: ColorFormats.HSL | ColorFormats.HSLA;
- hsv: ColorFormats.HSV | ColorFormats.HSVA;
- rgb: ColorFormats.RGB | ColorFormats.RGBA;
+ hsl: HslColor | HslaColor;
+ hsv: HsvColor | HsvaColor;
+ rgb: RgbColor | RgbaColor;
/**
* @deprecated
*/
@@ -43,7 +50,7 @@ type LegacyColor =
* @deprecated
*/
export interface LegacyProps {
- color: LegacyColor | undefined;
+ color?: LegacyColor;
/**
* @deprecated
*/
@@ -62,51 +69,32 @@ export interface LegacyProps {
function isLegacyProps( props: any ): props is LegacyProps {
return (
typeof props.onChangeComplete !== 'undefined' ||
- typeof props.color === 'string' ||
+ typeof props.disableAlpha !== 'undefined' ||
typeof props.color?.hex === 'string'
);
}
-function getColorFromLegacyProps(
- props: LegacyProps
-): ColorFormats.HSL | ColorFormats.HSLA | undefined {
- if ( ! props.color ) {
+function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
+ if ( typeof props?.color === 'undefined' ) {
return undefined;
}
if ( typeof props.color === 'string' ) {
- return colorize( props.color ).toHsl();
+ return props.color;
+ }
+ if ( props.color.hex ) {
+ return props.color.hex;
}
-
- return props.color.hsl;
-}
-
-function toHsv(
- color: colorize.Instance
-): ColorFormats.HSV | ColorFormats.HSVA {
- const { h, s, v, a } = color.toHsv();
-
- return {
- h: Math.round( h ),
- s: Math.round( s * 100 ),
- v: Math.round( v * 100 ),
- a,
- };
}
-const transformHslToLegacyColor = memoize(
- ( hsla: ColorFormats.HSL | ColorFormats.HSLA ): LegacyColor => {
- const color = colorize( hsla );
- const rawHex = color.toHex();
- const rgb = color.toRgb();
- const hsv = toHsv( color );
- const hsl = hsla;
-
- const isTransparent = rawHex === '000000' && rgb.a === 0;
-
- const hex = isTransparent ? 'transparent' : `#${ rawHex }`;
+const transformColorStringToLegacyColor = memoize(
+ ( color: string ): LegacyColor => {
+ const colordColor = colord( color );
+ const hex = colordColor.toHex();
+ const rgb = colordColor.toRgb();
+ const hsv = colordColor.toHsv();
+ const hsl = colordColor.toHsl();
return {
- color,
hex,
rgb,
hsv,
@@ -121,14 +109,14 @@ export function useDeprecatedProps(
props: LegacyProps | ColorPickerProps
): ColorPickerProps {
const onChange = useCallback(
- ( hsla: ColorFormats.HSL | ColorFormats.HSLA ) => {
+ ( color: string ) => {
if ( isLegacyProps( props ) ) {
return props.onChangeComplete(
- transformHslToLegacyColor( hsla )
+ transformColorStringToLegacyColor( color )
);
}
- return props.onChange?.( hsla );
+ return props.onChange?.( color );
},
[
( props as LegacyProps ).onChangeComplete,