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 +1130 -400 23.5.3 → 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,13 +3591,19 @@
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 - "foreground-interactive-neutral-active"
3604 + "foreground-interactive-neutral-active",
3605 + "foreground-interactive-neutral-weak-active"
3113 3606 ],
3114 3607 "bg-fgSurface3": [
3115 3608 "foreground-content-neutral-weak",
3116 3609 "foreground-interactive-neutral-weak"
@@ -3134,9 +3627,10 @@
3134 3627 "stroke-interactive-neutral-active",
3135 3628 "stroke-interactive-neutral-strong"
3136 3629 ],
3137 3630 "bg-stroke2": [
3138 - "background-thumb-neutral-disabled",
3631 + "background-thumb-brand-disabled",
3632 + "background-thumb-neutral-weak-disabled",
3139 3633 "background-track-neutral",
3140 3634 "stroke-interactive-brand-disabled",
3141 3635 "stroke-interactive-error-disabled",
3142 3636 "stroke-interactive-neutral-disabled",
@@ -3162,8 +3656,9 @@
3162 3656 };
3163 3657
3164 3658 // packages/theme/build-module/color-ramps/lib/color-utils.mjs
3165 3659 var ALLOWED_SEED_COLOR_SPACES = [srgb_default];
3660 + var objectLuminanceCache = /* @__PURE__ */ new WeakMap();
3166 3661 function getColorString(color) {
3167 3662 ColorSpace.register(srgb_default);
3168 3663 const rgbRounded = serialize(to(color, srgb_default));
3169 3664 return serialize(rgbRounded, { format: "hex" });
@@ -3168,32 +3663,58 @@
3168 3663 const rgbRounded = serialize(to(color, srgb_default));
3169 3664 return serialize(rgbRounded, { format: "hex" });
3170 3665 }
3171 3666 function getContrast(colorA, colorB) {
3172 - ColorSpace.register(srgb_default);
3173 - return contrastWCAG21(colorA, colorB);
3667 + return getContrastFromLuminances(
3668 + getRelativeLuminance(colorA),
3669 + getRelativeLuminance(colorB)
3670 + );
3174 3671 }
3175 - 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) {
3176 3692 ALLOWED_SEED_COLOR_SPACES.forEach(
3177 3693 (space) => ColorSpace.register(space)
3178 3694 );
3179 - let spaceId;
3695 + let parsedColor;
3180 3696 try {
3181 - ({ spaceId } = parse(seed));
3697 + parsedColor = parse(seed);
3182 3698 } catch {
3183 3699 throw new Error(
3184 - `Unsupported seed color "${seed}": expected a hex value, an \`rgb()\`/\`rgba()\` string, or a CSS named color.`
3700 + `Unsupported seed color "${seed}": expected a fully opaque hex value, an \`rgb()\`/\`rgba()\` string, or a CSS named color.`
3185 3701 );
3186 3702 }
3703 + const { alpha = 1, spaceId } = parsedColor;
3187 3704 if (!ALLOWED_SEED_COLOR_SPACES.some((space) => space.id === spaceId)) {
3188 3705 throw new Error(
3189 - `Unsupported seed color "${seed}": expected a hex value, an \`rgb()\`/\`rgba()\` string, or a CSS named color, but received a \`${spaceId}\` color.`
3706 + `Unsupported seed color "${seed}": expected a fully opaque hex value, an \`rgb()\`/\`rgba()\` string, or a CSS named color, but received a \`${spaceId}\` color.`
3190 3707 );
3191 3708 }
3709 + if (alpha !== 1) {
3710 + throw new Error(
3711 + `Unsupported seed color "${seed}": expected a fully opaque color.`
3712 + );
3713 + }
3714 + return parsedColor;
3192 3715 }
3193 3716 function clampToGamut(c) {
3194 - ColorSpace.register(srgb_default);
3195 - ColorSpace.register(oklch_default);
3196 3717 return to(toGamut(c, { space: srgb_default, method: "css" }), oklch_default);
3197 3718 }
3198 3719
3199 3720 // packages/theme/build-module/color-ramps/lib/constants.mjs
@@ -3237,11 +3758,16 @@
3237 3758 dependents.set(step, []);
3238 3759 });
3239 3760 Object.entries(config).forEach(([stepName, stepConfig]) => {
3240 3761 const step = stepName;
3241 - const reference = stepConfig.contrast.reference;
3242 - dependencies.get(step).push(reference);
3243 - 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 + }
3244 3770 if (stepConfig.sameAsIfPossible) {
3245 3771 dependencies.get(step).push(stepConfig.sameAsIfPossible);
3246 3772 dependents.get(stepConfig.sameAsIfPossible).push(step);
3247 3773 }
@@ -3288,8 +3814,9 @@
3288 3814 if (!stepConfig) {
3289 3815 return;
3290 3816 }
3291 3817 visit(stepConfig.contrast.reference);
3818 + stepConfig.contrast.additionalReferences?.forEach(visit);
3292 3819 if (stepConfig.sameAsIfPossible) {
3293 3820 visit(stepConfig.sameAsIfPossible);
3294 3821 }
3295 3822 result.add(step);
@@ -3296,11 +3823,20 @@
3296 3823 }
3297 3824 visit(stepName);
3298 3825 return Array.from(result);
3299 3826 }
3300 - function computeBetterFgColorDirection(seed, preferLighter) {
3301 - const contrastAgainstBlack = getContrast(seed, BLACK);
3302 - 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 + );
3303 3839 return contrastAgainstBlack > contrastAgainstWhite + (preferLighter ? WHITE_TEXT_CONTRAST_MARGIN : 0) ? { better: "darker", worse: "lighter" } : { better: "lighter", worse: "darker" };
3304 3840 }
3305 3841 function adjustContrastTarget(target) {
3306 3842 if (target === 1) {
@@ -3351,14 +3887,12 @@
3351 3887 return bestC;
3352 3888 }
3353 3889
3354 3890 // packages/theme/build-module/color-ramps/lib/taper-chroma.mjs
3355 - function taperChroma(seed, lTarget, options = {}) {
3356 - ColorSpace.register(oklch_default);
3891 + function createChromaTaper(seed, options = {}) {
3357 3892 const gamut = options.gamut ?? srgb_default;
3358 3893 const alpha = options.alpha ?? 0.65;
3359 3894 const carry = options.carry ?? 0.5;
3360 - const cUpperBound = options.cUpperBound ?? 0.45;
3361 3895 const radiusLight = options.radiusLight ?? 0.2;
3362 3896 const radiusDark = options.radiusDark ?? 0.2;
3363 3897 const kLight = options.kLight ?? 0.85;
3364 3898 const kDark = options.kDark ?? 0.85;
@@ -3370,37 +3904,34 @@
3370 3904 if (chromaIsTiny || hueIsInvalid) {
3371 3905 if (typeof options.hueFallback === "number") {
3372 3906 hSeed = normalizeHue(options.hueFallback);
3373 3907 } else {
3374 - return {
3908 + return (lTarget) => ({
3375 3909 space: oklch_default,
3376 3910 coords: [clamp01(lTarget), 0, 0],
3377 3911 alpha: 1
3378 - };
3912 + });
3379 3913 }
3380 3914 }
3381 3915 const lSeed = clamp01(get(seed, [oklch_default, "l"]));
3382 - const cmaxSeed = getCachedMaxChromaAtLH(lSeed, hSeed, gamut, cUpperBound);
3383 - const cmaxTarget = getCachedMaxChromaAtLH(
3384 - clamp01(lTarget),
3385 - hSeed,
3386 - gamut,
3387 - cUpperBound
3388 - );
3389 - let seedRelative = 0;
3916 + const cmaxSeed = getMaxChromaAtLH(lSeed, hSeed, gamut);
3390 3917 const denom = cmaxSeed > 0 ? cmaxSeed : 1e-6;
3391 - seedRelative = clamp01(cSeed / denom);
3392 - const cIntendedBase = alpha * cmaxTarget;
3393 - const cWithCarry = cIntendedBase * Math.pow(seedRelative, clamp01(carry));
3394 - const t = continuousTaper(lSeed, lTarget, {
3395 - radiusLight,
3396 - radiusDark,
3397 - kLight,
3398 - kDark
3399 - });
3400 - const cPlanned = cWithCarry * t;
3401 - const lOut = clamp01(lTarget);
3402 - 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 + };
3403 3934 }
3404 3935 function clamp01(x) {
3405 3936 if (x < 0) {
3406 3937 return 0;
@@ -3431,37 +3962,16 @@
3431 3962 const u = opts.radiusDark > 0 ? Math.abs(d2) / opts.radiusDark : 1;
3432 3963 const w = raisedCosine(u > 1 ? 1 : u);
3433 3964 return 1 - (1 - opts.kDark) * w;
3434 3965 }
3435 - var maxChromaCache = /* @__PURE__ */ new Map();
3436 - function keyMax(l, h, gamut, cap) {
3437 - const lq = quantize(l, 0.05);
3438 - const hq = quantize(normalizeHue(h), 10);
3439 - const cq = quantize(cap, 0.05);
3440 - return `${gamut}|L:${lq}|H:${hq}|cap:${cq}`;
3441 - }
3442 - function quantize(x, step) {
3443 - const k = Math.round(x / step);
3444 - return k * step;
3445 - }
3446 - function getCachedMaxChromaAtLH(l, h, gamutSpace, cap) {
3447 - const gamut = gamutSpace.id;
3448 - const key = keyMax(l, h, gamut, cap);
3449 - const hit = maxChromaCache.get(key);
3450 - if (typeof hit === "number") {
3451 - return hit;
3452 - }
3453 - const computed = maxInGamutChromaAtLH(l, h, gamutSpace, cap);
3454 - maxChromaCache.set(key, computed);
3455 - return computed;
3456 - }
3457 - function maxInGamutChromaAtLH(l, h, gamutSpace, cap) {
3966 + var MAX_CHROMA = 0.45;
3967 + function getMaxChromaAtLH(l, h, gamutSpace) {
3458 3968 const probe = {
3459 3969 space: oklch_default,
3460 - coords: [l, cap, h],
3970 + coords: [clamp01(l), MAX_CHROMA, normalizeHue(h)],
3461 3971 alpha: 1
3462 3972 };
3463 - const clamped = toGamut(probe, { space: gamutSpace, method: "css" });
3973 + const clamped = toGamutCSS(probe, { space: gamutSpace });
3464 3974 return get(clamped, [oklch_default, "c"]);
3465 3975 }
3466 3976
3467 3977 // packages/theme/build-module/color-ramps/lib/find-color-with-constraints.mjs
@@ -3478,13 +3988,16 @@
3478 3988 reached: true,
3479 3989 achieved: 1
3480 3990 };
3481 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;
3482 3995 function getColorForL(l) {
3483 3996 let newL = l;
3484 - let newC = get(seed, [oklch_default, "c"]);
3485 - if (taperChromaOptions) {
3486 - const tapered = taperChroma(seed, newL, taperChromaOptions);
3997 + let newC = seedChroma;
3998 + if (taperChromaAtLightness) {
3999 + const tapered = taperChromaAtLightness(newL);
3487 4000 if ("l" in tapered && "c" in tapered) {
3488 4001 newL = tapered.l;
3489 4002 newC = tapered.c;
3490 4003 } else {
@@ -3492,9 +4005,9 @@
3492 4005 }
3493 4006 }
3494 4007 return clampToGamut({
3495 4008 space: oklch_default,
3496 - coords: [newL, newC, get(seed, [oklch_default, "h"])],
4009 + coords: [newL, newC, seedHue],
3497 4010 alpha: seed.alpha
3498 4011 });
3499 4012 }
3500 4013 const mostContrastingL = direction === "lighter" ? 1 : 0;
@@ -3558,9 +4071,9 @@
3558 4071 let maxDeficitStep;
3559 4072 const calculatedColors = /* @__PURE__ */ new Map();
3560 4073 calculatedColors.set("seed", seed);
3561 4074 for (const stepName of sortedSteps) {
3562 - let computeDirection = function(color, followDirection) {
4075 + let computeDirection2 = function(colors, followDirection) {
3563 4076 if (followDirection === "main") {
3564 4077 return mainDir;
3565 4078 }
3566 4079 if (followDirection === "opposite") {
@@ -3567,14 +4080,15 @@
3567 4080 return oppDir;
3568 4081 }
3569 4082 if (followDirection === "best") {
3570 4083 return computeBetterFgColorDirection(
3571 - color,
4084 + colors,
3572 4085 contrast.preferLighter
3573 4086 ).better;
3574 4087 }
3575 4088 return followDirection;
3576 4089 };
4090 + var computeDirection = computeDirection2;
3577 4091 const {
3578 4092 contrast,
3579 4093 lightness: stepLightnessConstraint,
3580 4094 taperChromaOptions,
@@ -3579,14 +4093,21 @@
3579 4093 lightness: stepLightnessConstraint,
3580 4094 taperChromaOptions,
3581 4095 sameAsIfPossible
3582 4096 } = config[stepName];
3583 - const referenceColor = calculatedColors.get(contrast.reference);
3584 - if (!referenceColor) {
3585 - throw new Error(
3586 - `Reference color for step ${stepName} not found: ${contrast.reference}`
3587 - );
3588 - }
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 + });
3589 4110 if (sameAsIfPossible) {
3590 4111 const candidateColor = calculatedColors.get(sameAsIfPossible);
3591 4112 if (!candidateColor) {
3592 4113 throw new Error(
@@ -3592,23 +4113,26 @@
3592 4113 throw new Error(
3593 4114 `Same-as color for step ${stepName} not found: ${sameAsIfPossible}`
3594 4115 );
3595 4116 }
3596 - const candidateContrast = getContrast(
3597 - referenceColor,
3598 - candidateColor
4117 + const adjustedTarget2 = adjustContrastTarget(contrast.target);
4118 + const candidateMeetsTarget = referenceColors.every(
4119 + (referenceColor2) => getContrast(referenceColor2, candidateColor) >= adjustedTarget2
3599 4120 );
3600 - const adjustedTarget2 = adjustContrastTarget(contrast.target);
3601 - if (candidateContrast >= adjustedTarget2) {
4121 + if (candidateMeetsTarget) {
3602 4122 calculatedColors.set(stepName, candidateColor);
3603 4123 rampResults[stepName] = getColorString(candidateColor);
3604 4124 continue;
3605 4125 }
3606 4126 }
3607 - const computedDir = computeDirection(
3608 - referenceColor,
4127 + const computedDir = computeDirection2(
4128 + referenceColors,
3609 4129 contrast.followDirection
3610 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 + );
3611 4135 const adjustedTarget = adjustContrastTarget(contrast.target);
3612 4136 let lightnessConstraint;
3613 4137 if (pinLightness?.stepName === stepName) {
3614 4138 lightnessConstraint = {
@@ -3655,12 +4179,12 @@
3655 4179 mainDirection,
3656 4180 pinLightness,
3657 4181 rescaleToFitContrastTargets = true
3658 4182 } = {}) {
3659 - assertValidSeedColor(seedArg);
4183 + const parsedSeed = parseSeedColor(seedArg);
3660 4184 let seed;
3661 4185 try {
3662 - seed = clampToGamut(seedArg);
4186 + seed = clampToGamut(parsedSeed);
3663 4187 } catch (error) {
3664 4188 throw new Error(
3665 4189 `Invalid seed color "${seedArg}": ${error instanceof Error ? error.message : "Unknown error"}`
3666 4190 );
@@ -3690,12 +4214,13 @@
3690 4214 oppDir,
3691 4215 pinLightness
3692 4216 });
3693 4217 let bestRamp = rampResults;
4218 + let bestWarnings = warnings;
3694 4219 if (maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets) {
3695 - let getSeedForL = function(l) {
4220 + let getSeedForL2 = function(l) {
3696 4221 return clampToGamut(set(clone(seed), [oklch_default, "l"], l));
3697 - }, getDeficitForSeed = function(s) {
4222 + }, getDeficitForSeed2 = function(s) {
3698 4223 const iterationResults = calculateRamp({
3699 4224 seed: s,
3700 4225 sortedSteps: iterSteps,
3701 4226 config,
@@ -3704,8 +4229,9 @@
3704 4229 pinLightness
3705 4230 });
3706 4231 return iterationResults.maxDeficitDirection === maxDeficitDirection ? iterationResults.maxDeficit : -maxDeficit;
3707 4232 };
4233 + var getSeedForL = getSeedForL2, getDeficitForSeed = getDeficitForSeed2;
3708 4234 const iterSteps = stepsForStep(maxDeficitStep, config);
3709 4235 const lowerSeedL = maxDeficitDirection === "lighter" ? 0 : 1;
3710 4236 const lowerDeficit = -maxDeficit;
3711 4237 const upperSeedL = get(seed, [oklch_default, "l"]);
@@ -3710,16 +4236,16 @@
3710 4236 const lowerDeficit = -maxDeficit;
3711 4237 const upperSeedL = get(seed, [oklch_default, "l"]);
3712 4238 const upperDeficit = maxDeficit;
3713 4239 const bestSeed = solveWithBisect(
3714 - getSeedForL,
3715 - getDeficitForSeed,
4240 + getSeedForL2,
4241 + getDeficitForSeed2,
3716 4242 lowerSeedL,
3717 4243 lowerDeficit,
3718 4244 upperSeedL,
3719 4245 upperDeficit
3720 4246 );
3721 - bestRamp = calculateRamp({
4247 + const finalResult = calculateRamp({
3722 4248 seed: bestSeed,
3723 4249 sortedSteps,
3724 4250 config,
3725 4251 mainDir,
@@ -3724,9 +4250,11 @@
3724 4250 config,
3725 4251 mainDir,
3726 4252 oppDir,
3727 4253 pinLightness
3728 - }).rampResults;
4254 + });
4255 + bestRamp = finalResult.rampResults;
4256 + bestWarnings = finalResult.warnings;
3729 4257 }
3730 4258 if (mainDir === "darker") {
3731 4259 const tmpSurface1 = bestRamp.surface1;
3732 4260 bestRamp.surface1 = bestRamp.surface3;
@@ -3733,9 +4261,9 @@
3733 4261 bestRamp.surface3 = tmpSurface1;
3734 4262 }
3735 4263 return {
3736 4264 ramp: bestRamp,
3737 - warnings,
4265 + warnings: bestWarnings,
3738 4266 direction: mainDir
3739 4267 };
3740 4268 }
3741 4269
@@ -3924,11 +4452,12 @@
3924 4452 // fgFill
3925 4453 fgFill: {
3926 4454 contrast: {
3927 4455 reference: "bgFill1",
4456 + additionalReferences: ["bgFill2"],
3928 4457 followDirection: "best",
3929 - target: 4.5,
3930 - preferLighter: true
4458 + // Preserve the 4.5:1 WCAG floor after 8-bit sRGB serialization.
4459 + target: 4.55
3931 4460 },
3932 4461 lightness: lightnessConstraintForegroundHighContrast,
3933 4462 taperChromaOptions: FG_TAPER_CHROMA
3934 4463 },
@@ -4053,8 +4582,160 @@
4053 4582 const bgRampInfo = bgRamp ? getBgRampInfo(bgRamp) : void 0;
4054 4583 return buildRamp(seed, ACCENT_RAMP_CONFIG, bgRampInfo);
4055 4584 }
4056 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 +
4057 4738 // packages/theme/build-module/use-theme-provider-styles.mjs
4058 4739 var getCachedBgRamp = memize(buildBgRamp, { maxSize: 10 });
4059 4740 var getCachedAccentRamp = memize(buildAccentRamp, { maxSize: 10 });
4060 4741 var legacyWpComponentsOverridesCSS = [
@@ -4150,9 +4831,10 @@
4150 4831 function colorTokensCSS(computedColorRamps) {
4151 4832 const entries = [];
4152 4833 for (const [rampName, { ramp }] of computedColorRamps) {
4153 4834 for (const [tokenName, tokenValue] of Object.entries(ramp)) {
4154 - const key = `${rampName}-${tokenName}`;
4835 + const primitiveRampName = rampName === "background" ? "bg" : rampName;
4836 + const key = `${primitiveRampName}-${tokenName}`;
4155 4837 const aliasedBy = color_tokens_default[key] ?? [];
4156 4838 for (const aliasedId of aliasedBy) {
4157 4839 entries.push([`--wpds-color-${aliasedId}`, tokenValue]);
4158 4840 }
@@ -4161,14 +4843,14 @@
4161 4843 return entries;
4162 4844 }
4163 4845 function generateStyles({
4164 4846 primary,
4165 - computedColorRamps
4847 + colorEntries
4166 4848 }) {
4167 4849 return Object.fromEntries(
4168 4850 [
4169 4851 // Semantic color tokens
4170 - colorTokensCSS(computedColorRamps),
4852 + colorEntries,
4171 4853 // Legacy overrides
4172 4854 legacyWpAdminThemeOverridesCSS(primary),
4173 4855 legacyWpComponentsOverridesCSS
4174 4856 ].flat()
@@ -4173,8 +4855,35 @@
4173 4855 legacyWpComponentsOverridesCSS
4174 4856 ].flat()
4175 4857 );
4176 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 + }
4177 4886 function useThemeProviderStyles({
4178 4887 color = {},
4179 4888 cursor,
4180 4889 cornerRadius
@@ -4179,10 +4888,11 @@
4179 4888 cursor,
4180 4889 cornerRadius
4181 4890 } = {}) {
4182 4891 const { resolvedSettings: inheritedSettings } = (0, import_element2.useContext)(ThemeContext);
4183 - const primary = color.primary ?? inheritedSettings.color?.primary ?? DEFAULT_SEED_COLORS.primary;
4184 - 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;
4185 4895 const cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;
4186 4896 const cornerRadiusPreset = cornerRadius ?? inheritedSettings.cornerRadius ?? "subtle";
4187 4897 const resolvedSettings = (0, import_element2.useMemo)(
4188 4898 () => ({
@@ -4194,43 +4904,30 @@
4194 4904 cornerRadius: cornerRadiusPreset
4195 4905 }),
4196 4906 [primary, background, cursorControl, cornerRadiusPreset]
4197 4907 );
4198 - const colorStyles = (0, import_element2.useMemo)(() => {
4199 - const seeds = {
4200 - ...DEFAULT_SEED_COLORS,
4201 - background,
4202 - primary
4203 - };
4204 - const computedColorRamps = /* @__PURE__ */ new Map();
4205 - const bgRamp = getCachedBgRamp(seeds.background);
4206 - Object.entries(seeds).forEach(([rampName, seed]) => {
4207 - if (rampName === "background") {
4208 - computedColorRamps.set("bg", bgRamp);
4209 - } else {
4210 - computedColorRamps.set(
4211 - rampName,
4212 - getCachedAccentRamp(seed, bgRamp)
4213 - );
4214 - }
4215 - });
4216 - return generateStyles({
4217 - primary: seeds.primary,
4218 - computedColorRamps
4219 - });
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);
4220 4916 }, [primary, background]);
4221 4917 const themeProviderStyles = (0, import_element2.useMemo)(
4222 4918 () => ({
4223 - ...colorStyles,
4919 + ...generatedColors.styles,
4224 4920 ...cursorControl && {
4225 4921 "--wpds-cursor-control": cursorControl
4226 4922 }
4227 4923 }),
4228 - [colorStyles, cursorControl]
4924 + [generatedColors.styles, cursorControl]
4229 4925 );
4230 4926 return {
4231 4927 resolvedSettings,
4232 - themeProviderStyles
4928 + themeProviderStyles,
4929 + colorWarnings: generatedColors.warnings
4233 4930 };
4234 4931 }
4235 4932
4236 4933 // packages/theme/build-module/theme-provider.mjs
@@ -4315,11 +5012,11 @@
4315 5012 injectStyle(targetDocument, hash, css);
4316 5013 }
4317 5014 }
4318 5015 if (typeof process === "undefined" || true) {
4319 - registerStyle("f4e6e06c6a", ".dba930ea7a9438fd__root{display:contents}");
5016 + registerStyle("8d074a190c", "._0ebd6d9bf8b95794__wrapper{display:contents}");
4320 5017 }
4321 - var style_default = { "root": "dba930ea7a9438fd__root" };
5018 + var style_default = { "wrapper": "_0ebd6d9bf8b95794__wrapper" };
4322 5019 var rootProviderCountByDocument = /* @__PURE__ */ new WeakMap();
4323 5020 var ThemeProvider = ({
4324 5021 children,
4325 5022 color = {},
@@ -4324,16 +5021,18 @@
4324 5021 children,
4325 5022 color = {},
4326 5023 cursor,
4327 5024 cornerRadius,
4328 - isRoot = false
5025 + isRoot = false,
5026 + onColorWarnings
4329 5027 }) => {
4330 - const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles({
5028 + const { themeProviderStyles, resolvedSettings, colorWarnings } = useThemeProviderStyles({
4331 5029 color,
4332 5030 cursor,
4333 5031 cornerRadius
4334 5032 });
4335 5033 const cornerRadiusPreset = resolvedSettings.cornerRadius ?? "subtle";
5034 + const onColorWarningsEvent = (0, import_compose.useEvent)(onColorWarnings);
4336 5035 const contextValue = (0, import_element3.useMemo)(
4337 5036 () => ({
4338 5037 resolvedSettings
4339 5038 }),
@@ -4339,8 +5038,13 @@
4339 5038 }),
4340 5039 [resolvedSettings]
4341 5040 );
4342 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]);
4343 5047 (0, import_compose.useIsomorphicLayoutEffect)(() => {
4344 5048 if (!isRoot) {
4345 5049 return;
4346 5050 }
@@ -4359,8 +5063,16 @@
4359 5063 rootProviderCountByDocument.set(doc, active + 1);
4360 5064 }
4361 5065 const previous = /* @__PURE__ */ new Map();
4362 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);
4363 5075 for (const [rawKey, rawValue] of Object.entries(
4364 5076 themeProviderStyles
4365 5077 )) {
4366 5078 if (!rawKey.startsWith("--") || rawValue === null || rawValue === void 0) {
@@ -4386,10 +5098,26 @@
4386 5098 } else {
4387 5099 root.style.removeProperty(key);
4388 5100 }
4389 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 + }
4390 5118 };
4391 - }, [isRoot, themeProviderStyles]);
5119 + }, [cornerRadiusPreset, isRoot, themeProviderStyles]);
4392 5120 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
4393 5121 "div",
4394 5122 {
4395 5123 ref: wrapperRef,
@@ -4394,9 +5122,9 @@
4394 5122 {
4395 5123 ref: wrapperRef,
4396 5124 "data-wpds-root-provider": isRoot || void 0,
4397 5125 "data-wpds-corner-radius": cornerRadiusPreset,
4398 - className: style_default.root,
5126 + className: style_default.wrapper,
4399 5127 style: themeProviderStyles,
4400 5128 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children })
4401 5129 }
4402 5130 );
@@ -4426,6 +5154,8 @@
4426 5154 return useThemeProviderStyles;
4427 5155 }
4428 5156 });
4429 5157 return __toCommonJS(index_exports);
5158 +})();
5159 +(window.wp ||= {}).theme = wp.theme;
4430 5160 })();
4431 5161 //# sourceMappingURL=index.js.map