[6a3a178] | 1 | import valueParser from 'postcss-values-parser';
|
---|
| 2 | import fs from 'fs';
|
---|
| 3 | import path from 'path';
|
---|
| 4 | import postcss from 'postcss';
|
---|
| 5 | import { rgb2hsl, rgb2hwb, hsl2rgb, hsl2hwb, hwb2rgb, hwb2hsl, rgb2hue } from '@csstools/convert-colors';
|
---|
| 6 |
|
---|
| 7 | function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
---|
| 8 | try {
|
---|
| 9 | var info = gen[key](arg);
|
---|
| 10 | var value = info.value;
|
---|
| 11 | } catch (error) {
|
---|
| 12 | reject(error);
|
---|
| 13 | return;
|
---|
| 14 | }
|
---|
| 15 |
|
---|
| 16 | if (info.done) {
|
---|
| 17 | resolve(value);
|
---|
| 18 | } else {
|
---|
| 19 | Promise.resolve(value).then(_next, _throw);
|
---|
| 20 | }
|
---|
| 21 | }
|
---|
| 22 |
|
---|
| 23 | function _asyncToGenerator(fn) {
|
---|
| 24 | return function () {
|
---|
| 25 | var self = this,
|
---|
| 26 | args = arguments;
|
---|
| 27 | return new Promise(function (resolve, reject) {
|
---|
| 28 | var gen = fn.apply(self, args);
|
---|
| 29 |
|
---|
| 30 | function _next(value) {
|
---|
| 31 | asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
---|
| 32 | }
|
---|
| 33 |
|
---|
| 34 | function _throw(err) {
|
---|
| 35 | asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
---|
| 36 | }
|
---|
| 37 |
|
---|
| 38 | _next(undefined);
|
---|
| 39 | });
|
---|
| 40 | };
|
---|
| 41 | }
|
---|
| 42 |
|
---|
| 43 | function _defineProperty(obj, key, value) {
|
---|
| 44 | if (key in obj) {
|
---|
| 45 | Object.defineProperty(obj, key, {
|
---|
| 46 | value: value,
|
---|
| 47 | enumerable: true,
|
---|
| 48 | configurable: true,
|
---|
| 49 | writable: true
|
---|
| 50 | });
|
---|
| 51 | } else {
|
---|
| 52 | obj[key] = value;
|
---|
| 53 | }
|
---|
| 54 |
|
---|
| 55 | return obj;
|
---|
| 56 | }
|
---|
| 57 |
|
---|
| 58 | function _objectSpread(target) {
|
---|
| 59 | for (var i = 1; i < arguments.length; i++) {
|
---|
| 60 | var source = arguments[i] != null ? arguments[i] : {};
|
---|
| 61 | var ownKeys = Object.keys(source);
|
---|
| 62 |
|
---|
| 63 | if (typeof Object.getOwnPropertySymbols === 'function') {
|
---|
| 64 | ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
|
---|
| 65 | return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
---|
| 66 | }));
|
---|
| 67 | }
|
---|
| 68 |
|
---|
| 69 | ownKeys.forEach(function (key) {
|
---|
| 70 | _defineProperty(target, key, source[key]);
|
---|
| 71 | });
|
---|
| 72 | }
|
---|
| 73 |
|
---|
| 74 | return target;
|
---|
| 75 | }
|
---|
| 76 |
|
---|
| 77 | function _slicedToArray(arr, i) {
|
---|
| 78 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
|
---|
| 79 | }
|
---|
| 80 |
|
---|
| 81 | function _toArray(arr) {
|
---|
| 82 | return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
|
---|
| 83 | }
|
---|
| 84 |
|
---|
| 85 | function _arrayWithHoles(arr) {
|
---|
| 86 | if (Array.isArray(arr)) return arr;
|
---|
| 87 | }
|
---|
| 88 |
|
---|
| 89 | function _iterableToArray(iter) {
|
---|
| 90 | if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
---|
| 91 | }
|
---|
| 92 |
|
---|
| 93 | function _iterableToArrayLimit(arr, i) {
|
---|
| 94 | var _arr = [];
|
---|
| 95 | var _n = true;
|
---|
| 96 | var _d = false;
|
---|
| 97 | var _e = undefined;
|
---|
| 98 |
|
---|
| 99 | try {
|
---|
| 100 | for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
---|
| 101 | _arr.push(_s.value);
|
---|
| 102 |
|
---|
| 103 | if (i && _arr.length === i) break;
|
---|
| 104 | }
|
---|
| 105 | } catch (err) {
|
---|
| 106 | _d = true;
|
---|
| 107 | _e = err;
|
---|
| 108 | } finally {
|
---|
| 109 | try {
|
---|
| 110 | if (!_n && _i["return"] != null) _i["return"]();
|
---|
| 111 | } finally {
|
---|
| 112 | if (_d) throw _e;
|
---|
| 113 | }
|
---|
| 114 | }
|
---|
| 115 |
|
---|
| 116 | return _arr;
|
---|
| 117 | }
|
---|
| 118 |
|
---|
| 119 | function _nonIterableRest() {
|
---|
| 120 | throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
---|
| 121 | }
|
---|
| 122 |
|
---|
| 123 | function getCustomProperties(root, opts) {
|
---|
| 124 | // initialize custom selectors
|
---|
| 125 | const customPropertiesFromHtmlElement = {};
|
---|
| 126 | const customPropertiesFromRootPsuedo = {}; // for each html or :root rule
|
---|
| 127 |
|
---|
| 128 | root.nodes.slice().forEach(rule => {
|
---|
| 129 | const customPropertiesObject = isHtmlRule(rule) ? customPropertiesFromHtmlElement : isRootRule(rule) ? customPropertiesFromRootPsuedo : null; // for each custom property
|
---|
| 130 |
|
---|
| 131 | if (customPropertiesObject) {
|
---|
| 132 | rule.nodes.slice().forEach(decl => {
|
---|
| 133 | if (isCustomDecl(decl)) {
|
---|
| 134 | const prop = decl.prop; // write the parsed value to the custom property
|
---|
| 135 |
|
---|
| 136 | customPropertiesObject[prop] = valueParser(decl.value).parse(); // conditionally remove the custom property declaration
|
---|
| 137 |
|
---|
| 138 | if (!opts.preserve) {
|
---|
| 139 | decl.remove();
|
---|
| 140 | }
|
---|
| 141 | }
|
---|
| 142 | }); // conditionally remove the empty html or :root rule
|
---|
| 143 |
|
---|
| 144 | if (!opts.preserve && isEmptyParent(rule)) {
|
---|
| 145 | rule.remove();
|
---|
| 146 | }
|
---|
| 147 | }
|
---|
| 148 | }); // return all custom properties, preferring :root properties over html properties
|
---|
| 149 |
|
---|
| 150 | return _objectSpread({}, customPropertiesFromHtmlElement, customPropertiesFromRootPsuedo);
|
---|
| 151 | } // match html and :root rules
|
---|
| 152 |
|
---|
| 153 | const htmlSelectorRegExp = /^html$/i;
|
---|
| 154 | const rootSelectorRegExp = /^:root$/i;
|
---|
| 155 | const customPropertyRegExp = /^--[A-z][\w-]*$/; // whether the node is an html or :root rule
|
---|
| 156 |
|
---|
| 157 | const isHtmlRule = node => node.type === 'rule' && htmlSelectorRegExp.test(node.selector) && Object(node.nodes).length;
|
---|
| 158 |
|
---|
| 159 | const isRootRule = node => node.type === 'rule' && rootSelectorRegExp.test(node.selector) && Object(node.nodes).length; // whether the node is an custom property
|
---|
| 160 |
|
---|
| 161 |
|
---|
| 162 | const isCustomDecl = node => node.type === 'decl' && customPropertyRegExp.test(node.prop); // whether the node is a parent without children
|
---|
| 163 |
|
---|
| 164 |
|
---|
| 165 | const isEmptyParent = node => Object(node.nodes).length === 0;
|
---|
| 166 |
|
---|
| 167 | /* Import Custom Properties from CSS AST
|
---|
| 168 | /* ========================================================================== */
|
---|
| 169 |
|
---|
| 170 | function importCustomPropertiesFromCSSAST(root) {
|
---|
| 171 | return getCustomProperties(root, {
|
---|
| 172 | preserve: true
|
---|
| 173 | });
|
---|
| 174 | }
|
---|
| 175 | /* Import Custom Properties from CSS File
|
---|
| 176 | /* ========================================================================== */
|
---|
| 177 |
|
---|
| 178 |
|
---|
| 179 | function importCustomPropertiesFromCSSFile(_x) {
|
---|
| 180 | return _importCustomPropertiesFromCSSFile.apply(this, arguments);
|
---|
| 181 | }
|
---|
| 182 | /* Import Custom Properties from Object
|
---|
| 183 | /* ========================================================================== */
|
---|
| 184 |
|
---|
| 185 |
|
---|
| 186 | function _importCustomPropertiesFromCSSFile() {
|
---|
| 187 | _importCustomPropertiesFromCSSFile = _asyncToGenerator(function* (from) {
|
---|
| 188 | const css = yield readFile(from);
|
---|
| 189 | const root = postcss.parse(css, {
|
---|
| 190 | from
|
---|
| 191 | });
|
---|
| 192 | return importCustomPropertiesFromCSSAST(root);
|
---|
| 193 | });
|
---|
| 194 | return _importCustomPropertiesFromCSSFile.apply(this, arguments);
|
---|
| 195 | }
|
---|
| 196 |
|
---|
| 197 | function importCustomPropertiesFromObject(object) {
|
---|
| 198 | const customProperties = Object.assign({}, Object(object).customProperties || Object(object)['custom-properties']);
|
---|
| 199 |
|
---|
| 200 | for (const prop in customProperties) {
|
---|
| 201 | customProperties[prop] = valueParser(customProperties[prop]).parse();
|
---|
| 202 | }
|
---|
| 203 |
|
---|
| 204 | return customProperties;
|
---|
| 205 | }
|
---|
| 206 | /* Import Custom Properties from JSON file
|
---|
| 207 | /* ========================================================================== */
|
---|
| 208 |
|
---|
| 209 |
|
---|
| 210 | function importCustomPropertiesFromJSONFile(_x2) {
|
---|
| 211 | return _importCustomPropertiesFromJSONFile.apply(this, arguments);
|
---|
| 212 | }
|
---|
| 213 | /* Import Custom Properties from JS file
|
---|
| 214 | /* ========================================================================== */
|
---|
| 215 |
|
---|
| 216 |
|
---|
| 217 | function _importCustomPropertiesFromJSONFile() {
|
---|
| 218 | _importCustomPropertiesFromJSONFile = _asyncToGenerator(function* (from) {
|
---|
| 219 | const object = yield readJSON(from);
|
---|
| 220 | return importCustomPropertiesFromObject(object);
|
---|
| 221 | });
|
---|
| 222 | return _importCustomPropertiesFromJSONFile.apply(this, arguments);
|
---|
| 223 | }
|
---|
| 224 |
|
---|
| 225 | function importCustomPropertiesFromJSFile(_x3) {
|
---|
| 226 | return _importCustomPropertiesFromJSFile.apply(this, arguments);
|
---|
| 227 | }
|
---|
| 228 | /* Import Custom Properties from Sources
|
---|
| 229 | /* ========================================================================== */
|
---|
| 230 |
|
---|
| 231 |
|
---|
| 232 | function _importCustomPropertiesFromJSFile() {
|
---|
| 233 | _importCustomPropertiesFromJSFile = _asyncToGenerator(function* (from) {
|
---|
| 234 | const object = yield import(from);
|
---|
| 235 | return importCustomPropertiesFromObject(object);
|
---|
| 236 | });
|
---|
| 237 | return _importCustomPropertiesFromJSFile.apply(this, arguments);
|
---|
| 238 | }
|
---|
| 239 |
|
---|
| 240 | function importCustomPropertiesFromSources(sources) {
|
---|
| 241 | return sources.map(source => {
|
---|
| 242 | if (source instanceof Promise) {
|
---|
| 243 | return source;
|
---|
| 244 | } else if (source instanceof Function) {
|
---|
| 245 | return source();
|
---|
| 246 | } // read the source as an object
|
---|
| 247 |
|
---|
| 248 |
|
---|
| 249 | const opts = source === Object(source) ? source : {
|
---|
| 250 | from: String(source)
|
---|
| 251 | }; // skip objects with Custom Properties
|
---|
| 252 |
|
---|
| 253 | if (opts.customProperties || opts['custom-properties']) {
|
---|
| 254 | return opts;
|
---|
| 255 | } // source pathname
|
---|
| 256 |
|
---|
| 257 |
|
---|
| 258 | const from = path.resolve(String(opts.from || '')); // type of file being read from
|
---|
| 259 |
|
---|
| 260 | const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
|
---|
| 261 | return {
|
---|
| 262 | type,
|
---|
| 263 | from
|
---|
| 264 | };
|
---|
| 265 | }).reduce(
|
---|
| 266 | /*#__PURE__*/
|
---|
| 267 | function () {
|
---|
| 268 | var _ref = _asyncToGenerator(function* (customProperties, source) {
|
---|
| 269 | const _ref2 = yield source,
|
---|
| 270 | type = _ref2.type,
|
---|
| 271 | from = _ref2.from;
|
---|
| 272 |
|
---|
| 273 | if (type === 'ast') {
|
---|
| 274 | return Object.assign((yield customProperties), importCustomPropertiesFromCSSAST(from));
|
---|
| 275 | }
|
---|
| 276 |
|
---|
| 277 | if (type === 'css') {
|
---|
| 278 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromCSSFile(from)));
|
---|
| 279 | }
|
---|
| 280 |
|
---|
| 281 | if (type === 'js') {
|
---|
| 282 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromJSFile(from)));
|
---|
| 283 | }
|
---|
| 284 |
|
---|
| 285 | if (type === 'json') {
|
---|
| 286 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromJSONFile(from)));
|
---|
| 287 | }
|
---|
| 288 |
|
---|
| 289 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromObject((yield source))));
|
---|
| 290 | });
|
---|
| 291 |
|
---|
| 292 | return function (_x4, _x5) {
|
---|
| 293 | return _ref.apply(this, arguments);
|
---|
| 294 | };
|
---|
| 295 | }(), {});
|
---|
| 296 | }
|
---|
| 297 | /* Helper utilities
|
---|
| 298 | /* ========================================================================== */
|
---|
| 299 |
|
---|
| 300 | const readFile = from => new Promise((resolve, reject) => {
|
---|
| 301 | fs.readFile(from, 'utf8', (error, result) => {
|
---|
| 302 | if (error) {
|
---|
| 303 | reject(error);
|
---|
| 304 | } else {
|
---|
| 305 | resolve(result);
|
---|
| 306 | }
|
---|
| 307 | });
|
---|
| 308 | });
|
---|
| 309 |
|
---|
| 310 | const readJSON =
|
---|
| 311 | /*#__PURE__*/
|
---|
| 312 | function () {
|
---|
| 313 | var _ref3 = _asyncToGenerator(function* (from) {
|
---|
| 314 | return JSON.parse((yield readFile(from)));
|
---|
| 315 | });
|
---|
| 316 |
|
---|
| 317 | return function readJSON(_x6) {
|
---|
| 318 | return _ref3.apply(this, arguments);
|
---|
| 319 | };
|
---|
| 320 | }();
|
---|
| 321 |
|
---|
| 322 | /* Convert Degree to Hue Degree
|
---|
| 323 | /* ========================================================================== */
|
---|
| 324 | function convertDtoD(deg) {
|
---|
| 325 | return deg % 360;
|
---|
| 326 | }
|
---|
| 327 | /* Convert Gradian to Hue Degree
|
---|
| 328 | /* ========================================================================== */
|
---|
| 329 |
|
---|
| 330 | function convertGtoD(grad) {
|
---|
| 331 | return grad * 0.9 % 360;
|
---|
| 332 | }
|
---|
| 333 | /* Convert Radian to Hue Degree
|
---|
| 334 | /* ========================================================================== */
|
---|
| 335 |
|
---|
| 336 | function convertRtoD(rad) {
|
---|
| 337 | return rad * 180 / Math.PI % 360;
|
---|
| 338 | }
|
---|
| 339 | /* Convert Turn to Hue Degree
|
---|
| 340 | /* ========================================================================== */
|
---|
| 341 |
|
---|
| 342 | function convertTtoD(turn) {
|
---|
| 343 | return turn * 360 % 360;
|
---|
| 344 | }
|
---|
| 345 | /* Convert a Name to Red/Green/Blue
|
---|
| 346 | /* ========================================================================== */
|
---|
| 347 |
|
---|
| 348 | function convertNtoRGB(name) {
|
---|
| 349 | const names = {
|
---|
| 350 | aliceblue: [240, 248, 255],
|
---|
| 351 | antiquewhite: [250, 235, 215],
|
---|
| 352 | aqua: [0, 255, 255],
|
---|
| 353 | aquamarine: [127, 255, 212],
|
---|
| 354 | azure: [240, 255, 255],
|
---|
| 355 | beige: [245, 245, 220],
|
---|
| 356 | bisque: [255, 228, 196],
|
---|
| 357 | black: [0, 0, 0],
|
---|
| 358 | blanchedalmond: [255, 235, 205],
|
---|
| 359 | blue: [0, 0, 255],
|
---|
| 360 | blueviolet: [138, 43, 226],
|
---|
| 361 | brown: [165, 42, 42],
|
---|
| 362 | burlywood: [222, 184, 135],
|
---|
| 363 | cadetblue: [95, 158, 160],
|
---|
| 364 | chartreuse: [127, 255, 0],
|
---|
| 365 | chocolate: [210, 105, 30],
|
---|
| 366 | coral: [255, 127, 80],
|
---|
| 367 | cornflowerblue: [100, 149, 237],
|
---|
| 368 | cornsilk: [255, 248, 220],
|
---|
| 369 | crimson: [220, 20, 60],
|
---|
| 370 | cyan: [0, 255, 255],
|
---|
| 371 | darkblue: [0, 0, 139],
|
---|
| 372 | darkcyan: [0, 139, 139],
|
---|
| 373 | darkgoldenrod: [184, 134, 11],
|
---|
| 374 | darkgray: [169, 169, 169],
|
---|
| 375 | darkgreen: [0, 100, 0],
|
---|
| 376 | darkgrey: [169, 169, 169],
|
---|
| 377 | darkkhaki: [189, 183, 107],
|
---|
| 378 | darkmagenta: [139, 0, 139],
|
---|
| 379 | darkolivegreen: [85, 107, 47],
|
---|
| 380 | darkorange: [255, 140, 0],
|
---|
| 381 | darkorchid: [153, 50, 204],
|
---|
| 382 | darkred: [139, 0, 0],
|
---|
| 383 | darksalmon: [233, 150, 122],
|
---|
| 384 | darkseagreen: [143, 188, 143],
|
---|
| 385 | darkslateblue: [72, 61, 139],
|
---|
| 386 | darkslategray: [47, 79, 79],
|
---|
| 387 | darkslategrey: [47, 79, 79],
|
---|
| 388 | darkturquoise: [0, 206, 209],
|
---|
| 389 | darkviolet: [148, 0, 211],
|
---|
| 390 | deeppink: [255, 20, 147],
|
---|
| 391 | deepskyblue: [0, 191, 255],
|
---|
| 392 | dimgray: [105, 105, 105],
|
---|
| 393 | dimgrey: [105, 105, 105],
|
---|
| 394 | dodgerblue: [30, 144, 255],
|
---|
| 395 | firebrick: [178, 34, 34],
|
---|
| 396 | floralwhite: [255, 250, 240],
|
---|
| 397 | forestgreen: [34, 139, 34],
|
---|
| 398 | fuchsia: [255, 0, 255],
|
---|
| 399 | gainsboro: [220, 220, 220],
|
---|
| 400 | ghostwhite: [248, 248, 255],
|
---|
| 401 | gold: [255, 215, 0],
|
---|
| 402 | goldenrod: [218, 165, 32],
|
---|
| 403 | gray: [128, 128, 128],
|
---|
| 404 | green: [0, 128, 0],
|
---|
| 405 | greenyellow: [173, 255, 47],
|
---|
| 406 | grey: [128, 128, 128],
|
---|
| 407 | honeydew: [240, 255, 240],
|
---|
| 408 | hotpink: [255, 105, 180],
|
---|
| 409 | indianred: [205, 92, 92],
|
---|
| 410 | indigo: [75, 0, 130],
|
---|
| 411 | ivory: [255, 255, 240],
|
---|
| 412 | khaki: [240, 230, 140],
|
---|
| 413 | lavender: [230, 230, 250],
|
---|
| 414 | lavenderblush: [255, 240, 245],
|
---|
| 415 | lawngreen: [124, 252, 0],
|
---|
| 416 | lemonchiffon: [255, 250, 205],
|
---|
| 417 | lightblue: [173, 216, 230],
|
---|
| 418 | lightcoral: [240, 128, 128],
|
---|
| 419 | lightcyan: [224, 255, 255],
|
---|
| 420 | lightgoldenrodyellow: [250, 250, 210],
|
---|
| 421 | lightgray: [211, 211, 211],
|
---|
| 422 | lightgreen: [144, 238, 144],
|
---|
| 423 | lightgrey: [211, 211, 211],
|
---|
| 424 | lightpink: [255, 182, 193],
|
---|
| 425 | lightsalmon: [255, 160, 122],
|
---|
| 426 | lightseagreen: [32, 178, 170],
|
---|
| 427 | lightskyblue: [135, 206, 250],
|
---|
| 428 | lightslategray: [119, 136, 153],
|
---|
| 429 | lightslategrey: [119, 136, 153],
|
---|
| 430 | lightsteelblue: [176, 196, 222],
|
---|
| 431 | lightyellow: [255, 255, 224],
|
---|
| 432 | lime: [0, 255, 0],
|
---|
| 433 | limegreen: [50, 205, 50],
|
---|
| 434 | linen: [250, 240, 230],
|
---|
| 435 | magenta: [255, 0, 255],
|
---|
| 436 | maroon: [128, 0, 0],
|
---|
| 437 | mediumaquamarine: [102, 205, 170],
|
---|
| 438 | mediumblue: [0, 0, 205],
|
---|
| 439 | mediumorchid: [186, 85, 211],
|
---|
| 440 | mediumpurple: [147, 112, 219],
|
---|
| 441 | mediumseagreen: [60, 179, 113],
|
---|
| 442 | mediumslateblue: [123, 104, 238],
|
---|
| 443 | mediumspringgreen: [0, 250, 154],
|
---|
| 444 | mediumturquoise: [72, 209, 204],
|
---|
| 445 | mediumvioletred: [199, 21, 133],
|
---|
| 446 | midnightblue: [25, 25, 112],
|
---|
| 447 | mintcream: [245, 255, 250],
|
---|
| 448 | mistyrose: [255, 228, 225],
|
---|
| 449 | moccasin: [255, 228, 181],
|
---|
| 450 | navajowhite: [255, 222, 173],
|
---|
| 451 | navy: [0, 0, 128],
|
---|
| 452 | oldlace: [253, 245, 230],
|
---|
| 453 | olive: [128, 128, 0],
|
---|
| 454 | olivedrab: [107, 142, 35],
|
---|
| 455 | orange: [255, 165, 0],
|
---|
| 456 | orangered: [255, 69, 0],
|
---|
| 457 | orchid: [218, 112, 214],
|
---|
| 458 | palegoldenrod: [238, 232, 170],
|
---|
| 459 | palegreen: [152, 251, 152],
|
---|
| 460 | paleturquoise: [175, 238, 238],
|
---|
| 461 | palevioletred: [219, 112, 147],
|
---|
| 462 | papayawhip: [255, 239, 213],
|
---|
| 463 | peachpuff: [255, 218, 185],
|
---|
| 464 | peru: [205, 133, 63],
|
---|
| 465 | pink: [255, 192, 203],
|
---|
| 466 | plum: [221, 160, 221],
|
---|
| 467 | powderblue: [176, 224, 230],
|
---|
| 468 | purple: [128, 0, 128],
|
---|
| 469 | rebeccapurple: [102, 51, 153],
|
---|
| 470 | red: [255, 0, 0],
|
---|
| 471 | rosybrown: [188, 143, 143],
|
---|
| 472 | royalblue: [65, 105, 225],
|
---|
| 473 | saddlebrown: [139, 69, 19],
|
---|
| 474 | salmon: [250, 128, 114],
|
---|
| 475 | sandybrown: [244, 164, 96],
|
---|
| 476 | seagreen: [46, 139, 87],
|
---|
| 477 | seashell: [255, 245, 238],
|
---|
| 478 | sienna: [160, 82, 45],
|
---|
| 479 | silver: [192, 192, 192],
|
---|
| 480 | skyblue: [135, 206, 235],
|
---|
| 481 | slateblue: [106, 90, 205],
|
---|
| 482 | slategray: [112, 128, 144],
|
---|
| 483 | slategrey: [112, 128, 144],
|
---|
| 484 | snow: [255, 250, 250],
|
---|
| 485 | springgreen: [0, 255, 127],
|
---|
| 486 | steelblue: [70, 130, 180],
|
---|
| 487 | tan: [210, 180, 140],
|
---|
| 488 | teal: [0, 128, 128],
|
---|
| 489 | thistle: [216, 191, 216],
|
---|
| 490 | tomato: [255, 99, 71],
|
---|
| 491 | transparent: [0, 0, 0],
|
---|
| 492 | turquoise: [64, 224, 208],
|
---|
| 493 | violet: [238, 130, 238],
|
---|
| 494 | wheat: [245, 222, 179],
|
---|
| 495 | white: [255, 255, 255],
|
---|
| 496 | whitesmoke: [245, 245, 245],
|
---|
| 497 | yellow: [255, 255, 0],
|
---|
| 498 | yellowgreen: [154, 205, 50]
|
---|
| 499 | };
|
---|
| 500 | return names[name] && names[name].map(c => c / 2.55);
|
---|
| 501 | }
|
---|
| 502 | /* Convert a Hex to Red/Green/Blue
|
---|
| 503 | /* ========================================================================== */
|
---|
| 504 |
|
---|
| 505 | function convertHtoRGB(hex) {
|
---|
| 506 | // #<hex-color>{3,4,6,8}
|
---|
| 507 | const _slice = (hex.match(hexColorMatch) || []).slice(1),
|
---|
| 508 | _slice2 = _slicedToArray(_slice, 8),
|
---|
| 509 | r = _slice2[0],
|
---|
| 510 | g = _slice2[1],
|
---|
| 511 | b = _slice2[2],
|
---|
| 512 | a = _slice2[3],
|
---|
| 513 | rr = _slice2[4],
|
---|
| 514 | gg = _slice2[5],
|
---|
| 515 | bb = _slice2[6],
|
---|
| 516 | aa = _slice2[7];
|
---|
| 517 |
|
---|
| 518 | if (rr !== undefined || r !== undefined) {
|
---|
| 519 | const red = rr !== undefined ? parseInt(rr, 16) : r !== undefined ? parseInt(r + r, 16) : 0;
|
---|
| 520 | const green = gg !== undefined ? parseInt(gg, 16) : g !== undefined ? parseInt(g + g, 16) : 0;
|
---|
| 521 | const blue = bb !== undefined ? parseInt(bb, 16) : b !== undefined ? parseInt(b + b, 16) : 0;
|
---|
| 522 | const alpha = aa !== undefined ? parseInt(aa, 16) : a !== undefined ? parseInt(a + a, 16) : 255;
|
---|
| 523 | return [red, green, blue, alpha].map(c => c / 2.55);
|
---|
| 524 | }
|
---|
| 525 |
|
---|
| 526 | return undefined;
|
---|
| 527 | }
|
---|
| 528 | const hexColorMatch = /^#(?:([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?|([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?)$/i;
|
---|
| 529 |
|
---|
| 530 | class Color {
|
---|
| 531 | constructor(color) {
|
---|
| 532 | this.color = Object(Object(color).color || color);
|
---|
| 533 | this.color.colorspace = this.color.colorspace ? this.color.colorspace : 'red' in color && 'green' in color && 'blue' in color ? 'rgb' : 'hue' in color && 'saturation' in color && 'lightness' in color ? 'hsl' : 'hue' in color && 'whiteness' in color && 'blackness' in color ? 'hwb' : 'unknown';
|
---|
| 534 |
|
---|
| 535 | if (color.colorspace === 'rgb') {
|
---|
| 536 | this.color.hue = rgb2hue(color.red, color.green, color.blue, color.hue || 0);
|
---|
| 537 | }
|
---|
| 538 | }
|
---|
| 539 |
|
---|
| 540 | alpha(alpha) {
|
---|
| 541 | const color = this.color;
|
---|
| 542 | return alpha === undefined ? color.alpha : new Color(assign(color, {
|
---|
| 543 | alpha
|
---|
| 544 | }));
|
---|
| 545 | }
|
---|
| 546 |
|
---|
| 547 | blackness(blackness) {
|
---|
| 548 | const hwb = color2hwb(this.color);
|
---|
| 549 | return blackness === undefined ? hwb.blackness : new Color(assign(hwb, {
|
---|
| 550 | blackness
|
---|
| 551 | }));
|
---|
| 552 | }
|
---|
| 553 |
|
---|
| 554 | blend(color, percentage, colorspace = 'rgb') {
|
---|
| 555 | const base = this.color;
|
---|
| 556 | return new Color(blend(base, color, percentage, colorspace));
|
---|
| 557 | }
|
---|
| 558 |
|
---|
| 559 | blenda(color, percentage, colorspace = 'rgb') {
|
---|
| 560 | const base = this.color;
|
---|
| 561 | return new Color(blend(base, color, percentage, colorspace, true));
|
---|
| 562 | }
|
---|
| 563 |
|
---|
| 564 | blue(blue) {
|
---|
| 565 | const rgb = color2rgb(this.color);
|
---|
| 566 | return blue === undefined ? rgb.blue : new Color(assign(rgb, {
|
---|
| 567 | blue
|
---|
| 568 | }));
|
---|
| 569 | }
|
---|
| 570 |
|
---|
| 571 | contrast(percentage) {
|
---|
| 572 | const base = this.color;
|
---|
| 573 | return new Color(contrast(base, percentage));
|
---|
| 574 | }
|
---|
| 575 |
|
---|
| 576 | green(green) {
|
---|
| 577 | const rgb = color2rgb(this.color);
|
---|
| 578 | return green === undefined ? rgb.green : new Color(assign(rgb, {
|
---|
| 579 | green
|
---|
| 580 | }));
|
---|
| 581 | }
|
---|
| 582 |
|
---|
| 583 | hue(hue) {
|
---|
| 584 | const hsl = color2hsl(this.color);
|
---|
| 585 | return hue === undefined ? hsl.hue : new Color(assign(hsl, {
|
---|
| 586 | hue
|
---|
| 587 | }));
|
---|
| 588 | }
|
---|
| 589 |
|
---|
| 590 | lightness(lightness) {
|
---|
| 591 | const hsl = color2hsl(this.color);
|
---|
| 592 | return lightness === undefined ? hsl.lightness : new Color(assign(hsl, {
|
---|
| 593 | lightness
|
---|
| 594 | }));
|
---|
| 595 | }
|
---|
| 596 |
|
---|
| 597 | red(red) {
|
---|
| 598 | const rgb = color2rgb(this.color);
|
---|
| 599 | return red === undefined ? rgb.red : new Color(assign(rgb, {
|
---|
| 600 | red
|
---|
| 601 | }));
|
---|
| 602 | }
|
---|
| 603 |
|
---|
| 604 | rgb(red, green, blue) {
|
---|
| 605 | const rgb = color2rgb(this.color);
|
---|
| 606 | return new Color(assign(rgb, {
|
---|
| 607 | red,
|
---|
| 608 | green,
|
---|
| 609 | blue
|
---|
| 610 | }));
|
---|
| 611 | }
|
---|
| 612 |
|
---|
| 613 | saturation(saturation) {
|
---|
| 614 | const hsl = color2hsl(this.color);
|
---|
| 615 | return saturation === undefined ? hsl.saturation : new Color(assign(hsl, {
|
---|
| 616 | saturation
|
---|
| 617 | }));
|
---|
| 618 | }
|
---|
| 619 |
|
---|
| 620 | shade(percentage) {
|
---|
| 621 | const hwb = color2hwb(this.color);
|
---|
| 622 | const shade = {
|
---|
| 623 | hue: 0,
|
---|
| 624 | whiteness: 0,
|
---|
| 625 | blackness: 100,
|
---|
| 626 | colorspace: 'hwb'
|
---|
| 627 | };
|
---|
| 628 | const colorspace = 'rgb';
|
---|
| 629 | return percentage === undefined ? hwb.blackness : new Color(blend(hwb, shade, percentage, colorspace));
|
---|
| 630 | }
|
---|
| 631 |
|
---|
| 632 | tint(percentage) {
|
---|
| 633 | const hwb = color2hwb(this.color);
|
---|
| 634 | const tint = {
|
---|
| 635 | hue: 0,
|
---|
| 636 | whiteness: 100,
|
---|
| 637 | blackness: 0,
|
---|
| 638 | colorspace: 'hwb'
|
---|
| 639 | };
|
---|
| 640 | const colorspace = 'rgb';
|
---|
| 641 | return percentage === undefined ? hwb.blackness : new Color(blend(hwb, tint, percentage, colorspace));
|
---|
| 642 | }
|
---|
| 643 |
|
---|
| 644 | whiteness(whiteness) {
|
---|
| 645 | const hwb = color2hwb(this.color);
|
---|
| 646 | return whiteness === undefined ? hwb.whiteness : new Color(assign(hwb, {
|
---|
| 647 | whiteness
|
---|
| 648 | }));
|
---|
| 649 | }
|
---|
| 650 |
|
---|
| 651 | toHSL() {
|
---|
| 652 | return color2hslString(this.color);
|
---|
| 653 | }
|
---|
| 654 |
|
---|
| 655 | toHWB() {
|
---|
| 656 | return color2hwbString(this.color);
|
---|
| 657 | }
|
---|
| 658 |
|
---|
| 659 | toLegacy() {
|
---|
| 660 | return color2legacyString(this.color);
|
---|
| 661 | }
|
---|
| 662 |
|
---|
| 663 | toRGB() {
|
---|
| 664 | return color2rgbString(this.color);
|
---|
| 665 | }
|
---|
| 666 |
|
---|
| 667 | toRGBLegacy() {
|
---|
| 668 | return color2rgbLegacyString(this.color);
|
---|
| 669 | }
|
---|
| 670 |
|
---|
| 671 | toString() {
|
---|
| 672 | return color2string(this.color);
|
---|
| 673 | }
|
---|
| 674 |
|
---|
| 675 | }
|
---|
| 676 | /* Blending
|
---|
| 677 | /* ========================================================================== */
|
---|
| 678 |
|
---|
| 679 | function blend(base, color, percentage, colorspace, isBlendingAlpha) {
|
---|
| 680 | const addition = percentage / 100;
|
---|
| 681 | const subtraction = 1 - addition;
|
---|
| 682 |
|
---|
| 683 | if (colorspace === 'hsl') {
|
---|
| 684 | const _color2hsl = color2hsl(base),
|
---|
| 685 | h1 = _color2hsl.hue,
|
---|
| 686 | s1 = _color2hsl.saturation,
|
---|
| 687 | l1 = _color2hsl.lightness,
|
---|
| 688 | a1 = _color2hsl.alpha;
|
---|
| 689 |
|
---|
| 690 | const _color2hsl2 = color2hsl(color),
|
---|
| 691 | h2 = _color2hsl2.hue,
|
---|
| 692 | s2 = _color2hsl2.saturation,
|
---|
| 693 | l2 = _color2hsl2.lightness,
|
---|
| 694 | a2 = _color2hsl2.alpha;
|
---|
| 695 |
|
---|
| 696 | const hue = h1 * subtraction + h2 * addition,
|
---|
| 697 | saturation = s1 * subtraction + s2 * addition,
|
---|
| 698 | lightness = l1 * subtraction + l2 * addition,
|
---|
| 699 | alpha = isBlendingAlpha ? a1 * subtraction + a2 * addition : a1;
|
---|
| 700 | return {
|
---|
| 701 | hue,
|
---|
| 702 | saturation,
|
---|
| 703 | lightness,
|
---|
| 704 | alpha,
|
---|
| 705 | colorspace: 'hsl'
|
---|
| 706 | };
|
---|
| 707 | } else if (colorspace === 'hwb') {
|
---|
| 708 | const _color2hwb = color2hwb(base),
|
---|
| 709 | h1 = _color2hwb.hue,
|
---|
| 710 | w1 = _color2hwb.whiteness,
|
---|
| 711 | b1 = _color2hwb.blackness,
|
---|
| 712 | a1 = _color2hwb.alpha;
|
---|
| 713 |
|
---|
| 714 | const _color2hwb2 = color2hwb(color),
|
---|
| 715 | h2 = _color2hwb2.hue,
|
---|
| 716 | w2 = _color2hwb2.whiteness,
|
---|
| 717 | b2 = _color2hwb2.blackness,
|
---|
| 718 | a2 = _color2hwb2.alpha;
|
---|
| 719 |
|
---|
| 720 | const hue = h1 * subtraction + h2 * addition,
|
---|
| 721 | whiteness = w1 * subtraction + w2 * addition,
|
---|
| 722 | blackness = b1 * subtraction + b2 * addition,
|
---|
| 723 | alpha = isBlendingAlpha ? a1 * subtraction + a2 * addition : a1;
|
---|
| 724 | return {
|
---|
| 725 | hue,
|
---|
| 726 | whiteness,
|
---|
| 727 | blackness,
|
---|
| 728 | alpha,
|
---|
| 729 | colorspace: 'hwb'
|
---|
| 730 | };
|
---|
| 731 | } else {
|
---|
| 732 | const _color2rgb = color2rgb(base),
|
---|
| 733 | r1 = _color2rgb.red,
|
---|
| 734 | g1 = _color2rgb.green,
|
---|
| 735 | b1 = _color2rgb.blue,
|
---|
| 736 | a1 = _color2rgb.alpha;
|
---|
| 737 |
|
---|
| 738 | const _color2rgb2 = color2rgb(color),
|
---|
| 739 | r2 = _color2rgb2.red,
|
---|
| 740 | g2 = _color2rgb2.green,
|
---|
| 741 | b2 = _color2rgb2.blue,
|
---|
| 742 | a2 = _color2rgb2.alpha;
|
---|
| 743 |
|
---|
| 744 | const red = r1 * subtraction + r2 * addition,
|
---|
| 745 | green = g1 * subtraction + g2 * addition,
|
---|
| 746 | blue = b1 * subtraction + b2 * addition,
|
---|
| 747 | alpha = isBlendingAlpha ? a1 * subtraction + a2 * addition : a1;
|
---|
| 748 | return {
|
---|
| 749 | red,
|
---|
| 750 | green,
|
---|
| 751 | blue,
|
---|
| 752 | alpha,
|
---|
| 753 | colorspace: 'rgb'
|
---|
| 754 | };
|
---|
| 755 | }
|
---|
| 756 | }
|
---|
| 757 | /* Assign channels to a new instance of a base color
|
---|
| 758 | /* ========================================================================== */
|
---|
| 759 |
|
---|
| 760 |
|
---|
| 761 | function assign(base, channels) {
|
---|
| 762 | const color = Object.assign({}, base);
|
---|
| 763 | Object.keys(channels).forEach(channel => {
|
---|
| 764 | // detect channel
|
---|
| 765 | const isHue = channel === 'hue';
|
---|
| 766 | const isRGB = !isHue && blueGreenRedMatch.test(channel); // normalized value of the channel
|
---|
| 767 |
|
---|
| 768 | const value = normalize(channels[channel], channel); // assign channel to new object
|
---|
| 769 |
|
---|
| 770 | color[channel] = value;
|
---|
| 771 |
|
---|
| 772 | if (isRGB) {
|
---|
| 773 | // conditionally preserve the hue
|
---|
| 774 | color.hue = rgb2hue(color.red, color.green, color.blue, base.hue || 0);
|
---|
| 775 | }
|
---|
| 776 | });
|
---|
| 777 | return color;
|
---|
| 778 | }
|
---|
| 779 |
|
---|
| 780 | function normalize(value, channel) {
|
---|
| 781 | // detect channel
|
---|
| 782 | const isHue = channel === 'hue'; // value limitations
|
---|
| 783 |
|
---|
| 784 | const min = 0;
|
---|
| 785 | const max = isHue ? 360 : 100;
|
---|
| 786 | const normalizedValue = Math.min(Math.max(isHue ? value % 360 : value, min), max);
|
---|
| 787 | return normalizedValue;
|
---|
| 788 | }
|
---|
| 789 | /* Convert colors
|
---|
| 790 | /* ========================================================================== */
|
---|
| 791 |
|
---|
| 792 |
|
---|
| 793 | function color2rgb(color) {
|
---|
| 794 | const _ref = color.colorspace === 'hsl' ? hsl2rgb(color.hue, color.saturation, color.lightness) : color.colorspace === 'hwb' ? hwb2rgb(color.hue, color.whiteness, color.blackness) : [color.red, color.green, color.blue],
|
---|
| 795 | _ref2 = _slicedToArray(_ref, 3),
|
---|
| 796 | red = _ref2[0],
|
---|
| 797 | green = _ref2[1],
|
---|
| 798 | blue = _ref2[2];
|
---|
| 799 |
|
---|
| 800 | return {
|
---|
| 801 | red,
|
---|
| 802 | green,
|
---|
| 803 | blue,
|
---|
| 804 | hue: color.hue,
|
---|
| 805 | alpha: color.alpha,
|
---|
| 806 | colorspace: 'rgb'
|
---|
| 807 | };
|
---|
| 808 | }
|
---|
| 809 |
|
---|
| 810 | function color2hsl(color) {
|
---|
| 811 | const _ref3 = color.colorspace === 'rgb' ? rgb2hsl(color.red, color.green, color.blue, color.hue) : color.colorspace === 'hwb' ? hwb2hsl(color.hue, color.whiteness, color.blackness) : [color.hue, color.saturation, color.lightness],
|
---|
| 812 | _ref4 = _slicedToArray(_ref3, 3),
|
---|
| 813 | hue = _ref4[0],
|
---|
| 814 | saturation = _ref4[1],
|
---|
| 815 | lightness = _ref4[2];
|
---|
| 816 |
|
---|
| 817 | return {
|
---|
| 818 | hue,
|
---|
| 819 | saturation,
|
---|
| 820 | lightness,
|
---|
| 821 | alpha: color.alpha,
|
---|
| 822 | colorspace: 'hsl'
|
---|
| 823 | };
|
---|
| 824 | }
|
---|
| 825 |
|
---|
| 826 | function color2hwb(color) {
|
---|
| 827 | const _ref5 = color.colorspace === 'rgb' ? rgb2hwb(color.red, color.green, color.blue, color.hue) : color.colorspace === 'hsl' ? hsl2hwb(color.hue, color.saturation, color.lightness) : [color.hue, color.whiteness, color.blackness],
|
---|
| 828 | _ref6 = _slicedToArray(_ref5, 3),
|
---|
| 829 | hue = _ref6[0],
|
---|
| 830 | whiteness = _ref6[1],
|
---|
| 831 | blackness = _ref6[2];
|
---|
| 832 |
|
---|
| 833 | return {
|
---|
| 834 | hue,
|
---|
| 835 | whiteness,
|
---|
| 836 | blackness,
|
---|
| 837 | alpha: color.alpha,
|
---|
| 838 | colorspace: 'hwb'
|
---|
| 839 | };
|
---|
| 840 | }
|
---|
| 841 | /* Contrast functions
|
---|
| 842 | /* ========================================================================== */
|
---|
| 843 |
|
---|
| 844 |
|
---|
| 845 | function contrast(color, percentage) {
|
---|
| 846 | // https://drafts.csswg.org/css-color/#contrast-adjuster
|
---|
| 847 | const hwb = color2hwb(color);
|
---|
| 848 | const rgb = color2rgb(color); // compute the luminance of the color.
|
---|
| 849 |
|
---|
| 850 | const luminance = rgb2luminance(rgb.red, rgb.green, rgb.blue); // the maximum-contrast color, if it is less than .5
|
---|
| 851 |
|
---|
| 852 | const maxContrastColor = luminance < 0.5 // hwb(X, 100%, 0%), where X is the hue angle of the color
|
---|
| 853 | ? {
|
---|
| 854 | hue: hwb.hue,
|
---|
| 855 | whiteness: 100,
|
---|
| 856 | blackness: 0,
|
---|
| 857 | alpha: hwb.alpha,
|
---|
| 858 | colorspace: 'hwb' // otherwise, hwb(X, 0%, 100%), where X is the hue angle of the color
|
---|
| 859 |
|
---|
| 860 | } : {
|
---|
| 861 | hue: hwb.hue,
|
---|
| 862 | whiteness: 0,
|
---|
| 863 | blackness: 100,
|
---|
| 864 | alpha: hwb.alpha,
|
---|
| 865 | colorspace: 'hwb'
|
---|
| 866 | }; // contrast ratio
|
---|
| 867 |
|
---|
| 868 | const contrastRatio = colors2contrast(color, maxContrastColor);
|
---|
| 869 | const minContrastColor = contrastRatio > 4.5 // the color with the smallest contrast ratio with the base color that is greater than 4.5
|
---|
| 870 | ? colors2contrastRatioColor(hwb, maxContrastColor) // otherwise, the maximum-contrast color
|
---|
| 871 | : maxContrastColor; // color(maximum-contrast blend(minimum-contrast <percentage> hwb)));
|
---|
| 872 |
|
---|
| 873 | return blend(maxContrastColor, minContrastColor, percentage, 'hwb', false);
|
---|
| 874 | }
|
---|
| 875 |
|
---|
| 876 | function colors2contrast(color1, color2) {
|
---|
| 877 | // https://drafts.csswg.org/css-color/#contrast-ratio
|
---|
| 878 | const rgb1 = color2rgb(color1);
|
---|
| 879 | const rgb2 = color2rgb(color2);
|
---|
| 880 | const l1 = rgb2luminance(rgb1.red, rgb1.green, rgb1.blue);
|
---|
| 881 | const l2 = rgb2luminance(rgb2.red, rgb2.green, rgb2.blue);
|
---|
| 882 | return l1 > l2 // if l1 is the relative luminance of the lighter of the colors
|
---|
| 883 | ? (l1 + 0.05) / (l2 + 0.05) // otherwise, if l2 is the relative luminance of the lighter of the colors
|
---|
| 884 | : (l2 + 0.05) / (l1 + 0.05);
|
---|
| 885 | }
|
---|
| 886 |
|
---|
| 887 | function rgb2luminance(red, green, blue) {
|
---|
| 888 | const _ref7 = [channel2luminance(red), channel2luminance(green), channel2luminance(blue)],
|
---|
| 889 | redLuminance = _ref7[0],
|
---|
| 890 | greenLuminance = _ref7[1],
|
---|
| 891 | blueLuminance = _ref7[2]; // https://drafts.csswg.org/css-color/#luminance
|
---|
| 892 |
|
---|
| 893 | const luminance = 0.2126 * redLuminance + 0.7152 * greenLuminance + 0.0722 * blueLuminance;
|
---|
| 894 | return luminance;
|
---|
| 895 | }
|
---|
| 896 |
|
---|
| 897 | function channel2luminance(value) {
|
---|
| 898 | // https://drafts.csswg.org/css-color/#luminance
|
---|
| 899 | const luminance = value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
|
---|
| 900 | return luminance;
|
---|
| 901 | } // return the smallest contrast ratio from a color and a maximum contrast (credit: @thetalecrafter)
|
---|
| 902 |
|
---|
| 903 |
|
---|
| 904 | function colors2contrastRatioColor(hwb, maxHWB) {
|
---|
| 905 | const modifiedHWB = Object.assign({}, hwb); // values to be used for linear interpolations in HWB space
|
---|
| 906 |
|
---|
| 907 | let minW = hwb.whiteness;
|
---|
| 908 | let minB = hwb.blackness;
|
---|
| 909 | let maxW = maxHWB.whiteness;
|
---|
| 910 | let maxB = maxHWB.blackness; // find the color with the smallest contrast ratio with the base color that is greater than 4.5
|
---|
| 911 |
|
---|
| 912 | while (Math.abs(minW - maxW) > 100 || Math.abs(minB - maxB) > 100) {
|
---|
| 913 | const midW = Math.round((maxW + minW) / 2);
|
---|
| 914 | const midB = Math.round((maxB + minB) / 2);
|
---|
| 915 | modifiedHWB.whiteness = midW;
|
---|
| 916 | modifiedHWB.blackness = midB;
|
---|
| 917 |
|
---|
| 918 | if (colors2contrast(modifiedHWB, hwb) > 4.5) {
|
---|
| 919 | maxW = midW;
|
---|
| 920 | maxB = midB;
|
---|
| 921 | } else {
|
---|
| 922 | minW = midW;
|
---|
| 923 | minB = midB;
|
---|
| 924 | }
|
---|
| 925 | }
|
---|
| 926 |
|
---|
| 927 | return modifiedHWB;
|
---|
| 928 | }
|
---|
| 929 | /* Match
|
---|
| 930 | /* ========================================================================== */
|
---|
| 931 |
|
---|
| 932 |
|
---|
| 933 | const blueGreenRedMatch = /^(blue|green|red)$/i;
|
---|
| 934 | /* Stringifiers
|
---|
| 935 | /* ========================================================================== */
|
---|
| 936 |
|
---|
| 937 | function color2string(color) {
|
---|
| 938 | return color.colorspace === 'hsl' ? color2hslString(color) : color.colorspace === 'hwb' ? color2hwbString(color) : color2rgbString(color);
|
---|
| 939 | }
|
---|
| 940 |
|
---|
| 941 | function color2hslString(color) {
|
---|
| 942 | const hsl = color2hsl(color);
|
---|
| 943 | const isOpaque = hsl.alpha === 100;
|
---|
| 944 | const hue = hsl.hue;
|
---|
| 945 | const saturation = Math.round(hsl.saturation * 10000000000) / 10000000000;
|
---|
| 946 | const lightness = Math.round(hsl.lightness * 10000000000) / 10000000000;
|
---|
| 947 | const alpha = Math.round(hsl.alpha * 10000000000) / 10000000000;
|
---|
| 948 | return `hsl(${hue} ${saturation}% ${lightness}%${isOpaque ? '' : ` / ${alpha}%`})`;
|
---|
| 949 | }
|
---|
| 950 |
|
---|
| 951 | function color2hwbString(color) {
|
---|
| 952 | const hwb = color2hwb(color);
|
---|
| 953 | const isOpaque = hwb.alpha === 100;
|
---|
| 954 | const hue = hwb.hue;
|
---|
| 955 | const whiteness = Math.round(hwb.whiteness * 10000000000) / 10000000000;
|
---|
| 956 | const blackness = Math.round(hwb.blackness * 10000000000) / 10000000000;
|
---|
| 957 | const alpha = Math.round(hwb.alpha * 10000000000) / 10000000000;
|
---|
| 958 | return `hwb(${hue} ${whiteness}% ${blackness}%${isOpaque ? '' : ` / ${alpha}%`})`;
|
---|
| 959 | }
|
---|
| 960 |
|
---|
| 961 | function color2rgbString(color) {
|
---|
| 962 | const rgb = color2rgb(color);
|
---|
| 963 | const isOpaque = rgb.alpha === 100;
|
---|
| 964 | const red = Math.round(rgb.red * 10000000000) / 10000000000;
|
---|
| 965 | const green = Math.round(rgb.green * 10000000000) / 10000000000;
|
---|
| 966 | const blue = Math.round(rgb.blue * 10000000000) / 10000000000;
|
---|
| 967 | const alpha = Math.round(rgb.alpha * 10000000000) / 10000000000;
|
---|
| 968 | return `rgb(${red}% ${green}% ${blue}%${isOpaque ? '' : ` / ${alpha}%`})`;
|
---|
| 969 | }
|
---|
| 970 |
|
---|
| 971 | function color2legacyString(color) {
|
---|
| 972 | return color.colorspace === 'hsl' ? color2hslLegacyString(color) : color2rgbLegacyString(color);
|
---|
| 973 | }
|
---|
| 974 |
|
---|
| 975 | function color2rgbLegacyString(color) {
|
---|
| 976 | const rgb = color2rgb(color);
|
---|
| 977 | const isOpaque = rgb.alpha === 100;
|
---|
| 978 | const name = isOpaque ? 'rgb' : 'rgba';
|
---|
| 979 | const red = Math.round(rgb.red * 255 / 100);
|
---|
| 980 | const green = Math.round(rgb.green * 255 / 100);
|
---|
| 981 | const blue = Math.round(rgb.blue * 255 / 100);
|
---|
| 982 | const alpha = Math.round(rgb.alpha / 100 * 10000000000) / 10000000000;
|
---|
| 983 | return `${name}(${red}, ${green}, ${blue}${isOpaque ? '' : `, ${alpha}`})`;
|
---|
| 984 | }
|
---|
| 985 |
|
---|
| 986 | function color2hslLegacyString(color) {
|
---|
| 987 | const hsl = color2hsl(color);
|
---|
| 988 | const isOpaque = hsl.alpha === 100;
|
---|
| 989 | const name = isOpaque ? 'hsl' : 'hsla';
|
---|
| 990 | const hue = hsl.hue;
|
---|
| 991 | const saturation = Math.round(hsl.saturation * 10000000000) / 10000000000;
|
---|
| 992 | const lightness = Math.round(hsl.lightness * 10000000000) / 10000000000;
|
---|
| 993 | const alpha = Math.round(hsl.alpha / 100 * 10000000000) / 10000000000;
|
---|
| 994 | return `${name}(${hue}, ${saturation}%, ${lightness}%${isOpaque ? '' : `, ${alpha}`})`;
|
---|
| 995 | }
|
---|
| 996 |
|
---|
| 997 | function manageUnresolved(node, opts, word, message) {
|
---|
| 998 | if ('warn' === opts.unresolved) {
|
---|
| 999 | opts.decl.warn(opts.result, message, {
|
---|
| 1000 | word
|
---|
| 1001 | });
|
---|
| 1002 | } else if ('ignore' !== opts.unresolved) {
|
---|
| 1003 | throw opts.decl.error(message, {
|
---|
| 1004 | word
|
---|
| 1005 | });
|
---|
| 1006 | }
|
---|
| 1007 | }
|
---|
| 1008 |
|
---|
| 1009 | /* Transform AST
|
---|
| 1010 | /* ========================================================================== */
|
---|
| 1011 |
|
---|
| 1012 | function transformAST(node, opts) {
|
---|
| 1013 | node.nodes.slice(0).forEach(child => {
|
---|
| 1014 | if (isColorModFunction(child)) {
|
---|
| 1015 | // transform any variables within the color-mod() function
|
---|
| 1016 | if (opts.transformVars) {
|
---|
| 1017 | transformVariables(child, opts);
|
---|
| 1018 | } // transform any color-mod() functions
|
---|
| 1019 |
|
---|
| 1020 |
|
---|
| 1021 | const color = transformColorModFunction(child, opts);
|
---|
| 1022 |
|
---|
| 1023 | if (color) {
|
---|
| 1024 | // update the color-mod() function with the transformed value
|
---|
| 1025 | child.replaceWith(valueParser.word({
|
---|
| 1026 | raws: child.raws,
|
---|
| 1027 | value: opts.stringifier(color)
|
---|
| 1028 | }));
|
---|
| 1029 | }
|
---|
| 1030 | } else if (child.nodes && Object(child.nodes).length) {
|
---|
| 1031 | transformAST(child, opts);
|
---|
| 1032 | }
|
---|
| 1033 | });
|
---|
| 1034 | }
|
---|
| 1035 | /* Transform <var> functions
|
---|
| 1036 | /* ========================================================================== */
|
---|
| 1037 |
|
---|
| 1038 | function transformVariables(node, opts) {
|
---|
| 1039 | walk(node, child => {
|
---|
| 1040 | if (isVariable(child)) {
|
---|
| 1041 | // get the custom property and fallback value from var()
|
---|
| 1042 | const _transformArgsByParam = transformArgsByParams(child, [// <value> , [ <fallback> ]?
|
---|
| 1043 | [transformWord, isComma, transformNode]]),
|
---|
| 1044 | _transformArgsByParam2 = _slicedToArray(_transformArgsByParam, 2),
|
---|
| 1045 | prop = _transformArgsByParam2[0],
|
---|
| 1046 | fallbackNode = _transformArgsByParam2[1]; // if the custom property is known
|
---|
| 1047 |
|
---|
| 1048 |
|
---|
| 1049 | if (prop in opts.customProperties) {
|
---|
| 1050 | let customPropertyValue = opts.customProperties[prop]; // follow custom properties referencing custom properties
|
---|
| 1051 |
|
---|
| 1052 | if (looseVarMatch.test(customPropertyValue)) {
|
---|
| 1053 | const rootChildAST = customPropertyValue.clone();
|
---|
| 1054 | transformVariables(rootChildAST, opts);
|
---|
| 1055 | customPropertyValue = rootChildAST;
|
---|
| 1056 | } // replace var() with the custom property value
|
---|
| 1057 |
|
---|
| 1058 |
|
---|
| 1059 | if (customPropertyValue.nodes.length === 1 && customPropertyValue.nodes[0].nodes.length) {
|
---|
| 1060 | customPropertyValue.nodes[0].nodes.forEach(customPropertyChild => {
|
---|
| 1061 | child.parent.insertBefore(child, customPropertyChild);
|
---|
| 1062 | });
|
---|
| 1063 | }
|
---|
| 1064 |
|
---|
| 1065 | child.remove();
|
---|
| 1066 | } else if (fallbackNode && fallbackNode.nodes.length === 1 && fallbackNode.nodes[0].nodes.length) {
|
---|
| 1067 | // otherwise, replace var() with the fallback value
|
---|
| 1068 | transformVariables(fallbackNode, opts);
|
---|
| 1069 | child.replaceWith(...fallbackNode.nodes[0].nodes[0]);
|
---|
| 1070 | }
|
---|
| 1071 | }
|
---|
| 1072 | });
|
---|
| 1073 | }
|
---|
| 1074 | /* Transform <color> functions
|
---|
| 1075 | /* ========================================================================== */
|
---|
| 1076 |
|
---|
| 1077 |
|
---|
| 1078 | function transformColor(node, opts) {
|
---|
| 1079 | if (isRGBFunction(node)) {
|
---|
| 1080 | return transformRGBFunction(node, opts);
|
---|
| 1081 | } else if (isHSLFunction(node)) {
|
---|
| 1082 | return transformHSLFunction(node, opts);
|
---|
| 1083 | } else if (isHWBFunction(node)) {
|
---|
| 1084 | return transformHWBFunction(node, opts);
|
---|
| 1085 | } else if (isColorModFunction(node)) {
|
---|
| 1086 | return transformColorModFunction(node, opts);
|
---|
| 1087 | } else if (isHexColor(node)) {
|
---|
| 1088 | return transformHexColor(node, opts);
|
---|
| 1089 | } else if (isNamedColor(node)) {
|
---|
| 1090 | return transformNamedColor(node, opts);
|
---|
| 1091 | } else {
|
---|
| 1092 | return manageUnresolved(node, opts, node.value, `Expected a color`);
|
---|
| 1093 | }
|
---|
| 1094 | } // return a transformed rgb/rgba color function
|
---|
| 1095 |
|
---|
| 1096 |
|
---|
| 1097 | function transformRGBFunction(node, opts) {
|
---|
| 1098 | const _transformArgsByParam3 = transformArgsByParams(node, [// <percentage> <percentage> <percentage> [ , <alpha-value> ]?
|
---|
| 1099 | [transformPercentage, transformPercentage, transformPercentage, isSlash, transformAlpha], // <number> <number> <number> [ , <alpha-value> ]?
|
---|
| 1100 | [transformRGBNumber, transformRGBNumber, transformRGBNumber, isSlash, transformAlpha], // <percentage> , <percentage> , <percentage> [ , <alpha-value> ]?
|
---|
| 1101 | [transformPercentage, isComma, transformPercentage, isComma, transformPercentage, isComma, transformAlpha], // <number> , <number> , <number> [ , <alpha-value> ]?
|
---|
| 1102 | [transformRGBNumber, isComma, transformRGBNumber, isComma, transformRGBNumber, isComma, transformAlpha]]),
|
---|
| 1103 | _transformArgsByParam4 = _slicedToArray(_transformArgsByParam3, 4),
|
---|
| 1104 | red = _transformArgsByParam4[0],
|
---|
| 1105 | green = _transformArgsByParam4[1],
|
---|
| 1106 | blue = _transformArgsByParam4[2],
|
---|
| 1107 | _transformArgsByParam5 = _transformArgsByParam4[3],
|
---|
| 1108 | alpha = _transformArgsByParam5 === void 0 ? 100 : _transformArgsByParam5;
|
---|
| 1109 |
|
---|
| 1110 | if (red !== undefined) {
|
---|
| 1111 | const color = new Color({
|
---|
| 1112 | red,
|
---|
| 1113 | green,
|
---|
| 1114 | blue,
|
---|
| 1115 | alpha,
|
---|
| 1116 | colorspace: 'rgb'
|
---|
| 1117 | });
|
---|
| 1118 | return color;
|
---|
| 1119 | } else {
|
---|
| 1120 | return manageUnresolved(node, opts, node.value, `Expected a valid rgb() function`);
|
---|
| 1121 | }
|
---|
| 1122 | } // return a transformed hsl/hsla color function
|
---|
| 1123 |
|
---|
| 1124 |
|
---|
| 1125 | function transformHSLFunction(node, opts) {
|
---|
| 1126 | const _transformArgsByParam6 = transformArgsByParams(node, [// <hue> <percentage> <percentage> [ / <alpha-value> ]?
|
---|
| 1127 | [transformHue, transformPercentage, transformPercentage, isSlash, transformAlpha], // <hue> , <percentage> , <percentage> [ , <alpha-value> ]?
|
---|
| 1128 | [transformHue, isComma, transformPercentage, isComma, transformPercentage, isComma, transformAlpha]]),
|
---|
| 1129 | _transformArgsByParam7 = _slicedToArray(_transformArgsByParam6, 4),
|
---|
| 1130 | hue = _transformArgsByParam7[0],
|
---|
| 1131 | saturation = _transformArgsByParam7[1],
|
---|
| 1132 | lightness = _transformArgsByParam7[2],
|
---|
| 1133 | _transformArgsByParam8 = _transformArgsByParam7[3],
|
---|
| 1134 | alpha = _transformArgsByParam8 === void 0 ? 100 : _transformArgsByParam8;
|
---|
| 1135 |
|
---|
| 1136 | if (lightness !== undefined) {
|
---|
| 1137 | const color = new Color({
|
---|
| 1138 | hue,
|
---|
| 1139 | saturation,
|
---|
| 1140 | lightness,
|
---|
| 1141 | alpha,
|
---|
| 1142 | colorspace: 'hsl'
|
---|
| 1143 | });
|
---|
| 1144 | return color;
|
---|
| 1145 | } else {
|
---|
| 1146 | return manageUnresolved(node, opts, node.value, `Expected a valid hsl() function`);
|
---|
| 1147 | }
|
---|
| 1148 | } // return a transformed hwb color function
|
---|
| 1149 |
|
---|
| 1150 |
|
---|
| 1151 | function transformHWBFunction(node, opts) {
|
---|
| 1152 | const _transformArgsByParam9 = transformArgsByParams(node, [// <hue> <percentage> <percentage> [ / <alpha-value> ]?
|
---|
| 1153 | [transformHue, transformPercentage, transformPercentage, isSlash, transformAlpha]]),
|
---|
| 1154 | _transformArgsByParam10 = _slicedToArray(_transformArgsByParam9, 4),
|
---|
| 1155 | hue = _transformArgsByParam10[0],
|
---|
| 1156 | whiteness = _transformArgsByParam10[1],
|
---|
| 1157 | blackness = _transformArgsByParam10[2],
|
---|
| 1158 | _transformArgsByParam11 = _transformArgsByParam10[3],
|
---|
| 1159 | alpha = _transformArgsByParam11 === void 0 ? 100 : _transformArgsByParam11;
|
---|
| 1160 |
|
---|
| 1161 | if (blackness !== undefined) {
|
---|
| 1162 | const color = new Color({
|
---|
| 1163 | hue,
|
---|
| 1164 | whiteness,
|
---|
| 1165 | blackness,
|
---|
| 1166 | alpha,
|
---|
| 1167 | colorspace: 'hwb'
|
---|
| 1168 | });
|
---|
| 1169 | return color;
|
---|
| 1170 | } else {
|
---|
| 1171 | return manageUnresolved(node, opts, node.value, `Expected a valid hwb() function`);
|
---|
| 1172 | }
|
---|
| 1173 | } // return a transformed color-mod color function
|
---|
| 1174 |
|
---|
| 1175 |
|
---|
| 1176 | function transformColorModFunction(node, opts) {
|
---|
| 1177 | // [ <color> | <hue> ] <color-adjuster>*
|
---|
| 1178 | const _ref = (node.nodes || []).slice(1, -1) || [],
|
---|
| 1179 | _ref2 = _toArray(_ref),
|
---|
| 1180 | colorOrHueNode = _ref2[0],
|
---|
| 1181 | adjusterNodes = _ref2.slice(1);
|
---|
| 1182 |
|
---|
| 1183 | if (colorOrHueNode !== undefined) {
|
---|
| 1184 | const color = isHue(colorOrHueNode) ? new Color({
|
---|
| 1185 | hue: transformHue(colorOrHueNode, opts),
|
---|
| 1186 | saturation: 100,
|
---|
| 1187 | lightness: 50,
|
---|
| 1188 | alpha: 100,
|
---|
| 1189 | colorspace: 'hsl'
|
---|
| 1190 | }) : transformColor(colorOrHueNode, opts);
|
---|
| 1191 |
|
---|
| 1192 | if (color) {
|
---|
| 1193 | const adjustedColor = transformColorByAdjusters(color, adjusterNodes, opts);
|
---|
| 1194 | return adjustedColor;
|
---|
| 1195 | } else {
|
---|
| 1196 | return manageUnresolved(node, opts, node.value, `Expected a valid color`);
|
---|
| 1197 | }
|
---|
| 1198 | } else {
|
---|
| 1199 | return manageUnresolved(node, opts, node.value, `Expected a valid color-mod() function`);
|
---|
| 1200 | }
|
---|
| 1201 | } // return a transformed hex color
|
---|
| 1202 |
|
---|
| 1203 |
|
---|
| 1204 | function transformHexColor(node, opts) {
|
---|
| 1205 | if (hexColorMatch$1.test(node.value)) {
|
---|
| 1206 | // #<hex-color>{3,4,6,8}
|
---|
| 1207 | const _convertHtoRGB = convertHtoRGB(node.value),
|
---|
| 1208 | _convertHtoRGB2 = _slicedToArray(_convertHtoRGB, 4),
|
---|
| 1209 | red = _convertHtoRGB2[0],
|
---|
| 1210 | green = _convertHtoRGB2[1],
|
---|
| 1211 | blue = _convertHtoRGB2[2],
|
---|
| 1212 | alpha = _convertHtoRGB2[3];
|
---|
| 1213 |
|
---|
| 1214 | const color = new Color({
|
---|
| 1215 | red,
|
---|
| 1216 | green,
|
---|
| 1217 | blue,
|
---|
| 1218 | alpha
|
---|
| 1219 | });
|
---|
| 1220 | return color;
|
---|
| 1221 | } else {
|
---|
| 1222 | return manageUnresolved(node, opts, node.value, `Expected a valid hex color`);
|
---|
| 1223 | }
|
---|
| 1224 | } // return a transformed named-color
|
---|
| 1225 |
|
---|
| 1226 |
|
---|
| 1227 | function transformNamedColor(node, opts) {
|
---|
| 1228 | if (isNamedColor(node)) {
|
---|
| 1229 | // <named-color>
|
---|
| 1230 | const _convertNtoRGB = convertNtoRGB(node.value),
|
---|
| 1231 | _convertNtoRGB2 = _slicedToArray(_convertNtoRGB, 3),
|
---|
| 1232 | red = _convertNtoRGB2[0],
|
---|
| 1233 | green = _convertNtoRGB2[1],
|
---|
| 1234 | blue = _convertNtoRGB2[2];
|
---|
| 1235 |
|
---|
| 1236 | const color = new Color({
|
---|
| 1237 | red,
|
---|
| 1238 | green,
|
---|
| 1239 | blue,
|
---|
| 1240 | alpha: 100,
|
---|
| 1241 | colorspace: 'rgb'
|
---|
| 1242 | });
|
---|
| 1243 | return color;
|
---|
| 1244 | } else {
|
---|
| 1245 | return manageUnresolved(node, opts, node.value, `Expected a valid named-color`);
|
---|
| 1246 | }
|
---|
| 1247 | }
|
---|
| 1248 | /* Transform <color-adjuster> functions
|
---|
| 1249 | /* ========================================================================== */
|
---|
| 1250 | // return a transformed color using adjustments
|
---|
| 1251 |
|
---|
| 1252 |
|
---|
| 1253 | function transformColorByAdjusters(color, adjusterNodes, opts) {
|
---|
| 1254 | const adjustedColor = adjusterNodes.reduce((base, node) => {
|
---|
| 1255 | if (isAlphaBlueGreenRedAdjuster(node)) {
|
---|
| 1256 | return transformAlphaBlueGreenRedAdjuster(base, node, opts);
|
---|
| 1257 | } else if (isRGBAdjuster(node)) {
|
---|
| 1258 | return transformRGBAdjuster(base, node, opts);
|
---|
| 1259 | } else if (isHueAdjuster(node)) {
|
---|
| 1260 | return transformHueAdjuster(base, node, opts);
|
---|
| 1261 | } else if (isBlacknessLightnessSaturationWhitenessAdjuster(node)) {
|
---|
| 1262 | return transformBlacknessLightnessSaturationWhitenessAdjuster(base, node, opts);
|
---|
| 1263 | } else if (isShadeTintAdjuster(node)) {
|
---|
| 1264 | return transformShadeTintAdjuster(base, node, opts);
|
---|
| 1265 | } else if (isBlendAdjuster(node)) {
|
---|
| 1266 | return transformBlendAdjuster(base, node, node.value === 'blenda', opts);
|
---|
| 1267 | } else if (isContrastAdjuster(node)) {
|
---|
| 1268 | return transformContrastAdjuster(base, node, opts);
|
---|
| 1269 | } else {
|
---|
| 1270 | manageUnresolved(node, opts, node.value, `Expected a valid color adjuster`);
|
---|
| 1271 | return base;
|
---|
| 1272 | }
|
---|
| 1273 | }, color);
|
---|
| 1274 | return adjustedColor;
|
---|
| 1275 | } // return a transformed color using a/alpha/blue/green/red adjustments
|
---|
| 1276 |
|
---|
| 1277 |
|
---|
| 1278 | function transformAlphaBlueGreenRedAdjuster(base, node, opts) {
|
---|
| 1279 | const _transformArgsByParam12 = transformArgsByParams(node, alphaMatch.test(node.value) // a/alpha adjustments
|
---|
| 1280 | ? [// [ + | - ] <alpha-value>
|
---|
| 1281 | [transformMinusPlusOperator, transformAlpha], // * <percentage>
|
---|
| 1282 | [transformTimesOperator, transformPercentage], // <alpha-value>
|
---|
| 1283 | [transformAlpha]] // blue/green/red adjustments
|
---|
| 1284 | : [// [ + | - ] <percentage>
|
---|
| 1285 | [transformMinusPlusOperator, transformPercentage], // [ + | - ] <number>
|
---|
| 1286 | [transformMinusPlusOperator, transformRGBNumber], // * <percentage>
|
---|
| 1287 | [transformTimesOperator, transformPercentage], // <percentage>
|
---|
| 1288 | [transformPercentage], // <number>
|
---|
| 1289 | [transformRGBNumber]]),
|
---|
| 1290 | _transformArgsByParam13 = _slicedToArray(_transformArgsByParam12, 2),
|
---|
| 1291 | operatorOrValue = _transformArgsByParam13[0],
|
---|
| 1292 | adjustment = _transformArgsByParam13[1];
|
---|
| 1293 |
|
---|
| 1294 | if (operatorOrValue !== undefined) {
|
---|
| 1295 | // normalized channel name
|
---|
| 1296 | const channel = node.value.toLowerCase().replace(alphaMatch, 'alpha');
|
---|
| 1297 | const existingValue = base[channel]();
|
---|
| 1298 | const modifiedValue = adjustment !== undefined ? operatorOrValue === '+' ? existingValue + Number(adjustment) : operatorOrValue === '-' ? existingValue - Number(adjustment) : operatorOrValue === '*' ? existingValue * Number(adjustment) : Number(adjustment) : Number(operatorOrValue);
|
---|
| 1299 | const modifiedColor = base[channel](modifiedValue);
|
---|
| 1300 | return modifiedColor;
|
---|
| 1301 | } else {
|
---|
| 1302 | return manageUnresolved(node, opts, node.value, `Expected a valid modifier()`);
|
---|
| 1303 | }
|
---|
| 1304 | } // return a transformed color using an rgb adjustment
|
---|
| 1305 |
|
---|
| 1306 |
|
---|
| 1307 | function transformRGBAdjuster(base, node, opts) {
|
---|
| 1308 | const _transformArgsByParam14 = transformArgsByParams(node, [// [ + | - ] <percentage> <percentage> <percentage>
|
---|
| 1309 | [transformMinusPlusOperator, transformPercentage, transformPercentage, transformPercentage], // [ + | - ] <number> <number> <number>
|
---|
| 1310 | [transformMinusPlusOperator, transformRGBNumber, transformRGBNumber, transformRGBNumber], // [ + | - ] <hash-token>
|
---|
| 1311 | [transformMinusPlusOperator, transformHexColor], // [ * ] <percentage>
|
---|
| 1312 | [transformTimesOperator, transformPercentage]]),
|
---|
| 1313 | _transformArgsByParam15 = _slicedToArray(_transformArgsByParam14, 4),
|
---|
| 1314 | arg1 = _transformArgsByParam15[0],
|
---|
| 1315 | arg2 = _transformArgsByParam15[1],
|
---|
| 1316 | arg3 = _transformArgsByParam15[2],
|
---|
| 1317 | arg4 = _transformArgsByParam15[3];
|
---|
| 1318 |
|
---|
| 1319 | if (arg2 !== undefined && arg2.color) {
|
---|
| 1320 | const modifiedColor = base.rgb(arg1 === '+' ? base.red() + arg2.red() : base.red() - arg2.red(), arg1 === '+' ? base.green() + arg2.green() : base.green() - arg2.green(), arg1 === '+' ? base.blue() + arg2.blue() : base.blue() - arg2.blue());
|
---|
| 1321 | return modifiedColor;
|
---|
| 1322 | } else if (arg1 !== undefined && minusPlusMatch.test(arg1)) {
|
---|
| 1323 | const modifiedColor = base.rgb(arg1 === '+' ? base.red() + arg2 : base.red() - arg2, arg1 === '+' ? base.green() + arg3 : base.green() - arg3, arg1 === '+' ? base.blue() + arg4 : base.blue() - arg4);
|
---|
| 1324 | return modifiedColor;
|
---|
| 1325 | } else if (arg1 !== undefined && arg2 !== undefined) {
|
---|
| 1326 | const modifiedColor = base.rgb(base.red() * arg2, base.green() * arg2, base.blue() * arg2);
|
---|
| 1327 | return modifiedColor;
|
---|
| 1328 | } else {
|
---|
| 1329 | return manageUnresolved(node, opts, node.value, `Expected a valid rgb() adjuster`);
|
---|
| 1330 | }
|
---|
| 1331 | } // return a transformed color using a blend/blenda adjustment
|
---|
| 1332 |
|
---|
| 1333 |
|
---|
| 1334 | function transformBlendAdjuster(base, node, isAlphaBlend, opts) {
|
---|
| 1335 | const _transformArgsByParam16 = transformArgsByParams(node, [[transformColor, transformPercentage, transformColorSpace]]),
|
---|
| 1336 | _transformArgsByParam17 = _slicedToArray(_transformArgsByParam16, 3),
|
---|
| 1337 | color = _transformArgsByParam17[0],
|
---|
| 1338 | percentage = _transformArgsByParam17[1],
|
---|
| 1339 | _transformArgsByParam18 = _transformArgsByParam17[2],
|
---|
| 1340 | colorspace = _transformArgsByParam18 === void 0 ? 'rgb' : _transformArgsByParam18;
|
---|
| 1341 |
|
---|
| 1342 | if (percentage !== undefined) {
|
---|
| 1343 | const modifiedColor = isAlphaBlend ? base.blenda(color.color, percentage, colorspace) : base.blend(color.color, percentage, colorspace);
|
---|
| 1344 | return modifiedColor;
|
---|
| 1345 | } else {
|
---|
| 1346 | return manageUnresolved(node, opts, node.value, `Expected a valid blend() adjuster)`);
|
---|
| 1347 | }
|
---|
| 1348 | } // return a transformed color using a contrast adjustment
|
---|
| 1349 |
|
---|
| 1350 |
|
---|
| 1351 | function transformContrastAdjuster(base, node, opts) {
|
---|
| 1352 | const _transformArgsByParam19 = transformArgsByParams(node, [// <percentage>
|
---|
| 1353 | [transformPercentage]]),
|
---|
| 1354 | _transformArgsByParam20 = _slicedToArray(_transformArgsByParam19, 1),
|
---|
| 1355 | percentage = _transformArgsByParam20[0];
|
---|
| 1356 |
|
---|
| 1357 | if (percentage !== undefined) {
|
---|
| 1358 | const modifiedColor = base.contrast(percentage);
|
---|
| 1359 | return modifiedColor;
|
---|
| 1360 | } else {
|
---|
| 1361 | return manageUnresolved(node, opts, node.value, `Expected a valid contrast() adjuster)`);
|
---|
| 1362 | }
|
---|
| 1363 | } // return a transformed color using a hue adjustment
|
---|
| 1364 |
|
---|
| 1365 |
|
---|
| 1366 | function transformHueAdjuster(base, node, opts) {
|
---|
| 1367 | const _transformArgsByParam21 = transformArgsByParams(node, [// [ + | - | * ] <angle>
|
---|
| 1368 | [transformMinusPlusTimesOperator, transformHue], // <angle>
|
---|
| 1369 | [transformHue]]),
|
---|
| 1370 | _transformArgsByParam22 = _slicedToArray(_transformArgsByParam21, 2),
|
---|
| 1371 | operatorOrHue = _transformArgsByParam22[0],
|
---|
| 1372 | adjustment = _transformArgsByParam22[1];
|
---|
| 1373 |
|
---|
| 1374 | if (operatorOrHue !== undefined) {
|
---|
| 1375 | const existingHue = base.hue();
|
---|
| 1376 | const modifiedValue = adjustment !== undefined ? operatorOrHue === '+' ? existingHue + Number(adjustment) : operatorOrHue === '-' ? existingHue - Number(adjustment) : operatorOrHue === '*' ? existingHue * Number(adjustment) : Number(adjustment) : Number(operatorOrHue);
|
---|
| 1377 | return base.hue(modifiedValue);
|
---|
| 1378 | } else {
|
---|
| 1379 | return manageUnresolved(node, opts, node.value, `Expected a valid hue() function)`);
|
---|
| 1380 | }
|
---|
| 1381 | } // [ b | blackness | l | lightness | s | saturation | w | whiteness ]( [ + | - | * ]? <percentage> )
|
---|
| 1382 |
|
---|
| 1383 |
|
---|
| 1384 | function transformBlacknessLightnessSaturationWhitenessAdjuster(base, node, opts) {
|
---|
| 1385 | const channel = node.value.toLowerCase().replace(/^b$/, 'blackness').replace(/^l$/, 'lightness').replace(/^s$/, 'saturation').replace(/^w$/, 'whiteness');
|
---|
| 1386 |
|
---|
| 1387 | const _transformArgsByParam23 = transformArgsByParams(node, [[transformMinusPlusTimesOperator, transformPercentage], [transformPercentage]]),
|
---|
| 1388 | _transformArgsByParam24 = _slicedToArray(_transformArgsByParam23, 2),
|
---|
| 1389 | operatorOrValue = _transformArgsByParam24[0],
|
---|
| 1390 | adjustment = _transformArgsByParam24[1];
|
---|
| 1391 |
|
---|
| 1392 | if (operatorOrValue !== undefined) {
|
---|
| 1393 | const existingValue = base[channel]();
|
---|
| 1394 | const modifiedValue = adjustment !== undefined ? operatorOrValue === '+' ? existingValue + Number(adjustment) : operatorOrValue === '-' ? existingValue - Number(adjustment) : operatorOrValue === '*' ? existingValue * Number(adjustment) : Number(adjustment) : Number(operatorOrValue);
|
---|
| 1395 | return base[channel](modifiedValue);
|
---|
| 1396 | } else {
|
---|
| 1397 | return manageUnresolved(node, opts, node.value, `Expected a valid ${channel}() function)`);
|
---|
| 1398 | }
|
---|
| 1399 | } // return a transformed color using shade/tint adjustments
|
---|
| 1400 |
|
---|
| 1401 |
|
---|
| 1402 | function transformShadeTintAdjuster(base, node, opts) {
|
---|
| 1403 | const channel = node.value.toLowerCase();
|
---|
| 1404 |
|
---|
| 1405 | const _transformArgsByParam25 = transformArgsByParams(node, [// [ shade | tint ]( <percentage> )
|
---|
| 1406 | [transformPercentage]]),
|
---|
| 1407 | _transformArgsByParam26 = _slicedToArray(_transformArgsByParam25, 1),
|
---|
| 1408 | percentage = _transformArgsByParam26[0];
|
---|
| 1409 |
|
---|
| 1410 | if (percentage !== undefined) {
|
---|
| 1411 | const modifiedValue = Number(percentage);
|
---|
| 1412 | return base[channel](modifiedValue);
|
---|
| 1413 | } else {
|
---|
| 1414 | return manageUnresolved(node, opts, node.value, `Expected valid ${channel}() arguments`);
|
---|
| 1415 | }
|
---|
| 1416 | }
|
---|
| 1417 | /* Argument Transforms
|
---|
| 1418 | /* ========================================================================== */
|
---|
| 1419 | // return a transformed color space
|
---|
| 1420 |
|
---|
| 1421 |
|
---|
| 1422 | function transformColorSpace(node, opts) {
|
---|
| 1423 | if (isColorSpace(node)) {
|
---|
| 1424 | // [ hsl | hwb | rgb ]
|
---|
| 1425 | return node.value;
|
---|
| 1426 | } else {
|
---|
| 1427 | return manageUnresolved(node, opts, node.value, `Expected a valid color space)`);
|
---|
| 1428 | }
|
---|
| 1429 | } // return a transformed alpha value
|
---|
| 1430 |
|
---|
| 1431 |
|
---|
| 1432 | function transformAlpha(node, opts) {
|
---|
| 1433 | if (isNumber(node)) {
|
---|
| 1434 | // <number>
|
---|
| 1435 | return node.value * 100;
|
---|
| 1436 | } else if (isPercentage(node)) {
|
---|
| 1437 | // <percentage>
|
---|
| 1438 | return transformPercentage(node, opts);
|
---|
| 1439 | } else {
|
---|
| 1440 | return manageUnresolved(node, opts, node.value, `Expected a valid alpha value)`);
|
---|
| 1441 | }
|
---|
| 1442 | } // return a transformed rgb number
|
---|
| 1443 |
|
---|
| 1444 |
|
---|
| 1445 | function transformRGBNumber(node, opts) {
|
---|
| 1446 | if (isNumber(node)) {
|
---|
| 1447 | // <number>
|
---|
| 1448 | return node.value / 2.55;
|
---|
| 1449 | } else {
|
---|
| 1450 | return manageUnresolved(node, opts, node.value, `Expected a valid RGB value)`);
|
---|
| 1451 | }
|
---|
| 1452 | } // return a transformed hue
|
---|
| 1453 |
|
---|
| 1454 |
|
---|
| 1455 | function transformHue(node, opts) {
|
---|
| 1456 | if (isHue(node)) {
|
---|
| 1457 | // <hue> = <number> | <angle>
|
---|
| 1458 | const unit = node.unit.toLowerCase();
|
---|
| 1459 |
|
---|
| 1460 | if (unit === 'grad') {
|
---|
| 1461 | // if <angle> = <gradian> (400 per circle)
|
---|
| 1462 | return convertGtoD(node.value);
|
---|
| 1463 | } else if (unit === 'rad') {
|
---|
| 1464 | // if <angle> = <radian> (2π per circle)
|
---|
| 1465 | return convertRtoD(node.value);
|
---|
| 1466 | } else if (unit === 'turn') {
|
---|
| 1467 | // if <angle> = <turn> (1 per circle)
|
---|
| 1468 | return convertTtoD(node.value);
|
---|
| 1469 | } else {
|
---|
| 1470 | // if <angle> = [ <degree> | <number> ] (360 per circle)
|
---|
| 1471 | return convertDtoD(node.value);
|
---|
| 1472 | }
|
---|
| 1473 | } else {
|
---|
| 1474 | return manageUnresolved(node, opts, node.value, `Expected a valid hue`);
|
---|
| 1475 | }
|
---|
| 1476 | } // return a transformed percentage
|
---|
| 1477 |
|
---|
| 1478 |
|
---|
| 1479 | function transformPercentage(node, opts) {
|
---|
| 1480 | if (isPercentage(node)) {
|
---|
| 1481 | // <percentage>
|
---|
| 1482 | return Number(node.value);
|
---|
| 1483 | } else {
|
---|
| 1484 | return manageUnresolved(node, opts, node.value, `Expected a valid hue`);
|
---|
| 1485 | }
|
---|
| 1486 | } // return a transformed minus-plus operator
|
---|
| 1487 |
|
---|
| 1488 |
|
---|
| 1489 | function transformMinusPlusOperator(node, opts) {
|
---|
| 1490 | if (isMinusPlusOperator(node)) {
|
---|
| 1491 | // [ - | + ]
|
---|
| 1492 | return node.value;
|
---|
| 1493 | } else {
|
---|
| 1494 | return manageUnresolved(node, opts, node.value, `Expected a plus or minus operator`);
|
---|
| 1495 | }
|
---|
| 1496 | } // return a transformed times operator
|
---|
| 1497 |
|
---|
| 1498 |
|
---|
| 1499 | function transformTimesOperator(node, opts) {
|
---|
| 1500 | if (isTimesOperator(node)) {
|
---|
| 1501 | // [ * ]
|
---|
| 1502 | return node.value;
|
---|
| 1503 | } else {
|
---|
| 1504 | return manageUnresolved(node, opts, node.value, `Expected a times operator`);
|
---|
| 1505 | }
|
---|
| 1506 | } // return a transformed minus-plus-times operator
|
---|
| 1507 |
|
---|
| 1508 |
|
---|
| 1509 | function transformMinusPlusTimesOperator(node, opts) {
|
---|
| 1510 | if (isMinusPlusTimesOperator(node)) {
|
---|
| 1511 | // [ - | + | * ]
|
---|
| 1512 | return node.value;
|
---|
| 1513 | } else {
|
---|
| 1514 | return manageUnresolved(node, opts, node.value, `Expected a plus, minus, or times operator`);
|
---|
| 1515 | }
|
---|
| 1516 | }
|
---|
| 1517 | /* Additional transforms
|
---|
| 1518 | /* ========================================================================== */
|
---|
| 1519 |
|
---|
| 1520 |
|
---|
| 1521 | function transformWord(node, opts) {
|
---|
| 1522 | if (isWord(node)) {
|
---|
| 1523 | return node.value;
|
---|
| 1524 | } else {
|
---|
| 1525 | return manageUnresolved(node, opts, node.value, `Expected a valid word`);
|
---|
| 1526 | }
|
---|
| 1527 | }
|
---|
| 1528 |
|
---|
| 1529 | function transformNode(node) {
|
---|
| 1530 | return Object(node);
|
---|
| 1531 | }
|
---|
| 1532 | /* Transform helper
|
---|
| 1533 | /* ========================================================================== */
|
---|
| 1534 | // return the first set of transformed arguments allowable by the parameters
|
---|
| 1535 |
|
---|
| 1536 |
|
---|
| 1537 | function transformArgsByParams(node, params) {
|
---|
| 1538 | const nodes = (node.nodes || []).slice(1, -1);
|
---|
| 1539 | const opts = {
|
---|
| 1540 | unresolved: 'ignore'
|
---|
| 1541 | };
|
---|
| 1542 | return params.map(param => nodes.map((childNode, index) => typeof param[index] === 'function' ? param[index](childNode, opts) : undefined).filter(child => typeof child !== 'boolean')).filter(param => param.every(result => result !== undefined))[0] || [];
|
---|
| 1543 | }
|
---|
| 1544 | /* Walk helper (required because the default walker is affected by mutations)
|
---|
| 1545 | /* ========================================================================== */
|
---|
| 1546 | // run a function over each node and hen walk each child node of that node
|
---|
| 1547 |
|
---|
| 1548 |
|
---|
| 1549 | function walk(node, fn) {
|
---|
| 1550 | fn(node);
|
---|
| 1551 |
|
---|
| 1552 | if (Object(node.nodes).length) {
|
---|
| 1553 | node.nodes.slice().forEach(childNode => {
|
---|
| 1554 | walk(childNode, fn);
|
---|
| 1555 | });
|
---|
| 1556 | }
|
---|
| 1557 | }
|
---|
| 1558 | /* Variable validators
|
---|
| 1559 | /* ========================================================================== */
|
---|
| 1560 | // return whether the node is a var function
|
---|
| 1561 |
|
---|
| 1562 |
|
---|
| 1563 | function isVariable(node) {
|
---|
| 1564 | // var()
|
---|
| 1565 | return Object(node).type === 'func' && varMatch.test(node.value);
|
---|
| 1566 | }
|
---|
| 1567 | /* Adjustment validators
|
---|
| 1568 | /* ========================================================================== */
|
---|
| 1569 | // return whether the node is an a/alpha/blue/green/red adjuster
|
---|
| 1570 |
|
---|
| 1571 |
|
---|
| 1572 | function isAlphaBlueGreenRedAdjuster(node) {
|
---|
| 1573 | // [ a(), alpha(), blue(), green(), red() ]
|
---|
| 1574 | return Object(node).type === 'func' && alphaBlueGreenRedMatch.test(node.value);
|
---|
| 1575 | } // return whether the node is an rgb adjuster
|
---|
| 1576 |
|
---|
| 1577 |
|
---|
| 1578 | function isRGBAdjuster(node) {
|
---|
| 1579 | return Object(node).type === 'func' && rgbMatch.test(node.value);
|
---|
| 1580 | } // return whether the node is a hue adjuster
|
---|
| 1581 |
|
---|
| 1582 |
|
---|
| 1583 | function isHueAdjuster(node) {
|
---|
| 1584 | // [ h() | hue() ]
|
---|
| 1585 | return Object(node).type === 'func' && hueMatch.test(node.value);
|
---|
| 1586 | } // return whether the node is a blackness/lightness/saturation/whiteness adjuster
|
---|
| 1587 |
|
---|
| 1588 |
|
---|
| 1589 | function isBlacknessLightnessSaturationWhitenessAdjuster(node) {
|
---|
| 1590 | // [ b() | blackness() | l() | lightness() | s() | saturation() | w() | whiteness() ]
|
---|
| 1591 | return Object(node).type === 'func' && blacknessLightnessSaturationWhitenessMatch.test(node.value);
|
---|
| 1592 | } // return whether the node is a shade/tint adjuster
|
---|
| 1593 |
|
---|
| 1594 |
|
---|
| 1595 | function isShadeTintAdjuster(node) {
|
---|
| 1596 | // [ shade() | tint() ]
|
---|
| 1597 | return Object(node).type === 'func' && shadeTintMatch.test(node.value);
|
---|
| 1598 | } // return whether the node is a blend adjuster
|
---|
| 1599 |
|
---|
| 1600 |
|
---|
| 1601 | function isBlendAdjuster(node) {
|
---|
| 1602 | // [ blend(), blenda() ]
|
---|
| 1603 | return Object(node).type === 'func' && blendMatch.test(node.value);
|
---|
| 1604 | } // return whether the node is a contrast adjuster
|
---|
| 1605 |
|
---|
| 1606 |
|
---|
| 1607 | function isContrastAdjuster(node) {
|
---|
| 1608 | // [ contrast() ]
|
---|
| 1609 | return Object(node).type === 'func' && contrastMatch.test(node.value);
|
---|
| 1610 | }
|
---|
| 1611 | /* Color validators
|
---|
| 1612 | /* ========================================================================== */
|
---|
| 1613 | // return whether the node is an rgb/rgba color function
|
---|
| 1614 |
|
---|
| 1615 |
|
---|
| 1616 | function isRGBFunction(node) {
|
---|
| 1617 | // [ rgb(), rgba() ]
|
---|
| 1618 | return Object(node).type === 'func' && rgbaMatch.test(node.value);
|
---|
| 1619 | } // return whether the node is an hsl color function
|
---|
| 1620 |
|
---|
| 1621 |
|
---|
| 1622 | function isHSLFunction(node) {
|
---|
| 1623 | // [ hsl(), hsla() ]
|
---|
| 1624 | return Object(node).type === 'func' && hslaMatch.test(node.value);
|
---|
| 1625 | } // return whether the node is an hwb color function
|
---|
| 1626 |
|
---|
| 1627 |
|
---|
| 1628 | function isHWBFunction(node) {
|
---|
| 1629 | // hwb()
|
---|
| 1630 | return Object(node).type === 'func' && hwbMatch.test(node.value);
|
---|
| 1631 | } // return whether the node is a color-mod function
|
---|
| 1632 |
|
---|
| 1633 |
|
---|
| 1634 | function isColorModFunction(node) {
|
---|
| 1635 | // color-mod()
|
---|
| 1636 | return Object(node).type === 'func' && colorModMatch.test(node.value);
|
---|
| 1637 | } // return whether the node is a valid named-color
|
---|
| 1638 |
|
---|
| 1639 |
|
---|
| 1640 | function isNamedColor(node) {
|
---|
| 1641 | return Object(node).type === 'word' && Boolean(convertNtoRGB(node.value));
|
---|
| 1642 | } // return whether the node is a valid hex color
|
---|
| 1643 |
|
---|
| 1644 |
|
---|
| 1645 | function isHexColor(node) {
|
---|
| 1646 | // #<hex-color>{3,4,6,8}
|
---|
| 1647 | return Object(node).type === 'word' && hexColorMatch$1.test(node.value);
|
---|
| 1648 | } // return whether the node is a valid color space
|
---|
| 1649 |
|
---|
| 1650 |
|
---|
| 1651 | function isColorSpace(node) {
|
---|
| 1652 | // [ hsl | hwb | rgb ]
|
---|
| 1653 | return Object(node).type === 'word' && colorSpaceMatch.test(node.value);
|
---|
| 1654 | }
|
---|
| 1655 | /* Additional validators
|
---|
| 1656 | /* ========================================================================== */
|
---|
| 1657 | // return whether the hue value is valid
|
---|
| 1658 |
|
---|
| 1659 |
|
---|
| 1660 | function isHue(node) {
|
---|
| 1661 | return Object(node).type === 'number' && hueUnitMatch.test(node.unit);
|
---|
| 1662 | } // return whether the comma is valid
|
---|
| 1663 |
|
---|
| 1664 |
|
---|
| 1665 | function isComma(node) {
|
---|
| 1666 | return Object(node).type === 'comma';
|
---|
| 1667 | } // return whether the slash operator is valid
|
---|
| 1668 |
|
---|
| 1669 |
|
---|
| 1670 | function isSlash(node) {
|
---|
| 1671 | return Object(node).type === 'operator' && node.value === '/';
|
---|
| 1672 | } // return whether the number is valid
|
---|
| 1673 |
|
---|
| 1674 |
|
---|
| 1675 | function isNumber(node) {
|
---|
| 1676 | return Object(node).type === 'number' && node.unit === '';
|
---|
| 1677 | } // return whether the mind-plus operator is valid
|
---|
| 1678 |
|
---|
| 1679 |
|
---|
| 1680 | function isMinusPlusOperator(node) {
|
---|
| 1681 | return Object(node).type === 'operator' && minusPlusMatch.test(node.value);
|
---|
| 1682 | } // return whether the minus-plus-times operator is valid
|
---|
| 1683 |
|
---|
| 1684 |
|
---|
| 1685 | function isMinusPlusTimesOperator(node) {
|
---|
| 1686 | return Object(node).type === 'operator' && minusPlusTimesMatch.test(node.value);
|
---|
| 1687 | } // return whether the times operator is valid
|
---|
| 1688 |
|
---|
| 1689 |
|
---|
| 1690 | function isTimesOperator(node) {
|
---|
| 1691 | return Object(node).type === 'operator' && timesMatch.test(node.value);
|
---|
| 1692 | } // return whether the percentage is valid
|
---|
| 1693 |
|
---|
| 1694 |
|
---|
| 1695 | function isPercentage(node) {
|
---|
| 1696 | return Object(node).type === 'number' && (node.unit === '%' || node.value === '0');
|
---|
| 1697 | } // return whether the node is a word
|
---|
| 1698 |
|
---|
| 1699 |
|
---|
| 1700 | function isWord(node) {
|
---|
| 1701 | // <word>
|
---|
| 1702 | return Object(node).type === 'word';
|
---|
| 1703 | }
|
---|
| 1704 | /* Matchers
|
---|
| 1705 | /* ========================================================================== */
|
---|
| 1706 |
|
---|
| 1707 |
|
---|
| 1708 | const alphaMatch = /^a(lpha)?$/i;
|
---|
| 1709 | const alphaBlueGreenRedMatch = /^(a(lpha)?|blue|green|red)$/i;
|
---|
| 1710 | const blacknessLightnessSaturationWhitenessMatch = /^(b(lackness)?|l(ightness)?|s(aturation)?|w(hiteness)?)$/i;
|
---|
| 1711 | const blendMatch = /^blenda?$/i;
|
---|
| 1712 | const colorModMatch = /^color-mod$/i;
|
---|
| 1713 | const colorSpaceMatch = /^(hsl|hwb|rgb)$/i;
|
---|
| 1714 | const contrastMatch = /^contrast$/i;
|
---|
| 1715 | const hexColorMatch$1 = /^#(?:([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?|([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?)$/i;
|
---|
| 1716 | const hslaMatch = /^hsla?$/i;
|
---|
| 1717 | const hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
|
---|
| 1718 | const hueMatch = /^h(ue)?$/i;
|
---|
| 1719 | const hwbMatch = /^hwb$/i;
|
---|
| 1720 | const minusPlusMatch = /^[+-]$/;
|
---|
| 1721 | const minusPlusTimesMatch = /^[*+-]$/;
|
---|
| 1722 | const rgbMatch = /^rgb$/i;
|
---|
| 1723 | const rgbaMatch = /^rgba?$/i;
|
---|
| 1724 | const shadeTintMatch = /^(shade|tint)$/i;
|
---|
| 1725 | const varMatch = /^var$/i;
|
---|
| 1726 | const looseVarMatch = /(^|[^\w-])var\(/i;
|
---|
| 1727 | const timesMatch = /^[*]$/;
|
---|
| 1728 |
|
---|
| 1729 | var index = postcss.plugin('postcss-color-mod-function', opts => {
|
---|
| 1730 | // how unresolved functions and arguments should be handled (default: "throw")
|
---|
| 1731 | const unresolvedOpt = String(Object(opts).unresolved || 'throw').toLowerCase(); // how transformed colors will be produced in CSS
|
---|
| 1732 |
|
---|
| 1733 | const stringifierOpt = Object(opts).stringifier || (color => color.toLegacy()); // sources to import custom selectors from
|
---|
| 1734 |
|
---|
| 1735 |
|
---|
| 1736 | const importFrom = [].concat(Object(opts).importFrom || []); // whether var() within color-mod() should use Custom Properties or var() fallback
|
---|
| 1737 |
|
---|
| 1738 | const transformVarsOpt = 'transformVars' in Object(opts) ? opts.transformVars : true; // promise any custom selectors are imported
|
---|
| 1739 |
|
---|
| 1740 | const customPropertiesPromise = importCustomPropertiesFromSources(importFrom);
|
---|
| 1741 | return (
|
---|
| 1742 | /*#__PURE__*/
|
---|
| 1743 | function () {
|
---|
| 1744 | var _ref = _asyncToGenerator(function* (root, result) {
|
---|
| 1745 | const customProperties = Object.assign((yield customPropertiesPromise), getCustomProperties(root, {
|
---|
| 1746 | preserve: true
|
---|
| 1747 | }));
|
---|
| 1748 | root.walkDecls(decl => {
|
---|
| 1749 | const originalValue = decl.value;
|
---|
| 1750 |
|
---|
| 1751 | if (colorModFunctionMatch.test(originalValue)) {
|
---|
| 1752 | const ast = valueParser(originalValue, {
|
---|
| 1753 | loose: true
|
---|
| 1754 | }).parse();
|
---|
| 1755 | transformAST(ast, {
|
---|
| 1756 | unresolved: unresolvedOpt,
|
---|
| 1757 | stringifier: stringifierOpt,
|
---|
| 1758 | transformVars: transformVarsOpt,
|
---|
| 1759 | decl,
|
---|
| 1760 | result,
|
---|
| 1761 | customProperties
|
---|
| 1762 | });
|
---|
| 1763 | const modifiedValue = ast.toString();
|
---|
| 1764 |
|
---|
| 1765 | if (originalValue !== modifiedValue) {
|
---|
| 1766 | decl.value = modifiedValue;
|
---|
| 1767 | }
|
---|
| 1768 | }
|
---|
| 1769 | });
|
---|
| 1770 | });
|
---|
| 1771 |
|
---|
| 1772 | return function (_x, _x2) {
|
---|
| 1773 | return _ref.apply(this, arguments);
|
---|
| 1774 | };
|
---|
| 1775 | }()
|
---|
| 1776 | );
|
---|
| 1777 | });
|
---|
| 1778 | const colorModFunctionMatch = /(^|[^\w-])color-mod\(/i;
|
---|
| 1779 |
|
---|
| 1780 | export default index;
|
---|
| 1781 | //# sourceMappingURL=index.es.mjs.map
|
---|