Whitespace inconsistency between default color values and values returned by color picker in HSL format

[Acrophost]

📝 Provide detailed reproduction steps (if any)

1. Open a demo which has changable color with color picker and default color values, e.g. https://ckeditor.com/docs/ckeditor5/latest/features/tables/tables-styling.html#demo
2. Change a color with default values. Here for example, we change cell background color to red.
3. Change color with color picker.

✔️ Expected result

The format of a color of default color values (ones unchanged by users) should be consistent with the one obtained from color picker.

❌ Actual result

Color picker adds whitespaces inside the HSL brackets, while those are not there in case of default value colors (unless set otherwise), e.g. we get a hsl(0, 75%, 60%) value while picking red from default colors (in editor shown as red, but upon inspecting inline styles we have the hsl format) and hsl( 207, 83%, 32% ) from color picker.

📃 Other details

• Browser: All
• OS: Any

This works like this for any place with default color/color picker, including font color, font background color, table cell background color, table cell border color, table border color, table background color.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[mmotyczynska]

It may just be a matter of removing some extra spaces here:

ckeditor5/packages/ckeditor5-ui/src/colorpicker/utils.ts

Lines 126 to 137 in 686f416

	function formatColorOutput( values: FormatTableColor, format: ColorPickerOutputFormat ): string {
	switch ( format ) {
	case 'hex': return `#${ values }`;
	case 'rgb': return `rgb( ${ values[ 0 ] }, ${ values[ 1 ] }, ${ values[ 2 ] } )`;
	case 'hsl': return `hsl( ${ values[ 0 ] }, ${ values[ 1 ] }%, ${ values[ 2 ] }% )`;
	case 'hwb': return `hwb( ${ values[ 0 ] }, ${ values[ 1 ] }, ${ values[ 2 ] } )`;
	case 'lab': return `lab( ${ values[ 0 ] }% ${ values[ 1 ] } ${ values[ 2 ] } )`;
	case 'lch': return `lch( ${ values[ 0 ] }% ${ values[ 1 ] } ${ values[ 2 ] } )`;
	default: return '';
	}
	}