PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/scripts/theme/index.js +1116 -394 23.6.0 → trunk View file →
@@ -1,4 +1,6 @@
1 +(function() {
2 +"use strict";
1 3 var wp;
2 4 (wp ||= {}).theme = (() => {
3 5 var __create = Object.create;
4 6 var __defProp = Object.defineProperty;
@@ -140,16 +142,16 @@
140 142 }
141 143 const multiplier = 10 ** (precision - digits);
142 144 return Math.floor(n2 * multiplier + 0.5) / multiplier;
143 145 }
144 - function interpolate(start, end, p2) {
145 - if (isNaN(start)) {
146 + function interpolate(start, end, p3) {
147 + if (isNone(start) || isNaN(start)) {
146 148 return end;
147 149 }
148 - if (isNaN(end)) {
150 + if (isNone(end) || isNaN(end)) {
149 151 return start;
150 152 }
151 - return start + (end - start) * p2;
153 + return start + (end - start) * p3;
152 154 }
153 155 function interpolateInv(start, end, value) {
154 156 return (value - start) / (end - start);
155 157 }
@@ -164,10 +166,10 @@
164 166 }
165 167 function copySign(to2, from) {
166 168 return Math.sign(to2) === Math.sign(from) ? to2 : -to2;
167 169 }
168 - function spow(base, exp) {
169 - return copySign(Math.abs(base) ** exp, base);
170 + function spow(base, exp2) {
171 + return copySign(Math.abs(base) ** exp2, base);
170 172 }
171 173 function zdiv(n2, d2) {
172 174 return d2 === 0 ? 0 : n2 / d2;
173 175 }
@@ -726,11 +728,26 @@
726 728 this.id = options.id;
727 729 this.name = options.name;
728 730 this.base = options.base ? _ColorSpace.get(options.base) : null;
729 731 this.aliases = options.aliases;
732 + this.displaySpaces = options.displaySpaces?.map((space) => _ColorSpace.get(space));
733 + this.bases = [];
734 + for (let base = this.base; base; base = base.base) {
735 + this.bases.push(base);
736 + }
737 + if (options.rgbGamut) {
738 + this.rgbGamut = options.rgbGamut;
739 + }
740 + if (options.linearGamut) {
741 + this.linearGamut = options.linearGamut;
742 + }
730 743 if (this.base) {
731 - this.fromBase = options.fromBase;
732 - this.toBase = options.toBase;
744 + if (options.fromBase) {
745 + this.fromBase = options.fromBase;
746 + }
747 + if (options.toBase) {
748 + this.toBase = options.toBase;
749 + }
733 750 }
734 751 let coords = options.coords ?? this.base.coords;
735 752 for (let name in coords) {
736 753 if (!("name" in coords[name])) {
@@ -765,8 +782,9 @@
765 782 this.inGamut = (coords2, options2) => {
766 783 return true;
767 784 };
768 785 }
786 + this.M = options.M ?? {};
769 787 this.referred = options.referred;
770 788 Object.defineProperty(this, "path", {
771 789 value: getPath(this).reverse(),
772 790 writable: false,
@@ -798,17 +816,31 @@
798 816 }
799 817 get cssId() {
800 818 return this.formats?.color?.id || this.id;
801 819 }
802 - get isPolar() {
820 + /**
821 + * The id of this space's hue coordinate, or null if the space is not polar
822 + * @returns {string | null}
823 + */
824 + get hueId() {
803 825 for (let id in this.coords) {
804 826 if (this.coords[id].type === "angle") {
805 - return true;
827 + return id;
806 828 }
807 829 }
808 - return false;
830 + return null;
809 831 }
810 832 /**
833 + * The index of this space's hue coordinate within its coords array, or -1 if the space is not polar
834 + * @returns {number}
835 + */
836 + get hueIndex() {
837 + return Object.keys(this.coords).findIndex((id) => this.coords[id].type === "angle");
838 + }
839 + get isPolar() {
840 + return this.hueId !== null;
841 + }
842 + /**
811 843 * Lookup a format in this color space
812 844 * @param {string | object | Format} format - Format id if string. If object, it's converted to a `Format` object and returned.
813 845 * @returns {Format}
814 846 */
@@ -1068,9 +1100,10 @@
1068 1100 /**
1069 1101 * Creates a new RGB ColorSpace.
1070 1102 * If coords are not specified, they will use the default RGB coords.
1071 1103 * Instead of `fromBase()` and `toBase()` functions,
1072 - * you can specify to/from XYZ matrices and have `toBase()` and `fromBase()` automatically generated.
1104 + * you can specify to/from XYZ matrices and have the default `toBase()` and `fromBase()`
1105 + * methods use them via `this.M.toXYZ` and `this.M.fromXYZ`.
1073 1106 * @param {RGBOptions} options
1074 1107 */
1075 1108 constructor(options) {
1076 1109 if (!options.coords) {
@@ -1091,91 +1124,30 @@
1091 1124 }
1092 1125 if (!options.base) {
1093 1126 options.base = xyz_d65_default;
1094 1127 }
1095 - if (options.toXYZ_M && options.fromXYZ_M) {
1096 - options.toBase ??= (rgb) => {
1097 - let xyz = multiply_v3_m3x3(rgb, options.toXYZ_M);
1098 - if (this.white !== this.base.white) {
1099 - xyz = adapt(this.white, this.base.white, xyz);
1100 - }
1101 - return xyz;
1102 - };
1103 - options.fromBase ??= (xyz) => {
1104 - xyz = adapt(this.base.white, this.white, xyz);
1105 - return multiply_v3_m3x3(xyz, options.fromXYZ_M);
1106 - };
1107 - }
1128 + let toXYZ2 = options.toXYZ_M ?? options.M?.toXYZ;
1129 + let fromXYZ2 = options.fromXYZ_M ?? options.M?.fromXYZ;
1108 1130 options.referred ??= "display";
1109 1131 super(options);
1132 + if (toXYZ2 && fromXYZ2) {
1133 + this.M.toXYZ = toXYZ2;
1134 + this.M.fromXYZ = fromXYZ2;
1135 + }
1110 1136 }
1111 - };
1112 -
1113 - // packages/theme/node_modules/colorjs.io/src/getAll.js
1114 - function getAll(color, options) {
1115 - color = getColor(color);
1116 - let space = ColorSpace.get(options, options?.space);
1117 - let precision = options?.precision;
1118 - let coords;
1119 - if (!space || color.space.equals(space)) {
1120 - coords = color.coords.slice();
1121 - } else {
1122 - coords = space.from(color);
1137 + toBase(rgb) {
1138 + let xyz = multiply_v3_m3x3(rgb, this.M.toXYZ);
1139 + if (this.white !== this.base.white) {
1140 + xyz = adapt(this.white, this.base.white, xyz);
1141 + }
1142 + return xyz;
1123 1143 }
1124 - return precision === void 0 ? coords : coords.map((coord) => toPrecision(coord, precision));
1125 - }
1126 -
1127 - // packages/theme/node_modules/colorjs.io/src/get.js
1128 - function get(color, prop) {
1129 - color = getColor(color);
1130 - if (prop === "alpha") {
1131 - return color.alpha ?? 1;
1144 + fromBase(xyz) {
1145 + xyz = adapt(this.base.white, this.white, xyz);
1146 + return multiply_v3_m3x3(xyz, this.M.fromXYZ);
1132 1147 }
1133 - let { space, index } = ColorSpace.resolveCoord(prop, color.space);
1134 - let coords = getAll(color, space);
1135 - return coords[index];
1136 - }
1148 + };
1137 1149
1138 - // packages/theme/node_modules/colorjs.io/src/setAll.js
1139 - function setAll(color, space, coords, alpha) {
1140 - color = getColor(color);
1141 - if (Array.isArray(space)) {
1142 - [space, coords, alpha] = [color.space, space, coords];
1143 - }
1144 - space = ColorSpace.get(space);
1145 - color.coords = space === color.space ? coords.slice() : space.to(color.space, coords);
1146 - if (alpha !== void 0) {
1147 - color.alpha = alpha;
1148 - }
1149 - return color;
1150 - }
1151 - setAll.returns = "color";
1152 -
1153 - // packages/theme/node_modules/colorjs.io/src/set.js
1154 - function set(color, prop, value) {
1155 - color = getColor(color);
1156 - if (arguments.length === 2 && type(arguments[1]) === "object") {
1157 - let object = arguments[1];
1158 - for (let p2 in object) {
1159 - set(color, p2, object[p2]);
1160 - }
1161 - } else {
1162 - if (typeof value === "function") {
1163 - value = value(get(color, prop));
1164 - }
1165 - if (prop === "alpha") {
1166 - color.alpha = value;
1167 - } else {
1168 - let { space, index } = ColorSpace.resolveCoord(prop, color.space);
1169 - let coords = getAll(color, space);
1170 - coords[index] = value;
1171 - setAll(color, space, coords);
1172 - }
1173 - }
1174 - return color;
1175 - }
1176 - set.returns = "color";
1177 -
1178 1150 // packages/theme/node_modules/colorjs.io/src/spaces/xyz-d50.js
1179 1151 var xyz_d50_default = new ColorSpace({
1180 1152 id: "xyz-d50",
1181 1153 name: "XYZ D50",
@@ -1392,28 +1364,32 @@
1392 1364 return Math.sqrt(dE);
1393 1365 }
1394 1366
1395 1367 // packages/theme/node_modules/colorjs.io/src/spaces/oklab.js
1396 - var XYZtoLMS_M = [
1397 - [0.819022437996703, 0.3619062600528904, -0.1288737815209879],
1398 - [0.0329836539323885, 0.9292868615863434, 0.0361446663506424],
1399 - [0.0481771893596242, 0.2642395317527308, 0.6335478284694309]
1400 - ];
1401 - var LMStoXYZ_M = [
1402 - [1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
1403 - [-0.0405757452148008, 1.112286803280317, -0.0717110580655164],
1404 - [-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
1405 - ];
1406 - var LMStoLab_M = [
1407 - [0.210454268309314, 0.7936177747023054, -0.0040720430116193],
1408 - [1.9779985324311684, -2.42859224204858, 0.450593709617411],
1409 - [0.0259040424655478, 0.7827717124575296, -0.8086757549230774]
1410 - ];
1411 - var LabtoLMS_M = [
1412 - [1, 0.3963377773761749, 0.2158037573099136],
1413 - [1, -0.1055613458156586, -0.0638541728258133],
1414 - [1, -0.0894841775298119, -1.2914855480194092]
1415 - ];
1368 + var M = {
1369 + XYZtoLMS: [
1370 + [0.819022437996703, 0.3619062600528904, -0.1288737815209879],
1371 + [0.0329836539323885, 0.9292868615863434, 0.0361446663506424],
1372 + [0.0481771893596242, 0.2642395317527308, 0.6335478284694309]
1373 + ],
1374 + // inverse of XYZtoLMS
1375 + LMStoXYZ: [
1376 + [1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
1377 + [-0.0405757452148008, 1.112286803280317, -0.0717110580655164],
1378 + [-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
1379 + ],
1380 + LMStoLab: [
1381 + [0.210454268309314, 0.7936177747023054, -0.0040720430116193],
1382 + [1.9779985324311684, -2.42859224204858, 0.450593709617411],
1383 + [0.0259040424655478, 0.7827717124575296, -0.8086757549230774]
1384 + ],
1385 + // LMStoLab inverted
1386 + LabtoLMS: [
1387 + [1, 0.3963377773761749, 0.2158037573099136],
1388 + [1, -0.1055613458156586, -0.0638541728258133],
1389 + [1, -0.0894841775298119, -1.2914855480194092]
1390 + ]
1391 + };
1416 1392 var oklab_default = new ColorSpace({
1417 1393 id: "oklab",
1418 1394 name: "Oklab",
1419 1395 coords: {
@@ -1430,21 +1406,22 @@
1430 1406 },
1431 1407 // Note that XYZ is relative to D65
1432 1408 white: "D65",
1433 1409 base: xyz_d65_default,
1410 + M,
1434 1411 fromBase(XYZ) {
1435 - let LMS = multiply_v3_m3x3(XYZ, XYZtoLMS_M);
1412 + let LMS = multiply_v3_m3x3(XYZ, M.XYZtoLMS);
1436 1413 LMS[0] = Math.cbrt(LMS[0]);
1437 1414 LMS[1] = Math.cbrt(LMS[1]);
1438 1415 LMS[2] = Math.cbrt(LMS[2]);
1439 - return multiply_v3_m3x3(LMS, LMStoLab_M, LMS);
1416 + return multiply_v3_m3x3(LMS, M.LMStoLab, LMS);
1440 1417 },
1441 1418 toBase(OKLab) {
1442 - let LMSg = multiply_v3_m3x3(OKLab, LabtoLMS_M);
1419 + let LMSg = multiply_v3_m3x3(OKLab, M.LabtoLMS);
1443 1420 LMSg[0] = LMSg[0] ** 3;
1444 1421 LMSg[1] = LMSg[1] ** 3;
1445 1422 LMSg[2] = LMSg[2] ** 3;
1446 - return multiply_v3_m3x3(LMSg, LMStoXYZ_M, LMSg);
1423 + return multiply_v3_m3x3(LMSg, M.LMStoXYZ, LMSg);
1447 1424 },
1448 1425 formats: {
1449 1426 oklab: {
1450 1427 coords: [
@@ -1481,8 +1458,116 @@
1481 1458 }
1482 1459 return space.inGamut(coords, { epsilon });
1483 1460 }
1484 1461
1462 + // packages/theme/node_modules/colorjs.io/src/to.js
1463 + function to(color, space, { inGamut: inGamut2 } = {}) {
1464 + color = getColor(color);
1465 + space = ColorSpace.get(space);
1466 + let coords = space.from(color);
1467 + let ret = { space, coords, alpha: color.alpha };
1468 + if (inGamut2) {
1469 + ret = toGamut(ret, inGamut2 === true ? void 0 : inGamut2);
1470 + }
1471 + return ret;
1472 + }
1473 + to.returns = "color";
1474 +
1475 + // packages/theme/node_modules/colorjs.io/src/getAll.js
1476 + function getAll(color, options) {
1477 + color = getColor(color);
1478 + let space = ColorSpace.get(options, options?.space);
1479 + let precision = options?.precision;
1480 + let coords;
1481 + if (!space || color.space.equals(space)) {
1482 + coords = color.coords.slice();
1483 + } else {
1484 + coords = space.from(color);
1485 + }
1486 + return precision === void 0 ? coords : coords.map((coord) => toPrecision(coord, precision));
1487 + }
1488 +
1489 + // packages/theme/node_modules/colorjs.io/src/get.js
1490 + function get(color, prop) {
1491 + color = getColor(color);
1492 + if (prop === "alpha") {
1493 + return color.alpha ?? 1;
1494 + }
1495 + let { space, index } = ColorSpace.resolveCoord(prop, color.space);
1496 + let coords = getAll(color, space);
1497 + return coords[index];
1498 + }
1499 +
1500 + // packages/theme/node_modules/colorjs.io/src/spaces/oklch.js
1501 + var oklch_default = new ColorSpace({
1502 + id: "oklch",
1503 + name: "OkLCh",
1504 + coords: {
1505 + l: {
1506 + refRange: [0, 1],
1507 + name: "Lightness"
1508 + },
1509 + c: {
1510 + refRange: [0, 0.4],
1511 + name: "Chroma"
1512 + },
1513 + h: {
1514 + refRange: [0, 360],
1515 + type: "angle",
1516 + name: "Hue"
1517 + }
1518 + },
1519 + white: "D65",
1520 + base: oklab_default,
1521 + fromBase: lch_default.fromBase,
1522 + toBase: lch_default.toBase,
1523 + formats: {
1524 + oklch: {
1525 + coords: ["<percentage> | <number>", "<number> | <percentage>", "<number> | <angle>"]
1526 + }
1527 + }
1528 + });
1529 +
1530 + // packages/theme/node_modules/colorjs.io/src/setAll.js
1531 + function setAll(color, space, coords, alpha) {
1532 + color = getColor(color);
1533 + if (Array.isArray(space)) {
1534 + [space, coords, alpha] = [color.space, space, coords];
1535 + }
1536 + space = ColorSpace.get(space);
1537 + color.coords = space === color.space ? coords.slice() : space.to(color.space, coords);
1538 + if (alpha !== void 0) {
1539 + color.alpha = alpha;
1540 + }
1541 + return color;
1542 + }
1543 + setAll.returns = "color";
1544 +
1545 + // packages/theme/node_modules/colorjs.io/src/set.js
1546 + function set(color, prop, value) {
1547 + color = getColor(color);
1548 + if (arguments.length === 2 && type(arguments[1]) === "object") {
1549 + let object = arguments[1];
1550 + for (let p3 in object) {
1551 + set(color, p3, object[p3]);
1552 + }
1553 + } else {
1554 + if (typeof value === "function") {
1555 + value = value(get(color, prop));
1556 + }
1557 + if (prop === "alpha") {
1558 + color.alpha = value;
1559 + } else {
1560 + let { space, index } = ColorSpace.resolveCoord(prop, color.space);
1561 + let coords = getAll(color, space);
1562 + coords[index] = value;
1563 + setAll(color, space, coords);
1564 + }
1565 + }
1566 + return color;
1567 + }
1568 + set.returns = "color";
1569 +
1485 1570 // packages/theme/node_modules/colorjs.io/src/clone.js
1486 1571 function clone(color) {
1487 1572 return {
1488 1573 space: color.space,
@@ -1602,28 +1687,32 @@
1602 1687 var p = 1.7 * 2523 / 2 ** 5;
1603 1688 var pinv = 2 ** 5 / (1.7 * 2523);
1604 1689 var d = -0.56;
1605 1690 var d0 = 16295499532821565e-27;
1606 - var XYZtoCone_M = [
1607 - [0.41478972, 0.579999, 0.014648],
1608 - [-0.20151, 1.120649, 0.0531008],
1609 - [-0.0166008, 0.2648, 0.6684799]
1610 - ];
1611 - var ConetoXYZ_M = [
1612 - [1.9242264357876067, -1.0047923125953657, 0.037651404030618],
1613 - [0.35031676209499907, 0.7264811939316552, -0.06538442294808501],
1614 - [-0.09098281098284752, -0.3127282905230739, 1.5227665613052603]
1615 - ];
1616 - var ConetoIab_M = [
1617 - [0.5, 0.5, 0],
1618 - [3.524, -4.066708, 0.542708],
1619 - [0.199076, 1.096799, -1.295875]
1620 - ];
1621 - var IabtoCone_M = [
1622 - [1, 0.13860504327153927, 0.05804731615611883],
1623 - [1, -0.1386050432715393, -0.058047316156118904],
1624 - [1, -0.09601924202631895, -0.811891896056039]
1625 - ];
1691 + var M2 = {
1692 + XYZtoCone: [
1693 + [0.41478972, 0.579999, 0.014648],
1694 + [-0.20151, 1.120649, 0.0531008],
1695 + [-0.0166008, 0.2648, 0.6684799]
1696 + ],
1697 + // XYZtoCone inverted
1698 + ConetoXYZ: [
1699 + [1.9242264357876067, -1.0047923125953657, 0.037651404030618],
1700 + [0.35031676209499907, 0.7264811939316552, -0.06538442294808501],
1701 + [-0.09098281098284752, -0.3127282905230739, 1.5227665613052603]
1702 + ],
1703 + ConetoIab: [
1704 + [0.5, 0.5, 0],
1705 + [3.524, -4.066708, 0.542708],
1706 + [0.199076, 1.096799, -1.295875]
1707 + ],
1708 + // ConetoIab inverted
1709 + IabtoCone: [
1710 + [1, 0.13860504327153927, 0.05804731615611883],
1711 + [1, -0.1386050432715393, -0.058047316156118904],
1712 + [1, -0.09601924202631895, -0.811891896056039]
1713 + ]
1714 + };
1626 1715 var jzazbz_default = new ColorSpace({
1627 1716 id: "jzazbz",
1628 1717 name: "Jzazbz",
1629 1718 coords: {
@@ -1638,13 +1727,14 @@
1638 1727 refRange: [-0.21, 0.21]
1639 1728 }
1640 1729 },
1641 1730 base: xyz_abs_d65_default,
1731 + M: M2,
1642 1732 fromBase(XYZ) {
1643 1733 let [Xa, Ya, Za] = XYZ;
1644 1734 let Xm = b * Xa - (b - 1) * Za;
1645 1735 let Ym = g * Ya - (g - 1) * Xa;
1646 - let LMS = multiply_v3_m3x3([Xm, Ym, Za], XYZtoCone_M);
1736 + let LMS = multiply_v3_m3x3([Xm, Ym, Za], M2.XYZtoCone);
1647 1737 let PQLMS = (
1648 1738 /** @type {Vector3} } */
1649 1739 LMS.map(function(val) {
1650 1740 let num = c1 + c2 * spow(val / 1e4, n);
@@ -1651,9 +1741,9 @@
1651 1741 let denom = 1 + c3 * spow(val / 1e4, n);
1652 1742 return spow(num / denom, p);
1653 1743 })
1654 1744 );
1655 - let [Iz, az, bz] = multiply_v3_m3x3(PQLMS, ConetoIab_M);
1745 + let [Iz, az, bz] = multiply_v3_m3x3(PQLMS, M2.ConetoIab);
1656 1746 let Jz = (1 + d) * Iz / (1 + d * Iz) - d0;
1657 1747 return [Jz, az, bz];
1658 1748 },
1659 1749 toBase(Jzazbz) {
@@ -1658,9 +1748,9 @@
1658 1748 },
1659 1749 toBase(Jzazbz) {
1660 1750 let [Jz, az, bz] = Jzazbz;
1661 1751 let Iz = (Jz + d0) / (1 + d - d * (Jz + d0));
1662 - let PQLMS = multiply_v3_m3x3([Iz, az, bz], IabtoCone_M);
1752 + let PQLMS = multiply_v3_m3x3([Iz, az, bz], M2.IabtoCone);
1663 1753 let LMS = (
1664 1754 /** @type {Vector3} } */
1665 1755 PQLMS.map(function(val) {
1666 1756 let num = c1 - spow(val, pinv);
@@ -1668,9 +1758,9 @@
1668 1758 let x = 1e4 * spow(num / denom, ninv);
1669 1759 return x;
1670 1760 })
1671 1761 );
1672 - let [Xm, Ym, Za] = multiply_v3_m3x3(LMS, ConetoXYZ_M);
1762 + let [Xm, Ym, Za] = multiply_v3_m3x3(LMS, M2.ConetoXYZ);
1673 1763 let Xa = (Xm + (b - 1) * Za) / b;
1674 1764 let Ya = (Ym + (g - 1) * Xa) / g;
1675 1765 return [Xa, Ya, Za];
1676 1766 },
@@ -1743,28 +1833,34 @@
1743 1833 var m1 = 2610 / 16384;
1744 1834 var m2 = 2523 / 32;
1745 1835 var im1 = 16384 / 2610;
1746 1836 var im2 = 32 / 2523;
1747 - var XYZtoLMS_M2 = [
1748 - [0.3592832590121217, 0.6976051147779502, -0.035891593232029],
1749 - [-0.1920808463704993, 1.100476797037432, 0.0753748658519118],
1750 - [0.0070797844607479, 0.0748396662186362, 0.8433265453898765]
1751 - ];
1752 - var LMStoIPT_M = [
1753 - [2048 / 4096, 2048 / 4096, 0],
1754 - [6610 / 4096, -13613 / 4096, 7003 / 4096],
1755 - [17933 / 4096, -17390 / 4096, -543 / 4096]
1756 - ];
1757 - var IPTtoLMS_M = [
1758 - [0.9999999999999998, 0.0086090370379328, 0.111029625003026],
1759 - [0.9999999999999998, -0.0086090370379328, -0.1110296250030259],
1760 - [0.9999999999999998, 0.5600313357106791, -0.3206271749873188]
1761 - ];
1762 - var LMStoXYZ_M2 = [
1763 - [2.0701522183894223, -1.3263473389671563, 0.2066510476294053],
1764 - [0.3647385209748072, 0.6805660249472273, -0.0453045459220347],
1765 - [-0.0497472075358123, -0.0492609666966131, 1.1880659249923042]
1766 - ];
1837 + var M3 = {
1838 + // includes the 4% crosstalk components, from the Dolby "What is ICtCp" paper
1839 + XYZtoLMS: [
1840 + [0.3592832590121217, 0.6976051147779502, -0.035891593232029],
1841 + [-0.1920808463704993, 1.100476797037432, 0.0753748658519118],
1842 + [0.0070797844607479, 0.0748396662186362, 0.8433265453898765]
1843 + ],
1844 + // includes the Ebner LMS coefficients, the rotation,
1845 + // and the scaling to the [-0.5,0.5] range
1846 + LMStoIPT: [
1847 + [2048 / 4096, 2048 / 4096, 0],
1848 + [6610 / 4096, -13613 / 4096, 7003 / 4096],
1849 + [17933 / 4096, -17390 / 4096, -543 / 4096]
1850 + ],
1851 + // inverted matrices, calculated from the above
1852 + IPTtoLMS: [
1853 + [0.9999999999999998, 0.0086090370379328, 0.111029625003026],
1854 + [0.9999999999999998, -0.0086090370379328, -0.1110296250030259],
1855 + [0.9999999999999998, 0.5600313357106791, -0.3206271749873188]
1856 + ],
1857 + LMStoXYZ: [
1858 + [2.0701522183894223, -1.3263473389671563, 0.2066510476294053],
1859 + [0.3647385209748072, 0.6805660249472273, -0.0453045459220347],
1860 + [-0.0497472075358123, -0.0492609666966131, 1.1880659249923042]
1861 + ]
1862 + };
1767 1863 var ictcp_default = new ColorSpace({
1768 1864 id: "ictcp",
1769 1865 name: "ICTCP",
1770 1866 // From BT.2100-2 page 7:
@@ -1792,15 +1888,16 @@
1792 1888 name: "CP"
1793 1889 }
1794 1890 },
1795 1891 base: xyz_abs_d65_default,
1892 + M: M3,
1796 1893 fromBase(XYZ) {
1797 - let LMS = multiply_v3_m3x3(XYZ, XYZtoLMS_M2);
1894 + let LMS = multiply_v3_m3x3(XYZ, M3.XYZtoLMS);
1798 1895 return LMStoICtCp(LMS);
1799 1896 },
1800 1897 toBase(ICtCp) {
1801 1898 let LMS = ICtCptoLMS(ICtCp);
1802 - return multiply_v3_m3x3(LMS, LMStoXYZ_M2);
1899 + return multiply_v3_m3x3(LMS, M3.LMStoXYZ);
1803 1900 },
1804 1901 formats: {
1805 1902 ictcp: {
1806 1903 coords: [
@@ -1819,12 +1916,12 @@
1819 1916 let denom = 1 + c32 * (val / 1e4) ** m1;
1820 1917 return (num / denom) ** m2;
1821 1918 })
1822 1919 );
1823 - return multiply_v3_m3x3(PQLMS, LMStoIPT_M);
1920 + return multiply_v3_m3x3(PQLMS, M3.LMStoIPT);
1824 1921 }
1825 1922 function ICtCptoLMS(ICtCp) {
1826 - let PQLMS = multiply_v3_m3x3(ICtCp, IPTtoLMS_M);
1923 + let PQLMS = multiply_v3_m3x3(ICtCp, M3.IPTtoLMS);
1827 1924 let LMS = (
1828 1925 /** @type {Vector3} */
1829 1926 PQLMS.map(function(val) {
1830 1927 let num = Math.max(val ** im2 - c12, 0);
@@ -1859,23 +1956,25 @@
1859 1956 var white2 = WHITES.D65;
1860 1957 var adaptedCoef = 0.42;
1861 1958 var adaptedCoefInv = 1 / adaptedCoef;
1862 1959 var tau = 2 * Math.PI;
1863 - var cat16 = [
1864 - [0.401288, 0.650173, -0.051461],
1865 - [-0.250268, 1.204414, 0.045854],
1866 - [-2079e-6, 0.048952, 0.953127]
1867 - ];
1868 - var cat16Inv = [
1869 - [1.8620678550872327, -1.0112546305316843, 0.14918677544445175],
1870 - [0.38752654323613717, 0.6214474419314753, -0.008973985167612518],
1871 - [-0.015841498849333856, -0.03412293802851557, 1.0499644368778496]
1872 - ];
1873 - var m12 = [
1874 - [460, 451, 288],
1875 - [460, -891, -261],
1876 - [460, -220, -6300]
1877 - ];
1960 + var M4 = {
1961 + cat16: [
1962 + [0.401288, 0.650173, -0.051461],
1963 + [-0.250268, 1.204414, 0.045854],
1964 + [-2079e-6, 0.048952, 0.953127]
1965 + ],
1966 + cat16Inv: [
1967 + [1.8620678550872327, -1.0112546305316843, 0.14918677544445175],
1968 + [0.38752654323613717, 0.6214474419314753, -0.008973985167612518],
1969 + [-0.015841498849333856, -0.03412293802851557, 1.0499644368778496]
1970 + ],
1971 + m1: [
1972 + [460, 451, 288],
1973 + [460, -891, -261],
1974 + [460, -220, -6300]
1975 + ]
1976 + };
1878 1977 var surroundMap = {
1879 1978 dark: [0.8, 0.525, 0.8],
1880 1979 dim: [0.9, 0.59, 0.9],
1881 1980 average: [1, 0.69, 1]
@@ -1941,9 +2040,9 @@
1941 2040 );
1942 2041 env.la = adaptingLuminance;
1943 2042 env.yb = backgroundLuminance;
1944 2043 const yw = xyzW[1];
1945 - const rgbW = multiply_v3_m3x3(xyzW, cat16);
2044 + const rgbW = multiply_v3_m3x3(xyzW, M4.cat16);
1946 2045 let values = surroundMap[env.surround];
1947 2046 const f = values[0];
1948 2047 env.c = values[1];
1949 2048 env.nc = values[2];
@@ -2013,15 +2112,15 @@
2013 2112 const t = spow(alpha * Math.pow(1.64 - Math.pow(0.29, env.n), -0.73), 10 / 9);
2014 2113 const et = 0.25 * (Math.cos(hRad + 2) + 3.8);
2015 2114 const A = env.aW * spow(Jroot, 2 / env.c / env.z);
2016 2115 const p1 = 5e4 / 13 * env.nc * env.ncb * et;
2017 - const p2 = A / env.nbb;
2018 - const r = 23 * (p2 + 0.305) * zdiv(t, 23 * p1 + t * (11 * cosh + 108 * sinh));
2116 + const p22 = A / env.nbb;
2117 + const r = 23 * (p22 + 0.305) * zdiv(t, 23 * p1 + t * (11 * cosh + 108 * sinh));
2019 2118 const a = r * cosh;
2020 2119 const b2 = r * sinh;
2021 2120 const rgb_c = unadapt(
2022 2121 /** @type {Vector3} */
2023 - multiply_v3_m3x3([p2, a, b2], m12).map((c) => {
2122 + multiply_v3_m3x3([p22, a, b2], M4.m1).map((c) => {
2024 2123 return c * 1 / 1403;
2025 2124 }),
2026 2125 env.fl
2027 2126 );
@@ -2031,9 +2130,9 @@
2031 2130 /** @type {Vector3} */
2032 2131 rgb_c.map((c, i) => {
2033 2132 return c * env.dRgbInv[i];
2034 2133 }),
2035 - cat16Inv
2134 + M4.cat16Inv
2036 2135 ).map((c) => {
2037 2136 return c / 100;
2038 2137 })
2039 2138 );
@@ -2046,9 +2145,9 @@
2046 2145 })
2047 2146 );
2048 2147 const rgbA = adapt2(
2049 2148 /** @type {[number, number, number]} */
2050 - multiply_v3_m3x3(xyz100, cat16).map((c, i) => {
2149 + multiply_v3_m3x3(xyz100, M4.cat16).map((c, i) => {
2051 2150 return c * env.dRgb[i];
2052 2151 }),
2053 2152 env.fl
2054 2153 );
@@ -2062,13 +2161,13 @@
2062 2161 const Jroot = spow(A / env.aW, 0.5 * env.c * env.z);
2063 2162 const J = 100 * spow(Jroot, 2);
2064 2163 const Q = 4 / env.c * Jroot * (env.aW + 4) * env.flRoot;
2065 2164 const C = alpha * Jroot;
2066 - const M = C * env.flRoot;
2165 + const colorfulness = C * env.flRoot;
2067 2166 const h = constrain(hRad * rad2deg);
2068 2167 const H = hueQuadrature(h);
2069 2168 const s = 50 * spow(env.c * alpha / (env.aW + 4), 1 / 2);
2070 - return { J, C, h, s, Q, M, H };
2169 + return { J, C, h, s, Q, M: colorfulness, H };
2071 2170 }
2072 2171 var cam16_default = new ColorSpace({
2073 2172 id: "cam16-jmh",
2074 2173 cssId: "--cam16-jmh",
@@ -2088,8 +2187,9 @@
2088 2187 name: "Hue"
2089 2188 }
2090 2189 },
2091 2190 base: xyz_d65_default,
2191 + M: M4,
2092 2192 fromBase(xyz) {
2093 2193 if (this.\u03B5 === void 0) {
2094 2194 this.\u03B5 = Object.values(this.coords)[1].refRange[1] / 1e5;
2095 2195 }
@@ -2129,9 +2229,9 @@
2129 2229 const threshold = 2e-12;
2130 2230 const max_attempts = 15;
2131 2231 let attempt = 0;
2132 2232 let last = Infinity;
2133 - let best = j;
2233 + let best = [0, 0, 0];
2134 2234 while (attempt <= max_attempts) {
2135 2235 xyz = fromCam16({ J: j, C: c, h }, env);
2136 2236 const delta = Math.abs(xyz[1] - y);
2137 2237 if (delta < last) {
@@ -2137,15 +2237,15 @@
2137 2237 if (delta < last) {
2138 2238 if (delta <= threshold) {
2139 2239 return xyz;
2140 2240 }
2141 - best = j;
2241 + best = xyz;
2142 2242 last = delta;
2143 2243 }
2144 2244 j = j - (xyz[1] - y) * j / (2 * xyz[1]);
2145 2245 attempt += 1;
2146 2246 }
2147 - return fromCam16({ J: j, C: c, h }, env);
2247 + return best;
2148 2248 }
2149 2249 function toHct(xyz, env) {
2150 2250 const t = toLstar(xyz[1]);
2151 2251 if (t === 0) {
@@ -2209,12 +2309,12 @@
2209 2309 function convertUcsAb(coords) {
2210 2310 if (coords[1] < 0) {
2211 2311 coords = hct_default.fromBase(hct_default.toBase(coords));
2212 2312 }
2213 - const M = Math.log(Math.max(1 + ucsCoeff[2] * coords[1] * viewingConditions2.flRoot, 1)) / ucsCoeff[2];
2313 + const M7 = Math.log(Math.max(1 + ucsCoeff[2] * coords[1] * viewingConditions2.flRoot, 1)) / ucsCoeff[2];
2214 2314 const hrad = coords[0] * deg2rad2;
2215 - const a = M * Math.cos(hrad);
2216 - const b2 = M * Math.sin(hrad);
2315 + const a = M7 * Math.cos(hrad);
2316 + const b2 = M7 * Math.sin(hrad);
2217 2317 return [coords[2], a, b2];
2218 2318 }
2219 2319 function deltaEHCT_default(color, sample) {
2220 2320 [color, sample] = getColor([color, sample]);
@@ -2222,8 +2322,310 @@
2222 2322 let [t2, a2, b2] = convertUcsAb(hct_default.from(sample));
2223 2323 return Math.sqrt((t1 - t2) ** 2 + (a1 - a2) ** 2 + (b1 - b2) ** 2);
2224 2324 }
2225 2325
2326 + // packages/theme/node_modules/colorjs.io/src/spaces/helmlab.js
2327 + var { cos, sin, sqrt, atan2, exp, abs, pow, PI } = Math;
2328 + var CAT_TO_HELM = [
2329 + [1.000042977349746, 20718877053183e-18, -4361018085669474e-20],
2330 + [26946201090235744e-21, 0.9999906145080147, -14898828405401079e-21],
2331 + [-7941753620756204e-21, 12875204405137254e-21, 0.9997859822609763]
2332 + ];
2333 + var CAT_FROM_HELM = [
2334 + [0.9999570254019492, -2071874272730964e-20, 4361733292468361e-20],
2335 + [-2694517763358666e-20, 1.000009385946497, 1490098223546482e-20],
2336 + [7943459292954202e-21, -1287824596735154e-20, 1.000214063706999]
2337 + ];
2338 + var M1 = [
2339 + [0.7212986433113499, 0.45344826541531813, -0.19288975751942616],
2340 + [-0.788211869495579, 1.795241376757236, 0.0876172451181785],
2341 + [-0.0917700599912156, 0.45765588659459255, 1.2922045513917677]
2342 + ];
2343 + var M1_INV = [
2344 + [1.065107295808859, -0.3150044075301121, 0.1803492381741039],
2345 + [0.4721107713837796, 0.4271995765962455, 0.04150680489380985],
2346 + [-0.09156391926309541, -0.1736709363194979, 0.7719790382558294]
2347 + ];
2348 + var GAMMA = [0.47229813098762524, 0.5149184096354483, 0.5113233386366979];
2349 + var INV_GAMMA = [2.1173067060606283, 1.9420552485353544, 1.9557096741686448];
2350 + var M22 = [
2351 + [-0.26355622180094096, 0.4168322883703174, 0.4926763141656403],
2352 + [1.8897570508777322, -3.1212232034205774, 1.0421666921060384],
2353 + [0.3585108617962056, 1.7694028193790368, -1.4120626067695372]
2354 + ];
2355 + var M2_INV = [
2356 + [0.9183897822815021, 0.5232051237088666, 0.7065804598090856],
2357 + [1.0899090574433026, 0.07005324849041904, 0.4319776874787044],
2358 + [1.598895729264209, 0.22061850068770233, 0.012506037355220951]
2359 + ];
2360 + var M5 = { CAT_TO_HELM, CAT_FROM_HELM, M1, M1_INV, M2: M22, M2_INV };
2361 + var hue_cos1 = -0.02833024015436984;
2362 + var hue_sin1 = -0.21131429516166544;
2363 + var hue_cos2 = 0.2189784817615645;
2364 + var hue_sin2 = -0.06871898981942523;
2365 + var hue_cos3 = 0.005506053349515315;
2366 + var hue_sin3 = -0.0641329861299175;
2367 + var hue_cos4 = -0.053592461436994296;
2368 + var hue_sin4 = -0.00954137464208059;
2369 + var hk_weight = 0.2676231133101982;
2370 + var hk_power = 0.8934892185255707;
2371 + var hk_hue_mod = 0.7173169828841472;
2372 + var hk_sin1 = 0.6915224124600773;
2373 + var hk_cos2 = 0.48647127559605596;
2374 + var hk_sin2 = 0.9853124591201782;
2375 + var L_corr_p1 = 0.5385456675962418;
2376 + var L_corr_p2 = 0.12508858146241716;
2377 + var L_corr_p3 = 0.6768950256217603;
2378 + var Lh_cos1 = -0.4963251525324449;
2379 + var Lh_sin1 = -0.09564696283240552;
2380 + var lp_dark = -0.029053748937210654;
2381 + var lp_dark_hcos = 1.3346761652952872;
2382 + var lp_dark_hsin = -0.1698908144723919;
2383 + var cs_cos1 = -0.195370576218515;
2384 + var cs_sin1 = 0.5330819227283227;
2385 + var cs_cos2 = 0.08863325582067766;
2386 + var cs_sin2 = 0.9365540137751136;
2387 + var cs_cos3 = 0.13789738139719568;
2388 + var cs_sin3 = 0.061650260197979936;
2389 + var cs_cos4 = 0.0641970862504494;
2390 + var cs_sin4 = -0.027401052793571013;
2391 + var cp_cos1 = -0.09900209889026965;
2392 + var cp_sin1 = 0.059635520647228726;
2393 + var cp_cos2 = -0.013586499967803128;
2394 + var cp_sin2 = 0.2253393118474472;
2395 + var lc1 = -1.5239477450767043;
2396 + var lc2 = -1.751157310240011;
2397 + var hlc_cos1 = -0.43576378069144767;
2398 + var hlc_sin1 = 1.060094063845983;
2399 + var hlc_cos2 = 0.47931193034584496;
2400 + var hlc_sin2 = -0.2622579649434462;
2401 + var hl_cos1 = 0.13610794232685908;
2402 + var hl_sin1 = 0.1168702235362288;
2403 + var hl_cos2 = -0.01617739641422492;
2404 + var hl_sin2 = 0.038145638815030566;
2405 + var PHI = -28.2 * PI / 180;
2406 + var ROT_COS = cos(PHI);
2407 + var ROT_SIN = sin(PHI);
2408 + function hueDelta(h) {
2409 + return hue_cos1 * cos(h) + hue_sin1 * sin(h) + hue_cos2 * cos(2 * h) + hue_sin2 * sin(2 * h) + hue_cos3 * cos(3 * h) + hue_sin3 * sin(3 * h) + hue_cos4 * cos(4 * h) + hue_sin4 * sin(4 * h);
2410 + }
2411 + function hueDeltaDeriv(h) {
2412 + return -hue_cos1 * sin(h) + hue_sin1 * cos(h) + -2 * hue_cos2 * sin(2 * h) + 2 * hue_sin2 * cos(2 * h) + -3 * hue_cos3 * sin(3 * h) + 3 * hue_sin3 * cos(3 * h) + -4 * hue_cos4 * sin(4 * h) + 4 * hue_sin4 * cos(4 * h);
2413 + }
2414 + function chromaScaleH(h) {
2415 + let logS = cs_cos1 * cos(h) + cs_sin1 * sin(h) + cs_cos2 * cos(2 * h) + cs_sin2 * sin(2 * h) + cs_cos3 * cos(3 * h) + cs_sin3 * sin(3 * h) + cs_cos4 * cos(4 * h) + cs_sin4 * sin(4 * h);
2416 + return exp(logS);
2417 + }
2418 + function lChromaScale(L) {
2419 + let dL = L - 0.5;
2420 + return exp(clamp(-30, lc1 * dL + lc2 * dL * dL, 30));
2421 + }
2422 + function hlcScale(h, L) {
2423 + let hueFactor = hlc_cos1 * cos(h) + hlc_sin1 * sin(h) + hlc_cos2 * cos(2 * h) + hlc_sin2 * sin(2 * h);
2424 + return exp(clamp(-30, (L - 0.5) * hueFactor, 30));
2425 + }
2426 + function hueLightnessScale(h) {
2427 + let logS = hl_cos1 * cos(h) + hl_sin1 * sin(h) + hl_cos2 * cos(2 * h) + hl_sin2 * sin(2 * h);
2428 + return exp(logS);
2429 + }
2430 + function chromaPowerH(h) {
2431 + return 1 + cp_cos1 * cos(h) + cp_sin1 * sin(h) + cp_cos2 * cos(2 * h) + cp_sin2 * sin(2 * h);
2432 + }
2433 + function lCorrectFwd(L, h) {
2434 + let t = L * (1 - L);
2435 + let result = L + L_corr_p1 * t + L_corr_p2 * t * (0.5 - L) + L_corr_p3 * t * t;
2436 + result += t * (Lh_cos1 * cos(h) + Lh_sin1 * sin(h));
2437 + return result;
2438 + }
2439 + function lCorrectInv(L1, h) {
2440 + let Lh = Lh_cos1 * cos(h) + Lh_sin1 * sin(h);
2441 + let L = L1;
2442 + for (let i = 0; i < 15; i++) {
2443 + let t = L * (1 - L);
2444 + let dt = 1 - 2 * L;
2445 + let f = L + (L_corr_p1 + Lh) * t + L_corr_p2 * t * (0.5 - L) + L_corr_p3 * t * t - L1;
2446 + let dfdL = 1 + (L_corr_p1 + Lh) * dt + L_corr_p2 * (dt * (0.5 - L) - t) + L_corr_p3 * 2 * t * dt;
2447 + if (abs(dfdL) < 1e-10) {
2448 + dfdL = 1;
2449 + }
2450 + L -= f / dfdL;
2451 + }
2452 + return L;
2453 + }
2454 + function darkLFwd(L, h) {
2455 + let coeff = lp_dark + lp_dark_hcos * cos(h) + lp_dark_hsin * sin(h);
2456 + let oml = L < 1 ? 1 - L : 0;
2457 + let g2 = coeff * L * oml * oml;
2458 + return L * exp(clamp(-30, g2, 30));
2459 + }
2460 + function darkLInv(Ln, h) {
2461 + let coeff = lp_dark + lp_dark_hcos * cos(h) + lp_dark_hsin * sin(h);
2462 + let L = Ln;
2463 + for (let i = 0; i < 12; i++) {
2464 + let oml = L < 1 ? 1 - L : 0;
2465 + let g2 = coeff * L * oml * oml;
2466 + let eg = exp(clamp(-30, g2, 30));
2467 + let f = L * eg - Ln;
2468 + let gp = coeff * oml * (1 - 3 * L);
2469 + let fp = eg * (1 + L * gp);
2470 + if (abs(fp) < 1e-10) {
2471 + fp = 1;
2472 + }
2473 + L -= f / fp;
2474 + }
2475 + return L;
2476 + }
2477 + var fromXYZ = function(xyz) {
2478 + let adapted = multiply_v3_m3x3(xyz, M5.CAT_TO_HELM);
2479 + let [lms0, lms1, lms2] = multiply_v3_m3x3(adapted, M5.M1);
2480 + let c0 = spow(lms0, GAMMA[0]);
2481 + let c13 = spow(lms1, GAMMA[1]);
2482 + let c23 = spow(lms2, GAMMA[2]);
2483 + let [L, a, b2] = multiply_v3_m3x3([c0, c13, c23], M5.M2);
2484 + let h = atan2(b2, a);
2485 + let C = sqrt(a * a + b2 * b2);
2486 + let delta = hueDelta(h);
2487 + let hNew = h + delta;
2488 + a = C * cos(hNew);
2489 + b2 = C * sin(hNew);
2490 + let Cr = sqrt(a * a + b2 * b2);
2491 + let hkBoost = hk_weight * pow(Cr, clamp(0.01, hk_power, 10));
2492 + let hr = atan2(b2, a);
2493 + let factor = 1 + hk_hue_mod * cos(hr) + hk_sin1 * sin(hr) + hk_cos2 * cos(2 * hr) + hk_sin2 * sin(2 * hr);
2494 + L += hkBoost * factor;
2495 + h = atan2(b2, a);
2496 + L = lCorrectFwd(L, h);
2497 + h = atan2(b2, a);
2498 + L = darkLFwd(L, h);
2499 + h = atan2(b2, a);
2500 + let cs = chromaScaleH(h);
2501 + a *= cs;
2502 + b2 *= cs;
2503 + h = atan2(b2, a);
2504 + C = sqrt(a * a + b2 * b2);
2505 + let p3 = chromaPowerH(h);
2506 + let Cn = C > 0 ? pow(C, p3) : 0;
2507 + a = Cn * cos(h);
2508 + b2 = Cn * sin(h);
2509 + let T = lChromaScale(L);
2510 + a *= T;
2511 + b2 *= T;
2512 + h = atan2(b2, a);
2513 + let hlcS = hlcScale(h, L);
2514 + a *= hlcS;
2515 + b2 *= hlcS;
2516 + h = atan2(b2, a);
2517 + L *= hueLightnessScale(h);
2518 + let aRot = a * ROT_COS - b2 * ROT_SIN;
2519 + let bRot = a * ROT_SIN + b2 * ROT_COS;
2520 + return [L, aRot, bRot];
2521 + };
2522 + var toXYZ = function(lab) {
2523 + let [L, a, b2] = lab;
2524 + let aUn = a * ROT_COS + b2 * ROT_SIN;
2525 + let bUn = -a * ROT_SIN + b2 * ROT_COS;
2526 + a = aUn;
2527 + b2 = bUn;
2528 + let h = atan2(b2, a);
2529 + L /= hueLightnessScale(h);
2530 + h = atan2(b2, a);
2531 + let hlcS = hlcScale(h, L);
2532 + a /= hlcS;
2533 + b2 /= hlcS;
2534 + let T = lChromaScale(L);
2535 + a /= T;
2536 + b2 /= T;
2537 + h = atan2(b2, a);
2538 + let C = sqrt(a * a + b2 * b2);
2539 + let p3 = chromaPowerH(h);
2540 + let Co = C > 0 ? pow(C, 1 / p3) : 0;
2541 + a = Co * cos(h);
2542 + b2 = Co * sin(h);
2543 + h = atan2(b2, a);
2544 + let cs = chromaScaleH(h);
2545 + a /= cs;
2546 + b2 /= cs;
2547 + h = atan2(b2, a);
2548 + L = darkLInv(L, h);
2549 + h = atan2(b2, a);
2550 + L = lCorrectInv(L, h);
2551 + let Cr = sqrt(a * a + b2 * b2);
2552 + let hkBoost = hk_weight * pow(Cr, clamp(0.01, hk_power, 10));
2553 + let hr = atan2(b2, a);
2554 + let factor = 1 + hk_hue_mod * cos(hr) + hk_sin1 * sin(hr) + hk_cos2 * cos(2 * hr) + hk_sin2 * sin(2 * hr);
2555 + L -= hkBoost * factor;
2556 + let hOut = atan2(b2, a);
2557 + C = sqrt(a * a + b2 * b2);
2558 + let hRaw = hOut;
2559 + for (let i = 0; i < 8; i++) {
2560 + let f = hRaw + hueDelta(hRaw) - hOut;
2561 + let fp = 1 + hueDeltaDeriv(hRaw);
2562 + if (abs(fp) < 1e-10) {
2563 + fp = 1;
2564 + }
2565 + hRaw -= f / fp;
2566 + }
2567 + a = C * cos(hRaw);
2568 + b2 = C * sin(hRaw);
2569 + let [lc0, lc12, lc22] = multiply_v3_m3x3([L, a, b2], M5.M2_INV);
2570 + let l0 = spow(lc0, INV_GAMMA[0]);
2571 + let l1 = spow(lc12, INV_GAMMA[1]);
2572 + let l2 = spow(lc22, INV_GAMMA[2]);
2573 + let xyz = multiply_v3_m3x3([l0, l1, l2], M5.M1_INV);
2574 + return multiply_v3_m3x3(xyz, M5.CAT_FROM_HELM);
2575 + };
2576 + var helmlab_default = new ColorSpace({
2577 + id: "helmlab-metric",
2578 + name: "Helmlab MetricSpace",
2579 + cssId: "--helmlab-metric",
2580 + coords: {
2581 + l: {
2582 + refRange: [0, 1.6],
2583 + name: "Lightness"
2584 + },
2585 + a: {
2586 + refRange: [-1.5, 1.5]
2587 + },
2588 + b: {
2589 + refRange: [-1.5, 1.5]
2590 + }
2591 + },
2592 + white: "D65",
2593 + base: xyz_d65_default,
2594 + M: M5,
2595 + fromBase(xyz) {
2596 + return fromXYZ(xyz);
2597 + },
2598 + toBase(lab) {
2599 + return toXYZ(lab);
2600 + }
2601 + });
2602 +
2603 + // packages/theme/node_modules/colorjs.io/src/deltaE/deltaEHelmlab.js
2604 + var sl = -0.9155125151657894;
2605 + var sc = 2.9268353744941558;
2606 + var wC = 3.966003089807536;
2607 + var p2 = 1.9737081170404969;
2608 + var compress = 52.473130649294724;
2609 + var q = 0.47897301074925214;
2610 + function deltaEHelmlab_default(color, sample) {
2611 + [color, sample] = getColor([color, sample]);
2612 + let [L1, a1, b1] = helmlab_default.from(color);
2613 + let [L2, a2, b2] = helmlab_default.from(sample);
2614 + let \u0394L = L1 - L2;
2615 + let \u0394a = a1 - a2;
2616 + let \u0394b = b1 - b2;
2617 + let Lavg = (L1 + L2) * 0.5;
2618 + let SL = 1 + sl * (Lavg - 0.5) ** 2;
2619 + let C1 = Math.sqrt(a1 ** 2 + b1 ** 2);
2620 + let C2 = Math.sqrt(a2 ** 2 + b2 ** 2);
2621 + let Cavg = (C1 + C2) * 0.5;
2622 + let SC = 1 + sc * Cavg;
2623 + let raw = (\u0394L ** 2 / SL ** 2 + wC * (\u0394a ** 2 + \u0394b ** 2) / SC ** 2) ** (p2 / 2);
2624 + let compressed = raw / (1 + compress * raw);
2625 + return compressed ** q;
2626 + }
2627 +
2226 2628 // packages/theme/node_modules/colorjs.io/src/deltaE/index.js
2227 2629 var deltaE_default = {
2228 2630 deltaE76,
2229 2631 deltaECMC: deltaECMC_default,
@@ -2231,9 +2633,10 @@
2231 2633 deltaEJz: deltaEJz_default,
2232 2634 deltaEITP: deltaEITP_default,
2233 2635 deltaEOK: deltaEOK_default,
2234 2636 deltaEOK2: deltaEOK2_default,
2235 - deltaEHCT: deltaEHCT_default
2637 + deltaEHCT: deltaEHCT_default,
2638 + deltaEHelmlab: deltaEHelmlab_default
2236 2639 };
2237 2640
2238 2641 // packages/theme/node_modules/colorjs.io/src/toGamut.js
2239 2642 function calcEpsilon(jnd) {
@@ -2276,10 +2679,12 @@
2276 2679 }
2277 2680 let spaceColor;
2278 2681 if (method === "css") {
2279 2682 spaceColor = toGamutCSS(color, { space });
2683 + } else if (method === "raytrace") {
2684 + spaceColor = toGamutRayTrace(color, { space });
2280 2685 } else {
2281 - if (method !== "clip" && !inGamut(color, space)) {
2686 + if (method !== "clip") {
2282 2687 if (Object.prototype.hasOwnProperty.call(GMAPPRESET, method)) {
2283 2688 ({ method, jnd, deltaEMethod, blackWhiteClamp } = GMAPPRESET[method]);
2284 2689 }
2285 2690 let de = deltaE2000_default;
@@ -2378,13 +2783,12 @@
2378 2783 if (!space) {
2379 2784 space = origin.space;
2380 2785 }
2381 2786 space = ColorSpace.get(space);
2382 - const oklchSpace = ColorSpace.get("oklch");
2383 2787 if (space.isUnbounded) {
2384 2788 return to(origin, space);
2385 2789 }
2386 - const origin_OKLCH = to(origin, oklchSpace);
2790 + const origin_OKLCH = to(origin, oklch_default);
2387 2791 let L = origin_OKLCH.coords[0];
2388 2792 if (L >= 1) {
2389 2793 const white4 = to(COLORS.WHITE, space);
2390 2794 white4.alpha = origin.alpha;
@@ -2444,21 +2848,131 @@
2444 2848 }
2445 2849 }
2446 2850 return clipped;
2447 2851 }
2448 -
2449 - // packages/theme/node_modules/colorjs.io/src/to.js
2450 - function to(color, space, { inGamut: inGamut2 } = {}) {
2451 - color = getColor(color);
2852 + function raytrace_box(start, end, bmin = [0, 0, 0], bmax = [1, 1, 1]) {
2853 + let tfar = Infinity;
2854 + let tnear = -Infinity;
2855 + let direction = [];
2856 + for (let i = 0; i < 3; i++) {
2857 + const a = start[i];
2858 + const b2 = end[i];
2859 + const d2 = b2 - a;
2860 + const bn = bmin[i];
2861 + const bx = bmax[i];
2862 + direction.push(d2);
2863 + if (Math.abs(d2) > 1e-12) {
2864 + const inv_d = 1 / d2;
2865 + const t1 = (bn - a) * inv_d;
2866 + const t2 = (bx - a) * inv_d;
2867 + tnear = Math.max(Math.min(t1, t2), tnear);
2868 + tfar = Math.min(Math.max(t1, t2), tfar);
2869 + } else if (a < bn || a > bx) {
2870 + return [];
2871 + }
2872 + }
2873 + if (tnear > tfar || tfar < 0) {
2874 + return [];
2875 + }
2876 + if (tnear < 0) {
2877 + tnear = tfar;
2878 + }
2879 + if (!isFinite(tnear)) {
2880 + return [];
2881 + }
2882 + return [
2883 + start[0] + direction[0] * tnear,
2884 + start[1] + direction[1] * tnear,
2885 + start[2] + direction[2] * tnear
2886 + ];
2887 + }
2888 + function toGamutRayTrace(origin, { space } = {}) {
2889 + origin = getColor(origin);
2890 + if (!space) {
2891 + space = origin.space;
2892 + }
2452 2893 space = ColorSpace.get(space);
2453 - let coords = space.from(color);
2454 - let ret = { space, coords, alpha: color.alpha };
2455 - if (inGamut2) {
2456 - ret = toGamut(ret, inGamut2 === true ? void 0 : inGamut2);
2894 + if (space.isUnbounded) {
2895 + return to(origin, space);
2457 2896 }
2458 - return ret;
2897 + let oklchOrigin = to(origin, oklch_default);
2898 + let [lightness, chroma, hue] = oklchOrigin.coords;
2899 + if (lightness >= 1) {
2900 + const white4 = to(COLORS.WHITE, space);
2901 + white4.alpha = origin.alpha;
2902 + return to(white4, space);
2903 + } else if (lightness <= 0) {
2904 + const black = to(COLORS.BLACK, space);
2905 + black.alpha = origin.alpha;
2906 + return to(black, space);
2907 + }
2908 + const originSpace = space;
2909 + const rGamut = space.rgbGamut;
2910 + if (rGamut !== void 0) {
2911 + space = rGamut;
2912 + }
2913 + if (!isInstance(space, RGBColorSpace)) {
2914 + throw Error("An RGB gamut is required");
2915 + }
2916 + let [mn, mx] = Object.values(space.coords)[0].range;
2917 + let max = (
2918 + /** @type {[number, number, number]} */
2919 + [mx, mx, mx]
2920 + );
2921 + const lGamut = space.linearGamut;
2922 + if (lGamut !== void 0) {
2923 + let temp = to({ space, coords: max, alpha: origin.alpha }, lGamut);
2924 + mx = temp.coords[0];
2925 + max = /** @type {[number, number, number]} */
2926 + [mx, mx, mx];
2927 + space = lGamut;
2928 + mn = Object.values(space.coords)[0].range[0];
2929 + }
2930 + let min = (
2931 + /** @type {[number, number, number]} */
2932 + [mn, mn, mn]
2933 + );
2934 + let rgbOrigin = to(oklchOrigin, space);
2935 + if (!rgbOrigin.coords.every((x) => mn <= x && x <= mx)) {
2936 + let anchor = to({ space: oklch_default, coords: [lightness, 0, hue] }, space).coords;
2937 + const low = mn + 1e-12;
2938 + const high = mx - 1e-12;
2939 + let last = rgbOrigin.coords;
2940 + for (let i = 0; i < 4; i++) {
2941 + if (i) {
2942 + const oklchColor = to(rgbOrigin, oklch_default);
2943 + oklchColor.coords[0] = lightness;
2944 + oklchColor.coords[2] = hue;
2945 + rgbOrigin = to(oklchColor, space);
2946 + }
2947 + const intersection = raytrace_box(anchor, rgbOrigin.coords, min, max);
2948 + if (intersection.length === 0) {
2949 + rgbOrigin.coords = [...last];
2950 + break;
2951 + }
2952 + if (i && rgbOrigin.coords.every((x) => low < x && x < high)) {
2953 + anchor = [...rgbOrigin.coords];
2954 + }
2955 + last = /** @type {[number, number, number]} */
2956 + intersection;
2957 + rgbOrigin.coords = [...intersection];
2958 + }
2959 + }
2960 + rgbOrigin = to(rgbOrigin, originSpace);
2961 + const spaceCoords = Object.values(
2962 + /** @type {ColorSpace} */
2963 + originSpace.coords
2964 + );
2965 + rgbOrigin.coords = /** @type {[number, number, number]} */
2966 + rgbOrigin.coords.map((coord, index) => {
2967 + if ("range" in spaceCoords[index]) {
2968 + const [lower, upper] = spaceCoords[index].range;
2969 + return clamp(lower, coord, upper);
2970 + }
2971 + return coord;
2972 + });
2973 + return rgbOrigin;
2459 2974 }
2460 - to.returns = "color";
2461 2975
2462 2976 // packages/theme/node_modules/colorjs.io/src/serialize.js
2463 2977 function serialize(color, options = {}) {
2464 2978 let {
@@ -2539,24 +3053,30 @@
2539 3053 return ret;
2540 3054 }
2541 3055
2542 3056 // packages/theme/node_modules/colorjs.io/src/spaces/srgb-linear.js
2543 - var toXYZ_M = [
2544 - [0.41239079926595934, 0.357584339383878, 0.1804807884018343],
2545 - [0.21263900587151027, 0.715168678767756, 0.07219231536073371],
2546 - [0.01933081871559182, 0.11919477979462598, 0.9505321522496607]
2547 - ];
2548 - var fromXYZ_M = [
2549 - [3.2409699419045226, -1.537383177570094, -0.4986107602930034],
2550 - [-0.9692436362808796, 1.8759675015077202, 0.04155505740717559],
2551 - [0.05563007969699366, -0.20397695888897652, 1.0569715142428786]
2552 - ];
3057 + var M6 = {
3058 + // calculated directly from the RGB and white chromaticities; when rounded to
3059 + // 8 decimal places, agrees completely with the official matrix
3060 + // see https://github.com/w3c/csswg-drafts/issues/5922
3061 + toXYZ: [
3062 + [0.41239079926595934, 0.357584339383878, 0.1804807884018343],
3063 + [0.21263900587151027, 0.715168678767756, 0.07219231536073371],
3064 + [0.01933081871559182, 0.11919477979462598, 0.9505321522496607]
3065 + ],
3066 + // the inverse of the above; again agrees with the official definition
3067 + // when rounded to 8 decimal places
3068 + fromXYZ: [
3069 + [3.2409699419045226, -1.537383177570094, -0.4986107602930034],
3070 + [-0.9692436362808796, 1.8759675015077202, 0.04155505740717559],
3071 + [0.05563007969699366, -0.20397695888897652, 1.0569715142428786]
3072 + ]
3073 + };
2553 3074 var srgb_linear_default = new RGBColorSpace({
2554 3075 id: "srgb-linear",
2555 3076 name: "Linear sRGB",
2556 3077 white: "D65",
2557 - toXYZ_M,
2558 - fromXYZ_M
3078 + M: M6
2559 3079 });
2560 3080
2561 3081 // packages/theme/node_modules/colorjs.io/src/keywords.js
2562 3082 var keywords_default = {
@@ -2716,14 +3236,15 @@
2716 3236 var srgb_default = new RGBColorSpace({
2717 3237 id: "srgb",
2718 3238 name: "sRGB",
2719 3239 base: srgb_linear_default,
3240 + linearGamut: srgb_linear_default,
2720 3241 fromBase: (rgb) => {
2721 3242 return rgb.map((val) => {
2722 3243 let sign = val < 0 ? -1 : 1;
2723 - let abs = val * sign;
2724 - if (abs > 31308e-7) {
2725 - return sign * (1.055 * abs ** (1 / 2.4) - 0.055);
3244 + let abs2 = val * sign;
3245 + if (abs2 > 31308e-7) {
3246 + return sign * (1.055 * abs2 ** (1 / 2.4) - 0.055);
2726 3247 }
2727 3248 return 12.92 * val;
2728 3249 });
2729 3250 },
@@ -2729,13 +3250,13 @@
2729 3250 },
2730 3251 toBase: (rgb) => {
2731 3252 return rgb.map((val) => {
2732 3253 let sign = val < 0 ? -1 : 1;
2733 - let abs = val * sign;
2734 - if (abs <= 0.04045) {
3254 + let abs2 = val * sign;
3255 + if (abs2 <= 0.04045) {
2735 3256 return val / 12.92;
2736 3257 }
2737 - return sign * ((abs + 0.055) / 1.055) ** 2.4;
3258 + return sign * ((abs2 + 0.055) / 1.055) ** 2.4;
2738 3259 });
2739 3260 },
2740 3261 formats: {
2741 3262 rgb: {
@@ -2823,25 +3344,20 @@
2823 3344 }
2824 3345 }
2825 3346 });
2826 3347
3348 + // packages/theme/node_modules/colorjs.io/src/equals.js
3349 + function equals(color1, color2) {
3350 + color1 = getColor(color1);
3351 + color2 = getColor(color2);
3352 + return color1.space === color2.space && color1.alpha === color2.alpha && color1.coords.every((c, i) => c === color2.coords[i]);
3353 + }
3354 +
2827 3355 // packages/theme/node_modules/colorjs.io/src/luminance.js
2828 3356 function getLuminance(color) {
2829 3357 return get(color, [xyz_d65_default, "y"]);
2830 3358 }
2831 3359
2832 - // packages/theme/node_modules/colorjs.io/src/contrast/WCAG21.js
2833 - function contrastWCAG21(color1, color2) {
2834 - color1 = getColor(color1);
2835 - color2 = getColor(color2);
2836 - let Y1 = Math.max(getLuminance(color1), 0);
2837 - let Y2 = Math.max(getLuminance(color2), 0);
2838 - if (Y2 > Y1) {
2839 - [Y1, Y2] = [Y2, Y1];
2840 - }
2841 - return (Y1 + 0.05) / (Y2 + 0.05);
2842 - }
2843 -
2844 3360 // packages/theme/node_modules/colorjs.io/src/spaces/hsl.js
2845 3361 var hsl_default = new ColorSpace({
2846 3362 id: "hsl",
2847 3363 name: "HSL",
@@ -2860,8 +3376,9 @@
2860 3376 name: "Lightness"
2861 3377 }
2862 3378 },
2863 3379 base: srgb_default,
3380 + rgbGamut: srgb_default,
2864 3381 // Adapted from https://drafts.csswg.org/css-color-4/better-rgbToHsl.js
2865 3382 fromBase: (rgb) => {
2866 3383 let max = Math.max(...rgb);
2867 3384 let min = Math.min(...rgb);
@@ -2918,38 +3435,8 @@
2918 3435 }
2919 3436 }
2920 3437 });
2921 3438
2922 - // packages/theme/node_modules/colorjs.io/src/spaces/oklch.js
2923 - var oklch_default = new ColorSpace({
2924 - id: "oklch",
2925 - name: "OkLCh",
2926 - coords: {
2927 - l: {
2928 - refRange: [0, 1],
2929 - name: "Lightness"
2930 - },
2931 - c: {
2932 - refRange: [0, 0.4],
2933 - name: "Chroma"
2934 - },
2935 - h: {
2936 - refRange: [0, 360],
2937 - type: "angle",
2938 - name: "Hue"
2939 - }
2940 - },
2941 - white: "D65",
2942 - base: oklab_default,
2943 - fromBase: lch_default.fromBase,
2944 - toBase: lch_default.toBase,
2945 - formats: {
2946 - oklch: {
2947 - coords: ["<percentage> | <number>", "<number> | <percentage>", "<number> | <angle>"]
2948 - }
2949 - }
2950 - });
2951 -
2952 3439 // node_modules/memize/dist/index.js
2953 3440 function memize(fn, options) {
2954 3441 var size = 0;
2955 3442 var head;
@@ -3032,13 +3519,13 @@
3032 3519 "background-interactive-neutral-weak",
3033 3520 "background-interactive-neutral-weak-disabled"
3034 3521 ],
3035 3522 "primary-bgFill1": ["background-interactive-brand-strong"],
3523 + "primary-bgFill2": ["background-interactive-brand-strong-active"],
3036 3524 "primary-fgFill": [
3037 3525 "foreground-interactive-brand-strong",
3038 3526 "foreground-interactive-brand-strong-active"
3039 3527 ],
3040 - "primary-bgFill2": ["background-interactive-brand-strong-active"],
3041 3528 "primary-surface4": ["background-interactive-brand-weak-active"],
3042 3529 "primary-fgSurface4": ["foreground-interactive-brand-active"],
3043 3530 "primary-fgSurface3": ["foreground-interactive-brand"],
3044 3531 "primary-stroke3": [
@@ -3069,13 +3556,13 @@
3069 3556 "warning-fgSurface3": ["foreground-content-warning-weak"],
3070 3557 "warning-stroke3": ["stroke-surface-warning-strong"],
3071 3558 "warning-stroke1": ["stroke-surface-warning"],
3072 3559 "error-bgFill1": ["background-interactive-error-strong"],
3560 + "error-bgFill2": ["background-interactive-error-strong-active"],
3073 3561 "error-fgFill": [
3074 3562 "foreground-interactive-error-strong",
3075 3563 "foreground-interactive-error-strong-active"
3076 3564 ],
3077 - "error-bgFill2": ["background-interactive-error-strong-active"],
3078 3565 "error-surface2": [
3079 3566 "background-interactive-error-active",
3080 3567 "background-surface-error-weak"
3081 3568 ],
@@ -3104,9 +3591,14 @@
3104 3591 "background-interactive-error-strong-disabled",
3105 3592 "background-interactive-neutral-strong-disabled"
3106 3593 ],
3107 3594 "bg-surface4": ["background-interactive-neutral-weak-active"],
3108 - "bg-surface3": ["background-surface-neutral-strong"],
3595 + "bg-surface3": [
3596 + "background-interactive-neutral",
3597 + "background-interactive-neutral-active",
3598 + "background-interactive-neutral-disabled",
3599 + "background-surface-neutral-strong"
3600 + ],
3109 3601 "bg-fgSurface4": [
3110 3602 "foreground-content-neutral",
3111 3603 "foreground-interactive-neutral",
3112 3604 "foreground-interactive-neutral-active",
@@ -3164,8 +3656,9 @@
3164 3656 };
3165 3657
3166 3658 // packages/theme/build-module/color-ramps/lib/color-utils.mjs
3167 3659 var ALLOWED_SEED_COLOR_SPACES = [srgb_default];
3660 + var objectLuminanceCache = /* @__PURE__ */ new WeakMap();
3168 3661 function getColorString(color) {
3169 3662 ColorSpace.register(srgb_default);
3170 3663 const rgbRounded = serialize(to(color, srgb_default));
3171 3664 return serialize(rgbRounded, { format: "hex" });
@@ -3170,12 +3663,33 @@
3170 3663 const rgbRounded = serialize(to(color, srgb_default));
3171 3664 return serialize(rgbRounded, { format: "hex" });
3172 3665 }
3173 3666 function getContrast(colorA, colorB) {
3174 - ColorSpace.register(srgb_default);
3175 - return contrastWCAG21(colorA, colorB);
3667 + return getContrastFromLuminances(
3668 + getRelativeLuminance(colorA),
3669 + getRelativeLuminance(colorB)
3670 + );
3176 3671 }
3177 - function assertValidSeedColor(seed) {
3672 + function getRelativeLuminance(color) {
3673 + if (typeof color === "string") {
3674 + ColorSpace.register(srgb_default);
3675 + return Math.max(getLuminance(color), 0);
3676 + }
3677 + const cachedLuminance = objectLuminanceCache.get(color);
3678 + if (cachedLuminance && equals(cachedLuminance.color, color)) {
3679 + return cachedLuminance.luminance;
3680 + }
3681 + const luminance = Math.max(getLuminance(color), 0);
3682 + objectLuminanceCache.set(color, {
3683 + color: clone(color),
3684 + luminance
3685 + });
3686 + return luminance;
3687 + }
3688 + function getContrastFromLuminances(first, second) {
3689 + return first > second ? (first + 0.05) / (second + 0.05) : (second + 0.05) / (first + 0.05);
3690 + }
3691 + function parseSeedColor(seed) {
3178 3692 ALLOWED_SEED_COLOR_SPACES.forEach(
3179 3693 (space) => ColorSpace.register(space)
3180 3694 );
3181 3695 let parsedColor;
@@ -3196,12 +3710,11 @@
3196 3710 throw new Error(
3197 3711 `Unsupported seed color "${seed}": expected a fully opaque color.`
3198 3712 );
3199 3713 }
3714 + return parsedColor;
3200 3715 }
3201 3716 function clampToGamut(c) {
3202 - ColorSpace.register(srgb_default);
3203 - ColorSpace.register(oklch_default);
3204 3717 return to(toGamut(c, { space: srgb_default, method: "css" }), oklch_default);
3205 3718 }
3206 3719
3207 3720 // packages/theme/build-module/color-ramps/lib/constants.mjs
@@ -3245,11 +3758,16 @@
3245 3758 dependents.set(step, []);
3246 3759 });
3247 3760 Object.entries(config).forEach(([stepName, stepConfig]) => {
3248 3761 const step = stepName;
3249 - const reference = stepConfig.contrast.reference;
3250 - dependencies.get(step).push(reference);
3251 - dependents.get(reference).push(step);
3762 + const references = [
3763 + stepConfig.contrast.reference,
3764 + ...stepConfig.contrast.additionalReferences ?? []
3765 + ];
3766 + for (const reference of references) {
3767 + dependencies.get(step).push(reference);
3768 + dependents.get(reference).push(step);
3769 + }
3252 3770 if (stepConfig.sameAsIfPossible) {
3253 3771 dependencies.get(step).push(stepConfig.sameAsIfPossible);
3254 3772 dependents.get(stepConfig.sameAsIfPossible).push(step);
3255 3773 }
@@ -3296,8 +3814,9 @@
3296 3814 if (!stepConfig) {
3297 3815 return;
3298 3816 }
3299 3817 visit(stepConfig.contrast.reference);
3818 + stepConfig.contrast.additionalReferences?.forEach(visit);
3300 3819 if (stepConfig.sameAsIfPossible) {
3301 3820 visit(stepConfig.sameAsIfPossible);
3302 3821 }
3303 3822 result.add(step);
@@ -3304,11 +3823,20 @@
3304 3823 }
3305 3824 visit(stepName);
3306 3825 return Array.from(result);
3307 3826 }
3308 - function computeBetterFgColorDirection(seed, preferLighter) {
3309 - const contrastAgainstBlack = getContrast(seed, BLACK);
3310 - const contrastAgainstWhite = getContrast(seed, WHITE);
3827 + function computeBetterFgColorDirection(references, preferLighter) {
3828 + const referenceColors = Array.isArray(references) ? references : [references];
3829 + const contrastAgainstBlack = Math.min(
3830 + ...referenceColors.map(
3831 + (reference) => getContrast(reference, BLACK)
3832 + )
3833 + );
3834 + const contrastAgainstWhite = Math.min(
3835 + ...referenceColors.map(
3836 + (reference) => getContrast(reference, WHITE)
3837 + )
3838 + );
3311 3839 return contrastAgainstBlack > contrastAgainstWhite + (preferLighter ? WHITE_TEXT_CONTRAST_MARGIN : 0) ? { better: "darker", worse: "lighter" } : { better: "lighter", worse: "darker" };
3312 3840 }
3313 3841 function adjustContrastTarget(target) {
3314 3842 if (target === 1) {
@@ -3359,14 +3887,12 @@
3359 3887 return bestC;
3360 3888 }
3361 3889
3362 3890 // packages/theme/build-module/color-ramps/lib/taper-chroma.mjs
3363 - function taperChroma(seed, lTarget, options = {}) {
3364 - ColorSpace.register(oklch_default);
3891 + function createChromaTaper(seed, options = {}) {
3365 3892 const gamut = options.gamut ?? srgb_default;
3366 3893 const alpha = options.alpha ?? 0.65;
3367 3894 const carry = options.carry ?? 0.5;
3368 - const cUpperBound = options.cUpperBound ?? 0.45;
3369 3895 const radiusLight = options.radiusLight ?? 0.2;
3370 3896 const radiusDark = options.radiusDark ?? 0.2;
3371 3897 const kLight = options.kLight ?? 0.85;
3372 3898 const kDark = options.kDark ?? 0.85;
@@ -3378,37 +3904,34 @@
3378 3904 if (chromaIsTiny || hueIsInvalid) {
3379 3905 if (typeof options.hueFallback === "number") {
3380 3906 hSeed = normalizeHue(options.hueFallback);
3381 3907 } else {
3382 - return {
3908 + return (lTarget) => ({
3383 3909 space: oklch_default,
3384 3910 coords: [clamp01(lTarget), 0, 0],
3385 3911 alpha: 1
3386 - };
3912 + });
3387 3913 }
3388 3914 }
3389 3915 const lSeed = clamp01(get(seed, [oklch_default, "l"]));
3390 - const cmaxSeed = getCachedMaxChromaAtLH(lSeed, hSeed, gamut, cUpperBound);
3391 - const cmaxTarget = getCachedMaxChromaAtLH(
3392 - clamp01(lTarget),
3393 - hSeed,
3394 - gamut,
3395 - cUpperBound
3396 - );
3397 - let seedRelative = 0;
3916 + const cmaxSeed = getMaxChromaAtLH(lSeed, hSeed, gamut);
3398 3917 const denom = cmaxSeed > 0 ? cmaxSeed : 1e-6;
3399 - seedRelative = clamp01(cSeed / denom);
3400 - const cIntendedBase = alpha * cmaxTarget;
3401 - const cWithCarry = cIntendedBase * Math.pow(seedRelative, clamp01(carry));
3402 - const t = continuousTaper(lSeed, lTarget, {
3403 - radiusLight,
3404 - radiusDark,
3405 - kLight,
3406 - kDark
3407 - });
3408 - const cPlanned = cWithCarry * t;
3409 - const lOut = clamp01(lTarget);
3410 - return { l: lOut, c: cPlanned };
3918 + const seedRelative = clamp01(cSeed / denom);
3919 + const seedCarry = Math.pow(seedRelative, clamp01(carry));
3920 + return (lTarget) => {
3921 + const cmaxTarget = getMaxChromaAtLH(clamp01(lTarget), hSeed, gamut);
3922 + const cIntendedBase = alpha * cmaxTarget;
3923 + const cWithCarry = cIntendedBase * seedCarry;
3924 + const t = continuousTaper(lSeed, lTarget, {
3925 + radiusLight,
3926 + radiusDark,
3927 + kLight,
3928 + kDark
3929 + });
3930 + const cPlanned = cWithCarry * t;
3931 + const lOut = clamp01(lTarget);
3932 + return { l: lOut, c: cPlanned };
3933 + };
3411 3934 }
3412 3935 function clamp01(x) {
3413 3936 if (x < 0) {
3414 3937 return 0;
@@ -3439,37 +3962,16 @@
3439 3962 const u = opts.radiusDark > 0 ? Math.abs(d2) / opts.radiusDark : 1;
3440 3963 const w = raisedCosine(u > 1 ? 1 : u);
3441 3964 return 1 - (1 - opts.kDark) * w;
3442 3965 }
3443 - var maxChromaCache = /* @__PURE__ */ new Map();
3444 - function keyMax(l, h, gamut, cap) {
3445 - const lq = quantize(l, 0.05);
3446 - const hq = quantize(normalizeHue(h), 10);
3447 - const cq = quantize(cap, 0.05);
3448 - return `${gamut}|L:${lq}|H:${hq}|cap:${cq}`;
3449 - }
3450 - function quantize(x, step) {
3451 - const k = Math.round(x / step);
3452 - return k * step;
3453 - }
3454 - function getCachedMaxChromaAtLH(l, h, gamutSpace, cap) {
3455 - const gamut = gamutSpace.id;
3456 - const key = keyMax(l, h, gamut, cap);
3457 - const hit = maxChromaCache.get(key);
3458 - if (typeof hit === "number") {
3459 - return hit;
3460 - }
3461 - const computed = maxInGamutChromaAtLH(l, h, gamutSpace, cap);
3462 - maxChromaCache.set(key, computed);
3463 - return computed;
3464 - }
3465 - function maxInGamutChromaAtLH(l, h, gamutSpace, cap) {
3966 + var MAX_CHROMA = 0.45;
3967 + function getMaxChromaAtLH(l, h, gamutSpace) {
3466 3968 const probe = {
3467 3969 space: oklch_default,
3468 - coords: [l, cap, h],
3970 + coords: [clamp01(l), MAX_CHROMA, normalizeHue(h)],
3469 3971 alpha: 1
3470 3972 };
3471 - const clamped = toGamut(probe, { space: gamutSpace, method: "css" });
3973 + const clamped = toGamutCSS(probe, { space: gamutSpace });
3472 3974 return get(clamped, [oklch_default, "c"]);
3473 3975 }
3474 3976
3475 3977 // packages/theme/build-module/color-ramps/lib/find-color-with-constraints.mjs
@@ -3486,13 +3988,16 @@
3486 3988 reached: true,
3487 3989 achieved: 1
3488 3990 };
3489 3991 }
3992 + const seedChroma = get(seed, [oklch_default, "c"]);
3993 + const seedHue = get(seed, [oklch_default, "h"]);
3994 + const taperChromaAtLightness = taperChromaOptions ? createChromaTaper(seed, taperChromaOptions) : void 0;
3490 3995 function getColorForL(l) {
3491 3996 let newL = l;
3492 - let newC = get(seed, [oklch_default, "c"]);
3493 - if (taperChromaOptions) {
3494 - const tapered = taperChroma(seed, newL, taperChromaOptions);
3997 + let newC = seedChroma;
3998 + if (taperChromaAtLightness) {
3999 + const tapered = taperChromaAtLightness(newL);
3495 4000 if ("l" in tapered && "c" in tapered) {
3496 4001 newL = tapered.l;
3497 4002 newC = tapered.c;
3498 4003 } else {
@@ -3500,9 +4005,9 @@
3500 4005 }
3501 4006 }
3502 4007 return clampToGamut({
3503 4008 space: oklch_default,
3504 - coords: [newL, newC, get(seed, [oklch_default, "h"])],
4009 + coords: [newL, newC, seedHue],
3505 4010 alpha: seed.alpha
3506 4011 });
3507 4012 }
3508 4013 const mostContrastingL = direction === "lighter" ? 1 : 0;
@@ -3566,9 +4071,9 @@
3566 4071 let maxDeficitStep;
3567 4072 const calculatedColors = /* @__PURE__ */ new Map();
3568 4073 calculatedColors.set("seed", seed);
3569 4074 for (const stepName of sortedSteps) {
3570 - let computeDirection = function(color, followDirection) {
4075 + let computeDirection2 = function(colors, followDirection) {
3571 4076 if (followDirection === "main") {
3572 4077 return mainDir;
3573 4078 }
3574 4079 if (followDirection === "opposite") {
@@ -3575,14 +4080,15 @@
3575 4080 return oppDir;
3576 4081 }
3577 4082 if (followDirection === "best") {
3578 4083 return computeBetterFgColorDirection(
3579 - color,
4084 + colors,
3580 4085 contrast.preferLighter
3581 4086 ).better;
3582 4087 }
3583 4088 return followDirection;
3584 4089 };
4090 + var computeDirection = computeDirection2;
3585 4091 const {
3586 4092 contrast,
3587 4093 lightness: stepLightnessConstraint,
3588 4094 taperChromaOptions,
@@ -3587,14 +4093,21 @@
3587 4093 lightness: stepLightnessConstraint,
3588 4094 taperChromaOptions,
3589 4095 sameAsIfPossible
3590 4096 } = config[stepName];
3591 - const referenceColor = calculatedColors.get(contrast.reference);
3592 - if (!referenceColor) {
3593 - throw new Error(
3594 - `Reference color for step ${stepName} not found: ${contrast.reference}`
3595 - );
3596 - }
4097 + const referenceNames = [
4098 + contrast.reference,
4099 + ...contrast.additionalReferences ?? []
4100 + ];
4101 + const referenceColors = referenceNames.map((referenceName) => {
4102 + const referenceColor2 = calculatedColors.get(referenceName);
4103 + if (!referenceColor2) {
4104 + throw new Error(
4105 + `Reference color for step ${stepName} not found: ${referenceName}`
4106 + );
4107 + }
4108 + return referenceColor2;
4109 + });
3597 4110 if (sameAsIfPossible) {
3598 4111 const candidateColor = calculatedColors.get(sameAsIfPossible);
3599 4112 if (!candidateColor) {
3600 4113 throw new Error(
@@ -3600,23 +4113,26 @@
3600 4113 throw new Error(
3601 4114 `Same-as color for step ${stepName} not found: ${sameAsIfPossible}`
3602 4115 );
3603 4116 }
3604 - const candidateContrast = getContrast(
3605 - referenceColor,
3606 - candidateColor
4117 + const adjustedTarget2 = adjustContrastTarget(contrast.target);
4118 + const candidateMeetsTarget = referenceColors.every(
4119 + (referenceColor2) => getContrast(referenceColor2, candidateColor) >= adjustedTarget2
3607 4120 );
3608 - const adjustedTarget2 = adjustContrastTarget(contrast.target);
3609 - if (candidateContrast >= adjustedTarget2) {
4121 + if (candidateMeetsTarget) {
3610 4122 calculatedColors.set(stepName, candidateColor);
3611 4123 rampResults[stepName] = getColorString(candidateColor);
3612 4124 continue;
3613 4125 }
3614 4126 }
3615 - const computedDir = computeDirection(
3616 - referenceColor,
4127 + const computedDir = computeDirection2(
4128 + referenceColors,
3617 4129 contrast.followDirection
3618 4130 );
4131 + const endpoint = computedDir === "lighter" ? WHITE : BLACK;
4132 + const referenceColor = referenceColors.reduce(
4133 + (tightest, current) => getContrast(current, endpoint) < getContrast(tightest, endpoint) ? current : tightest
4134 + );
3619 4135 const adjustedTarget = adjustContrastTarget(contrast.target);
3620 4136 let lightnessConstraint;
3621 4137 if (pinLightness?.stepName === stepName) {
3622 4138 lightnessConstraint = {
@@ -3663,12 +4179,12 @@
3663 4179 mainDirection,
3664 4180 pinLightness,
3665 4181 rescaleToFitContrastTargets = true
3666 4182 } = {}) {
3667 - assertValidSeedColor(seedArg);
4183 + const parsedSeed = parseSeedColor(seedArg);
3668 4184 let seed;
3669 4185 try {
3670 - seed = clampToGamut(seedArg);
4186 + seed = clampToGamut(parsedSeed);
3671 4187 } catch (error) {
3672 4188 throw new Error(
3673 4189 `Invalid seed color "${seedArg}": ${error instanceof Error ? error.message : "Unknown error"}`
3674 4190 );
@@ -3698,12 +4214,13 @@
3698 4214 oppDir,
3699 4215 pinLightness
3700 4216 });
3701 4217 let bestRamp = rampResults;
4218 + let bestWarnings = warnings;
3702 4219 if (maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets) {
3703 - let getSeedForL = function(l) {
4220 + let getSeedForL2 = function(l) {
3704 4221 return clampToGamut(set(clone(seed), [oklch_default, "l"], l));
3705 - }, getDeficitForSeed = function(s) {
4222 + }, getDeficitForSeed2 = function(s) {
3706 4223 const iterationResults = calculateRamp({
3707 4224 seed: s,
3708 4225 sortedSteps: iterSteps,
3709 4226 config,
@@ -3712,8 +4229,9 @@
3712 4229 pinLightness
3713 4230 });
3714 4231 return iterationResults.maxDeficitDirection === maxDeficitDirection ? iterationResults.maxDeficit : -maxDeficit;
3715 4232 };
4233 + var getSeedForL = getSeedForL2, getDeficitForSeed = getDeficitForSeed2;
3716 4234 const iterSteps = stepsForStep(maxDeficitStep, config);
3717 4235 const lowerSeedL = maxDeficitDirection === "lighter" ? 0 : 1;
3718 4236 const lowerDeficit = -maxDeficit;
3719 4237 const upperSeedL = get(seed, [oklch_default, "l"]);
@@ -3718,16 +4236,16 @@
3718 4236 const lowerDeficit = -maxDeficit;
3719 4237 const upperSeedL = get(seed, [oklch_default, "l"]);
3720 4238 const upperDeficit = maxDeficit;
3721 4239 const bestSeed = solveWithBisect(
3722 - getSeedForL,
3723 - getDeficitForSeed,
4240 + getSeedForL2,
4241 + getDeficitForSeed2,
3724 4242 lowerSeedL,
3725 4243 lowerDeficit,
3726 4244 upperSeedL,
3727 4245 upperDeficit
3728 4246 );
3729 - bestRamp = calculateRamp({
4247 + const finalResult = calculateRamp({
3730 4248 seed: bestSeed,
3731 4249 sortedSteps,
3732 4250 config,
3733 4251 mainDir,
@@ -3732,9 +4250,11 @@
3732 4250 config,
3733 4251 mainDir,
3734 4252 oppDir,
3735 4253 pinLightness
3736 - }).rampResults;
4254 + });
4255 + bestRamp = finalResult.rampResults;
4256 + bestWarnings = finalResult.warnings;
3737 4257 }
3738 4258 if (mainDir === "darker") {
3739 4259 const tmpSurface1 = bestRamp.surface1;
3740 4260 bestRamp.surface1 = bestRamp.surface3;
@@ -3741,9 +4261,9 @@
3741 4261 bestRamp.surface3 = tmpSurface1;
3742 4262 }
3743 4263 return {
3744 4264 ramp: bestRamp,
3745 - warnings,
4265 + warnings: bestWarnings,
3746 4266 direction: mainDir
3747 4267 };
3748 4268 }
3749 4269
@@ -3932,11 +4452,12 @@
3932 4452 // fgFill
3933 4453 fgFill: {
3934 4454 contrast: {
3935 4455 reference: "bgFill1",
4456 + additionalReferences: ["bgFill2"],
3936 4457 followDirection: "best",
3937 - target: 4.5,
3938 - preferLighter: true
4458 + // Preserve the 4.5:1 WCAG floor after 8-bit sRGB serialization.
4459 + target: 4.55
3939 4460 },
3940 4461 lightness: lightnessConstraintForegroundHighContrast,
3941 4462 taperChromaOptions: FG_TAPER_CHROMA
3942 4463 },
@@ -4061,8 +4582,160 @@
4061 4582 const bgRampInfo = bgRamp ? getBgRampInfo(bgRamp) : void 0;
4062 4583 return buildRamp(seed, ACCENT_RAMP_CONFIG, bgRampInfo);
4063 4584 }
4064 4585
4586 + // packages/theme/build-module/semantic-color-contrast-pairs.mjs
4587 + var MINIMUM_TEXT_CONTRAST = 4.5;
4588 + var SEMANTIC_COLOR_CONTRAST_PAIRS = [
4589 + {
4590 + background: "background.interactive.neutral",
4591 + foreground: "foreground.interactive.neutral"
4592 + },
4593 + {
4594 + background: "background.interactive.neutral",
4595 + foreground: "foreground.interactive.neutral-weak"
4596 + },
4597 + {
4598 + background: "background.interactive.neutral-active",
4599 + foreground: "foreground.interactive.neutral"
4600 + },
4601 + {
4602 + background: "background.interactive.neutral-active",
4603 + foreground: "foreground.interactive.neutral-weak"
4604 + },
4605 + {
4606 + background: "background.interactive.neutral-weak-active",
4607 + foreground: "foreground.interactive.neutral-active"
4608 + },
4609 + {
4610 + background: "background.surface.neutral",
4611 + foreground: "foreground.content.neutral"
4612 + },
4613 + {
4614 + background: "background.surface.neutral-strong",
4615 + foreground: "foreground.content.neutral"
4616 + },
4617 + {
4618 + background: "background.surface.neutral-weak",
4619 + foreground: "foreground.content.neutral"
4620 + },
4621 + {
4622 + background: "background.surface.neutral",
4623 + foreground: "foreground.content.neutral-weak"
4624 + },
4625 + {
4626 + background: "background.surface.info",
4627 + foreground: "foreground.content.info"
4628 + },
4629 + {
4630 + background: "background.surface.info-weak",
4631 + foreground: "foreground.content.info-weak"
4632 + },
4633 + {
4634 + background: "background.surface.success",
4635 + foreground: "foreground.content.success"
4636 + },
4637 + {
4638 + background: "background.surface.success-weak",
4639 + foreground: "foreground.content.success-weak"
4640 + },
4641 + {
4642 + background: "background.surface.warning",
4643 + foreground: "foreground.content.warning"
4644 + },
4645 + {
4646 + background: "background.surface.warning-weak",
4647 + foreground: "foreground.content.warning-weak"
4648 + },
4649 + {
4650 + background: "background.surface.caution",
4651 + foreground: "foreground.content.caution"
4652 + },
4653 + {
4654 + background: "background.surface.caution-weak",
4655 + foreground: "foreground.content.caution-weak"
4656 + },
4657 + {
4658 + background: "background.surface.error",
4659 + foreground: "foreground.content.error"
4660 + },
4661 + {
4662 + background: "background.surface.error-weak",
4663 + foreground: "foreground.content.error-weak"
4664 + },
4665 + {
4666 + background: "background.interactive.brand-strong",
4667 + foreground: "foreground.interactive.brand-strong"
4668 + },
4669 + {
4670 + background: "background.interactive.brand-strong-active",
4671 + foreground: "foreground.interactive.brand-strong-active"
4672 + },
4673 + {
4674 + background: "background.interactive.error-strong",
4675 + foreground: "foreground.interactive.error-strong"
4676 + },
4677 + {
4678 + background: "background.interactive.error-strong-active",
4679 + foreground: "foreground.interactive.error-strong-active"
4680 + },
4681 + {
4682 + background: "background.interactive.neutral-strong",
4683 + foreground: "foreground.interactive.neutral-strong"
4684 + },
4685 + {
4686 + background: "background.interactive.neutral-strong-active",
4687 + foreground: "foreground.interactive.neutral-strong-active"
4688 + }
4689 + ];
4690 + function getSemanticColorCustomProperty(token) {
4691 + return `--wpds-color-${token.replaceAll(".", "-")}`;
4692 + }
4693 +
4694 + // packages/theme/build-module/theme-provider-color-warnings.mjs
4695 + function collectThemeProviderColorWarnings(ramps, colorValues) {
4696 + const warnings = [];
4697 + for (const [rampName, result] of ramps) {
4698 + for (const step of result.warnings ?? []) {
4699 + warnings.push({
4700 + type: "ramp",
4701 + ramp: rampName,
4702 + step
4703 + });
4704 + }
4705 + }
4706 + for (const {
4707 + background: backgroundToken,
4708 + foreground: foregroundToken
4709 + } of SEMANTIC_COLOR_CONTRAST_PAIRS) {
4710 + const backgroundColor = colorValues.get(
4711 + getSemanticColorCustomProperty(backgroundToken)
4712 + );
4713 + const foregroundColor = colorValues.get(
4714 + getSemanticColorCustomProperty(foregroundToken)
4715 + );
4716 + if (backgroundColor === void 0 || foregroundColor === void 0) {
4717 + continue;
4718 + }
4719 + const achievedContrast = getContrast(
4720 + backgroundColor,
4721 + foregroundColor
4722 + );
4723 + if (achievedContrast < MINIMUM_TEXT_CONTRAST) {
4724 + warnings.push({
4725 + type: "contrast",
4726 + backgroundToken,
4727 + backgroundColor,
4728 + foregroundToken,
4729 + foregroundColor,
4730 + requiredContrast: MINIMUM_TEXT_CONTRAST,
4731 + achievedContrast
4732 + });
4733 + }
4734 + }
4735 + return warnings;
4736 + }
4737 +
4065 4738 // packages/theme/build-module/use-theme-provider-styles.mjs
4066 4739 var getCachedBgRamp = memize(buildBgRamp, { maxSize: 10 });
4067 4740 var getCachedAccentRamp = memize(buildAccentRamp, { maxSize: 10 });
4068 4741 var legacyWpComponentsOverridesCSS = [
@@ -4158,9 +4831,10 @@
4158 4831 function colorTokensCSS(computedColorRamps) {
4159 4832 const entries = [];
4160 4833 for (const [rampName, { ramp }] of computedColorRamps) {
4161 4834 for (const [tokenName, tokenValue] of Object.entries(ramp)) {
4162 - const key = `${rampName}-${tokenName}`;
4835 + const primitiveRampName = rampName === "background" ? "bg" : rampName;
4836 + const key = `${primitiveRampName}-${tokenName}`;
4163 4837 const aliasedBy = color_tokens_default[key] ?? [];
4164 4838 for (const aliasedId of aliasedBy) {
4165 4839 entries.push([`--wpds-color-${aliasedId}`, tokenValue]);
4166 4840 }
@@ -4169,14 +4843,14 @@
4169 4843 return entries;
4170 4844 }
4171 4845 function generateStyles({
4172 4846 primary,
4173 - computedColorRamps
4847 + colorEntries
4174 4848 }) {
4175 4849 return Object.fromEntries(
4176 4850 [
4177 4851 // Semantic color tokens
4178 - colorTokensCSS(computedColorRamps),
4852 + colorEntries,
4179 4853 // Legacy overrides
4180 4854 legacyWpAdminThemeOverridesCSS(primary),
4181 4855 legacyWpComponentsOverridesCSS
4182 4856 ].flat()
@@ -4181,8 +4855,35 @@
4181 4855 legacyWpComponentsOverridesCSS
4182 4856 ].flat()
4183 4857 );
4184 4858 }
4859 + function generateThemeProviderColors(primary, background) {
4860 + const seeds = {
4861 + ...DEFAULT_SEED_COLORS,
4862 + background,
4863 + primary
4864 + };
4865 + const computedColorRamps = /* @__PURE__ */ new Map();
4866 + const bgRamp = getCachedBgRamp(seeds.background);
4867 + for (const [rawRampName, seed] of Object.entries(seeds)) {
4868 + const rampName = rawRampName;
4869 + computedColorRamps.set(
4870 + rampName,
4871 + rampName === "background" ? bgRamp : getCachedAccentRamp(seed, bgRamp)
4872 + );
4873 + }
4874 + const colorEntries = colorTokensCSS(computedColorRamps);
4875 + return {
4876 + styles: generateStyles({
4877 + primary: seeds.primary,
4878 + colorEntries
4879 + }),
4880 + warnings: collectThemeProviderColorWarnings(
4881 + computedColorRamps,
4882 + new Map(colorEntries)
4883 + )
4884 + };
4885 + }
4185 4886 function useThemeProviderStyles({
4186 4887 color = {},
4187 4888 cursor,
4188 4889 cornerRadius
@@ -4187,10 +4888,11 @@
4187 4888 cursor,
4188 4889 cornerRadius
4189 4890 } = {}) {
4190 4891 const { resolvedSettings: inheritedSettings } = (0, import_element2.useContext)(ThemeContext);
4191 - const primary = color.primary ?? inheritedSettings.color?.primary ?? DEFAULT_SEED_COLORS.primary;
4192 - const background = color.background ?? inheritedSettings.color?.background ?? DEFAULT_SEED_COLORS.background;
4892 + const hasColor = color.primary !== void 0 || color.background !== void 0 || inheritedSettings.color?.primary !== void 0 || inheritedSettings.color?.background !== void 0;
4893 + const primary = hasColor ? color.primary ?? inheritedSettings.color?.primary ?? DEFAULT_SEED_COLORS.primary : void 0;
4894 + const background = hasColor ? color.background ?? inheritedSettings.color?.background ?? DEFAULT_SEED_COLORS.background : void 0;
4193 4895 const cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;
4194 4896 const cornerRadiusPreset = cornerRadius ?? inheritedSettings.cornerRadius ?? "subtle";
4195 4897 const resolvedSettings = (0, import_element2.useMemo)(
4196 4898 () => ({
@@ -4202,43 +4904,30 @@
4202 4904 cornerRadius: cornerRadiusPreset
4203 4905 }),
4204 4906 [primary, background, cursorControl, cornerRadiusPreset]
4205 4907 );
4206 - const colorStyles = (0, import_element2.useMemo)(() => {
4207 - const seeds = {
4208 - ...DEFAULT_SEED_COLORS,
4209 - background,
4210 - primary
4211 - };
4212 - const computedColorRamps = /* @__PURE__ */ new Map();
4213 - const bgRamp = getCachedBgRamp(seeds.background);
4214 - Object.entries(seeds).forEach(([rampName, seed]) => {
4215 - if (rampName === "background") {
4216 - computedColorRamps.set("bg", bgRamp);
4217 - } else {
4218 - computedColorRamps.set(
4219 - rampName,
4220 - getCachedAccentRamp(seed, bgRamp)
4221 - );
4222 - }
4223 - });
4224 - return generateStyles({
4225 - primary: seeds.primary,
4226 - computedColorRamps
4227 - });
4908 + const generatedColors = (0, import_element2.useMemo)(() => {
4909 + if (primary === void 0 || background === void 0) {
4910 + return {
4911 + styles: {},
4912 + warnings: void 0
4913 + };
4914 + }
4915 + return generateThemeProviderColors(primary, background);
4228 4916 }, [primary, background]);
4229 4917 const themeProviderStyles = (0, import_element2.useMemo)(
4230 4918 () => ({
4231 - ...colorStyles,
4919 + ...generatedColors.styles,
4232 4920 ...cursorControl && {
4233 4921 "--wpds-cursor-control": cursorControl
4234 4922 }
4235 4923 }),
4236 - [colorStyles, cursorControl]
4924 + [generatedColors.styles, cursorControl]
4237 4925 );
4238 4926 return {
4239 4927 resolvedSettings,
4240 - themeProviderStyles
4928 + themeProviderStyles,
4929 + colorWarnings: generatedColors.warnings
4241 4930 };
4242 4931 }
4243 4932
4244 4933 // packages/theme/build-module/theme-provider.mjs
@@ -4323,11 +5012,11 @@
4323 5012 injectStyle(targetDocument, hash, css);
4324 5013 }
4325 5014 }
4326 5015 if (typeof process === "undefined" || true) {
4327 - registerStyle("f4e6e06c6a", ".dba930ea7a9438fd__root{display:contents}");
5016 + registerStyle("8d074a190c", "._0ebd6d9bf8b95794__wrapper{display:contents}");
4328 5017 }
4329 - var style_default = { "root": "dba930ea7a9438fd__root" };
5018 + var style_default = { "wrapper": "_0ebd6d9bf8b95794__wrapper" };
4330 5019 var rootProviderCountByDocument = /* @__PURE__ */ new WeakMap();
4331 5020 var ThemeProvider = ({
4332 5021 children,
4333 5022 color = {},
@@ -4332,16 +5021,18 @@
4332 5021 children,
4333 5022 color = {},
4334 5023 cursor,
4335 5024 cornerRadius,
4336 - isRoot = false
5025 + isRoot = false,
5026 + onColorWarnings
4337 5027 }) => {
4338 - const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles({
5028 + const { themeProviderStyles, resolvedSettings, colorWarnings } = useThemeProviderStyles({
4339 5029 color,
4340 5030 cursor,
4341 5031 cornerRadius
4342 5032 });
4343 5033 const cornerRadiusPreset = resolvedSettings.cornerRadius ?? "subtle";
5034 + const onColorWarningsEvent = (0, import_compose.useEvent)(onColorWarnings);
4344 5035 const contextValue = (0, import_element3.useMemo)(
4345 5036 () => ({
4346 5037 resolvedSettings
4347 5038 }),
@@ -4347,8 +5038,13 @@
4347 5038 }),
4348 5039 [resolvedSettings]
4349 5040 );
4350 5041 const wrapperRef = (0, import_element3.useRef)(null);
5042 + (0, import_element3.useEffect)(() => {
5043 + if (colorWarnings !== void 0) {
5044 + onColorWarningsEvent(colorWarnings);
5045 + }
5046 + }, [colorWarnings, onColorWarningsEvent]);
4351 5047 (0, import_compose.useIsomorphicLayoutEffect)(() => {
4352 5048 if (!isRoot) {
4353 5049 return;
4354 5050 }
@@ -4367,8 +5063,16 @@
4367 5063 rootProviderCountByDocument.set(doc, active + 1);
4368 5064 }
4369 5065 const previous = /* @__PURE__ */ new Map();
4370 5066 const applied = [];
5067 + const previousRootProvider = root.getAttribute(
5068 + "data-wpds-root-provider"
5069 + );
5070 + const previousCornerRadius = root.getAttribute(
5071 + "data-wpds-corner-radius"
5072 + );
5073 + root.setAttribute("data-wpds-root-provider", "true");
5074 + root.setAttribute("data-wpds-corner-radius", cornerRadiusPreset);
4371 5075 for (const [rawKey, rawValue] of Object.entries(
4372 5076 themeProviderStyles
4373 5077 )) {
4374 5078 if (!rawKey.startsWith("--") || rawValue === null || rawValue === void 0) {
@@ -4394,10 +5098,26 @@
4394 5098 } else {
4395 5099 root.style.removeProperty(key);
4396 5100 }
4397 5101 }
5102 + if (previousRootProvider === null) {
5103 + root.removeAttribute("data-wpds-root-provider");
5104 + } else {
5105 + root.setAttribute(
5106 + "data-wpds-root-provider",
5107 + previousRootProvider
5108 + );
5109 + }
5110 + if (previousCornerRadius === null) {
5111 + root.removeAttribute("data-wpds-corner-radius");
5112 + } else {
5113 + root.setAttribute(
5114 + "data-wpds-corner-radius",
5115 + previousCornerRadius
5116 + );
5117 + }
4398 5118 };
4399 - }, [isRoot, themeProviderStyles]);
5119 + }, [cornerRadiusPreset, isRoot, themeProviderStyles]);
4400 5120 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
4401 5121 "div",
4402 5122 {
4403 5123 ref: wrapperRef,
@@ -4402,9 +5122,9 @@
4402 5122 {
4403 5123 ref: wrapperRef,
4404 5124 "data-wpds-root-provider": isRoot || void 0,
4405 5125 "data-wpds-corner-radius": cornerRadiusPreset,
4406 - className: style_default.root,
5126 + className: style_default.wrapper,
4407 5127 style: themeProviderStyles,
4408 5128 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children })
4409 5129 }
4410 5130 );
@@ -4434,6 +5154,8 @@
4434 5154 return useThemeProviderStyles;
4435 5155 }
4436 5156 });
4437 5157 return __toCommonJS(index_exports);
5158 +})();
5159 +(window.wp ||= {}).theme = wp.theme;
4438 5160 })();
4439 5161 //# sourceMappingURL=index.js.map