@wordpress/components/build-module/color-palette/utils.js

UI components for WordPress.

/**
 * External dependencies
 */
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
import a11yPlugin from 'colord/plugins/a11y';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

extend([namesPlugin, a11yPlugin]);
export const extractColorNameFromCurrentValue = function (currentValue) {
  let colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  let showMultiplePalettes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

  if (!currentValue) {
    return '';
  }

  const currentValueIsCssVariable = /^var\(/.test(currentValue);
  const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : colord(currentValue).toHex(); // Normalize format of `colors` to simplify the following loop

  const colorPalettes = showMultiplePalettes ? colors : [{
    colors: colors
  }];

  for (const {
    colors: paletteColors
  } of colorPalettes) {
    for (const {
      name: colorName,
      color: colorValue
    } of paletteColors) {
      const normalizedColorValue = currentValueIsCssVariable ? colorValue : colord(colorValue).toHex();

      if (normalizedCurrentValue === normalizedColorValue) {
        return colorName;
      }
    }
  } // translators: shown when the user has picked a custom color (i.e not in the palette of colors).


  return __('Custom');
};
export const showTransparentBackground = currentValue => {
  if (typeof currentValue === 'undefined') {
    return true;
  }

  return colord(currentValue).alpha() === 0;
}; // The PaletteObject type has a `colors` property (an array of ColorObject),
// while the ColorObject type has a `color` property (the CSS color value).

export const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);
export const isMultiplePaletteArray = arr => {
  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));
};
/**
 * Transform a CSS variable used as background color into the color value itself.
 *
 * @param value   The color value that may be a CSS variable.
 * @param element The element for which to get the computed style.
 * @return The background color value computed from a element.
 */

export const normalizeColorValue = (value, element) => {
  const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');

  if (!currentValueIsCssVariable || element === null) {
    return value;
  }

  const {
    ownerDocument
  } = element;
  const {
    defaultView
  } = ownerDocument;
  const computedBackgroundColor = defaultView === null || defaultView === void 0 ? void 0 : defaultView.getComputedStyle(element).backgroundColor;
  return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;
};
//# sourceMappingURL=utils.js.map