How to use the @wordpress/block-editor.getColorClassName function in @wordpress/block-editor

;
    ;
})();

//
// colors
//

// $ExpectType ComponentType
be.createCustomColorsHOC(COLORS)('backgroundColor', 'borderColor')(() =&gt; <h1>Hello World</h1>);

// $ExpectType string
be.getColorClassName('foo', 'bar');

// $ExpectType string | undefined
be.getColorClassName(undefined, 'bar');

// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, 'red', '#ff0000');

// $ExpectType EditorColor | Pick
be.getColorObjectByAttributeValues(COLORS, undefined, '#ff0000');

// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, '#ff0000');

// $ExpectType EditorColor | undefined
be.getColorObjectByColorValue(COLORS, undefined);

// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() =&gt; <h1>Hello World</h1>);

const save = ( { attributes, className } ) => {
	const {
		coblocks,
		contentAlign,
		customTextColor,
		textColor,
		paddingSize,
	} = attributes;

	// Body color class and styles.
	const textClass = getColorClassName( 'color', textColor );

	let classes = classnames(
		className, {
			[ `has-${ contentAlign }-content` ]: contentAlign,
		} );

	if ( coblocks && ( typeof coblocks.id !== 'undefined' ) ) {
		classes = classnames( classes, `coblocks-feature-${ coblocks.id }` );
	}

	const innerClasses = classnames(
		'wp-block-coblocks-feature__inner',
		...BackgroundClasses( attributes ), {
			'has-text-color': textColor || customTextColor,
			[ textClass ]: textClass,
			'has-padding': paddingSize && paddingSize !== 'no',

fontSize,
		customFontSize,
		borderRadius,
		borderWeight,
		borderColor,
		customBorderColor,
		padding,
		spacing,
	} = attributes;

	const isGradientAvailable = !! getGradientClass;

	const textColorClass = getColorClassName( 'color', textColor );
	const fontSizeClass = getFontSizeClass( fontSize );
	const borderClass = getColorClassName( 'border-color', borderColor );
	const buttonBackgroundClass = getColorClassName( 'background-color', buttonBackgroundColor );
	const buttonGradientClass = isGradientAvailable ? getGradientClass( buttonGradient ) : undefined;

	const emailFieldBackgroundClass = getColorClassName(
		'background-color',
		emailFieldBackgroundColor
	);
	const emailFieldGradientClass = isGradientAvailable
		? getGradientClass( emailFieldGradient )
		: undefined;

	const sharedClasses = classnames(
		borderRadius === 0 ? 'no-border-radius' : undefined,
		fontSizeClass,
		borderClass
	);

save( { attributes } ) {
			const {
				align,
				content,
				dropCap,
				backgroundColor,
				textColor,
				customBackgroundColor,
				customTextColor,
				fontSize,
				customFontSize,
				direction,
			} = attributes;

			const textClass = getColorClassName( 'color', textColor );
			const backgroundClass = getColorClassName( 'background-color', backgroundColor );
			const fontSizeClass = getFontSizeClass( fontSize );

			const className = classnames( {
				'has-text-color': textColor || customTextColor,
				'has-background': backgroundColor || customBackgroundColor,
				'has-drop-cap': dropCap,
				[ fontSizeClass ]: fontSizeClass,
				[ textClass ]: textClass,
				[ backgroundClass ]: backgroundClass,
			} );

			const styles = {
				backgroundColor: backgroundClass ? undefined : customBackgroundColor,
				color: textClass ? undefined : customTextColor,
				fontSize: fontSizeClass ? undefined : customFontSize,

function BackgroundClasses( attributes ) {
	const backgroundClass = getColorClassName( 'background-color', attributes.backgroundColor );
	const backgroundSize = attributes.backgroundSize ? attributes.backgroundSize : 'cover';

	const classes = [
		{ [ backgroundClass ]: backgroundClass },
		{ 'has-background': attributes.backgroundColor || attributes.customBackgroundColor },
		{ 'has-parallax': attributes.backgroundImg && attributes.backgroundType === 'image' && attributes.hasParallax },
		{ 'is-transient': attributes.backgroundImg && 0 === attributes.backgroundImg.indexOf( 'blob:' ) },
		{ 'has-background-overlay': attributes.backgroundImg && attributes.backgroundOverlay !== 0 },
		{ [ `bg-${ backgroundSize }` ]: attributes.backgroundImg && attributes.backgroundType === 'image' },
	];

	if ( attributes.backgroundType ) {
		classes.push(
			{ [ `has-background-${ attributes.backgroundType }` ]: attributes.backgroundImg }
		);
	}

const deprecatedSVGs = ( { attributes, className } ) => {
	const {
		backgroundColor,
		backgroundHeight,
		coblocks,
		color,
		customBackgroundColor,
		customColor,
		horizontalFlip,
		shapeHeight,
		verticalFlip,
	} = attributes;

	const shapeClass = getColorClassName( 'color', color );
	const backgroundClass = getColorClassName( 'background-color', backgroundColor );

	let classes = classnames(
		className, {
			'is-vertically-flipped': verticalFlip,
			'is-horizontally-flipped': horizontalFlip,
			[ shapeClass ]: shapeClass,
			[ backgroundClass ]: backgroundClass,
		} );

	const deprecatedGetDividerFromStyle = ( className ) => {
		const angled = includes( className, 'is-style-angled' );
		const hills = includes( className, 'is-style-hills' );
		const pointed = includes( className, 'is-style-pointed' );
		const rounded = includes( className, 'is-style-rounded' );
		const sloped = includes( className, 'is-style-sloped' );

export default function save( { attributes } ) {
	const {
		url,
		text,
		title,
		backgroundColor,
		textColor,
		customBackgroundColor,
		customTextColor,
		linkTarget,
		rel,
	} = attributes;

	const textClass = getColorClassName( 'color', textColor );
	const backgroundClass = getColorClassName( 'background-color', backgroundColor );

	const buttonClasses = classnames( 'wp-block-button__link', {
		'has-text-color': textColor || customTextColor,
		[ textClass ]: textClass,
		'has-background': backgroundColor || customBackgroundColor,
		[ backgroundClass ]: backgroundClass,
	} );

	const buttonStyle = {
		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
		color: textClass ? undefined : customTextColor,
	};

	return (
		<div></div>

save( { attributes } ) {
		const {
			coblocks,
			textColor,
			customTextColor,
			marginSize,
			paddingSize,
			contentAlign,
		} = attributes;
		const textClass = getColorClassName( 'color', textColor );

		let classes = '';

		if ( coblocks && ( typeof coblocks.id !== 'undefined' ) ) {
			classes = classnames( classes, `coblocks-column-${ coblocks.id }` );
		}

		const innerClasses = classnames(
			'wp-block-coblocks-column__inner',
			...BackgroundClasses( attributes ),
			{
				'has-padding': paddingSize && paddingSize !== 'no',
				'has-margin': marginSize && marginSize !== 'no',
				[ `has-${ paddingSize }-padding` ]:
					paddingSize && paddingSize !== 'advanced',
				[ `has-${ marginSize }-margin` ]: marginSize && marginSize !== 'advanced',

backgroundColor,
		backgroundImg,
		columns,
		customBackgroundColor,
		customTextColor,
		gutter,
		id,
		layout,
		isStackedOnMobile,
		marginSize,
		paddingSize,
		textColor,
	} = attributes;

	const textClass = getColorClassName( 'color', textColor );
	const backgroundClass = getColorClassName( 'background-color', backgroundColor );

	let classlist = {
		'has-text-color': textColor || customTextColor,
		[ textClass ]: textClass,
	};

	if ( coblocks && ( typeof coblocks.id !== 'undefined' ) ) {
		classlist = Object.assign( classlist, [ `coblocks-row-${ coblocks.id }` ] );
	}

	const classes = classnames( classlist );

	const styles = {
		color: textClass ? undefined : customTextColor,
	};

const save = ( { className, attributes } ) => {
	const {
		backgroundColor,
		biography,
		customBackgroundColor,
		customTextColor,
		imgUrl,
		name,
		textColor,
		fontSize,
		customFontSize,
	} = attributes;

	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
	const textClass = getColorClassName( 'color', textColor );
	const fontSizeClass = getFontSizeClass( fontSize );

	const classes = classnames( className, {
		'has-text-color': textColor || customTextColor,
		'has-background': backgroundColor || customBackgroundColor,
		[ textClass ]: textClass,
		[ backgroundClass ]: backgroundClass,
		[ fontSizeClass ]: fontSizeClass,
	} );

	const styles = {
		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
		color: textClass ? undefined : customTextColor,
		fontSize: fontSizeClass ? undefined : customFontSize,
	};