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

const Renderer = (props) => {
  const {
    className,
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
  } = props

  const classes = classnames(
    className,
    'gridlex',
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI
  return (
    <div>
      
    </div>
  )
}

const Renderer = (props) => {
  const {
    className,
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
  } = props

  const classes = classnames(
    className,
    'gridlex',
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI
  return (
    <div>
      
    </div>
  )
}

save ({ attributes }) {
    const {
      align,
      backgroundType,
      contentAlign,
      customOverlayColor,
      dimRatio,
      hasParallax,
      overlayColor,
      title,
      url,
      // GUTENBERG JS
      data,
    } = attributes;
    const overlayColorClass = getColorClassName('background-color', overlayColor);
    const style = backgroundType === IMAGE_BACKGROUND_TYPE ?
      backgroundImageStyles(url) :
      {};
    if (! overlayColorClass) {
      style.backgroundColor = customOverlayColor;
    }

    const classes = classnames(
      dimRatioToClass(dimRatio),
      overlayColorClass,
      {
        'has-background-dim': dimRatio !== 0,
        'has-parallax': hasParallax,
        [ `has-${contentAlign}-content` ]: contentAlign !== 'center',
      },
      align ? `align${align}` : null,

customBackgroundColor,
      isStackedOnMobile,
      mediaAlt,
      mediaPosition,
      mediaType,
      mediaUrl,
      mediaWidth,
      // Gutenberg JS
      mediaData,
    } = attributes;
    const mediaTypeRenders = {
      image: () =&gt; <img alt="{" src="{">,
      video: () =&gt; <video src="{" controls="">,
    };

    const backgroundClass = getColorClassName('background-color', backgroundColor);
    const className = classnames({
      'has-media-on-the-right': 'right' === mediaPosition,
      [ backgroundClass ]: backgroundClass,
      'is-stacked-on-mobile': isStackedOnMobile,
    });

    let gridTemplateColumns;
    if (mediaWidth !== DEFAULT_MEDIA_WIDTH) {
      gridTemplateColumns = 'right' === mediaPosition ? `auto ${mediaWidth}%` : `${mediaWidth}% auto`;
    }
    const style = {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
      gridTemplateColumns,
    };
    return (
      <div style="{"></div></video>

const Editor = withColors('backgroundColor', 'textColor')((props) => {
  // Variables
  const {
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
    className,
  } = props

  const classes = classnames(
    className,
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI for columns without any columns
  if (columns.length === 0 && sum(columns) < 1) {
    return (
      
        
        
      
    )

const Editor = withColors('backgroundColor', 'textColor')((props) => {
  // Variables
  const {
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
    className,
  } = props

  const classes = classnames(
    className,
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

  // UI for columns without any columns
  if (columns.length === 0 && sum(columns) < 1) {
    return (
      
        
        
      
    )
  }

save( { attributes } ) {
		const { backgroundColor, customBackgroundColor } = attributes;

		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
		const className = classnames( backgroundClass, {
			'has-background': backgroundColor || customBackgroundColor,
		} );

		const styles = {
			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
		};

		return (
			<div style="{">
				
			</div>
		);
	},
};

save ({ attributes }) {
      const { url, title, hasParallax, dimRatio, align, contentAlign, overlayColor, customOverlayColor } = attributes;
      const overlayColorClass = getColorClassName('background-color', overlayColor);
      const style = backgroundImageStyles(url);
      if (! overlayColorClass) {
        style.backgroundColor = customOverlayColor;
      }

      const classes = classnames(
        'wp-block-cover-image',
        dimRatioToClass(dimRatio),
        overlayColorClass,
        {
          'has-background-dim': dimRatio !== 0,
          'has-parallax': hasParallax,
          [ `has-${contentAlign}-content` ]: contentAlign !== 'center',
        },
        align ? `align${align}` : null,
      );