@wordpress/block-editor
Version:
103 lines (95 loc) • 4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getColorClassName = getColorClassName;
exports.getColorObjectByColorValue = exports.getColorObjectByAttributeValues = void 0;
exports.getMostReadableColor = getMostReadableColor;
var _colord = require("colord");
var _names = _interopRequireDefault(require("colord/plugins/names"));
var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
var _components = require("@wordpress/components");
var _lockUnlock = require("../../lock-unlock");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
(0, _colord.extend)([_names.default, _a11y.default]);
const {
kebabCase
} = (0, _lockUnlock.unlock)(_components.privateApis);
/**
* Provided an array of color objects as set by the theme or by the editor defaults,
* and the values of the defined color or custom color returns a color object describing the color.
*
* @param {Array} colors Array of color objects as set by the theme or by the editor defaults.
* @param {?string} definedColor A string containing the color slug.
* @param {?string} customColor A string containing the customColor value.
*
* @return {?Object} If definedColor is passed and the name is found in colors,
* the color object exactly as set by the theme or editor defaults is returned.
* Otherwise, an object that just sets the color is defined.
*/
const getColorObjectByAttributeValues = (colors, definedColor, customColor) => {
if (definedColor) {
const colorObj = colors?.find(color => color.slug === definedColor);
if (colorObj) {
return colorObj;
}
}
return {
color: customColor
};
};
/**
* Provided an array of color objects as set by the theme or by the editor defaults, and a color value returns the color object matching that value or undefined.
*
* @param {Array} colors Array of color objects as set by the theme or by the editor defaults.
* @param {?string} colorValue A string containing the color value.
*
* @return {?Object} Color object included in the colors array whose color property equals colorValue.
* Returns undefined if no color object matches this requirement.
*/
exports.getColorObjectByAttributeValues = getColorObjectByAttributeValues;
const getColorObjectByColorValue = (colors, colorValue) => {
return colors?.find(color => color.color === colorValue);
};
/**
* Returns a class based on the context a color is being used and its slug.
*
* @param {string} colorContextName Context/place where color is being used e.g: background, text etc...
* @param {string} colorSlug Slug of the color.
*
* @return {?string} String with the class corresponding to the color in the provided context.
* Returns undefined if either colorContextName or colorSlug are not provided.
*/
exports.getColorObjectByColorValue = getColorObjectByColorValue;
function getColorClassName(colorContextName, colorSlug) {
if (!colorContextName || !colorSlug) {
return undefined;
}
return `has-${kebabCase(colorSlug)}-${colorContextName}`;
}
/**
* Given an array of color objects and a color value returns the color value of the most readable color in the array.
*
* @param {Array} colors Array of color objects as set by the theme or by the editor defaults.
* @param {?string} colorValue A string containing the color value.
*
* @return {string} String with the color value of the most readable color.
*/
function getMostReadableColor(colors, colorValue) {
const colordColor = (0, _colord.colord)(colorValue);
const getColorContrast = ({
color
}) => colordColor.contrast(color);
const maxContrast = Math.max(...colors.map(getColorContrast));
return colors.find(color => getColorContrast(color) === maxContrast).color;
}
//# sourceMappingURL=utils.js.map