@wordpress/components/build/ui/utils/colors.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getOptimalTextColor = getOptimalTextColor;
exports.getOptimalTextShade = getOptimalTextShade;

var _memize = _interopRequireDefault(require("memize"));

var _tinycolor = _interopRequireDefault(require("tinycolor2"));

/**
 * External dependencies
 */

/** @type {HTMLDivElement} */
let colorComputationNode;
/**
 * @return {HTMLDivElement | undefined} The HTML element for color computation.
 */

function getColorComputationNode() {
  if (typeof document === 'undefined') return;

  if (!colorComputationNode) {
    // Create a temporary element for style computation.
    const el = document.createElement('div');
    el.setAttribute('data-g2-color-computation-node', ''); // Inject for window computed style.

    document.body.appendChild(el);
    colorComputationNode = el;
  }

  return colorComputationNode;
}
/**
 * @param {string | unknown} value
 *
 * @return {boolean} Whether the value is a valid color.
 */


function isColor(value) {
  if (typeof value !== 'string') return false;
  const test = (0, _tinycolor.default)(value);
  return test.isValid();
}
/**
 * Retrieves the computed background color. This is useful for getting the
 * value of a CSS variable color.
 *
 * @param {string | unknown} backgroundColor The background color to compute.
 *
 * @return {string} The computed background color.
 */


function _getComputedBackgroundColor(backgroundColor) {
  var _window;

  if (typeof backgroundColor !== 'string') return '';
  if (isColor(backgroundColor)) return backgroundColor;
  if (!backgroundColor.includes('var(')) return '';
  if (typeof document === 'undefined') return ''; // Attempts to gracefully handle CSS variables color values.

  const el = getColorComputationNode();
  if (!el) return '';
  el.style.background = backgroundColor; // Grab the style

  const computedColor = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(el).background; // Reset

  el.style.background = '';
  return computedColor || '';
}

const getComputedBackgroundColor = (0, _memize.default)(_getComputedBackgroundColor);
/**
 * Get the text shade optimized for readability, based on a background color.
 *
 * @param {string | unknown} backgroundColor  The background color.
 *
 * @return {string} The optimized text color (black or white).
 */

function getOptimalTextColor(backgroundColor) {
  const background = getComputedBackgroundColor(backgroundColor);

  const isReadableWithBlackText = _tinycolor.default.isReadable(background, '#000000');

  return isReadableWithBlackText ? '#000000' : '#ffffff';
}
/**
 * Get the text shade optimized for readability, based on a background color.
 *
 * @param {string | unknown} backgroundColor The background color.
 *
 * @return {string} The optimized text shade (dark or light).
 */


function getOptimalTextShade(backgroundColor) {
  const result = getOptimalTextColor(backgroundColor);
  return result === '#000000' ? 'dark' : 'light';
}
//# sourceMappingURL=colors.js.map