UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 3.97 kB
{ "version": 3, "sources": ["../../../src/components/duotone/utils.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Convert a list of colors to an object of R, G, and B values.\n *\n * @param {string[]} colors Array of RBG color strings.\n *\n * @return {Object} R, G, and B values.\n */\nexport function getValuesFromColors( colors = [] ) {\n\tconst values = { r: [], g: [], b: [], a: [] };\n\n\tcolors.forEach( ( color ) => {\n\t\tconst rgbColor = colord( color ).toRgb();\n\t\tvalues.r.push( rgbColor.r / 255 );\n\t\tvalues.g.push( rgbColor.g / 255 );\n\t\tvalues.b.push( rgbColor.b / 255 );\n\t\tvalues.a.push( rgbColor.a );\n\t} );\n\n\treturn values;\n}\n\n/**\n * Stylesheet for disabling a global styles duotone filter.\n *\n * @param {string} selector Selector to disable the filter for.\n *\n * @return {string} Filter none style.\n */\nexport function getDuotoneUnsetStylesheet( selector ) {\n\treturn `${ selector }{filter:none}`;\n}\n\n/**\n * SVG and stylesheet needed for rendering the duotone filter.\n *\n * @param {string} selector Selector to apply the filter to.\n * @param {string} id Unique id for this duotone filter.\n *\n * @return {string} Duotone filter style.\n */\nexport function getDuotoneStylesheet( selector, id ) {\n\treturn `${ selector }{filter:url(#${ id })}`;\n}\n\n/**\n * The SVG part of the duotone filter.\n *\n * @param {string} id Unique id for this duotone filter.\n * @param {string[]} colors Color strings from dark to light.\n *\n * @return {string} Duotone SVG.\n */\nexport function getDuotoneFilter( id, colors ) {\n\tconst values = getValuesFromColors( colors );\n\treturn `\n<svg\n\txmlns:xlink=\"http://www.w3.org/1999/xlink\"\n\tviewBox=\"0 0 0 0\"\n\twidth=\"0\"\n\theight=\"0\"\n\tfocusable=\"false\"\n\trole=\"none\"\n\taria-hidden=\"true\"\n\tstyle=\"visibility: hidden; position: absolute; left: -9999px; overflow: hidden;\"\n>\n\t<defs>\n\t\t<filter id=\"${ id }\">\n\t\t\t<!--\n\t\t\t\tUse sRGB instead of linearRGB so transparency looks correct.\n\t\t\t\tUse perceptual brightness to convert to grayscale.\n\t\t\t-->\n\t\t\t<feColorMatrix color-interpolation-filters=\"sRGB\" type=\"matrix\" values=\" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 \"></feColorMatrix>\n\t\t\t<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->\n\t\t\t<feComponentTransfer color-interpolation-filters=\"sRGB\">\n\t\t\t\t<feFuncR type=\"table\" tableValues=\"${ values.r.join( ' ' ) }\"></feFuncR>\n\t\t\t\t<feFuncG type=\"table\" tableValues=\"${ values.g.join( ' ' ) }\"></feFuncG>\n\t\t\t\t<feFuncB type=\"table\" tableValues=\"${ values.b.join( ' ' ) }\"></feFuncB>\n\t\t\t\t<feFuncA type=\"table\" tableValues=\"${ values.a.join( ' ' ) }\"></feFuncA>\n\t\t\t</feComponentTransfer>\n\t\t\t<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->\n\t\t\t<feComposite in2=\"SourceGraphic\" operator=\"in\"></feComposite>\n\t\t</filter>\n\t</defs>\n</svg>`;\n}\n"], "mappings": ";AAGA,SAAS,cAAc;AAShB,SAAS,oBAAqB,SAAS,CAAC,GAAI;AAClD,QAAM,SAAS,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE;AAE5C,SAAO,QAAS,CAAE,UAAW;AAC5B,UAAM,WAAW,OAAQ,KAAM,EAAE,MAAM;AACvC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,IAAI,GAAI;AAChC,WAAO,EAAE,KAAM,SAAS,CAAE;AAAA,EAC3B,CAAE;AAEF,SAAO;AACR;AASO,SAAS,0BAA2B,UAAW;AACrD,SAAO,GAAI,QAAS;AACrB;AAUO,SAAS,qBAAsB,UAAU,IAAK;AACpD,SAAO,GAAI,QAAS,gBAAiB,EAAG;AACzC;AAUO,SAAS,iBAAkB,IAAI,QAAS;AAC9C,QAAM,SAAS,oBAAqB,MAAO;AAC3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYS,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAQsB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA,yCACrB,OAAO,EAAE,KAAM,GAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/D;", "names": [] }