PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
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 +1360 -537 23.2.2 → 24.1.0 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;
@@ -30,8 +32,15 @@
30 32 mod
31 33 ));
32 34 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
33 35
36 + // package-external:@wordpress/deprecated
37 + var require_deprecated = __commonJS({
38 + "package-external:@wordpress/deprecated"(exports, module) {
39 + module.exports = window.wp.deprecated;
40 + }
41 + });
42 +
34 43 // package-external:@wordpress/private-apis
35 44 var require_private_apis = __commonJS({
36 45 "package-external:@wordpress/private-apis"(exports, module) {
37 46 module.exports = window.wp.privateApis;
@@ -44,8 +53,15 @@
44 53 module.exports = window.wp.element;
45 54 }
46 55 });
47 56
57 + // package-external:@wordpress/compose
58 + var require_compose = __commonJS({
59 + "package-external:@wordpress/compose"(exports, module) {
60 + module.exports = window.wp.compose;
61 + }
62 + });
63 +
48 64 // vendor-external:react/jsx-runtime
49 65 var require_jsx_runtime = __commonJS({
50 66 "vendor-external:react/jsx-runtime"(exports, module) {
51 67 module.exports = window.ReactJSXRuntime;
@@ -54,11 +70,15 @@
54 70
55 71 // packages/theme/build-module/index.mjs
56 72 var index_exports = {};
57 73 __export(index_exports, {
74 + ThemeProvider: () => ThemeProvider,
58 75 privateApis: () => privateApis
59 76 });
60 77
78 + // packages/theme/build-module/private-apis.mjs
79 + var import_deprecated = __toESM(require_deprecated(), 1);
80 +
61 81 // packages/theme/build-module/lock-unlock.mjs
62 82 var import_private_apis = __toESM(require_private_apis(), 1);
63 83 var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)(
64 84 "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
@@ -66,8 +86,9 @@
66 86 );
67 87
68 88 // packages/theme/build-module/theme-provider.mjs
69 89 var import_element3 = __toESM(require_element(), 1);
90 + var import_compose = __toESM(require_compose(), 1);
70 91
71 92 // packages/theme/build-module/context.mjs
72 93 var import_element = __toESM(require_element(), 1);
73 94 var ThemeContext = (0, import_element.createContext)({
@@ -72,9 +93,10 @@
72 93 var import_element = __toESM(require_element(), 1);
73 94 var ThemeContext = (0, import_element.createContext)({
74 95 resolvedSettings: {
75 96 color: {},
76 - cursor: void 0
97 + cursor: void 0,
98 + cornerRadius: void 0
77 99 }
78 100 });
79 101
80 102 // packages/theme/node_modules/colorjs.io/src/multiply-matrices.js
@@ -120,16 +142,16 @@
120 142 }
121 143 const multiplier = 10 ** (precision - digits);
122 144 return Math.floor(n2 * multiplier + 0.5) / multiplier;
123 145 }
124 - function interpolate(start, end, p2) {
125 - if (isNaN(start)) {
146 + function interpolate(start, end, p3) {
147 + if (isNone(start) || isNaN(start)) {
126 148 return end;
127 149 }
128 - if (isNaN(end)) {
150 + if (isNone(end) || isNaN(end)) {
129 151 return start;
130 152 }
131 - return start + (end - start) * p2;
153 + return start + (end - start) * p3;
132 154 }
133 155 function interpolateInv(start, end, value) {
134 156 return (value - start) / (end - start);
135 157 }
@@ -144,10 +166,10 @@
144 166 }
145 167 function copySign(to2, from) {
146 168 return Math.sign(to2) === Math.sign(from) ? to2 : -to2;
147 169 }
148 - function spow(base, exp) {
149 - return copySign(Math.abs(base) ** exp, base);
170 + function spow(base, exp2) {
171 + return copySign(Math.abs(base) ** exp2, base);
150 172 }
151 173 function zdiv(n2, d2) {
152 174 return d2 === 0 ? 0 : n2 / d2;
153 175 }
@@ -706,11 +728,26 @@
706 728 this.id = options.id;
707 729 this.name = options.name;
708 730 this.base = options.base ? _ColorSpace.get(options.base) : null;
709 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 + }
710 743 if (this.base) {
711 - this.fromBase = options.fromBase;
712 - this.toBase = options.toBase;
744 + if (options.fromBase) {
745 + this.fromBase = options.fromBase;
746 + }
747 + if (options.toBase) {
748 + this.toBase = options.toBase;
749 + }
713 750 }
714 751 let coords = options.coords ?? this.base.coords;
715 752 for (let name in coords) {
716 753 if (!("name" in coords[name])) {
@@ -745,8 +782,9 @@
745 782 this.inGamut = (coords2, options2) => {
746 783 return true;
747 784 };
748 785 }
786 + this.M = options.M ?? {};
749 787 this.referred = options.referred;
750 788 Object.defineProperty(this, "path", {
751 789 value: getPath(this).reverse(),
752 790 writable: false,
@@ -778,17 +816,31 @@
778 816 }
779 817 get cssId() {
780 818 return this.formats?.color?.id || this.id;
781 819 }
782 - 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() {
783 825 for (let id in this.coords) {
784 826 if (this.coords[id].type === "angle") {
785 - return true;
827 + return id;
786 828 }
787 829 }
788 - return false;
830 + return null;
789 831 }
790 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 + /**
791 843 * Lookup a format in this color space
792 844 * @param {string | object | Format} format - Format id if string. If object, it's converted to a `Format` object and returned.
793 845 * @returns {Format}
794 846 */
@@ -1048,9 +1100,10 @@
1048 1100 /**
1049 1101 * Creates a new RGB ColorSpace.
1050 1102 * If coords are not specified, they will use the default RGB coords.
1051 1103 * Instead of `fromBase()` and `toBase()` functions,
1052 - * 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`.
1053 1106 * @param {RGBOptions} options
1054 1107 */
1055 1108 constructor(options) {
1056 1109 if (!options.coords) {
@@ -1071,91 +1124,30 @@
1071 1124 }
1072 1125 if (!options.base) {
1073 1126 options.base = xyz_d65_default;
1074 1127 }
1075 - if (options.toXYZ_M && options.fromXYZ_M) {
1076 - options.toBase ??= (rgb) => {
1077 - let xyz = multiply_v3_m3x3(rgb, options.toXYZ_M);
1078 - if (this.white !== this.base.white) {
1079 - xyz = adapt(this.white, this.base.white, xyz);
1080 - }
1081 - return xyz;
1082 - };
1083 - options.fromBase ??= (xyz) => {
1084 - xyz = adapt(this.base.white, this.white, xyz);
1085 - return multiply_v3_m3x3(xyz, options.fromXYZ_M);
1086 - };
1087 - }
1128 + let toXYZ2 = options.toXYZ_M ?? options.M?.toXYZ;
1129 + let fromXYZ2 = options.fromXYZ_M ?? options.M?.fromXYZ;
1088 1130 options.referred ??= "display";
1089 1131 super(options);
1132 + if (toXYZ2 && fromXYZ2) {
1133 + this.M.toXYZ = toXYZ2;
1134 + this.M.fromXYZ = fromXYZ2;
1135 + }
1090 1136 }
1091 - };
1092 -
1093 - // packages/theme/node_modules/colorjs.io/src/getAll.js
1094 - function getAll(color, options) {
1095 - color = getColor(color);
1096 - let space = ColorSpace.get(options, options?.space);
1097 - let precision = options?.precision;
1098 - let coords;
1099 - if (!space || color.space.equals(space)) {
1100 - coords = color.coords.slice();
1101 - } else {
1102 - 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;
1103 1143 }
1104 - return precision === void 0 ? coords : coords.map((coord) => toPrecision(coord, precision));
1105 - }
1106 -
1107 - // packages/theme/node_modules/colorjs.io/src/get.js
1108 - function get(color, prop) {
1109 - color = getColor(color);
1110 - if (prop === "alpha") {
1111 - 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);
1112 1147 }
1113 - let { space, index } = ColorSpace.resolveCoord(prop, color.space);
1114 - let coords = getAll(color, space);
1115 - return coords[index];
1116 - }
1148 + };
1117 1149
1118 - // packages/theme/node_modules/colorjs.io/src/setAll.js
1119 - function setAll(color, space, coords, alpha) {
1120 - color = getColor(color);
1121 - if (Array.isArray(space)) {
1122 - [space, coords, alpha] = [color.space, space, coords];
1123 - }
1124 - space = ColorSpace.get(space);
1125 - color.coords = space === color.space ? coords.slice() : space.to(color.space, coords);
1126 - if (alpha !== void 0) {
1127 - color.alpha = alpha;
1128 - }
1129 - return color;
1130 - }
1131 - setAll.returns = "color";
1132 -
1133 - // packages/theme/node_modules/colorjs.io/src/set.js
1134 - function set(color, prop, value) {
1135 - color = getColor(color);
1136 - if (arguments.length === 2 && type(arguments[1]) === "object") {
1137 - let object = arguments[1];
1138 - for (let p2 in object) {
1139 - set(color, p2, object[p2]);
1140 - }
1141 - } else {
1142 - if (typeof value === "function") {
1143 - value = value(get(color, prop));
1144 - }
1145 - if (prop === "alpha") {
1146 - color.alpha = value;
1147 - } else {
1148 - let { space, index } = ColorSpace.resolveCoord(prop, color.space);
1149 - let coords = getAll(color, space);
1150 - coords[index] = value;
1151 - setAll(color, space, coords);
1152 - }
1153 - }
1154 - return color;
1155 - }
1156 - set.returns = "color";
1157 -
1158 1150 // packages/theme/node_modules/colorjs.io/src/spaces/xyz-d50.js
1159 1151 var xyz_d50_default = new ColorSpace({
1160 1152 id: "xyz-d50",
1161 1153 name: "XYZ D50",
@@ -1372,28 +1364,32 @@
1372 1364 return Math.sqrt(dE);
1373 1365 }
1374 1366
1375 1367 // packages/theme/node_modules/colorjs.io/src/spaces/oklab.js
1376 - var XYZtoLMS_M = [
1377 - [0.819022437996703, 0.3619062600528904, -0.1288737815209879],
1378 - [0.0329836539323885, 0.9292868615863434, 0.0361446663506424],
1379 - [0.0481771893596242, 0.2642395317527308, 0.6335478284694309]
1380 - ];
1381 - var LMStoXYZ_M = [
1382 - [1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
1383 - [-0.0405757452148008, 1.112286803280317, -0.0717110580655164],
1384 - [-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
1385 - ];
1386 - var LMStoLab_M = [
1387 - [0.210454268309314, 0.7936177747023054, -0.0040720430116193],
1388 - [1.9779985324311684, -2.42859224204858, 0.450593709617411],
1389 - [0.0259040424655478, 0.7827717124575296, -0.8086757549230774]
1390 - ];
1391 - var LabtoLMS_M = [
1392 - [1, 0.3963377773761749, 0.2158037573099136],
1393 - [1, -0.1055613458156586, -0.0638541728258133],
1394 - [1, -0.0894841775298119, -1.2914855480194092]
1395 - ];
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 + };
1396 1392 var oklab_default = new ColorSpace({
1397 1393 id: "oklab",
1398 1394 name: "Oklab",
1399 1395 coords: {
@@ -1410,21 +1406,22 @@
1410 1406 },
1411 1407 // Note that XYZ is relative to D65
1412 1408 white: "D65",
1413 1409 base: xyz_d65_default,
1410 + M,
1414 1411 fromBase(XYZ) {
1415 - let LMS = multiply_v3_m3x3(XYZ, XYZtoLMS_M);
1412 + let LMS = multiply_v3_m3x3(XYZ, M.XYZtoLMS);
1416 1413 LMS[0] = Math.cbrt(LMS[0]);
1417 1414 LMS[1] = Math.cbrt(LMS[1]);
1418 1415 LMS[2] = Math.cbrt(LMS[2]);
1419 - return multiply_v3_m3x3(LMS, LMStoLab_M, LMS);
1416 + return multiply_v3_m3x3(LMS, M.LMStoLab, LMS);
1420 1417 },
1421 1418 toBase(OKLab) {
1422 - let LMSg = multiply_v3_m3x3(OKLab, LabtoLMS_M);
1419 + let LMSg = multiply_v3_m3x3(OKLab, M.LabtoLMS);
1423 1420 LMSg[0] = LMSg[0] ** 3;
1424 1421 LMSg[1] = LMSg[1] ** 3;
1425 1422 LMSg[2] = LMSg[2] ** 3;
1426 - return multiply_v3_m3x3(LMSg, LMStoXYZ_M, LMSg);
1423 + return multiply_v3_m3x3(LMSg, M.LMStoXYZ, LMSg);
1427 1424 },
1428 1425 formats: {
1429 1426 oklab: {
1430 1427 coords: [
@@ -1461,8 +1458,116 @@
1461 1458 }
1462 1459 return space.inGamut(coords, { epsilon });
1463 1460 }
1464 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 +
1465 1570 // packages/theme/node_modules/colorjs.io/src/clone.js
1466 1571 function clone(color) {
1467 1572 return {
1468 1573 space: color.space,
@@ -1582,28 +1687,32 @@
1582 1687 var p = 1.7 * 2523 / 2 ** 5;
1583 1688 var pinv = 2 ** 5 / (1.7 * 2523);
1584 1689 var d = -0.56;
1585 1690 var d0 = 16295499532821565e-27;
1586 - var XYZtoCone_M = [
1587 - [0.41478972, 0.579999, 0.014648],
1588 - [-0.20151, 1.120649, 0.0531008],
1589 - [-0.0166008, 0.2648, 0.6684799]
1590 - ];
1591 - var ConetoXYZ_M = [
1592 - [1.9242264357876067, -1.0047923125953657, 0.037651404030618],
1593 - [0.35031676209499907, 0.7264811939316552, -0.06538442294808501],
1594 - [-0.09098281098284752, -0.3127282905230739, 1.5227665613052603]
1595 - ];
1596 - var ConetoIab_M = [
1597 - [0.5, 0.5, 0],
1598 - [3.524, -4.066708, 0.542708],
1599 - [0.199076, 1.096799, -1.295875]
1600 - ];
1601 - var IabtoCone_M = [
1602 - [1, 0.13860504327153927, 0.05804731615611883],
1603 - [1, -0.1386050432715393, -0.058047316156118904],
1604 - [1, -0.09601924202631895, -0.811891896056039]
1605 - ];
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 + };
1606 1715 var jzazbz_default = new ColorSpace({
1607 1716 id: "jzazbz",
1608 1717 name: "Jzazbz",
1609 1718 coords: {
@@ -1618,13 +1727,14 @@
1618 1727 refRange: [-0.21, 0.21]
1619 1728 }
1620 1729 },
1621 1730 base: xyz_abs_d65_default,
1731 + M: M2,
1622 1732 fromBase(XYZ) {
1623 1733 let [Xa, Ya, Za] = XYZ;
1624 1734 let Xm = b * Xa - (b - 1) * Za;
1625 1735 let Ym = g * Ya - (g - 1) * Xa;
1626 - let LMS = multiply_v3_m3x3([Xm, Ym, Za], XYZtoCone_M);
1736 + let LMS = multiply_v3_m3x3([Xm, Ym, Za], M2.XYZtoCone);
1627 1737 let PQLMS = (
1628 1738 /** @type {Vector3} } */
1629 1739 LMS.map(function(val) {
1630 1740 let num = c1 + c2 * spow(val / 1e4, n);
@@ -1631,9 +1741,9 @@
1631 1741 let denom = 1 + c3 * spow(val / 1e4, n);
1632 1742 return spow(num / denom, p);
1633 1743 })
1634 1744 );
1635 - let [Iz, az, bz] = multiply_v3_m3x3(PQLMS, ConetoIab_M);
1745 + let [Iz, az, bz] = multiply_v3_m3x3(PQLMS, M2.ConetoIab);
1636 1746 let Jz = (1 + d) * Iz / (1 + d * Iz) - d0;
1637 1747 return [Jz, az, bz];
1638 1748 },
1639 1749 toBase(Jzazbz) {
@@ -1638,9 +1748,9 @@
1638 1748 },
1639 1749 toBase(Jzazbz) {
1640 1750 let [Jz, az, bz] = Jzazbz;
1641 1751 let Iz = (Jz + d0) / (1 + d - d * (Jz + d0));
1642 - let PQLMS = multiply_v3_m3x3([Iz, az, bz], IabtoCone_M);
1752 + let PQLMS = multiply_v3_m3x3([Iz, az, bz], M2.IabtoCone);
1643 1753 let LMS = (
1644 1754 /** @type {Vector3} } */
1645 1755 PQLMS.map(function(val) {
1646 1756 let num = c1 - spow(val, pinv);
@@ -1648,9 +1758,9 @@
1648 1758 let x = 1e4 * spow(num / denom, ninv);
1649 1759 return x;
1650 1760 })
1651 1761 );
1652 - let [Xm, Ym, Za] = multiply_v3_m3x3(LMS, ConetoXYZ_M);
1762 + let [Xm, Ym, Za] = multiply_v3_m3x3(LMS, M2.ConetoXYZ);
1653 1763 let Xa = (Xm + (b - 1) * Za) / b;
1654 1764 let Ya = (Ym + (g - 1) * Xa) / g;
1655 1765 return [Xa, Ya, Za];
1656 1766 },
@@ -1723,28 +1833,34 @@
1723 1833 var m1 = 2610 / 16384;
1724 1834 var m2 = 2523 / 32;
1725 1835 var im1 = 16384 / 2610;
1726 1836 var im2 = 32 / 2523;
1727 - var XYZtoLMS_M2 = [
1728 - [0.3592832590121217, 0.6976051147779502, -0.035891593232029],
1729 - [-0.1920808463704993, 1.100476797037432, 0.0753748658519118],
1730 - [0.0070797844607479, 0.0748396662186362, 0.8433265453898765]
1731 - ];
1732 - var LMStoIPT_M = [
1733 - [2048 / 4096, 2048 / 4096, 0],
1734 - [6610 / 4096, -13613 / 4096, 7003 / 4096],
1735 - [17933 / 4096, -17390 / 4096, -543 / 4096]
1736 - ];
1737 - var IPTtoLMS_M = [
1738 - [0.9999999999999998, 0.0086090370379328, 0.111029625003026],
1739 - [0.9999999999999998, -0.0086090370379328, -0.1110296250030259],
1740 - [0.9999999999999998, 0.5600313357106791, -0.3206271749873188]
1741 - ];
1742 - var LMStoXYZ_M2 = [
1743 - [2.0701522183894223, -1.3263473389671563, 0.2066510476294053],
1744 - [0.3647385209748072, 0.6805660249472273, -0.0453045459220347],
1745 - [-0.0497472075358123, -0.0492609666966131, 1.1880659249923042]
1746 - ];
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 + };
1747 1863 var ictcp_default = new ColorSpace({
1748 1864 id: "ictcp",
1749 1865 name: "ICTCP",
1750 1866 // From BT.2100-2 page 7:
@@ -1772,15 +1888,16 @@
1772 1888 name: "CP"
1773 1889 }
1774 1890 },
1775 1891 base: xyz_abs_d65_default,
1892 + M: M3,
1776 1893 fromBase(XYZ) {
1777 - let LMS = multiply_v3_m3x3(XYZ, XYZtoLMS_M2);
1894 + let LMS = multiply_v3_m3x3(XYZ, M3.XYZtoLMS);
1778 1895 return LMStoICtCp(LMS);
1779 1896 },
1780 1897 toBase(ICtCp) {
1781 1898 let LMS = ICtCptoLMS(ICtCp);
1782 - return multiply_v3_m3x3(LMS, LMStoXYZ_M2);
1899 + return multiply_v3_m3x3(LMS, M3.LMStoXYZ);
1783 1900 },
1784 1901 formats: {
1785 1902 ictcp: {
1786 1903 coords: [
@@ -1799,12 +1916,12 @@
1799 1916 let denom = 1 + c32 * (val / 1e4) ** m1;
1800 1917 return (num / denom) ** m2;
1801 1918 })
1802 1919 );
1803 - return multiply_v3_m3x3(PQLMS, LMStoIPT_M);
1920 + return multiply_v3_m3x3(PQLMS, M3.LMStoIPT);
1804 1921 }
1805 1922 function ICtCptoLMS(ICtCp) {
1806 - let PQLMS = multiply_v3_m3x3(ICtCp, IPTtoLMS_M);
1923 + let PQLMS = multiply_v3_m3x3(ICtCp, M3.IPTtoLMS);
1807 1924 let LMS = (
1808 1925 /** @type {Vector3} */
1809 1926 PQLMS.map(function(val) {
1810 1927 let num = Math.max(val ** im2 - c12, 0);
@@ -1839,23 +1956,25 @@
1839 1956 var white2 = WHITES.D65;
1840 1957 var adaptedCoef = 0.42;
1841 1958 var adaptedCoefInv = 1 / adaptedCoef;
1842 1959 var tau = 2 * Math.PI;
1843 - var cat16 = [
1844 - [0.401288, 0.650173, -0.051461],
1845 - [-0.250268, 1.204414, 0.045854],
1846 - [-2079e-6, 0.048952, 0.953127]
1847 - ];
1848 - var cat16Inv = [
1849 - [1.8620678550872327, -1.0112546305316843, 0.14918677544445175],
1850 - [0.38752654323613717, 0.6214474419314753, -0.008973985167612518],
1851 - [-0.015841498849333856, -0.03412293802851557, 1.0499644368778496]
1852 - ];
1853 - var m12 = [
1854 - [460, 451, 288],
1855 - [460, -891, -261],
1856 - [460, -220, -6300]
1857 - ];
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 + };
1858 1977 var surroundMap = {
1859 1978 dark: [0.8, 0.525, 0.8],
1860 1979 dim: [0.9, 0.59, 0.9],
1861 1980 average: [1, 0.69, 1]
@@ -1921,9 +2040,9 @@
1921 2040 );
1922 2041 env.la = adaptingLuminance;
1923 2042 env.yb = backgroundLuminance;
1924 2043 const yw = xyzW[1];
1925 - const rgbW = multiply_v3_m3x3(xyzW, cat16);
2044 + const rgbW = multiply_v3_m3x3(xyzW, M4.cat16);
1926 2045 let values = surroundMap[env.surround];
1927 2046 const f = values[0];
1928 2047 env.c = values[1];
1929 2048 env.nc = values[2];
@@ -1993,15 +2112,15 @@
1993 2112 const t = spow(alpha * Math.pow(1.64 - Math.pow(0.29, env.n), -0.73), 10 / 9);
1994 2113 const et = 0.25 * (Math.cos(hRad + 2) + 3.8);
1995 2114 const A = env.aW * spow(Jroot, 2 / env.c / env.z);
1996 2115 const p1 = 5e4 / 13 * env.nc * env.ncb * et;
1997 - const p2 = A / env.nbb;
1998 - 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));
1999 2118 const a = r * cosh;
2000 2119 const b2 = r * sinh;
2001 2120 const rgb_c = unadapt(
2002 2121 /** @type {Vector3} */
2003 - multiply_v3_m3x3([p2, a, b2], m12).map((c) => {
2122 + multiply_v3_m3x3([p22, a, b2], M4.m1).map((c) => {
2004 2123 return c * 1 / 1403;
2005 2124 }),
2006 2125 env.fl
2007 2126 );
@@ -2011,9 +2130,9 @@
2011 2130 /** @type {Vector3} */
2012 2131 rgb_c.map((c, i) => {
2013 2132 return c * env.dRgbInv[i];
2014 2133 }),
2015 - cat16Inv
2134 + M4.cat16Inv
2016 2135 ).map((c) => {
2017 2136 return c / 100;
2018 2137 })
2019 2138 );
@@ -2026,9 +2145,9 @@
2026 2145 })
2027 2146 );
2028 2147 const rgbA = adapt2(
2029 2148 /** @type {[number, number, number]} */
2030 - multiply_v3_m3x3(xyz100, cat16).map((c, i) => {
2149 + multiply_v3_m3x3(xyz100, M4.cat16).map((c, i) => {
2031 2150 return c * env.dRgb[i];
2032 2151 }),
2033 2152 env.fl
2034 2153 );
@@ -2042,13 +2161,13 @@
2042 2161 const Jroot = spow(A / env.aW, 0.5 * env.c * env.z);
2043 2162 const J = 100 * spow(Jroot, 2);
2044 2163 const Q = 4 / env.c * Jroot * (env.aW + 4) * env.flRoot;
2045 2164 const C = alpha * Jroot;
2046 - const M = C * env.flRoot;
2165 + const colorfulness = C * env.flRoot;
2047 2166 const h = constrain(hRad * rad2deg);
2048 2167 const H = hueQuadrature(h);
2049 2168 const s = 50 * spow(env.c * alpha / (env.aW + 4), 1 / 2);
2050 - return { J, C, h, s, Q, M, H };
2169 + return { J, C, h, s, Q, M: colorfulness, H };
2051 2170 }
2052 2171 var cam16_default = new ColorSpace({
2053 2172 id: "cam16-jmh",
2054 2173 cssId: "--cam16-jmh",
@@ -2068,8 +2187,9 @@
2068 2187 name: "Hue"
2069 2188 }
2070 2189 },
2071 2190 base: xyz_d65_default,
2191 + M: M4,
2072 2192 fromBase(xyz) {
2073 2193 if (this.\u03B5 === void 0) {
2074 2194 this.\u03B5 = Object.values(this.coords)[1].refRange[1] / 1e5;
2075 2195 }
@@ -2109,9 +2229,9 @@
2109 2229 const threshold = 2e-12;
2110 2230 const max_attempts = 15;
2111 2231 let attempt = 0;
2112 2232 let last = Infinity;
2113 - let best = j;
2233 + let best = [0, 0, 0];
2114 2234 while (attempt <= max_attempts) {
2115 2235 xyz = fromCam16({ J: j, C: c, h }, env);
2116 2236 const delta = Math.abs(xyz[1] - y);
2117 2237 if (delta < last) {
@@ -2117,15 +2237,15 @@
2117 2237 if (delta < last) {
2118 2238 if (delta <= threshold) {
2119 2239 return xyz;
2120 2240 }
2121 - best = j;
2241 + best = xyz;
2122 2242 last = delta;
2123 2243 }
2124 2244 j = j - (xyz[1] - y) * j / (2 * xyz[1]);
2125 2245 attempt += 1;
2126 2246 }
2127 - return fromCam16({ J: j, C: c, h }, env);
2247 + return best;
2128 2248 }
2129 2249 function toHct(xyz, env) {
2130 2250 const t = toLstar(xyz[1]);
2131 2251 if (t === 0) {
@@ -2189,12 +2309,12 @@
2189 2309 function convertUcsAb(coords) {
2190 2310 if (coords[1] < 0) {
2191 2311 coords = hct_default.fromBase(hct_default.toBase(coords));
2192 2312 }
2193 - 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];
2194 2314 const hrad = coords[0] * deg2rad2;
2195 - const a = M * Math.cos(hrad);
2196 - const b2 = M * Math.sin(hrad);
2315 + const a = M7 * Math.cos(hrad);
2316 + const b2 = M7 * Math.sin(hrad);
2197 2317 return [coords[2], a, b2];
2198 2318 }
2199 2319 function deltaEHCT_default(color, sample) {
2200 2320 [color, sample] = getColor([color, sample]);
@@ -2202,8 +2322,310 @@
2202 2322 let [t2, a2, b2] = convertUcsAb(hct_default.from(sample));
2203 2323 return Math.sqrt((t1 - t2) ** 2 + (a1 - a2) ** 2 + (b1 - b2) ** 2);
2204 2324 }
2205 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 +
2206 2628 // packages/theme/node_modules/colorjs.io/src/deltaE/index.js
2207 2629 var deltaE_default = {
2208 2630 deltaE76,
2209 2631 deltaECMC: deltaECMC_default,
@@ -2211,9 +2633,10 @@
2211 2633 deltaEJz: deltaEJz_default,
2212 2634 deltaEITP: deltaEITP_default,
2213 2635 deltaEOK: deltaEOK_default,
2214 2636 deltaEOK2: deltaEOK2_default,
2215 - deltaEHCT: deltaEHCT_default
2637 + deltaEHCT: deltaEHCT_default,
2638 + deltaEHelmlab: deltaEHelmlab_default
2216 2639 };
2217 2640
2218 2641 // packages/theme/node_modules/colorjs.io/src/toGamut.js
2219 2642 function calcEpsilon(jnd) {
@@ -2256,10 +2679,12 @@
2256 2679 }
2257 2680 let spaceColor;
2258 2681 if (method === "css") {
2259 2682 spaceColor = toGamutCSS(color, { space });
2683 + } else if (method === "raytrace") {
2684 + spaceColor = toGamutRayTrace(color, { space });
2260 2685 } else {
2261 - if (method !== "clip" && !inGamut(color, space)) {
2686 + if (method !== "clip") {
2262 2687 if (Object.prototype.hasOwnProperty.call(GMAPPRESET, method)) {
2263 2688 ({ method, jnd, deltaEMethod, blackWhiteClamp } = GMAPPRESET[method]);
2264 2689 }
2265 2690 let de = deltaE2000_default;
@@ -2358,13 +2783,12 @@
2358 2783 if (!space) {
2359 2784 space = origin.space;
2360 2785 }
2361 2786 space = ColorSpace.get(space);
2362 - const oklchSpace = ColorSpace.get("oklch");
2363 2787 if (space.isUnbounded) {
2364 2788 return to(origin, space);
2365 2789 }
2366 - const origin_OKLCH = to(origin, oklchSpace);
2790 + const origin_OKLCH = to(origin, oklch_default);
2367 2791 let L = origin_OKLCH.coords[0];
2368 2792 if (L >= 1) {
2369 2793 const white4 = to(COLORS.WHITE, space);
2370 2794 white4.alpha = origin.alpha;
@@ -2424,21 +2848,131 @@
2424 2848 }
2425 2849 }
2426 2850 return clipped;
2427 2851 }
2428 -
2429 - // packages/theme/node_modules/colorjs.io/src/to.js
2430 - function to(color, space, { inGamut: inGamut2 } = {}) {
2431 - 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 + }
2432 2893 space = ColorSpace.get(space);
2433 - let coords = space.from(color);
2434 - let ret = { space, coords, alpha: color.alpha };
2435 - if (inGamut2) {
2436 - ret = toGamut(ret, inGamut2 === true ? void 0 : inGamut2);
2894 + if (space.isUnbounded) {
2895 + return to(origin, space);
2437 2896 }
2438 - 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;
2439 2974 }
2440 - to.returns = "color";
2441 2975
2442 2976 // packages/theme/node_modules/colorjs.io/src/serialize.js
2443 2977 function serialize(color, options = {}) {
2444 2978 let {
@@ -2518,45 +3052,31 @@
2518 3052 }
2519 3053 return ret;
2520 3054 }
2521 3055
2522 - // packages/theme/node_modules/colorjs.io/src/spaces/p3-linear.js
2523 - var toXYZ_M = [
2524 - [0.4865709486482162, 0.26566769316909306, 0.1982172852343625],
2525 - [0.2289745640697488, 0.6917385218365064, 0.079286914093745],
2526 - [0, 0.04511338185890264, 1.043944368900976]
2527 - ];
2528 - var fromXYZ_M = [
2529 - [2.493496911941425, -0.9313836179191239, -0.40271078445071684],
2530 - [-0.8294889695615747, 1.7626640603183463, 0.023624685841943577],
2531 - [0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
2532 - ];
2533 - var p3_linear_default = new RGBColorSpace({
2534 - id: "p3-linear",
2535 - cssId: "display-p3-linear",
2536 - name: "Linear P3",
2537 - white: "D65",
2538 - toXYZ_M,
2539 - fromXYZ_M
2540 - });
2541 -
2542 3056 // packages/theme/node_modules/colorjs.io/src/spaces/srgb-linear.js
2543 - var toXYZ_M2 = [
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_M2 = [
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: toXYZ_M2,
2558 - fromXYZ_M: fromXYZ_M2
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,18 +3344,14 @@
2823 3344 }
2824 3345 }
2825 3346 });
2826 3347
2827 - // packages/theme/node_modules/colorjs.io/src/spaces/p3.js
2828 - var p3_default = new RGBColorSpace({
2829 - id: "p3",
2830 - cssId: "display-p3",
2831 - name: "P3",
2832 - base: p3_linear_default,
2833 - // Gamma encoding/decoding is the same as sRGB
2834 - fromBase: srgb_default.fromBase,
2835 - toBase: srgb_default.toBase
2836 - });
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 + }
2837 3354
2838 3355 // packages/theme/node_modules/colorjs.io/src/luminance.js
2839 3356 function getLuminance(color) {
2840 3357 return get(color, [xyz_d65_default, "y"]);
@@ -2839,20 +3356,8 @@
2839 3356 function getLuminance(color) {
2840 3357 return get(color, [xyz_d65_default, "y"]);
2841 3358 }
2842 3359
2843 - // packages/theme/node_modules/colorjs.io/src/contrast/WCAG21.js
2844 - function contrastWCAG21(color1, color2) {
2845 - color1 = getColor(color1);
2846 - color2 = getColor(color2);
2847 - let Y1 = Math.max(getLuminance(color1), 0);
2848 - let Y2 = Math.max(getLuminance(color2), 0);
2849 - if (Y2 > Y1) {
2850 - [Y1, Y2] = [Y2, Y1];
2851 - }
2852 - return (Y1 + 0.05) / (Y2 + 0.05);
2853 - }
2854 -
2855 3360 // packages/theme/node_modules/colorjs.io/src/spaces/hsl.js
2856 3361 var hsl_default = new ColorSpace({
2857 3362 id: "hsl",
2858 3363 name: "HSL",
@@ -2871,8 +3376,9 @@
2871 3376 name: "Lightness"
2872 3377 }
2873 3378 },
2874 3379 base: srgb_default,
3380 + rgbGamut: srgb_default,
2875 3381 // Adapted from https://drafts.csswg.org/css-color-4/better-rgbToHsl.js
2876 3382 fromBase: (rgb) => {
2877 3383 let max = Math.max(...rgb);
2878 3384 let min = Math.min(...rgb);
@@ -2929,38 +3435,8 @@
2929 3435 }
2930 3436 }
2931 3437 });
2932 3438
2933 - // packages/theme/node_modules/colorjs.io/src/spaces/oklch.js
2934 - var oklch_default = new ColorSpace({
2935 - id: "oklch",
2936 - name: "OkLCh",
2937 - coords: {
2938 - l: {
2939 - refRange: [0, 1],
2940 - name: "Lightness"
2941 - },
2942 - c: {
2943 - refRange: [0, 0.4],
2944 - name: "Chroma"
2945 - },
2946 - h: {
2947 - refRange: [0, 360],
2948 - type: "angle",
2949 - name: "Hue"
2950 - }
2951 - },
2952 - white: "D65",
2953 - base: oklab_default,
2954 - fromBase: lch_default.fromBase,
2955 - toBase: lch_default.toBase,
2956 - formats: {
2957 - oklch: {
2958 - coords: ["<percentage> | <number>", "<number> | <percentage>", "<number> | <angle>"]
2959 - }
2960 - }
2961 - });
2962 -
2963 3439 // node_modules/memize/dist/index.js
2964 3440 function memize(fn, options) {
2965 3441 var size = 0;
2966 3442 var head;
@@ -3030,74 +3506,78 @@
3030 3506
3031 3507 // packages/theme/build-module/use-theme-provider-styles.mjs
3032 3508 var import_element2 = __toESM(require_element(), 1);
3033 3509
3034 - // packages/theme/build-module/color-ramps/lib/register-color-spaces.mjs
3035 - ColorSpace.register(srgb_default);
3036 - ColorSpace.register(oklch_default);
3037 - ColorSpace.register(p3_default);
3038 - ColorSpace.register(hsl_default);
3039 -
3040 3510 // packages/theme/build-module/prebuilt/ts/color-tokens.mjs
3041 3511 var color_tokens_default = {
3042 - "primary-bgFill1": ["bg-interactive-brand-strong"],
3512 + transparent: [
3513 + "background-interactive-brand-weak",
3514 + "background-interactive-brand-weak-disabled",
3515 + "background-interactive-error",
3516 + "background-interactive-error-disabled",
3517 + "background-interactive-error-weak",
3518 + "background-interactive-error-weak-disabled",
3519 + "background-interactive-neutral-weak",
3520 + "background-interactive-neutral-weak-disabled"
3521 + ],
3522 + "primary-bgFill1": ["background-interactive-brand-strong"],
3523 + "primary-bgFill2": ["background-interactive-brand-strong-active"],
3043 3524 "primary-fgFill": [
3044 - "fg-interactive-brand-strong",
3045 - "fg-interactive-brand-strong-active"
3525 + "foreground-interactive-brand-strong",
3526 + "foreground-interactive-brand-strong-active"
3046 3527 ],
3047 - "primary-bgFill2": ["bg-interactive-brand-strong-active"],
3048 - "primary-surface4": ["bg-interactive-brand-weak-active"],
3049 - "primary-fgSurface3": [
3050 - "fg-interactive-brand",
3051 - "fg-interactive-brand-active"
3052 - ],
3528 + "primary-surface4": ["background-interactive-brand-weak-active"],
3529 + "primary-fgSurface4": ["foreground-interactive-brand-active"],
3530 + "primary-fgSurface3": ["foreground-interactive-brand"],
3053 3531 "primary-stroke3": [
3054 - "bg-thumb-brand",
3055 - "bg-thumb-brand-active",
3056 - "stroke-focus-brand",
3532 + "background-thumb-brand",
3533 + "background-thumb-brand-active",
3534 + "stroke-focus",
3057 3535 "stroke-interactive-brand",
3058 3536 "stroke-surface-brand-strong"
3059 3537 ],
3060 3538 "primary-stroke4": ["stroke-interactive-brand-active"],
3061 3539 "primary-stroke1": ["stroke-surface-brand"],
3062 - "primary-surface1": ["bg-surface-brand"],
3063 - "info-surface2": ["bg-surface-info-weak"],
3064 - "info-surface4": ["bg-surface-info"],
3065 - "info-fgSurface4": ["fg-content-info"],
3066 - "info-fgSurface3": ["fg-content-info-weak"],
3540 + "primary-surface1": ["background-surface-brand"],
3541 + "info-surface2": ["background-surface-info-weak"],
3542 + "info-surface4": ["background-surface-info"],
3543 + "info-fgSurface4": ["foreground-content-info"],
3544 + "info-fgSurface3": ["foreground-content-info-weak"],
3067 3545 "info-stroke3": ["stroke-surface-info-strong"],
3068 3546 "info-stroke1": ["stroke-surface-info"],
3069 - "success-surface2": ["bg-surface-success-weak"],
3070 - "success-surface4": ["bg-surface-success"],
3071 - "success-fgSurface4": ["fg-content-success"],
3072 - "success-fgSurface3": ["fg-content-success-weak"],
3547 + "success-surface2": ["background-surface-success-weak"],
3548 + "success-surface4": ["background-surface-success"],
3549 + "success-fgSurface4": ["foreground-content-success"],
3550 + "success-fgSurface3": ["foreground-content-success-weak"],
3073 3551 "success-stroke3": ["stroke-surface-success-strong"],
3074 3552 "success-stroke1": ["stroke-surface-success"],
3075 - "warning-surface2": ["bg-surface-warning-weak"],
3076 - "warning-surface4": ["bg-surface-warning"],
3077 - "warning-fgSurface4": ["fg-content-warning"],
3078 - "warning-fgSurface3": ["fg-content-warning-weak"],
3553 + "warning-surface2": ["background-surface-warning-weak"],
3554 + "warning-surface4": ["background-surface-warning"],
3555 + "warning-fgSurface4": ["foreground-content-warning"],
3556 + "warning-fgSurface3": ["foreground-content-warning-weak"],
3079 3557 "warning-stroke3": ["stroke-surface-warning-strong"],
3080 3558 "warning-stroke1": ["stroke-surface-warning"],
3081 - "error-bgFill1": ["bg-interactive-error-strong"],
3559 + "error-bgFill1": ["background-interactive-error-strong"],
3560 + "error-bgFill2": ["background-interactive-error-strong-active"],
3082 3561 "error-fgFill": [
3083 - "fg-interactive-error-strong",
3084 - "fg-interactive-error-strong-active"
3562 + "foreground-interactive-error-strong",
3563 + "foreground-interactive-error-strong-active"
3085 3564 ],
3086 - "error-bgFill2": ["bg-interactive-error-strong-active"],
3087 3565 "error-surface2": [
3088 - "bg-interactive-error-active",
3089 - "bg-surface-error-weak"
3566 + "background-interactive-error-active",
3567 + "background-surface-error-weak"
3090 3568 ],
3091 3569 "error-surface4": [
3092 - "bg-interactive-error-weak-active",
3093 - "bg-surface-error"
3570 + "background-interactive-error-weak-active",
3571 + "background-surface-error"
3094 3572 ],
3095 - "error-fgSurface4": ["fg-content-error"],
3573 + "error-fgSurface4": [
3574 + "foreground-content-error",
3575 + "foreground-interactive-error-active"
3576 + ],
3096 3577 "error-fgSurface3": [
3097 - "fg-content-error-weak",
3098 - "fg-interactive-error",
3099 - "fg-interactive-error-active"
3578 + "foreground-content-error-weak",
3579 + "foreground-interactive-error"
3100 3580 ],
3101 3581 "error-stroke3": [
3102 3582 "stroke-interactive-error",
3103 3583 "stroke-interactive-error-strong",
@@ -3104,71 +3584,151 @@
3104 3584 "stroke-surface-error-strong"
3105 3585 ],
3106 3586 "error-stroke4": ["stroke-interactive-error-active"],
3107 3587 "error-stroke1": ["stroke-surface-error"],
3108 - "bg-surface2": ["bg-surface-neutral"],
3109 - "bg-surface5": ["bg-interactive-neutral-strong-disabled"],
3110 - "bg-surface4": ["bg-interactive-neutral-weak-active"],
3111 - "bg-surface3": ["bg-surface-neutral-strong"],
3588 + "bg-surface2": ["background-surface-neutral"],
3589 + "bg-surface5": [
3590 + "background-interactive-brand-strong-disabled",
3591 + "background-interactive-error-strong-disabled",
3592 + "background-interactive-neutral-strong-disabled"
3593 + ],
3594 + "bg-surface4": ["background-interactive-neutral-weak-active"],
3595 + "bg-surface3": [
3596 + "background-interactive-neutral",
3597 + "background-interactive-neutral-active",
3598 + "background-interactive-neutral-disabled",
3599 + "background-surface-neutral-strong"
3600 + ],
3112 3601 "bg-fgSurface4": [
3113 - "fg-content-neutral",
3114 - "fg-interactive-neutral",
3115 - "fg-interactive-neutral-active"
3602 + "foreground-content-neutral",
3603 + "foreground-interactive-neutral",
3604 + "foreground-interactive-neutral-active",
3605 + "foreground-interactive-neutral-weak-active"
3116 3606 ],
3117 3607 "bg-fgSurface3": [
3118 - "fg-content-neutral-weak",
3119 - "fg-interactive-neutral-weak"
3608 + "foreground-content-neutral-weak",
3609 + "foreground-interactive-neutral-weak"
3120 3610 ],
3121 3611 "bg-fgSurface2": [
3122 - "fg-interactive-neutral-disabled",
3123 - "fg-interactive-neutral-strong-disabled",
3124 - "fg-interactive-neutral-weak-disabled"
3612 + "foreground-interactive-brand-disabled",
3613 + "foreground-interactive-brand-strong-disabled",
3614 + "foreground-interactive-error-disabled",
3615 + "foreground-interactive-error-strong-disabled",
3616 + "foreground-interactive-neutral-disabled",
3617 + "foreground-interactive-neutral-strong-disabled",
3618 + "foreground-interactive-neutral-weak-disabled"
3125 3619 ],
3126 3620 "bg-stroke3": [
3127 - "bg-thumb-neutral-weak",
3621 + "background-thumb-neutral-weak",
3128 3622 "stroke-interactive-neutral",
3129 3623 "stroke-surface-neutral-strong"
3130 3624 ],
3131 3625 "bg-stroke4": [
3132 - "bg-thumb-neutral-weak-active",
3626 + "background-thumb-neutral-weak-active",
3133 3627 "stroke-interactive-neutral-active",
3134 3628 "stroke-interactive-neutral-strong"
3135 3629 ],
3136 3630 "bg-stroke2": [
3137 - "bg-thumb-neutral-disabled",
3138 - "bg-track-neutral",
3631 + "background-thumb-brand-disabled",
3632 + "background-thumb-neutral-weak-disabled",
3633 + "background-track-neutral",
3634 + "stroke-interactive-brand-disabled",
3635 + "stroke-interactive-error-disabled",
3139 3636 "stroke-interactive-neutral-disabled",
3140 3637 "stroke-surface-neutral"
3141 3638 ],
3142 - "bg-stroke1": ["bg-track-neutral-weak", "stroke-surface-neutral-weak"],
3143 - "bg-bgFillInverted2": ["bg-interactive-neutral-strong-active"],
3144 - "bg-bgFillInverted1": ["bg-interactive-neutral-strong"],
3639 + "bg-stroke1": [
3640 + "background-track-neutral-weak",
3641 + "stroke-surface-neutral-weak"
3642 + ],
3643 + "bg-bgFillInverted2": ["background-interactive-neutral-strong-active"],
3644 + "bg-bgFillInverted1": ["background-interactive-neutral-strong"],
3145 3645 "bg-fgFillInverted": [
3146 - "fg-interactive-neutral-strong",
3147 - "fg-interactive-neutral-strong-active"
3646 + "foreground-interactive-neutral-strong",
3647 + "foreground-interactive-neutral-strong-active"
3148 3648 ],
3149 - "bg-surface1": ["bg-surface-neutral-weak"],
3150 - "caution-surface2": ["bg-surface-caution-weak"],
3151 - "caution-surface4": ["bg-surface-caution"],
3152 - "caution-fgSurface4": ["fg-content-caution"],
3153 - "caution-fgSurface3": ["fg-content-caution-weak"]
3649 + "bg-surface1": ["background-surface-neutral-weak"],
3650 + "caution-surface2": ["background-surface-caution-weak"],
3651 + "caution-surface4": ["background-surface-caution"],
3652 + "caution-fgSurface4": ["foreground-content-caution"],
3653 + "caution-fgSurface3": ["foreground-content-caution-weak"],
3654 + "caution-stroke3": ["stroke-surface-caution-strong"],
3655 + "caution-stroke1": ["stroke-surface-caution"]
3154 3656 };
3155 3657
3156 3658 // packages/theme/build-module/color-ramps/lib/color-utils.mjs
3659 + var ALLOWED_SEED_COLOR_SPACES = [srgb_default];
3660 + var objectLuminanceCache = /* @__PURE__ */ new WeakMap();
3157 3661 function getColorString(color) {
3662 + ColorSpace.register(srgb_default);
3158 3663 const rgbRounded = serialize(to(color, srgb_default));
3159 3664 return serialize(rgbRounded, { format: "hex" });
3160 3665 }
3161 3666 function getContrast(colorA, colorB) {
3162 - return contrastWCAG21(colorA, colorB);
3667 + return getContrastFromLuminances(
3668 + getRelativeLuminance(colorA),
3669 + getRelativeLuminance(colorB)
3670 + );
3163 3671 }
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) {
3692 + ALLOWED_SEED_COLOR_SPACES.forEach(
3693 + (space) => ColorSpace.register(space)
3694 + );
3695 + let parsedColor;
3696 + try {
3697 + parsedColor = parse(seed);
3698 + } catch {
3699 + throw new Error(
3700 + `Unsupported seed color "${seed}": expected a fully opaque hex value, an \`rgb()\`/\`rgba()\` string, or a CSS named color.`
3701 + );
3702 + }
3703 + const { alpha = 1, spaceId } = parsedColor;
3704 + if (!ALLOWED_SEED_COLOR_SPACES.some((space) => space.id === spaceId)) {
3705 + throw new Error(
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.`
3707 + );
3708 + }
3709 + if (alpha !== 1) {
3710 + throw new Error(
3711 + `Unsupported seed color "${seed}": expected a fully opaque color.`
3712 + );
3713 + }
3714 + return parsedColor;
3715 + }
3164 3716 function clampToGamut(c) {
3165 3717 return to(toGamut(c, { space: srgb_default, method: "css" }), oklch_default);
3166 3718 }
3167 3719
3168 3720 // packages/theme/build-module/color-ramps/lib/constants.mjs
3169 - var WHITE = to("white", oklch_default);
3170 - var BLACK = to("black", oklch_default);
3721 + var WHITE = {
3722 + space: oklch_default,
3723 + coords: [1, 0, 0],
3724 + alpha: 1
3725 + };
3726 + var BLACK = {
3727 + space: oklch_default,
3728 + coords: [0, 0, 0],
3729 + alpha: 1
3730 + };
3171 3731 var UNIVERSAL_CONTRAST_TOPUP = 0.02;
3172 3732 var WHITE_TEXT_CONTRAST_MARGIN = 3.1;
3173 3733 var ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
3174 3734 lighter: { min: 0.2, max: 0.4 },
@@ -3176,9 +3736,9 @@
3176 3736 };
3177 3737 var CONTRAST_EPSILON = 4e-3;
3178 3738 var MAX_BISECTION_ITERATIONS = 10;
3179 3739 var DEFAULT_SEED_COLORS = {
3180 - bg: "#fcfcfc",
3740 + background: "#fcfcfc",
3181 3741 primary: "#3858e9",
3182 3742 info: "#0090ff",
3183 3743 success: "#4ab866",
3184 3744 caution: "#f0d149",
@@ -3198,11 +3758,16 @@
3198 3758 dependents.set(step, []);
3199 3759 });
3200 3760 Object.entries(config).forEach(([stepName, stepConfig]) => {
3201 3761 const step = stepName;
3202 - const reference = stepConfig.contrast.reference;
3203 - dependencies.get(step).push(reference);
3204 - 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 + }
3205 3770 if (stepConfig.sameAsIfPossible) {
3206 3771 dependencies.get(step).push(stepConfig.sameAsIfPossible);
3207 3772 dependents.get(stepConfig.sameAsIfPossible).push(step);
3208 3773 }
@@ -3249,8 +3814,9 @@
3249 3814 if (!stepConfig) {
3250 3815 return;
3251 3816 }
3252 3817 visit(stepConfig.contrast.reference);
3818 + stepConfig.contrast.additionalReferences?.forEach(visit);
3253 3819 if (stepConfig.sameAsIfPossible) {
3254 3820 visit(stepConfig.sameAsIfPossible);
3255 3821 }
3256 3822 result.add(step);
@@ -3257,11 +3823,20 @@
3257 3823 }
3258 3824 visit(stepName);
3259 3825 return Array.from(result);
3260 3826 }
3261 - function computeBetterFgColorDirection(seed, preferLighter) {
3262 - const contrastAgainstBlack = getContrast(seed, BLACK);
3263 - 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 + );
3264 3839 return contrastAgainstBlack > contrastAgainstWhite + (preferLighter ? WHITE_TEXT_CONTRAST_MARGIN : 0) ? { better: "darker", worse: "lighter" } : { better: "lighter", worse: "darker" };
3265 3840 }
3266 3841 function adjustContrastTarget(target) {
3267 3842 if (target === 1) {
@@ -3312,13 +3887,12 @@
3312 3887 return bestC;
3313 3888 }
3314 3889
3315 3890 // packages/theme/build-module/color-ramps/lib/taper-chroma.mjs
3316 - function taperChroma(seed, lTarget, options = {}) {
3891 + function createChromaTaper(seed, options = {}) {
3317 3892 const gamut = options.gamut ?? srgb_default;
3318 3893 const alpha = options.alpha ?? 0.65;
3319 3894 const carry = options.carry ?? 0.5;
3320 - const cUpperBound = options.cUpperBound ?? 0.45;
3321 3895 const radiusLight = options.radiusLight ?? 0.2;
3322 3896 const radiusDark = options.radiusDark ?? 0.2;
3323 3897 const kLight = options.kLight ?? 0.85;
3324 3898 const kDark = options.kDark ?? 0.85;
@@ -3330,37 +3904,34 @@
3330 3904 if (chromaIsTiny || hueIsInvalid) {
3331 3905 if (typeof options.hueFallback === "number") {
3332 3906 hSeed = normalizeHue(options.hueFallback);
3333 3907 } else {
3334 - return {
3908 + return (lTarget) => ({
3335 3909 space: oklch_default,
3336 3910 coords: [clamp01(lTarget), 0, 0],
3337 3911 alpha: 1
3338 - };
3912 + });
3339 3913 }
3340 3914 }
3341 3915 const lSeed = clamp01(get(seed, [oklch_default, "l"]));
3342 - const cmaxSeed = getCachedMaxChromaAtLH(lSeed, hSeed, gamut, cUpperBound);
3343 - const cmaxTarget = getCachedMaxChromaAtLH(
3344 - clamp01(lTarget),
3345 - hSeed,
3346 - gamut,
3347 - cUpperBound
3348 - );
3349 - let seedRelative = 0;
3916 + const cmaxSeed = getMaxChromaAtLH(lSeed, hSeed, gamut);
3350 3917 const denom = cmaxSeed > 0 ? cmaxSeed : 1e-6;
3351 - seedRelative = clamp01(cSeed / denom);
3352 - const cIntendedBase = alpha * cmaxTarget;
3353 - const cWithCarry = cIntendedBase * Math.pow(seedRelative, clamp01(carry));
3354 - const t = continuousTaper(lSeed, lTarget, {
3355 - radiusLight,
3356 - radiusDark,
3357 - kLight,
3358 - kDark
3359 - });
3360 - const cPlanned = cWithCarry * t;
3361 - const lOut = clamp01(lTarget);
3362 - 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 + };
3363 3934 }
3364 3935 function clamp01(x) {
3365 3936 if (x < 0) {
3366 3937 return 0;
@@ -3391,37 +3962,16 @@
3391 3962 const u = opts.radiusDark > 0 ? Math.abs(d2) / opts.radiusDark : 1;
3392 3963 const w = raisedCosine(u > 1 ? 1 : u);
3393 3964 return 1 - (1 - opts.kDark) * w;
3394 3965 }
3395 - var maxChromaCache = /* @__PURE__ */ new Map();
3396 - function keyMax(l, h, gamut, cap) {
3397 - const lq = quantize(l, 0.05);
3398 - const hq = quantize(normalizeHue(h), 10);
3399 - const cq = quantize(cap, 0.05);
3400 - return `${gamut}|L:${lq}|H:${hq}|cap:${cq}`;
3401 - }
3402 - function quantize(x, step) {
3403 - const k = Math.round(x / step);
3404 - return k * step;
3405 - }
3406 - function getCachedMaxChromaAtLH(l, h, gamutSpace, cap) {
3407 - const gamut = gamutSpace.id;
3408 - const key = keyMax(l, h, gamut, cap);
3409 - const hit = maxChromaCache.get(key);
3410 - if (typeof hit === "number") {
3411 - return hit;
3412 - }
3413 - const computed = maxInGamutChromaAtLH(l, h, gamutSpace, cap);
3414 - maxChromaCache.set(key, computed);
3415 - return computed;
3416 - }
3417 - function maxInGamutChromaAtLH(l, h, gamutSpace, cap) {
3966 + var MAX_CHROMA = 0.45;
3967 + function getMaxChromaAtLH(l, h, gamutSpace) {
3418 3968 const probe = {
3419 3969 space: oklch_default,
3420 - coords: [l, cap, h],
3970 + coords: [clamp01(l), MAX_CHROMA, normalizeHue(h)],
3421 3971 alpha: 1
3422 3972 };
3423 - const clamped = toGamut(probe, { space: gamutSpace, method: "css" });
3973 + const clamped = toGamutCSS(probe, { space: gamutSpace });
3424 3974 return get(clamped, [oklch_default, "c"]);
3425 3975 }
3426 3976
3427 3977 // packages/theme/build-module/color-ramps/lib/find-color-with-constraints.mjs
@@ -3438,13 +3988,16 @@
3438 3988 reached: true,
3439 3989 achieved: 1
3440 3990 };
3441 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;
3442 3995 function getColorForL(l) {
3443 3996 let newL = l;
3444 - let newC = get(seed, [oklch_default, "c"]);
3445 - if (taperChromaOptions) {
3446 - const tapered = taperChroma(seed, newL, taperChromaOptions);
3997 + let newC = seedChroma;
3998 + if (taperChromaAtLightness) {
3999 + const tapered = taperChromaAtLightness(newL);
3447 4000 if ("l" in tapered && "c" in tapered) {
3448 4001 newL = tapered.l;
3449 4002 newC = tapered.c;
3450 4003 } else {
@@ -3451,10 +4004,11 @@
3451 4004 return tapered;
3452 4005 }
3453 4006 }
3454 4007 return clampToGamut({
3455 - spaceId: "oklch",
3456 - coords: [newL, newC, get(seed, [oklch_default, "h"])]
4008 + space: oklch_default,
4009 + coords: [newL, newC, seedHue],
4010 + alpha: seed.alpha
3457 4011 });
3458 4012 }
3459 4013 const mostContrastingL = direction === "lighter" ? 1 : 0;
3460 4014 const mostContrastingColor = direction === "lighter" ? WHITE : BLACK;
@@ -3517,9 +4071,9 @@
3517 4071 let maxDeficitStep;
3518 4072 const calculatedColors = /* @__PURE__ */ new Map();
3519 4073 calculatedColors.set("seed", seed);
3520 4074 for (const stepName of sortedSteps) {
3521 - let computeDirection = function(color, followDirection) {
4075 + let computeDirection2 = function(colors, followDirection) {
3522 4076 if (followDirection === "main") {
3523 4077 return mainDir;
3524 4078 }
3525 4079 if (followDirection === "opposite") {
@@ -3526,14 +4080,15 @@
3526 4080 return oppDir;
3527 4081 }
3528 4082 if (followDirection === "best") {
3529 4083 return computeBetterFgColorDirection(
3530 - color,
4084 + colors,
3531 4085 contrast.preferLighter
3532 4086 ).better;
3533 4087 }
3534 4088 return followDirection;
3535 4089 };
4090 + var computeDirection = computeDirection2;
3536 4091 const {
3537 4092 contrast,
3538 4093 lightness: stepLightnessConstraint,
3539 4094 taperChromaOptions,
@@ -3538,14 +4093,21 @@
3538 4093 lightness: stepLightnessConstraint,
3539 4094 taperChromaOptions,
3540 4095 sameAsIfPossible
3541 4096 } = config[stepName];
3542 - const referenceColor = calculatedColors.get(contrast.reference);
3543 - if (!referenceColor) {
3544 - throw new Error(
3545 - `Reference color for step ${stepName} not found: ${contrast.reference}`
3546 - );
3547 - }
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 + });
3548 4110 if (sameAsIfPossible) {
3549 4111 const candidateColor = calculatedColors.get(sameAsIfPossible);
3550 4112 if (!candidateColor) {
3551 4113 throw new Error(
@@ -3551,23 +4113,26 @@
3551 4113 throw new Error(
3552 4114 `Same-as color for step ${stepName} not found: ${sameAsIfPossible}`
3553 4115 );
3554 4116 }
3555 - const candidateContrast = getContrast(
3556 - referenceColor,
3557 - candidateColor
4117 + const adjustedTarget2 = adjustContrastTarget(contrast.target);
4118 + const candidateMeetsTarget = referenceColors.every(
4119 + (referenceColor2) => getContrast(referenceColor2, candidateColor) >= adjustedTarget2
3558 4120 );
3559 - const adjustedTarget2 = adjustContrastTarget(contrast.target);
3560 - if (candidateContrast >= adjustedTarget2) {
4121 + if (candidateMeetsTarget) {
3561 4122 calculatedColors.set(stepName, candidateColor);
3562 4123 rampResults[stepName] = getColorString(candidateColor);
3563 4124 continue;
3564 4125 }
3565 4126 }
3566 - const computedDir = computeDirection(
3567 - referenceColor,
4127 + const computedDir = computeDirection2(
4128 + referenceColors,
3568 4129 contrast.followDirection
3569 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 + );
3570 4135 const adjustedTarget = adjustContrastTarget(contrast.target);
3571 4136 let lightnessConstraint;
3572 4137 if (pinLightness?.stepName === stepName) {
3573 4138 lightnessConstraint = {
@@ -3614,11 +4179,12 @@
3614 4179 mainDirection,
3615 4180 pinLightness,
3616 4181 rescaleToFitContrastTargets = true
3617 4182 } = {}) {
4183 + const parsedSeed = parseSeedColor(seedArg);
3618 4184 let seed;
3619 4185 try {
3620 - seed = clampToGamut(seedArg);
4186 + seed = clampToGamut(parsedSeed);
3621 4187 } catch (error) {
3622 4188 throw new Error(
3623 4189 `Invalid seed color "${seedArg}": ${error instanceof Error ? error.message : "Unknown error"}`
3624 4190 );
@@ -3648,12 +4214,13 @@
3648 4214 oppDir,
3649 4215 pinLightness
3650 4216 });
3651 4217 let bestRamp = rampResults;
4218 + let bestWarnings = warnings;
3652 4219 if (maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets) {
3653 - let getSeedForL = function(l) {
4220 + let getSeedForL2 = function(l) {
3654 4221 return clampToGamut(set(clone(seed), [oklch_default, "l"], l));
3655 - }, getDeficitForSeed = function(s) {
4222 + }, getDeficitForSeed2 = function(s) {
3656 4223 const iterationResults = calculateRamp({
3657 4224 seed: s,
3658 4225 sortedSteps: iterSteps,
3659 4226 config,
@@ -3662,8 +4229,9 @@
3662 4229 pinLightness
3663 4230 });
3664 4231 return iterationResults.maxDeficitDirection === maxDeficitDirection ? iterationResults.maxDeficit : -maxDeficit;
3665 4232 };
4233 + var getSeedForL = getSeedForL2, getDeficitForSeed = getDeficitForSeed2;
3666 4234 const iterSteps = stepsForStep(maxDeficitStep, config);
3667 4235 const lowerSeedL = maxDeficitDirection === "lighter" ? 0 : 1;
3668 4236 const lowerDeficit = -maxDeficit;
3669 4237 const upperSeedL = get(seed, [oklch_default, "l"]);
@@ -3668,16 +4236,16 @@
3668 4236 const lowerDeficit = -maxDeficit;
3669 4237 const upperSeedL = get(seed, [oklch_default, "l"]);
3670 4238 const upperDeficit = maxDeficit;
3671 4239 const bestSeed = solveWithBisect(
3672 - getSeedForL,
3673 - getDeficitForSeed,
4240 + getSeedForL2,
4241 + getDeficitForSeed2,
3674 4242 lowerSeedL,
3675 4243 lowerDeficit,
3676 4244 upperSeedL,
3677 4245 upperDeficit
3678 4246 );
3679 - bestRamp = calculateRamp({
4247 + const finalResult = calculateRamp({
3680 4248 seed: bestSeed,
3681 4249 sortedSteps,
3682 4250 config,
3683 4251 mainDir,
@@ -3682,9 +4250,11 @@
3682 4250 config,
3683 4251 mainDir,
3684 4252 oppDir,
3685 4253 pinLightness
3686 - }).rampResults;
4254 + });
4255 + bestRamp = finalResult.rampResults;
4256 + bestWarnings = finalResult.warnings;
3687 4257 }
3688 4258 if (mainDir === "darker") {
3689 4259 const tmpSurface1 = bestRamp.surface1;
3690 4260 bestRamp.surface1 = bestRamp.surface3;
@@ -3691,9 +4261,9 @@
3691 4261 bestRamp.surface3 = tmpSurface1;
3692 4262 }
3693 4263 return {
3694 4264 ramp: bestRamp,
3695 - warnings,
4265 + warnings: bestWarnings,
3696 4266 direction: mainDir
3697 4267 };
3698 4268 }
3699 4269
@@ -3820,9 +4390,9 @@
3820 4390 stroke1: {
3821 4391 contrast: {
3822 4392 reference: "stroke3",
3823 4393 followDirection: "opposite",
3824 - target: 2.6
4394 + target: 2.9
3825 4395 },
3826 4396 taperChromaOptions: STROKE_TAPER_CHROMA
3827 4397 },
3828 4398 stroke2: {
@@ -3882,11 +4452,12 @@
3882 4452 // fgFill
3883 4453 fgFill: {
3884 4454 contrast: {
3885 4455 reference: "bgFill1",
4456 + additionalReferences: ["bgFill2"],
3886 4457 followDirection: "best",
3887 - target: 4.5,
3888 - preferLighter: true
4458 + // Preserve the 4.5:1 WCAG floor after 8-bit sRGB serialization.
4459 + target: 4.55
3889 4460 },
3890 4461 lightness: lightnessConstraintForegroundHighContrast,
3891 4462 taperChromaOptions: FG_TAPER_CHROMA
3892 4463 },
@@ -4011,8 +4582,160 @@
4011 4582 const bgRampInfo = bgRamp ? getBgRampInfo(bgRamp) : void 0;
4012 4583 return buildRamp(seed, ACCENT_RAMP_CONFIG, bgRampInfo);
4013 4584 }
4014 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 +
4015 4738 // packages/theme/build-module/use-theme-provider-styles.mjs
4016 4739 var getCachedBgRamp = memize(buildBgRamp, { maxSize: 10 });
4017 4740 var getCachedAccentRamp = memize(buildAccentRamp, { maxSize: 10 });
4018 4741 var legacyWpComponentsOverridesCSS = [
@@ -4026,25 +4749,25 @@
4026 4749 "var(--wp-admin-theme-color-darker-20)"
4027 4750 ],
4028 4751 [
4029 4752 "--wp-components-color-accent-inverted",
4030 - "var(--wpds-color-fg-interactive-brand-strong, #fff)"
4753 + "var(--wpds-color-foreground-interactive-brand-strong, #fff)"
4031 4754 ],
4032 4755 [
4033 4756 "--wp-components-color-background",
4034 - "var(--wpds-color-bg-surface-neutral-strong, #fff)"
4757 + "var(--wpds-color-background-surface-neutral-strong, #fff)"
4035 4758 ],
4036 4759 [
4037 4760 "--wp-components-color-foreground",
4038 - "var(--wpds-color-fg-content-neutral, #1e1e1e)"
4761 + "var(--wpds-color-foreground-content-neutral, #1e1e1e)"
4039 4762 ],
4040 4763 [
4041 4764 "--wp-components-color-foreground-inverted",
4042 - "var(--wpds-color-bg-surface-neutral, #fcfcfc)"
4765 + "var(--wpds-color-background-surface-neutral, #fcfcfc)"
4043 4766 ],
4044 4767 [
4045 4768 "--wp-components-color-gray-100",
4046 - "var(--wpds-color-bg-surface-neutral, #fcfcfc)"
4769 + "var(--wpds-color-background-surface-neutral, #fcfcfc)"
4047 4770 ],
4048 4771 [
4049 4772 "--wp-components-color-gray-200",
4050 4773 "var(--wpds-color-stroke-surface-neutral, #dbdbdb)"
@@ -4062,13 +4785,13 @@
4062 4785 "var(--wpds-color-stroke-interactive-neutral, #8d8d8d)"
4063 4786 ],
4064 4787 [
4065 4788 "--wp-components-color-gray-700",
4066 - "var(--wpds-color-fg-content-neutral-weak, #707070)"
4789 + "var(--wpds-color-foreground-content-neutral-weak, #707070)"
4067 4790 ],
4068 4791 [
4069 4792 "--wp-components-color-gray-800",
4070 - "var(--wpds-color-fg-content-neutral, #1e1e1e)"
4793 + "var(--wpds-color-foreground-content-neutral, #1e1e1e)"
4071 4794 ]
4072 4795 ];
4073 4796 function customRgbFormat(color) {
4074 4797 const rgb = to(color, srgb_default);
@@ -4074,8 +4797,9 @@
4074 4797 const rgb = to(color, srgb_default);
4075 4798 return rgb.coords.map((n2) => Math.round((n2 ?? 0) * 255)).join(", ");
4076 4799 }
4077 4800 function legacyWpAdminThemeOverridesCSS(accent) {
4801 + ColorSpace.register(srgb_default);
4078 4802 const parsedAccent = to(accent, hsl_default);
4079 4803 const parsedL = parsedAccent.coords[2] ?? 0;
4080 4804 const darker10 = set(
4081 4805 clone(parsedAccent),
@@ -4107,9 +4831,10 @@
4107 4831 function colorTokensCSS(computedColorRamps) {
4108 4832 const entries = [];
4109 4833 for (const [rampName, { ramp }] of computedColorRamps) {
4110 4834 for (const [tokenName, tokenValue] of Object.entries(ramp)) {
4111 - const key = `${rampName}-${tokenName}`;
4835 + const primitiveRampName = rampName === "background" ? "bg" : rampName;
4836 + const key = `${primitiveRampName}-${tokenName}`;
4112 4837 const aliasedBy = color_tokens_default[key] ?? [];
4113 4838 for (const aliasedId of aliasedBy) {
4114 4839 entries.push([`--wpds-color-${aliasedId}`, tokenValue]);
4115 4840 }
@@ -4118,14 +4843,14 @@
4118 4843 return entries;
4119 4844 }
4120 4845 function generateStyles({
4121 4846 primary,
4122 - computedColorRamps
4847 + colorEntries
4123 4848 }) {
4124 4849 return Object.fromEntries(
4125 4850 [
4126 4851 // Semantic color tokens
4127 - colorTokensCSS(computedColorRamps),
4852 + colorEntries,
4128 4853 // Legacy overrides
4129 4854 legacyWpAdminThemeOverridesCSS(primary),
4130 4855 legacyWpComponentsOverridesCSS
4131 4856 ].flat()
@@ -4130,61 +4855,79 @@
4130 4855 legacyWpComponentsOverridesCSS
4131 4856 ].flat()
4132 4857 );
4133 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 + }
4134 4886 function useThemeProviderStyles({
4135 4887 color = {},
4136 - cursor
4888 + cursor,
4889 + cornerRadius
4137 4890 } = {}) {
4138 4891 const { resolvedSettings: inheritedSettings } = (0, import_element2.useContext)(ThemeContext);
4139 - const primary = color.primary ?? inheritedSettings.color?.primary ?? DEFAULT_SEED_COLORS.primary;
4140 - const bg = color.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;
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;
4141 4895 const cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;
4896 + const cornerRadiusPreset = cornerRadius ?? inheritedSettings.cornerRadius ?? "subtle";
4142 4897 const resolvedSettings = (0, import_element2.useMemo)(
4143 4898 () => ({
4144 4899 color: {
4145 4900 primary,
4146 - bg
4901 + background
4147 4902 },
4148 - cursor: cursorControl ? { control: cursorControl } : void 0
4903 + cursor: cursorControl ? { control: cursorControl } : void 0,
4904 + cornerRadius: cornerRadiusPreset
4149 4905 }),
4150 - [primary, bg, cursorControl]
4906 + [primary, background, cursorControl, cornerRadiusPreset]
4151 4907 );
4152 - const colorStyles = (0, import_element2.useMemo)(() => {
4153 - const seeds = {
4154 - ...DEFAULT_SEED_COLORS,
4155 - bg,
4156 - primary
4157 - };
4158 - const computedColorRamps = /* @__PURE__ */ new Map();
4159 - const bgRamp = getCachedBgRamp(seeds.bg);
4160 - Object.entries(seeds).forEach(([rampName, seed]) => {
4161 - if (rampName === "bg") {
4162 - computedColorRamps.set(rampName, bgRamp);
4163 - } else {
4164 - computedColorRamps.set(
4165 - rampName,
4166 - getCachedAccentRamp(seed, bgRamp)
4167 - );
4168 - }
4169 - });
4170 - return generateStyles({
4171 - primary: seeds.primary,
4172 - computedColorRamps
4173 - });
4174 - }, [primary, bg]);
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);
4916 + }, [primary, background]);
4175 4917 const themeProviderStyles = (0, import_element2.useMemo)(
4176 4918 () => ({
4177 - ...colorStyles,
4919 + ...generatedColors.styles,
4178 4920 ...cursorControl && {
4179 4921 "--wpds-cursor-control": cursorControl
4180 4922 }
4181 4923 }),
4182 - [colorStyles, cursorControl]
4924 + [generatedColors.styles, cursorControl]
4183 4925 );
4184 4926 return {
4185 4927 resolvedSettings,
4186 - themeProviderStyles
4928 + themeProviderStyles,
4929 + colorWarnings: generatedColors.warnings
4187 4930 };
4188 4931 }
4189 4932
4190 4933 // packages/theme/build-module/theme-provider.mjs
@@ -4269,41 +5012,27 @@
4269 5012 injectStyle(targetDocument, hash, css);
4270 5013 }
4271 5014 }
4272 5015 if (typeof process === "undefined" || true) {
4273 - registerStyle("f4e6e06c6a", ".dba930ea7a9438fd__root{display:contents}");
5016 + registerStyle("8d074a190c", "._0ebd6d9bf8b95794__wrapper{display:contents}");
4274 5017 }
4275 - var style_default = { "root": "dba930ea7a9438fd__root" };
4276 - function cssObjectToText(values) {
4277 - return Object.entries(values).map(([key, value]) => `${key}: ${value};`).join("");
4278 - }
4279 - function generateCSSSelector({
4280 - instanceId,
4281 - isRoot
4282 - }) {
4283 - const rootSel = `[data-wpds-root-provider="true"]`;
4284 - const instanceIdSel = `[data-wpds-theme-provider-id="${instanceId}"]`;
4285 - const selectors = [];
4286 - if (isRoot) {
4287 - selectors.push(
4288 - `:root:has(.${style_default.root}${rootSel}${instanceIdSel})`
4289 - );
4290 - }
4291 - selectors.push(`.${style_default.root}.${style_default.root}${instanceIdSel}`);
4292 - return selectors.join(",");
4293 - }
5018 + var style_default = { "wrapper": "_0ebd6d9bf8b95794__wrapper" };
5019 + var rootProviderCountByDocument = /* @__PURE__ */ new WeakMap();
4294 5020 var ThemeProvider = ({
4295 5021 children,
4296 5022 color = {},
4297 5023 cursor,
5024 + cornerRadius,
4298 5025 isRoot = false,
4299 - density
5026 + onColorWarnings
4300 5027 }) => {
4301 - const instanceId = (0, import_element3.useId)();
4302 - const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles({
5028 + const { themeProviderStyles, resolvedSettings, colorWarnings } = useThemeProviderStyles({
4303 5029 color,
4304 - cursor
5030 + cursor,
5031 + cornerRadius
4305 5032 });
5033 + const cornerRadiusPreset = resolvedSettings.cornerRadius ?? "subtle";
5034 + const onColorWarningsEvent = (0, import_compose.useEvent)(onColorWarnings);
4306 5035 const contextValue = (0, import_element3.useMemo)(
4307 5036 () => ({
4308 5037 resolvedSettings
4309 5038 }),
@@ -4308,31 +5037,125 @@
4308 5037 resolvedSettings
4309 5038 }),
4310 5039 [resolvedSettings]
4311 5040 );
4312 - return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
4313 - themeProviderStyles ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `${generateCSSSelector({
4314 - instanceId,
4315 - isRoot
4316 - })} {${cssObjectToText(themeProviderStyles)}}` }) : null,
4317 - /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
4318 - "div",
4319 - {
4320 - "data-wpds-theme-provider-id": instanceId,
4321 - "data-wpds-root-provider": isRoot,
4322 - "data-wpds-density": density,
4323 - className: style_default.root,
4324 - children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children })
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]);
5047 + (0, import_compose.useIsomorphicLayoutEffect)(() => {
5048 + if (!isRoot) {
5049 + return;
5050 + }
5051 + const doc = wrapperRef.current?.ownerDocument;
5052 + if (!doc) {
5053 + return;
5054 + }
5055 + const root = doc.documentElement;
5056 + if (true) {
5057 + const active = rootProviderCountByDocument.get(doc) ?? 0;
5058 + if (active > 0) {
5059 + console.warn(
5060 + "ThemeProvider: More than one root provider (`isRoot`) is mounted on the same document. Their forwarded document-level styles conflict, and unmounting one can reset the others. Render a single root provider per document."
5061 + );
4325 5062 }
4326 - )
4327 - ] });
5063 + rootProviderCountByDocument.set(doc, active + 1);
5064 + }
5065 + const previous = /* @__PURE__ */ new Map();
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);
5075 + for (const [rawKey, rawValue] of Object.entries(
5076 + themeProviderStyles
5077 + )) {
5078 + if (!rawKey.startsWith("--") || rawValue === null || rawValue === void 0) {
5079 + continue;
5080 + }
5081 + previous.set(rawKey, root.style.getPropertyValue(rawKey));
5082 + root.style.setProperty(rawKey, String(rawValue));
5083 + applied.push(rawKey);
5084 + }
5085 + return () => {
5086 + if (true) {
5087 + const active = rootProviderCountByDocument.get(doc) ?? 1;
5088 + if (active <= 1) {
5089 + rootProviderCountByDocument.delete(doc);
5090 + } else {
5091 + rootProviderCountByDocument.set(doc, active - 1);
5092 + }
5093 + }
5094 + for (const key of applied) {
5095 + const prev = previous.get(key);
5096 + if (prev) {
5097 + root.style.setProperty(key, prev);
5098 + } else {
5099 + root.style.removeProperty(key);
5100 + }
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 + }
5118 + };
5119 + }, [cornerRadiusPreset, isRoot, themeProviderStyles]);
5120 + return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
5121 + "div",
5122 + {
5123 + ref: wrapperRef,
5124 + "data-wpds-root-provider": isRoot || void 0,
5125 + "data-wpds-corner-radius": cornerRadiusPreset,
5126 + className: style_default.wrapper,
5127 + style: themeProviderStyles,
5128 + children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children })
5129 + }
5130 + );
4328 5131 };
4329 5132
4330 5133 // packages/theme/build-module/private-apis.mjs
5134 + function warnPrivateApi(apiName, options = {}) {
5135 + (0, import_deprecated.default)(`\`privateApis.${apiName}\` from \`@wordpress/theme\``, {
5136 + since: "7.1",
5137 + version: "7.3",
5138 + ...options
5139 + });
5140 + }
4331 5141 var privateApis = {};
4332 5142 lock(privateApis, {
4333 - ThemeProvider,
4334 - useThemeProviderStyles
5143 + get ThemeProvider() {
5144 + warnPrivateApi("ThemeProvider", {
5145 + alternative: "`ThemeProvider` from `@wordpress/theme`"
5146 + });
5147 + return ThemeProvider;
5148 + },
5149 + get useThemeProviderStyles() {
5150 + warnPrivateApi("useThemeProviderStyles", {
5151 + alternative: "`ThemeProvider` from `@wordpress/theme` for supported theming use cases",
5152 + hint: "`useThemeProviderStyles` has no public replacement."
5153 + });
5154 + return useThemeProviderStyles;
5155 + }
4335 5156 });
4336 5157 return __toCommonJS(index_exports);
5158 +})();
5159 +(window.wp ||= {}).theme = wp.theme;
4337 5160 })();
4338 5161 //# sourceMappingURL=index.js.map