PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/scripts/theme/index.js +1360 -537 23.2.1 → trunk View file →
@@ -1,4 +1,6 @@
1 +(function() {
2 +"use strict";
1 3 var wp;
2 4 (wp ||= {}).theme = (() => {
3 5 var __create = Object.create;
4 6 var __defProp = Object.defineProperty;
@@ -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