How to use the grommet/utils/colors.colorIsDark function in grommet

row.colors.map((color, colorIndex) => {
          const isActive = activeRow === rowIndex && activeColor === colorIndex;
          const colorStyle = {
            backgroundColor: color.color,
            color: colorIsDark(color.color) ?
              theme.global.colors.darkBackground.text : theme.global.colors.text,
            left: `${cellSize * colorIndex}px`,
          };
          return (
            
               { color.buttonRef = ref; }}
                style={colorStyle}
                size={size}
                theme={theme}
                tabIndex={isActive ? '0' : '-1'}
                a11yTitle={`${row.name !== undefined ? row.name : ''} ${color.name}`}
                plain={true}
                active={isActive}
                hoverIndicator='background'

const selectTest = ({ backgroundColor, container }) => {
  const errors = [];
  const darkBackground = colorIsDark(backgroundColor);
  const btn = container.children[0];
  const { color } = getComputedStyle(btn);
  if (colorIsDark(color) === darkBackground) {
    errors.push(`${color} on ${backgroundColor}`);
  }
  const { borderColor } = getComputedStyle(btn);
  if (colorIsDark(borderColor) === darkBackground) {
    errors.push(`border ${borderColor} on ${backgroundColor}`);
  }
  const svgIcon = btn.querySelector('svg');
  const { stroke } = getComputedStyle(svgIcon);
  if (colorIsDark(stroke) === darkBackground) {
    errors.push(`icon ${stroke} on ${backgroundColor}`);
  }
  return errors;
};

`;
    }
    return undefined;
  }
  if (background) {
    if (background.lastIndexOf('url', 0) === 0) {
      return css`
        background: ${background} no-repeat center center;
        background-size: cover;
      `;
    }
    const color = colorForName(background, theme);
    if (color) {
      return css`
        background-color: ${color};
        ${colorCss(colorIsDark(color) ?
    theme.global.colors.darkBackground.text : theme.global.colors.text)}
      `;
    }
  }
  return undefined;
};

const buttonTest = ({ backgroundColor, container }) => {
  const errors = [];
  const darkBackground = colorIsDark(backgroundColor);
  const btn = container.children[0];
  const { color } = getComputedStyle(btn);
  if (colorIsDark(color) === darkBackground) {
    errors.push(`${color} on ${backgroundColor}`);
  }
  const { borderColor } = getComputedStyle(btn);
  if (colorIsDark(borderColor) === darkBackground) {
    errors.push(`border ${borderColor} on ${backgroundColor}`);
  }

  const svgIcon = btn.querySelector('svg');
  const { stroke } = getComputedStyle(svgIcon);
  if (colorIsDark(stroke) === darkBackground) {
    errors.push(`icon ${stroke} on ${backgroundColor}`);
  }
  return errors;

const darkBackground = colorIsDark(backgroundColor);
  const label = container.querySelector('label');
  const { color } = getComputedStyle(label);
  if (colorIsDark(color) === darkBackground) {
    errors.push(`${color} on ${backgroundColor}`);
  }
  const checkbox = container.querySelector('input').nextSibling;

  const { borderColor } = getComputedStyle(checkbox);
  if (colorIsDark(borderColor) === darkBackground) {
    errors.push(`border ${borderColor} on ${backgroundColor}`);
  }
  const svgIcon = container.querySelector('svg');
  const { stroke, fill } = getComputedStyle(svgIcon);
  const svgColor = stroke !== 'none' ? stroke : fill;
  if (colorIsDark(svgColor) === darkBackground) {
    errors.push(`icon ${svgColor} on ${backgroundColor}`);
  }
  return errors;
};

const buttonTest = ({ backgroundColor, container }) => {
  const errors = [];
  const darkBackground = colorIsDark(backgroundColor);
  const btn = container.children[0];
  const { color } = getComputedStyle(btn);
  if (colorIsDark(color) === darkBackground) {
    errors.push(`${color} on ${backgroundColor}`);
  }
  const { borderColor } = getComputedStyle(btn);
  if (colorIsDark(borderColor) === darkBackground) {
    errors.push(`border ${borderColor} on ${backgroundColor}`);
  }

  const svgIcon = btn.querySelector('svg');
  const { stroke } = getComputedStyle(svgIcon);
  if (colorIsDark(stroke) === darkBackground) {
    errors.push(`icon ${stroke} on ${backgroundColor}`);
  }
  return errors;
};

const checkboxTest = ({ backgroundColor, container }) => {
  const errors = [];
  const darkBackground = colorIsDark(backgroundColor);
  const label = container.querySelector('label');
  const { color } = getComputedStyle(label);
  if (colorIsDark(color) === darkBackground) {
    errors.push(`${color} on ${backgroundColor}`);
  }
  const checkbox = container.querySelector('input').nextSibling;

  const { borderColor } = getComputedStyle(checkbox);
  if (colorIsDark(borderColor) === darkBackground) {
    errors.push(`border ${borderColor} on ${backgroundColor}`);
  }
  const svgIcon = container.querySelector('svg');
  const { stroke, fill } = getComputedStyle(svgIcon);
  const svgColor = stroke !== 'none' ? stroke : fill;
  if (colorIsDark(svgColor) === darkBackground) {
    errors.push(`icon ${svgColor} on ${backgroundColor}`);
  }
  return errors;
};

const anchorTest = ({ backgroundColor, container }) => {
  const errors = [];
  const { color } = getComputedStyle(container.children[0]);
  const error = colorIsDark(color) === colorIsDark(backgroundColor);
  if (error) {
    errors.push(`${color} on ${backgroundColor}`);
  }
  return errors;
};

checkBox: {},
    anchor: {},
    heading: {},
    radioButton: {},
  };
  const brandRGB = parseRGBString(color);
  const backgroundRGB = parseRGBString(backgroundColor);

  if (brandRGB && backgroundRGB) {
    const bgColor = Color.rgb(backgroundRGB[0], backgroundRGB[1], backgroundRGB[2]);
    const brandColor = Color.rgb(brandRGB[0], brandRGB[1], brandRGB[2]);
    let isDarkBrand;
    let isDarkBackground;
    try {
      isDarkBackground = colorIsDark(backgroundColor);
      isDarkBrand = colorIsDark(color);
    } catch (e) {
      return result;
    }
    let softerBackground;
    let textColor;
    if (isDarkBackground) {
      textColor = parseRGBString('#ebebeb');
      softerBackground = bgColor.lighten(0.05);
    } else {
      textColor = parseRGBString('#444444');
      softerBackground = bgColor.darken(0.05);
    }
    textColor = Color.rgb(textColor[0], textColor[1], textColor[2]);
    const border = {
      dark: '#ebebeb',
      light: '#444444',

${colorCss(color)}
      `;
    } else if (background.color) {
      const color = colorForName(background.color, theme);
      const rgba = getRGBA(
        color,
        background.opacity === true ? (
          theme.global.opacity.medium
        ) : (
          theme.global.opacity[background.opacity]
        )
      );
      if (rgba) {
        return css`
          background-color: ${rgba};
          ${colorCss(colorIsDark(rgba) ?
    theme.global.colors.darkBackground.text : theme.global.colors.text)}
        `;
      }
    } else if (background.dark === false) {
      return css`
        color: ${theme.global.colors.text};
      `;
    } else if (background.dark) {
      return css`
        ${colorCss(theme.global.colors.darkBackground.text)};
      `;
    }
    return undefined;
  }
  if (background) {
    if (background.lastIndexOf('url', 0) === 0) {