UNPKG

@wordpress/components

Version:
8 lines (7 loc) 4.21 kB
{ "version": 3, "sources": ["../../src/color-palette/utils.ts"], "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n const valueIsCssVariable = /var\\(/.test(value ?? '');\n const valueIsColorMix = /color-mix\\(/.test(value ?? '');\n return !valueIsCssVariable && !valueIsColorMix;\n};\nexport const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {\n if (!currentValue) {\n return '';\n }\n const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;\n const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;\n\n // Normalize format of `colors` to simplify the following loop\n\n const colorPalettes = showMultiplePalettes ? colors : [{\n colors: colors\n }];\n for (const {\n colors: paletteColors\n } of colorPalettes) {\n for (const {\n name: colorName,\n color: colorValue\n } of paletteColors) {\n const normalizedColorValue = currentValueIsSimpleColor ? colord(colorValue).toHex() : colorValue;\n if (normalizedCurrentValue === normalizedColorValue) {\n return colorName;\n }\n }\n }\n\n // translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n return __('Custom');\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);\nexport const isMultiplePaletteArray = arr => {\n return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (value, element) => {\n if (!value || !element || isSimpleCSSColor(value)) {\n return value;\n }\n const {\n ownerDocument\n } = element;\n const {\n defaultView\n } = ownerDocument;\n const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;\n return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;\n};"], "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA+B;AAC/B,mBAAwB;AACxB,kBAAuB;AAKvB,kBAAmB;AAAA,IAMnB,sBAAO,CAAC,aAAAA,SAAa,YAAAC,OAAU,CAAC;AAQhC,IAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,SAAS,EAAE;AACnD,QAAM,kBAAkB,cAAc,KAAK,SAAS,EAAE;AACtD,SAAO,CAAC,sBAAsB,CAAC;AACjC;AACO,IAAM,mCAAmC,CAAC,cAAc,SAAS,CAAC,GAAG,uBAAuB,UAAU;AAC3G,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AACA,QAAM,4BAA4B,eAAe,iBAAiB,YAAY,IAAI;AAClF,QAAM,yBAAyB,gCAA4B,sBAAO,YAAY,EAAE,MAAM,IAAI;AAI1F,QAAM,gBAAgB,uBAAuB,SAAS,CAAC;AAAA,IACrD;AAAA,EACF,CAAC;AACD,aAAW;AAAA,IACT,QAAQ;AAAA,EACV,KAAK,eAAe;AAClB,eAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IACT,KAAK,eAAe;AAClB,YAAM,uBAAuB,gCAA4B,sBAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,aAAO,gBAAG,QAAQ;AACpB;AAIO,IAAM,0BAA0B,SAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,EAAE,WAAW;AACjF,IAAM,yBAAyB,SAAO;AAC3C,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,cAAY,wBAAwB,QAAQ,CAAC;AAClF;AASO,IAAM,sBAAsB,CAAC,OAAO,YAAY;AACrD,MAAI,CAAC,SAAS,CAAC,WAAW,iBAAiB,KAAK,GAAG;AACjD,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,0BAA0B,aAAa,iBAAiB,OAAO,EAAE;AACvE,SAAO,8BAA0B,sBAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;", "names": ["namesPlugin", "a11yPlugin"] }