{"_id":"@alexlafroscia/postcss-color-mod-function","_rev":"1-5f2002cd4294c8296c67576d021d2826","name":"@alexlafroscia/postcss-color-mod-function","dist-tags":{"latest":"4.0.0"},"versions":{"4.0.0":{"name":"@alexlafroscia/postcss-color-mod-function","version":"4.0.0","description":"Modify colors using the color-mod() function in CSS","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"license":"CC0-1.0","repository":{"type":"git","url":"git+https://github.com/jonathantneal/postcss-color-mod-function.git"},"homepage":"https://github.com/jonathantneal/postcss-color-mod-function#readme","bugs":{"url":"https://github.com/jonathantneal/postcss-color-mod-function/issues"},"main":"index.cjs.js","module":"index.es.mjs","engines":{"node":">=6.0.0"},"dependencies":{"@csstools/convert-colors":"^1.4.0","postcss-values-parser":"^2.0.0"},"devDependencies":{"@babel/core":"^7.1.0","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/preset-env":"^7.1.0","babel-eslint":"^9.0.0","eslint":"^5.6.0","eslint-config-dev":"^2.0.0","postcss":"^8.2.15","postcss-tape":"^6.0.1","pre-commit":"^1.2.2","rollup":"^0.66.2","rollup-plugin-babel":"^4.0.3"},"peerDependencies":{"postcss":"^8.2.15"},"eslintConfig":{"extends":"dev","parser":"babel-eslint","rules":{"max-params":[2,5]}},"keywords":["postcss","css","postcss-plugin","colors","colours","modifications","mods","adjusters","adjustments","csswg","rgba","hsla","white","black","red","green","blue","alpha","hue","saturation","lightness","whiteness","blackness","tint","shade","blenda","contrast"],"gitHead":"5d6baa80a0baa41fb867a2b0bb666f229ec92dfc","_id":"@alexlafroscia/postcss-color-mod-function@4.0.0","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-AD6QH25bJHqQoZvnlOWsG8QqpFlO+lG168Ath67C47m15dULCyrnN4TeVGDpAMqyULJZsooGPYIj+VnTttho7g==","shasum":"b434732b54592a88dbb09642ec15c04b8f6b74ff","tarball":"https://registry.npmjs.org/@alexlafroscia/postcss-color-mod-function/-/postcss-color-mod-function-4.0.0.tgz","fileCount":8,"unpackedSize":360889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErcACRA9TVsSAnZWagAAnOEQAIDG16REkA3W/fPmM4mQ\neU6NTKEkgAq7scc6WgV5fshYN5x5hLW0i6s1FLl0/u7wnJPiBcTjU2eBgnUz\nYfAeB5D+7333bj3duZYrh0ajXfA5fkldeIoNUin7OZUdll+2/tSnbxvfmNjA\ngyJv+ntmsDx4Klv7sdOtGXQwFJl6smiE8RrenZKvDGFWQFTKnyMkU8z/i1O4\nFzg/TuevDGBX4RwrxUuBbDs8ArUEmLpflmfiBuaOwk0W4urg/+CGknLBn0bC\n3yNahaYle0oyVrSCc+hl+Slc2Ep8Qbpl2uXmioIfUw7Bo+grLhIBWxSBqka9\nbQsCd+xbIJQ/B1bH2sq8Nzq20GYErP3vjmrEKlJdaIddZhAc/gK8zVAZ7HX5\nmGADIusDLZ009ToxgIIlQdudO0vq3WwTfHicd0FjZCXF6/Xn/ZaxnWt5Ipao\nA7QjOEWhuIjWmAZyd5Qn4ArCTHXsOG36QV8XH5R2r6gdhEnXI4uWAF8BLAV0\nQaFmQt3dY1b/USUJJArLDrJels+JXNQuCLaNAr5QDS/2I6tJz85d9TQgx41u\nq59SQFTZv2cPRfjyuMMEK/EEofiG6qVf9izgIHF1ZS3Yb4ZM+KfXmdfl6qbm\nI+phWp1pK+2vuxe6EbeE369M9XcZMrFK0yOp8CrTg0mqdvz8LkSOIIEKK2pt\nyw2N\r\n=7DQ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw4u2EmvdpvwMPmNKzCT0BS2zOnZrvPTMQHO8JkIIgOwIgJ1bXfP3I1Pc3sM0NMhga4QJKqEhNq4fBMMzqoxqhsnk="}]},"_npmUser":{"name":"alexlafroscia","email":"alex@lafroscia.com"},"directories":{},"maintainers":[{"name":"alexlafroscia","email":"alex@lafroscia.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-color-mod-function_4.0.0_1628616448365_0.5094234347356725"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-10T17:27:28.311Z","4.0.0":"2021-08-10T17:27:28.529Z","modified":"2022-04-04T12:41:04.162Z"},"maintainers":[{"name":"alexlafroscia","email":"alex@lafroscia.com"}],"description":"Modify colors using the color-mod() function in CSS","homepage":"https://github.com/jonathantneal/postcss-color-mod-function#readme","keywords":["postcss","css","postcss-plugin","colors","colours","modifications","mods","adjusters","adjustments","csswg","rgba","hsla","white","black","red","green","blue","alpha","hue","saturation","lightness","whiteness","blackness","tint","shade","blenda","contrast"],"repository":{"type":"git","url":"git+https://github.com/jonathantneal/postcss-color-mod-function.git"},"author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"bugs":{"url":"https://github.com/jonathantneal/postcss-color-mod-function/issues"},"license":"CC0-1.0","readme":"# PostCSS color-mod() Function [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\">][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![CSS Standard Status][css-img]][css-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[PostCSS color-mod() Function] lets you modify colors using the `color-mod()`\nfunction in CSS, following the outdated version of [CSS Color Module Level 4] specification (05 July 2016).\n\n**⚠️ `color-mod()` has been removed from [Color Module Level 4 specification](https://www.w3.org/TR/css-color-4/#changes-from-20160705). ([Here's why](https://github.com/w3c/csswg-drafts/commit/034b063697c3dadf144504f52e0858a79cd84414))**\n\n```pcss\n:root {\n  --brand-red:      color-mod(yellow blend(red 50%));\n  --brand-red-hsl:  color-mod(yellow blend(red 50% hsl));\n  --brand-red-hwb:  color-mod(yellow blend(red 50% hwb));\n  --brand-red-dark: color-mod(red blackness(20%));\n}\n\n/* becomes */\n\n:root {\n  --brand-red:      rgb(255, 127.5, 0);\n  --brand-red-hsl:  rgb(255, 127.5, 255);\n  --brand-red-hwb:  rgb(255, 127.5, 0);\n  --brand-red-dark: rgb(204, 0, 0);\n}\n\n/* or, using stringifier(color) { return color.toString() } */\n\n:root {\n  --brand-red:      rgb(100% 50% 0% / 100%);\n  --brand-red-hsl:  hsl(30 100% 50% / 100%);\n  --brand-red-hwb:  hwb(30 0% 0% / 100%);\n  --brand-red-dark: hwb(0 0% 20% / 100%);\n}\n```\n\n### Supported Colors\n\nThe `color-mod()` function accepts `rgb()`, legacy comma-separated `rgb()`,\n`rgba()`, `hsl()`, legacy comma-separated `hsl()`, `hsla()`, `hwb()`, and\n`color-mod()` colors, as well as 3, 4, 6, and 8 digit hex colors, and named\ncolors without the need for additional plugins.\n\nImplemention details are available in\n[the specification](https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod).\n\n### Supported Color Adjusters\n\nThe `color-mod()` function accepts `red()`, `green()`, `blue()`, `a()` /\n`alpha()`, `rgb()`, `h()` / `hue()`, `s()` / `saturation()`, `l()` /\n`lightness()`, `w()` / `whiteness()`, `b()` / `blackness()`, `tint()`,\n`shade()`, `blend()`, `blenda()`, and `contrast()` color adjusters.\n\nImplemention details are available in\n[the specification](https://www.w3.org/TR/css-color-4/#typedef-color-adjuster).\n\n### Supported Variables\n\nBy default, `var()` variables will be used if their corresponding Custom\nProperties are found in a `:root` rule, or if a fallback value is specified.\n\n## Usage\n\nAdd [PostCSS color-mod() Function] to your project:\n\n```bash\nnpm install postcss postcss-color-mod-function --save-dev\n```\n\nUse [PostCSS color-mod() Function] to process your CSS:\n\n```js\nconst postcssColorMod = require('postcss-color-mod-function');\n\npostcssColorMod.process(YOUR_CSS /*, processOptions, pluginOptions */);\n```\n\nOr use it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssColorMod = require('postcss-color-mod-function');\n\npostcss([\n  postcssColorMod(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n[PostCSS color-mod() Function] runs in all Node environments, with special instructions for:\n\n| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |\n| --- | --- | --- | --- | --- | --- |\n\n## Options\n\n### stringifier\n\nThe `stringifier` option defines how transformed colors will be produced in CSS.\nBy default, legacy `rgb()` and `rgba()` colors are produced, but this can be\neasily updated to support [CSS Color Module Level 4 colors] colors.\n\n```js\nimport postcssColorMod from 'postcss-color-mod-function';\n\npostcssColorMod({\n  stringifier(color) {\n    return color.toString(); // use CSS Color Module Level 4 colors (rgb, hsl, hwb)\n  }\n});\n```\n\nFuture major releases of [PostCSS color-mod() Function] may reverse this\nfunctionality so that CSS Color Module Level 4 colors are produced by default.\n\n### unresolved\n\nThe `unresolved` option defines how unresolved functions and arguments should\nbe handled. The available options are `throw`, `warn`, and `ignore`. The\ndefault option is to `throw`.\n\nIf `ignore` is used, the `color-mod()` function will remain unchanged.\n\n```js\nimport postcssColorMod from 'postcss-color-mod-function';\n\npostcssColorMod({\n  unresolved: 'ignore' // ignore unresolved color-mod() functions\n});\n```\n\n### transformVars\n\nThe `transformVars` option defines whether `var()` variables used within\n`color-mod()` should be transformed into their corresponding Custom Properties\navailable in `:root`, or their fallback value if it is specified. By default,\n`var()` variables will be transformed.\n\nHowever, because these transformations occur at build time, they cannot be\nconsidered accurate. Accurately resolving cascading variables relies on\nknowledge of the living DOM tree.\n\n### importFrom\n\nThe `importFrom` option allows you to import variables from other sources,\nwhich might be CSS, JS, and JSON files, and directly passed objects.\n\n```js\npostcssColorMod({\n  importFrom: 'path/to/file.css' // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }\n});\n```\n\n```pcss\n.brand-faded {\n  color: color-mod(var(--brand-main) a(50%));\n}\n\n/* becomes */\n\n.brand-faded {\n  color: rgba(0, 0, 255, .5);\n}\n```\n\nMultiple files can be passed into this option, and they will be parsed in the\norder they were received. JavaScript files, JSON files, and objects will need\nto namespace custom properties under a `customProperties` or\n`custom-properties` key.\n\n```js\npostcssColorMod({\n  importFrom: [\n    'path/to/file.css',   // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }\n    'and/then/this.js',   // module.exports = { customProperties: { '--brand-dark': 'blue', '--brand-main': 'var(--brand-dark)' } }\n    'and/then/that.json', // { \"custom-properties\": { \"--brand-dark\": \"blue\", \"--brand-main\": \"var(--brand-dark)\" } }\n    {\n      customProperties: {\n        '--brand-dark': 'blue',\n        '--brand-main': 'var(--brand-dark)'\n      }\n    }\n  ]\n});\n```\n\nVariables may reference other variables, and this plugin will attempt to\nresolve them. If `transformVars` is set to `false` then `importFrom` will not\nbe used.\n\n[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-color-mod-function.svg\n[cli-url]: https://travis-ci.org/jonathantneal/postcss-color-mod-function\n[css-img]: https://cssdb.org/badge/color-mod-function.svg\n[css-url]: https://preset-env.cssdb.org/features#color-mod-function\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/postcss-color-mod-function.svg\n[npm-url]: https://www.npmjs.com/package/postcss-color-mod-function\n\n[CSS Color Module Level 4]: https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod\n[Gulp PostCSS]: https://github.com/postcss/gulp-postcss\n[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS color-mod() Function]: https://github.com/jonathantneal/postcss-color-mod-function\n","readmeFilename":"README.md"}