Components: Update gradient-parser from 1.0.2 to 1.1.1

packages/components/package.json

@@ -41,7 +41,7 @@
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "2.0.8",
-		"@types/gradient-parser": "0.1.3",
+		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
 		"@wordpress/a11y": "file:../a11y",
@@ -68,7 +68,7 @@
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.1.9",
-		"gradient-parser": "1.0.2",
+		"gradient-parser": "1.1.1",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",

packages/components/src/custom-gradient-picker/serializer.ts

@@ -13,6 +13,17 @@ export function serializeGradientColor( {
 	if ( type === 'hex' ) {
 		return `#${ value }`;
 	}
+	if ( type === 'var' ) {
+		return `var(${ value })`;
+	}
+	if ( type === 'hsl' ) {
+		const [ hue, saturation, lightness ] = value;
+		return `hsl(${ hue },${ saturation }%,${ lightness }%)`;
+	}
+	if ( type === 'hsla' ) {
+		const [ hue, saturation, lightness, alpha ] = value;
+		return `hsla(${ hue },${ saturation }%,${ lightness }%,${ alpha })`;
+	}
 	return `${ type }(${ value.join( ',' ) })`;
 }
 
@@ -23,6 +34,9 @@ export function serializeGradientPosition(
 		return '';
 	}
 	const { value, type } = position;
+	if ( type === 'calc' ) {
+		return `calc(${ value })`;
+	}
 	return `${ value }${ type }`;
 }
 

packages/components/src/custom-gradient-picker/test/serializer.ts

@@ -24,6 +24,27 @@ describe( 'It should serialize a gradient', () => {
 				value: [ '255', '0', '0' ],
 			} )
 		).toBe( 'rgb(255,0,0)' );
+
+		expect(
+			serializeGradientColor( {
+				type: 'hsl',
+				value: [ '1', '2', '3' ],
+			} )
+		).toBe( 'hsl(1,2%,3%)' );
+
+		expect(
+			serializeGradientColor( {
+				type: 'hsla',
+				value: [ '1', '2', '3', '0.5' ],
+			} )
+		).toBe( 'hsla(1,2%,3%,0.5)' );
+
+		expect(
+			serializeGradientColor( {
+				type: 'var',
+				value: '--my-color',
+			} as any )
+		).toBe( 'var(--my-color)' );
 	} );
 
 	test( 'serializeGradientPosition', () => {
@@ -38,6 +59,10 @@ describe( 'It should serialize a gradient', () => {
 		expect( serializeGradientPosition( { type: 'px', value: '4' } ) ).toBe(
 			'4px'
 		);
+
+		expect(
+			serializeGradientPosition( { type: 'calc', value: '50% + 10px' } )
+		).toBe( 'calc(50% + 10px)' );
 	} );
 
 	test( 'serializeGradientColorStop', () => {

packages/components/src/custom-gradient-picker/utils.ts

@@ -108,9 +108,19 @@ export function getStopCssColor( colorStop: gradientParser.ColorStop ) {
 			return `#${ colorStop.value }`;
 		case 'literal':
 			return colorStop.value;
+		case 'var':
+			return `${ colorStop.type }(${ colorStop.value })`;
 		case 'rgb':
 		case 'rgba':
 			return `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;
+		case 'hsl': {
+			const [ hue, saturation, lightness ] = colorStop.value;
+			return `hsl(${ hue },${ saturation }%,${ lightness }%)`;
+		}
+		case 'hsla': {
+			const [ hue, saturation, lightness, alpha ] = colorStop.value;
+			return `hsla(${ hue },${ saturation }%,${ lightness }%,${ alpha })`;
+		}
 		default:
 			// Should be unreachable if passing an AST from gradient-parser.
 			// See https://github.com/rafaelcaricio/gradient-parser#ast.

packages/components/src/gradient-picker/stories/index.story.tsx

@@ -64,6 +64,18 @@ const GRADIENTS = [
 			'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
 		slug: 'cool-to-warm-spectrum',
 	},
+	{
+		name: 'HSL blue to purple',
+		gradient:
+			'linear-gradient(135deg,hsl(200, 100%, 50%) 0%,hsl(280, 100%, 60%) 100%)',
+		slug: 'hsl-blue-to-purple',
+	},
+	{
+		name: 'HSLA green to red',
+		gradient:
+			'linear-gradient(135deg,hsla(120, 100%, 40%, 0.85) 0%,hsla(0, 100%, 50%, 0.85) 100%)',
+		slug: 'hsla-green-to-red',
+	},
 ];
 
 const Template: StoryFn< typeof GradientPicker > = ( {
@@ -103,3 +115,39 @@ MultipleOrigins.args = {
 		{ name: 'Origin 2', gradients: GRADIENTS },
 	],
 };
+
+export const CSSVariables: StoryFn< typeof GradientPicker > = ( args ) => {
+	return (
+		<div
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
+		>
+			<Template { ...args } />
+		</div>
+	);
+};
+CSSVariables.args = {
+	...Default.args,
+	gradients: [
+		{
+			name: 'Red to Yellow',
+			gradient:
+				'linear-gradient(135deg,var(--red) 0%,var(--yellow) 100%)',
+			slug: 'red-to-yellow',
+		},
+		{
+			name: 'Yellow to Blue',
+			gradient:
+				'linear-gradient(135deg,var(--yellow) 0%,var(--blue) 100%)',
+			slug: 'yellow-to-blue',
+		},
+		{
+			name: 'Blue to Red',
+			gradient: 'linear-gradient(135deg,var(--blue) 0%,var(--red) 100%)',
+			slug: 'blue-to-red',
+		},
+	],
+};